From 324eed59a668758755219d5cd4e68463a9cc427d Mon Sep 17 00:00:00 2001 From: Admin <978517621@qq.com> Date: 星期三, 14 九月 2022 15:22:36 +0800 Subject: [PATCH] Default Changelist --- src/views/riskWarningSys/warningBigScreen/components/SPI.vue | 190 ++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 187 insertions(+), 3 deletions(-) diff --git a/src/views/riskWarningSys/warningBigScreen/components/SPI.vue b/src/views/riskWarningSys/warningBigScreen/components/SPI.vue index 7568be8..cb42132 100644 --- a/src/views/riskWarningSys/warningBigScreen/components/SPI.vue +++ b/src/views/riskWarningSys/warningBigScreen/components/SPI.vue @@ -1,5 +1,17 @@ <template> <div class="charts-cont"> + <div :class="spiChart"> + <el-cascader + class="spiSe" + :teleported="false" + v-model="spiValue" + :options="spiOptions" + :props="spiProps" + :show-all-levels="false" + @change="handleChange" + /> + </div> + <div class="spi" :id="spi"> </div> @@ -7,7 +19,7 @@ </template> <script lang="ts"> - import {toRefs, reactive, defineComponent, ref, defineAsyncComponent, onMounted} from 'vue'; + import {toRefs, reactive, defineComponent, ref, defineAsyncComponent, onMounted, watchEffect} from 'vue'; import { storeToRefs } from 'pinia'; import { initBackEndControlRoutes } from '/@/router/backEnd'; import {useUserInfo} from "/@/stores/userInfo"; @@ -18,22 +30,76 @@ import { workApplyApi } from '/@/api/specialWorkSystem/workApply'; import * as echarts from 'echarts'; import '/@/theme/bigScreen.css' + import {useScreenTheme} from "/@/stores/screenTheme"; interface stateType { + spiValue: number; + spiOptions: Array<any>; + spiChart: string } export default defineComponent({ - name: 'accident', + name: 'SPI', components: {}, props:{ size: Number, + theme: Boolean }, setup(props) { const userInfo = useUserInfo() const { userInfos } = storeToRefs(userInfo); + const screenThemes = useScreenTheme() + const { screenTheme } = storeToRefs(screenThemes); const spi = ref("eChartSpi" + Date.now() + Math.random()) const state = reactive<stateType>({ - + spiValue: 0, + spiOptions: [ + { + value: 0, + label: '公司级别SPI' + }, + { + value: 1, + label: 'A事业部SPI', + children: [ + { + value: 11, + label: 'A车间SPI' + }, + { + value: 12, + label: 'B车间SPI' + }, + { + value: 13, + label: 'C车间SPI' + } + ] + }, + { + value: 2, + label: 'B事业部SPI', + children: [ + { + value: 21, + label: 'D车间SPI' + }, + { + value: 22, + label: 'E车间SPI' + }, + { + value: 23, + label: 'F车间SPI' + } + ] + } + ], + spiChart: 'spi-dark' }) + const spiProps = { + expandTrigger: 'hover', + checkStrictly: true + } type EChartsOption = echarts.EChartsOption // 隐患整改情况 const initSpi =()=>{ @@ -222,6 +288,23 @@ myChart.resize(); }); } + + const getTheme =()=>{ + if(screenTheme.value.isDark){ + state.spiChart = 'spi-dark' + }else{ + state.spiChart = 'spi-light' + } + } + + watchEffect(() => { + if(props.theme){ + state.spiChart = 'spi-dark' + }else{ + state.spiChart = 'spi-light' + } + }) + function fontSize(val){ let nowClientWidth = document.documentElement.clientWidth; return val * (nowClientWidth/1920) * Number(props.size); @@ -230,11 +313,13 @@ // 页面载入时执行方法 onMounted(() => { initSpi(); + getTheme(); }); return { spi, Search, + spiProps, fontSize, ...toRefs(state) }; @@ -249,6 +334,105 @@ padding: 2%; position: relative; + .spi-dark{ + position: absolute; + width: 25% !important; + top: 0; + left: 2rem; + z-index: 99999; + + ::v-deep(.el-cascader){ + width: 100% !important; + } + ::v-deep(.el-popper){ + background-color: rgba(10,31,92,1); + border: 1px solid rgba(17,254,238,.4); + color: #11FEEE; + .el-cascader-node__label{ + color: #11FEEE; + } + .el-icon{ + color: #11FEEE; + } + .el-cascader-node{ + &:hover{ + background: #0049af; + } + } + } + ::v-deep(.el-popper__arrow){ + &::before{ + background-color: rgba(10,31,92,.6) !important; + border: 1px solid rgba(17,254,238,.4); + } + } + ::v-deep(.el-input__wrapper){ + width: 20%; + box-shadow: none; + border: 1px solid rgba(17,254,238,.2); + background: rgba(10,31,92,.6) !important; + height: 2.5rem; + color: #11FEEE; + + input{ + font-size: 1.25rem; + color: #11FEEE; + } + .el-icon{ + color: #11FEEE; + } + } + } + + .spi-light{ + position: absolute; + width: 25% !important; + top: 0; + left: 2rem; + z-index: 99999; + + ::v-deep(.el-cascader){ + width: 100% !important; + } + ::v-deep(.el-popper){ + background-color: #fff; + border: 1px solid #ccc; + color: #000; + .el-cascader-node__label{ + color: #000; + } + .el-icon{ + color: #000; + } + .el-cascader-node{ + &:hover{ + background: #ccc; + } + } + } + ::v-deep(.el-popper__arrow){ + &::before{ + background-color: #fff !important; + border: 1px solid #ccc; + } + } + ::v-deep(.el-input__wrapper){ + width: 20%; + box-shadow: none; + border: 1px solid #ccc; + background: #fff !important; + height: 2.5rem; + color: #000; + + input{ + font-size: 1.25rem; + color: #000; + } + .el-icon{ + color: #000; + } + } + } .spi{ width: 100%; height: 100%; -- Gitblit v1.9.2