index.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455
  1. <template>
  2. <el-date-picker
  3. :key="config.customize.type"
  4. v-model="config.customize.value"
  5. :picker-options="config.customize.pickerOptions"
  6. :type="config.customize.type"
  7. clearable
  8. :class="['basic-component-date-picker', `date-picker-${config.code}`]"
  9. :popper-class="'basic-component-date-picker date-picker-popper-' + config.code"
  10. :value-format="config.customize.valueFormat"
  11. size="large"
  12. @focus="focusEvent"
  13. @change="changeValue"
  14. @mouseenter.native="mouseenter"
  15. />
  16. </template>
  17. <script>
  18. import cloneDeep from 'lodash/cloneDeep'
  19. import commonMixins from 'data-room-ui/js/mixins/commonMixins'
  20. import linkageMixins from 'data-room-ui/js/mixins/linkageMixins'
  21. import { settingToTheme } from 'data-room-ui/js/utils/themeFormatting'
  22. import { mapState } from 'vuex'
  23. window.dataSetFields = []
  24. export default {
  25. name: 'BasicComponentSelect',
  26. components: {},
  27. mixins: [commonMixins, linkageMixins],
  28. props: {
  29. // 组件配置
  30. config: {
  31. type: Object,
  32. default: () => ({})
  33. }
  34. },
  35. data () {
  36. return {
  37. innerConfig: {}
  38. }
  39. },
  40. computed: {
  41. ...mapState({
  42. chartList: state => state.bigScreen.pageInfo.chartList
  43. }),
  44. isPreview () {
  45. return (this.$route.path === window?.BS_CONFIG?.routers?.previewUrl) || (this.$route.path === '/big-screen/preview')
  46. }
  47. },
  48. watch: {
  49. config: {
  50. handler: function (val) {
  51. if (val && val.customize && val.customize.formatType === 'custom') {
  52. // 解决时间格式化类型为自定义时,时间格式化类型和时间格式化值数据类型不匹配的问题
  53. this.$nextTick(() => {
  54. this.config.customize.value = toString(this.config.customize.value)
  55. })
  56. }
  57. },
  58. deep: true
  59. }
  60. },
  61. created () { },
  62. mounted () {
  63. if (!this.isPreview) {
  64. document.querySelector(`.date-picker-${this.config.code}`).style.pointerEvents = 'none'
  65. }
  66. this.changeStyle(this.config)
  67. // 将config.customize.value设置值为当前时间 :
  68. if (this.config.customize.value === '') {
  69. this.config.customize.value = new Date()
  70. }
  71. },
  72. beforeDestroy () {
  73. },
  74. methods: {
  75. dataFormatting (config, data) {
  76. config.option.data = []
  77. return config
  78. },
  79. changeStyle (config) {
  80. config = { ...this.config, ...config }
  81. // 样式改变时更新主题配置
  82. config.theme = settingToTheme(cloneDeep(config), this.customTheme)
  83. this.changeChartConfig(config)
  84. this.innerConfig = config
  85. // 时间选择器元素
  86. const { bgColor, fontColor, fontSize } = config.customize
  87. this.$nextTick(() => {
  88. const timePickerEl = document.querySelector(`.date-picker-${config.code}`)
  89. timePickerEl.style.backgroundColor = bgColor
  90. // 时间选择器输入框元素
  91. const timePickerInput = timePickerEl.querySelector('.el-input__inner')
  92. if (timePickerInput) {
  93. // 时间选择器输入框背景颜色
  94. timePickerInput.style.backgroundColor = bgColor
  95. // 时间选择器输入框字体颜色
  96. timePickerInput.style.color = fontColor
  97. // 时间选择器输入框字体大小
  98. timePickerInput.style.fontSize = fontSize + 'px'
  99. }
  100. // 时间范围选择器输入框元素
  101. const timePickerRangeInput = timePickerEl.querySelectorAll('.el-range-input')
  102. if (timePickerRangeInput.length > 0) {
  103. // 连接符
  104. const timePickerRangeSeparator = timePickerEl.querySelector('.el-range-separator')
  105. if (timePickerRangeSeparator) {
  106. // 宽度和字体大小保持一致
  107. timePickerRangeSeparator.style.width = fontSize + 'px'
  108. timePickerRangeSeparator.style.color = fontColor
  109. timePickerRangeSeparator.style.fontSize = fontSize + 'px'
  110. }
  111. timePickerRangeInput.forEach((el) => {
  112. // 时间范围选择器输入框背景颜色
  113. el.style.backgroundColor = bgColor
  114. // 时间范围选择器输入框字体颜色
  115. el.style.color = fontColor
  116. // 时间范围选择器输入框字体大小
  117. el.style.fontSize = fontSize + 'px'
  118. })
  119. }
  120. // 时间选择器图标
  121. const timePickerIcon = timePickerEl.querySelector('.el-input__icon')
  122. if (timePickerIcon) {
  123. timePickerIcon.style.width = fontSize + 'px'
  124. timePickerIcon.style.fontSize = fontSize + 'px'
  125. }
  126. })
  127. },
  128. // 组件联动
  129. changeValue (val) {
  130. this.linkage({ [this.config.code]: val })
  131. },
  132. focusEvent () {
  133. this.$nextTick(() => {
  134. const { code } = this.innerConfig
  135. const { bgColor, fontColor, hoverFontColor, hoverBgColor, selectedFontColor, rangeBgColor, inputBgColor } = this.innerConfig.customize.dropDownBox
  136. const timePickerPopper = document.querySelector(`.date-picker-popper-${code}`)
  137. if (timePickerPopper) {
  138. // 去除边框
  139. timePickerPopper.style.border = 'none'
  140. // 确保下拉项的箭头颜色与下拉框的背景颜色保持一致
  141. timePickerPopper.style.color = bgColor
  142. }
  143. // 下拉项元素
  144. const pickerDropdownPanleContent = document.querySelector(`.date-picker-popper-${code}`)
  145. if (pickerDropdownPanleContent) {
  146. // 文字颜色
  147. pickerDropdownPanleContent.style.color = fontColor
  148. // 背景颜色
  149. pickerDropdownPanleContent.style.backgroundColor = bgColor
  150. // 下拉项添加var变量
  151. const dropdown = pickerDropdownPanleContent.style
  152. dropdown.setProperty('--fontColor', fontColor)
  153. dropdown.setProperty('--hoverFontColor', hoverFontColor)
  154. dropdown.setProperty('--bgColor', bgColor)
  155. dropdown.setProperty('--inputBgColor', inputBgColor)
  156. dropdown.setProperty('--selectedFontColor', selectedFontColor)
  157. dropdown.setProperty('--hoverBgColor', hoverBgColor)
  158. dropdown.setProperty('--rangeBgColor', rangeBgColor)
  159. // 选中项字体颜色
  160. const selectedEl = pickerDropdownPanleContent.querySelector('.selected')
  161. if (selectedEl) {
  162. selectedEl.style.color = selectedFontColor
  163. }
  164. // 选择过的,需要将选中颜色重置
  165. const pickerItemEl = document.querySelectorAll(`.date-picker-popper-${code} .el-time-spinner__item`)
  166. pickerItemEl.forEach((el) => {
  167. el.style.color = fontColor
  168. })
  169. }
  170. })
  171. },
  172. mouseenter () {
  173. if (this.config.customize.value) {
  174. setTimeout(() => {
  175. // 清空图标
  176. const timePickerCloseIcon = document.querySelector(`.date-picker-${this.innerConfig.code} .el-icon-circle-close`)
  177. if (timePickerCloseIcon) {
  178. timePickerCloseIcon.style.fontSize = this.innerConfig.customize.fontSize + 'px'
  179. }
  180. }, 25)
  181. }
  182. }
  183. }
  184. }
  185. </script>
  186. <style lang="scss">
  187. .basic-component-date-picker {
  188. color: '';
  189. // 清空图标
  190. .el-icon-circle-close {
  191. display: flex ;
  192. align-items: center ;
  193. }
  194. // 时间选择器
  195. .el-icon-time {
  196. display: flex ;
  197. align-items: center ;
  198. }
  199. .el-time-panel {
  200. border: none ;
  201. background-color: var(--bgColor) ;
  202. }
  203. // 选择日期 时间区域
  204. .el-date-picker__time-header {
  205. border-bottom: var(--bgColor) ;
  206. .el-input__inner {
  207. border: none ;
  208. // 添加一点阴影
  209. box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1) ;
  210. color: var(--fontColor) ;
  211. background-color: var(--inputBgColor) ;
  212. }
  213. }
  214. // 头部,修改文字颜色和图标颜色
  215. .el-date-picker__header {
  216. color: var(--fontColor) ;
  217. .el-date-picker__header-label {
  218. color: var(--fontColor) ;
  219. }
  220. // 左右箭头图标颜色
  221. .el-picker-panel__icon-btn {
  222. color: var(--fontColor) ;
  223. }
  224. }
  225. // datetimerange
  226. .el-date-range-picker__time-header {
  227. border-color: var(--fontColor);
  228. // 中间箭头图标颜色
  229. .el-icon-arrow-right {
  230. color: var(--fontColor) ;
  231. }
  232. // 时间选择器输入框
  233. .el-input__inner{
  234. border: none;
  235. color: var(--fontColor);
  236. // 添加一点阴影
  237. background-color: var(--inputBgColor) ;
  238. box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.1) ;
  239. }
  240. }
  241. // datetimerange
  242. .el-picker-panel__content{
  243. .el-icon-d-arrow-left{
  244. color: var(--fontColor) ;
  245. &:after{
  246. color: var(--fontColor) ;
  247. }
  248. }
  249. .el-icon-arrow-left{
  250. color: var(--fontColor) ;
  251. &:after{
  252. color: var(--fontColor) ;
  253. }
  254. }
  255. .el-icon-d-arrow-right{
  256. color: var(--fontColor) ;
  257. &:after{
  258. color: var(--fontColor) ;
  259. }
  260. }
  261. .el-icon-arrow-right{
  262. color: var(--fontColor) ;
  263. &:after{
  264. color: var(--fontColor) ;
  265. }
  266. }
  267. }
  268. .el-date-range-picker__content.is-left{
  269. border-color: var(--fontColor) ;
  270. }
  271. .el-date-table{
  272. th{
  273. border-color: var(--fontColor) ;
  274. }
  275. td{
  276. div{
  277. color: var(--fontColor) ;
  278. &:hover{
  279. color: var(--hoverFontColor) ;
  280. }
  281. }
  282. }
  283. }
  284. // 范围选择器背景颜色
  285. .in-range {
  286. div {
  287. // 下拉范围选中背景颜色
  288. background-color: var(--rangeBgColor) !important;
  289. }
  290. }
  291. .today {
  292. span {
  293. color: var(--selectedFontColor) !important;
  294. }
  295. }
  296. .el-time-panel__content::before {
  297. content: "";
  298. top: 50%;
  299. position: absolute;
  300. margin-top: -15px;
  301. height: 32px;
  302. z-index: 1;
  303. left: 0;
  304. right: 0;
  305. box-sizing: border-box;
  306. padding-top: 6px;
  307. text-align: left;
  308. border-top: 1px solid var(--fontColor);
  309. border-bottom: 1px solid var(--fontColor);
  310. }
  311. // 脚部
  312. .el-picker-panel__footer {
  313. border-color: var(--fontColor);
  314. background-color: var(--bgColor) ;
  315. // 清空按钮
  316. .el-picker-panel__link-btn {
  317. span {
  318. color: var(--fontColor) ;
  319. }
  320. }
  321. // 确定按钮
  322. .el-button--default {
  323. border: none ;
  324. color: var(--fontColor) ;
  325. background-color: var(--bgColor) ;
  326. }
  327. .is-disabled {
  328. span {
  329. color: #999 ;
  330. }
  331. }
  332. }
  333. .el-time-spinner {
  334. margin-bottom: 0px ;
  335. .el-time-spinner__item {
  336. &:hover {
  337. color: var(--hoverFontColor) ;
  338. background-color: var(--hoverBgColor) ;
  339. }
  340. }
  341. .active {
  342. color: var(--selectedFontColor) ;
  343. &:hover {
  344. color: var(--selectedFontColor) ;
  345. background-color: transparent ;
  346. }
  347. }
  348. }
  349. .popper__arrow {
  350. bottom: -6px ;
  351. border-bottom-color: var(--bgColor) !important;
  352. &::after {
  353. bottom: 0px ;
  354. border-bottom-color: var(--bgColor) !important;
  355. }
  356. }
  357. .cancel {
  358. color: var(--fontColor) ;
  359. }
  360. .confirm {
  361. color: var(--selectedFontColor);
  362. }
  363. .el-time-panel__footer {
  364. border-top: 1px solid var(--fontColor) ;
  365. .cancel {
  366. span {
  367. color: var(--fontColor) ;
  368. }
  369. }
  370. // 确定按钮
  371. .confirm {
  372. border: none ;
  373. color: var(--fontColor) ;
  374. background-color: var(--bgColor) ;
  375. }
  376. }
  377. // 年选择器
  378. .el-year-table {
  379. a{
  380. color: var(--fontColor) ;
  381. &:hover{
  382. color: var(--hoverFontColor) ;
  383. }
  384. }
  385. }
  386. // 月选择器
  387. .el-month-table {
  388. a{
  389. color: var(--fontColor) ;
  390. &:hover{
  391. color: var(--hoverFontColor) ;
  392. }
  393. }
  394. }
  395. }
  396. </style>
  397. <style lang="scss" scoped>
  398. .basic-component-date-picker {
  399. width: 100%;
  400. height: 100%;
  401. // 范围时间选择器连接符
  402. ::v-deep .el-range-separator {
  403. display: flex !important;
  404. align-items: center !important;
  405. }
  406. .el-input--mini ::v-deep .el-input__inner {
  407. height: 100% !important;
  408. line-height: 100% !important;
  409. }
  410. .el-tag.el-tag--info {
  411. color: var(--bs-el-text) !important;
  412. }
  413. }
  414. ::v-deep .el-input__inner {
  415. height: 100% !important;
  416. line-height: 100% !important;
  417. }
  418. ::v-deep .el-range-input{
  419. width: 45% !important;
  420. }
  421. </style>