| | |
| | | <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> |
| | |
| | | </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"; |
| | |
| | | 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 =()=>{ |
| | |
| | | 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); |
| | |
| | | // 页面载入时执行方法 |
| | | onMounted(() => { |
| | | initSpi(); |
| | | getTheme(); |
| | | }); |
| | | |
| | | return { |
| | | spi, |
| | | Search, |
| | | spiProps, |
| | | fontSize, |
| | | ...toRefs(state) |
| | | }; |
| | |
| | | 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%; |
| | |
| | | }); |
| | | |
| | | onUnmounted(() =>{ |
| | | |
| | | }) |
| | | |
| | | return { |
| | |
| | | import {useScreenTheme} from "/@/stores/screenTheme" |
| | | |
| | | interface stateType { |
| | | config: object |
| | | } |
| | | export default defineComponent({ |
| | | name: 'message', |
| | |
| | | <template> |
| | | <div class="charts-cont"> |
| | | <el-select :class="selector" v-model="month" placeholder="Select" :teleported="false" size="default"> |
| | | <el-option |
| | | v-for="item in optionList" |
| | | :key="item.value" |
| | | :label="item.label" |
| | | :value="item.value" |
| | | /> |
| | | </el-select> |
| | | <div v-show="curValue===true" class="risk" :id="risk1"></div> |
| | | <div v-show="curValue===false" class="risk" :id="risk2"></div> |
| | | </div> |
| | | </template> |
| | | |
| | | <script lang="ts"> |
| | | import {toRefs, reactive, defineComponent, ref, defineAsyncComponent, onMounted, nextTick, onBeforeUnmount} from 'vue'; |
| | | import { toRefs, reactive, defineComponent, ref, defineAsyncComponent, onMounted, nextTick, onBeforeUnmount, watchEffect } from 'vue'; |
| | | import { storeToRefs } from 'pinia'; |
| | | import { initBackEndControlRoutes } from '/@/router/backEnd'; |
| | | import {useUserInfo} from "/@/stores/userInfo"; |
| | |
| | | import { workApplyApi } from '/@/api/specialWorkSystem/workApply'; |
| | | import * as echarts from 'echarts'; |
| | | import '/@/theme/bigScreen.css' |
| | | import {useScreenTheme} from "/@/stores/screenTheme"; |
| | | |
| | | |
| | | interface stateType { |
| | | curValue: boolean |
| | | curValue: boolean, |
| | | month: number, |
| | | optionList: Array<any>, |
| | | selector: string |
| | | } |
| | | export default defineComponent({ |
| | | name: 'risk', |
| | | components: {}, |
| | | props:{ |
| | | size: Number, |
| | | month: Number |
| | | theme: Boolean |
| | | }, |
| | | setup(props) { |
| | | const userInfo = useUserInfo() |
| | | const { userInfos } = storeToRefs(userInfo); |
| | | const screenThemes = useScreenTheme() |
| | | const { screenTheme } = storeToRefs(screenThemes); |
| | | const risk1 = ref("eChartRisk1" + Date.now() + Math.random()) |
| | | const risk2 = ref("eChartRisk2" + Date.now() + Math.random()) |
| | | const state = reactive<stateType>({ |
| | | curValue: true |
| | | curValue: true, |
| | | month: 0, |
| | | optionList: [ |
| | | { |
| | | label: '年度', |
| | | value: 0 |
| | | }, |
| | | { |
| | | label: '一月', |
| | | value: 1 |
| | | }, |
| | | { |
| | | label: '二月', |
| | | value: 2 |
| | | }, |
| | | { |
| | | label: '三月', |
| | | value: 3 |
| | | }, |
| | | { |
| | | label: '四月', |
| | | value: 4 |
| | | }, |
| | | { |
| | | label: '五月', |
| | | value: 5 |
| | | }, |
| | | { |
| | | label: '六月', |
| | | value: 6 |
| | | }, |
| | | { |
| | | label: '七月', |
| | | value: 7 |
| | | }, |
| | | { |
| | | label: '八月', |
| | | value: 8 |
| | | }, |
| | | { |
| | | label: '九月', |
| | | value: 9 |
| | | }, |
| | | { |
| | | label: '十月', |
| | | value: 10 |
| | | } |
| | | ], |
| | | selector: 'select-dark' |
| | | }) |
| | | |
| | | const swi = setInterval(()=>{ |
| | |
| | | echarts.init(document.getElementById(risk1.value)).dispose() |
| | | } |
| | | |
| | | const getTheme =()=>{ |
| | | if(screenTheme.value.isDark){ |
| | | state.selector = 'select-dark' |
| | | }else{ |
| | | state.selector = 'select-light' |
| | | } |
| | | } |
| | | |
| | | watchEffect(() => { |
| | | if(props.theme){ |
| | | state.selector = 'select-dark' |
| | | }else{ |
| | | state.selector = 'select-light' |
| | | } |
| | | }) |
| | | |
| | | function fontSize(val){ |
| | | let nowClientWidth = document.documentElement.clientWidth; |
| | | return val * (nowClientWidth/1920) * Number(props.size); |
| | |
| | | // 页面载入时执行方法 |
| | | onMounted(() => { |
| | | initRisk1(); |
| | | getTheme(); |
| | | }); |
| | | |
| | | onBeforeUnmount(() =>{ |
| | |
| | | height: 100%; |
| | | padding: 5% 5% 2%; |
| | | position: relative; |
| | | .select-dark{ |
| | | position: absolute; |
| | | z-index: 999; |
| | | top: -20px; |
| | | right: 1.5rem; |
| | | width: 30%; |
| | | height: 20px; |
| | | margin-right: 0.8rem; |
| | | |
| | | ::v-deep(.el-popper){ |
| | | background-color: rgba(10,31,92,1); |
| | | border: 1px solid rgba(17,254,238,.4); |
| | | color: #11FEEE; |
| | | .el-select-dropdown__item{ |
| | | color: #11FEEE; |
| | | } |
| | | .el-select-dropdown__item.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){ |
| | | box-shadow: none; |
| | | border: 1px solid rgba(17,254,238,.2); |
| | | background: rgba(10,31,92,.6) !important; |
| | | height: 1.5rem; |
| | | color: #11FEEE; |
| | | |
| | | input{ |
| | | font-size: 0.8rem; |
| | | color: #11FEEE; |
| | | } |
| | | .el-icon{ |
| | | color: #11FEEE; |
| | | } |
| | | } |
| | | } |
| | | |
| | | .select-light{ |
| | | position: absolute; |
| | | z-index: 999; |
| | | top: -20px; |
| | | right: 1.5rem; |
| | | width: 30%; |
| | | height: 20px; |
| | | margin-right: 0.8rem; |
| | | |
| | | ::v-deep(.el-popper){ |
| | | background-color: rgba(255,255,255,1); |
| | | border: 1px solid #ccc; |
| | | color: #fff; |
| | | .el-select-dropdown__item{ |
| | | color: #000; |
| | | } |
| | | .el-select-dropdown__item.hover{ |
| | | background: #ccc; |
| | | } |
| | | } |
| | | ::v-deep(.el-popper__arrow){ |
| | | &::before{ |
| | | background-color: rgba(255,255,255,.6) !important; |
| | | border: 1px solid #ccc; |
| | | } |
| | | } |
| | | ::v-deep(.el-input__wrapper){ |
| | | box-shadow: none; |
| | | border: 1px solid #ccc; |
| | | background: #fff !important; |
| | | height: 1.5rem; |
| | | color: #fff; |
| | | |
| | | input{ |
| | | font-size: 0.8rem; |
| | | color: #000; |
| | | } |
| | | .el-icon{ |
| | | color: #000; |
| | | } |
| | | } |
| | | } |
| | | |
| | | .risk{ |
| | | width: 100%; |
| | |
| | | </div> |
| | | <div class="chart-box"> |
| | | <span class="train-tip">距上次演练结束 5 天</span> |
| | | <training :size="1"></training> |
| | | <training class="train-chart" :size="1"></training> |
| | | </div> |
| | | </div> |
| | | <div class="left-bottom"> |
| | | <dv-border-box-13 :backgroundColor="boxBg" :color="boxColor" class="box-bg"></dv-border-box-13> |
| | | <div class="part-tit"> |
| | | <span>| 隐患等级数量分布</span> |
| | | <div> |
| | | <el-select class="selector" v-model="month" placeholder="Select" :teleported="false" size="default"> |
| | | <el-option |
| | | v-for="item in optionList" |
| | | :key="item.value" |
| | | :label="item.label" |
| | | :value="item.value" |
| | | /> |
| | | </el-select> |
| | | <!-- <img @click="jumpPage(3)" src="../../../assets/warningScreen/small-full.png">--> |
| | | <Switch style="width: 1.2rem;height: 1.2rem;cursor: pointer" @click="jumpPage(3)"/> |
| | | </div> |
| | | |
| | | </div> |
| | | <div class="chart-box"> |
| | | <risk :size="1" :month="month"></risk> |
| | | <risk :size="1" :theme="screenTheme.isDark"></risk> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | <div class="main-middle"> |
| | | <div class="mid-top"> |
| | | <dv-border-box-11 title="SPI数据分析" :backgroundColor="boxBg" :color="boxBigColor" class="box-bg"></dv-border-box-11> |
| | | <div class="part-tit" style="position: absolute;top: 12%;padding: 0 4%"> |
| | | <el-cascader |
| | | class="spiSe" |
| | | :teleported="false" |
| | | v-model="spiValue" |
| | | :options="spiOptions" |
| | | :props="props" |
| | | :show-all-levels="false" |
| | | @change="handleChange" |
| | | /> |
| | | <!-- <span>SPI数据分析</span>--> |
| | | <!-- <img @click="jumpPage(4)" src="../../../assets/warningScreen/small-full.png">--> |
| | | <div class="part-tit" style="position: absolute;top: 8%;padding: 0 4%"> |
| | | <div></div> |
| | | <Switch style="width: 1.2rem;height: 1.2rem;cursor: pointer" @click="jumpPage(4)"/> |
| | | </div> |
| | | <div class="chart-box"> |
| | | <spi :size="1"></spi> |
| | | <div class="chart-box" style="top: 60px;height: calc(100% - 70px)"> |
| | | <spi :size="1" :theme="screenTheme.isDark"></spi> |
| | | </div> |
| | | </div> |
| | | <div class="mid-bottom"> |
| | |
| | | boxBigColor: Array<string>; |
| | | isScreenfull: boolean; |
| | | currentTime: string; |
| | | month: number; |
| | | spiValue: number; |
| | | optionList: Array<any>; |
| | | spiOptions: Array<any> |
| | | } |
| | | export default defineComponent({ |
| | |
| | | boxBigColor: [], |
| | | isScreenfull: false, |
| | | currentTime: '', |
| | | month: 0, |
| | | spiValue: 0, |
| | | optionList: [ |
| | | { |
| | | label: '年度', |
| | | value: 0 |
| | | }, |
| | | { |
| | | label: '一月', |
| | | value: 1 |
| | | }, |
| | | { |
| | | label: '二月', |
| | | value: 2 |
| | | }, |
| | | { |
| | | label: '三月', |
| | | value: 3 |
| | | }, |
| | | { |
| | | label: '四月', |
| | | value: 4 |
| | | }, |
| | | { |
| | | label: '五月', |
| | | value: 5 |
| | | }, |
| | | { |
| | | label: '六月', |
| | | value: 6 |
| | | }, |
| | | { |
| | | label: '七月', |
| | | value: 7 |
| | | }, |
| | | { |
| | | label: '八月', |
| | | value: 8 |
| | | }, |
| | | { |
| | | label: '九月', |
| | | value: 9 |
| | | }, |
| | | { |
| | | label: '十月', |
| | | value: 10 |
| | | } |
| | | ], |
| | | spiOptions: [ |
| | | { |
| | | value: 0, |
| | |
| | | justify-content: space-between; |
| | | align-items: center; |
| | | z-index: 9999; |
| | | div{ |
| | | width: 40%; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: end; |
| | | } |
| | | |
| | | span{ |
| | | font-size: 1.25rem; |
| | | font-weight: bolder; |
| | | color: #11feee; |
| | | } |
| | | ::v-deep(.el-cascader){ |
| | | width: 25% !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; |
| | | } |
| | | } |
| | | .selector{ |
| | | width: calc(100% - 1.25rem); |
| | | margin-right: 0.8rem; |
| | | |
| | | ::v-deep(.el-popper){ |
| | | background-color: rgba(10,31,92,1); |
| | | border: 1px solid rgba(17,254,238,.4); |
| | | color: #11FEEE; |
| | | .el-select-dropdown__item{ |
| | | color: #11FEEE; |
| | | } |
| | | .el-select-dropdown__item.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){ |
| | | box-shadow: none; |
| | | border: 1px solid rgba(17,254,238,.2); |
| | | background: rgba(10,31,92,.6) !important; |
| | | height: 1.5rem; |
| | | color: #11FEEE; |
| | | |
| | | input{ |
| | | font-size: 0.8rem; |
| | | color: #11FEEE; |
| | | } |
| | | .el-icon{ |
| | | color: #11FEEE; |
| | | } |
| | | } |
| | | } |
| | | |
| | | img{ |
| | |
| | | } |
| | | } |
| | | .chart-box{ |
| | | position: absolute; |
| | | top: 40px; |
| | | bottom: 0; |
| | | left: 0; |
| | | right: 0; |
| | | width: 100%; |
| | | height: calc(100% - 20px); |
| | | margin-top: 20px; |
| | | height: calc(100% - 50px); |
| | | z-index: 99999; |
| | | .train-tip{ |
| | | display: block; |
| | | font-size: 0.8rem; |
| | | margin-top: 5%; |
| | | margin-left: 2%; |
| | | margin-top: 2%; |
| | | margin-left: 5%; |
| | | color: #fff; |
| | | } |
| | | accident{ |
| | | width: 100%; |
| | | height: 100%; |
| | | height: 1rem; |
| | | } |
| | | |
| | | training{ |
| | | .train-chart{ |
| | | width: 100%; |
| | | height: 100%; |
| | | height: calc(100% - 1rem); |
| | | } |
| | | } |
| | | } |
| | |
| | | justify-content: space-between; |
| | | align-items: center; |
| | | z-index: 9999; |
| | | div{ |
| | | width: 40%; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: end; |
| | | } |
| | | span{ |
| | | font-size: 1.25rem; |
| | | font-weight: bolder; |
| | | color: #000; |
| | | } |
| | | ::v-deep(.el-cascader){ |
| | | width: 25% !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; |
| | | } |
| | | } |
| | | .selector{ |
| | | width: calc(100% - 1.25rem); |
| | | margin-right: 0.8rem; |
| | | |
| | | ::v-deep(.el-popper){ |
| | | background-color: rgba(255,255,255,1); |
| | | border: 1px solid #ccc; |
| | | color: #fff; |
| | | .el-select-dropdown__item{ |
| | | color: #000; |
| | | } |
| | | .el-select-dropdown__item.hover{ |
| | | background: #ccc; |
| | | } |
| | | } |
| | | ::v-deep(.el-popper__arrow){ |
| | | &::before{ |
| | | background-color: rgba(255,255,255,.6) !important; |
| | | border: 1px solid #ccc; |
| | | } |
| | | } |
| | | ::v-deep(.el-input__wrapper){ |
| | | box-shadow: none; |
| | | border: 1px solid #ccc; |
| | | background: #fff !important; |
| | | height: 1.5rem; |
| | | color: #fff; |
| | | |
| | | input{ |
| | | font-size: 0.8rem; |
| | | color: #000; |
| | | } |
| | | .el-icon{ |
| | | color: #000; |
| | | } |
| | | } |
| | | } |
| | | |
| | | img{ |
| | |
| | | } |
| | | } |
| | | .chart-box{ |
| | | position: absolute; |
| | | top: 40px; |
| | | bottom: 0; |
| | | left: 0; |
| | | right: 0; |
| | | width: 100%; |
| | | height: calc(100% - 20px); |
| | | margin-top: 20px; |
| | | height: calc(100% - 50px); |
| | | z-index: 99999; |
| | | .train-tip{ |
| | | display: block; |
| | | font-size: 0.8rem; |
| | | margin-top: 5%; |
| | | margin-left: 2%; |
| | | margin-top: 2%; |
| | | margin-left: 5%; |
| | | color: #333; |
| | | } |
| | | accident{ |
| | | width: 100%; |
| | | height: 100%; |
| | | height: 1rem; |
| | | } |
| | | |
| | | training{ |
| | | .train-chart{ |
| | | width: 100%; |
| | | height: 100%; |
| | | height: calc(100% - 1rem); |
| | | } |
| | | } |
| | | } |
| | |
| | | </div> |
| | | |
| | | <div class="tit"> |
| | | <div class="title">{{curChart===1?'事故等级分布':curChart===2?'应急演练次数':curChart===3?'年度隐患等级数量分布':curChart===4?'SPI数据分析':curChart===5?'教育培训分析':curChart===6?'隐患等级':curChart===7?'人员专业度分布':curChart===8?'预警消息报告':curChart===9?'特殊作业实时监控':'风险应急物资储备'}}</div> |
| | | <div class="title">{{curChart===1?'事故等级分布':curChart===2?'应急演练次数':curChart===3?'隐患等级数量分布':curChart===4?'SPI数据分析':curChart===5?'教育培训分析':curChart===6?'隐患等级':curChart===7?'人员专业度分布':curChart===8?'预警消息报告':curChart===9?'特殊作业实时监控':'风险应急物资储备'}}</div> |
| | | </div> |
| | | <div class="chart-cont"> |
| | | <div class="chart"> |
| | | <div v-show="curChart===2" class="selector-2">距上次演练结束5天</div> |
| | | <el-select v-show="curChart===3" class="selector-3" v-model="month" placeholder="Select" size="default"> |
| | | <el-option |
| | | v-for="item in optionList" |
| | | :key="item.value" |
| | | :label="item.label" |
| | | :value="item.value" |
| | | /> |
| | | </el-select> |
| | | <accident v-if="curChart===1" :size="2.5"></accident> |
| | | <training v-else-if="curChart===2" :size="2.5"></training> |
| | | <risk v-else-if="curChart===3" :month="month" :size="2.5"></risk> |
| | |
| | | interface stateType { |
| | | isScreenfull: boolean; |
| | | curChart: number | null; |
| | | month: number; |
| | | optionList: Array<any>; |
| | | lineColor: Array<string>; |
| | | accidentDesc: Array<any>; |
| | | trainDesc: Object; |
| | |
| | | const state = reactive<stateType>({ |
| | | isScreenfull: false, |
| | | curChart: null, |
| | | month: 0, |
| | | lineColor: ['#11FEEE'], |
| | | optionList: [ |
| | | { |
| | | label: '年度', |
| | | value: 0 |
| | | }, |
| | | { |
| | | label: '一月', |
| | | value: 1 |
| | | }, |
| | | { |
| | | label: '二月', |
| | | value: 2 |
| | | }, |
| | | { |
| | | label: '三月', |
| | | value: 3 |
| | | }, |
| | | { |
| | | label: '四月', |
| | | value: 4 |
| | | }, |
| | | { |
| | | label: '五月', |
| | | value: 5 |
| | | }, |
| | | { |
| | | label: '六月', |
| | | value: 6 |
| | | }, |
| | | { |
| | | label: '七月', |
| | | value: 7 |
| | | }, |
| | | { |
| | | label: '八月', |
| | | value: 8 |
| | | }, |
| | | { |
| | | label: '九月', |
| | | value: 9 |
| | | }, |
| | | { |
| | | label: '十月', |
| | | value: 10 |
| | | } |
| | | ], |
| | | accidentDesc:[ |
| | | { |
| | | title: '特别重大事故', |
| | |
| | | font-size: 1.25rem; |
| | | color: #fff; |
| | | } |
| | | .selector-3{ |
| | | position: absolute; |
| | | top: 5%; |
| | | right: 10%; |
| | | width: 20%; |
| | | |
| | | ::v-deep(.el-input__wrapper){ |
| | | background: none !important; |
| | | box-shadow: none; |
| | | color: #11FEEE; |
| | | |
| | | input{ |
| | | color: #11FEEE; |
| | | } |
| | | .el-icon{ |
| | | color: #11FEEE; |
| | | } |
| | | } |
| | | } |
| | | .main-chart{ |
| | | width: 100%; |
| | | height: 100%; |
| | |
| | | width: 20%; |
| | | font-size: 1.25rem; |
| | | color: #fff; |
| | | } |
| | | .selector-3{ |
| | | position: absolute; |
| | | top: 5%; |
| | | right: 10%; |
| | | width: 20%; |
| | | |
| | | ::v-deep(.el-input__wrapper){ |
| | | background: none !important; |
| | | box-shadow: none; |
| | | color: #11FEEE; |
| | | |
| | | input{ |
| | | color: #11FEEE; |
| | | } |
| | | .el-icon{ |
| | | color: #11FEEE; |
| | | } |
| | | } |
| | | } |
| | | .main-chart{ |
| | | width: 100%; |
| | |
| | | </div> |
| | | <dv-decoration7 :color="lineColor" style="width:100%;height:6%;margin-bottom: 20px"> |
| | | <div class="msgTit"> |
| | | Decoration |
| | | {{title}} |
| | | </div> |
| | | </dv-decoration7> |
| | | <dv-border-box1 :color="lineColor" style="width: 100%;height: calc(100% - 20px)"> |
| | |
| | | |
| | | // 定义接口来定义对象的类型 |
| | | interface stateType { |
| | | |
| | | lineColor: Array<string>, |
| | | title: string | null |
| | | } |
| | | export default defineComponent({ |
| | | name: 'msgDetail', |
| | |
| | | const route = useRoute(); |
| | | const state = reactive<stateType>({ |
| | | lineColor: ['#11FEEE'], |
| | | title: '' |
| | | }); |
| | | |
| | | // 页面载入时执行方法 |
| | | onMounted(() => { |
| | | // if (route.query.row) { |
| | | // state.row = route.query.num |
| | | // } |
| | | if (route.query.row) { |
| | | state.title = route.query.row[1] |
| | | } |
| | | getTheme() |
| | | }); |
| | | |
| | |
| | | }, |
| | | }, |
| | | ] |
| | | |
| | | // 页面载入时执行方法 |
| | | onMounted(() => { |
| | | getListByPage() |
| | |
| | | }else{ |
| | | ElMessage({ |
| | | type: 'warning', |
| | | message: '暂无数据' |
| | | message: '该时段暂无数据' |
| | | }); |
| | | } |
| | | } else { |
| | |
| | | let dom = document.getElementById(chartName.value); |
| | | let myChart = echarts.init(dom); |
| | | |
| | | type EChartsOption = echarts.EChartsOption |
| | | let option: EChartsOption; |
| | | |
| | | option = { |