From e5e9b84b800f1623f85be45a3565689917898c78 Mon Sep 17 00:00:00 2001 From: 马宇豪 <978517621@qq.com> Date: 星期五, 10 三月 2023 18:12:12 +0800 Subject: [PATCH] Default Changelist --- src/views/riskWarningSys/warningBigScreen/components/accident.vue | 391 +++++++++++++++++++++++++++++++++++-------------------- 1 files changed, 251 insertions(+), 140 deletions(-) diff --git a/src/views/riskWarningSys/warningBigScreen/components/accident.vue b/src/views/riskWarningSys/warningBigScreen/components/accident.vue index 2f15dfe..30f8621 100644 --- a/src/views/riskWarningSys/warningBigScreen/components/accident.vue +++ b/src/views/riskWarningSys/warningBigScreen/components/accident.vue @@ -1,11 +1,16 @@ <template> <div class="charts-cont"> - <div :class="choose" > - <div :class="cur===1?'act':''" @click="changeTab(1)">月度</div> - <div :class="cur===2?'act':''" @click="changeTab(2)">年度</div> + <div :class="selector"> + <el-cascader + class="timeSe" + :teleported="false" + v-model="timeValue" + :options="optionList" + :props="riskProps" + @change="changeTime" + /> </div> - <div v-show="cur===1" class="month" :id="accidentMonth"></div> - <div v-show="cur===2" class="month" :id="accidentYear"></div> + <div class="month" :id="accidentMonth"></div> </div> </template> @@ -22,12 +27,16 @@ import * as echarts from "echarts"; import '/@/theme/bigScreen.css' import {useScreenTheme} from "/@/stores/screenTheme" - + import { riskWarningApi } from '/@/api/riskWarning'; + import {teamManageApi} from "/@/api/systemManage/basicDateManage/personShiftManage/teamManage"; interface stateType { - cur: number, curColor: string, - choose: string - } + accData: Array<any>; + timeValue: Array<any>, + optionList: Array<any>, + selector: string, + riskProps: object + } export default defineComponent({ name: 'accident', components: {}, @@ -41,22 +50,127 @@ const screenThemes = useScreenTheme() const { screenTheme } = storeToRefs(screenThemes); const accidentMonth = ref("eChartFix" + Date.now() + Math.random()) - const accidentYear = ref("eChartFix" + Date.now() + Math.random()) const state = reactive<stateType>({ - cur: 1, curColor: '#fff', - choose: 'choose-dark' + accData: [], + timeValue: [], + optionList: [], + riskProps: { + expandTrigger: 'hover' + }, + selector: 'select-dark' }) + const timeForm = { + hour12: false, + year: 'numeric', + month: 'numeric', + day: '2-digit', + hour: '2-digit', + minute: '2-digit', + second: '2-digit' + }; + const makeList = () =>{ + for(let i=0;i<=60;i++){ + const newObj = { + label: 1990 + i + '', + value: 1990 + i + '', + children: [ + { + 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 + }, + { + label: '十一月', + value: 11 + }, + { + label: '十二月', + value: 12 + } + ] + } + state.optionList.push(newObj) + } + } + const getTime = () =>{ + const curTime = new Date().toLocaleString('zh', timeForm).replace(/\//g, '-'); + const temp = curTime.split('-') + state.timeValue[0] = temp[0] + state.timeValue[1] = Number(temp[1]) + } + const getDataByYearId = async () => { + getTime() + const data = { + depId: screenTheme.value.depId || 1, + beginYear: state.timeValue[0], + beginMonth: state.timeValue[1], + endYear: state.timeValue[0], + endMonth: state.timeValue[1] + } + if(state.timeValue[1] == 0){ + data.beginMonth = 1 + data.endMonth = 12 + } + let res = await riskWarningApi().getRiskByTimeDep(data); + if (res.data.code === '200') { + state.accData = res.data.data[0].detail + const oneList = res.data.data[0].detail[0].count + const twoList = res.data.data[0].detail[1].count + const threeList = res.data.data[0].detail[2].count + const fourList = res.data.data[0].detail[3].count + const fiveList = res.data.data[0].detail[4].count + initAccidentByMonth(oneList,twoList,threeList,fourList,fiveList) + } else { + ElMessage({ + type: 'warning', + message: res.data.msg + }); + } + } - const changeTab =(i)=>{ - state.cur = i - nextTick(()=>{ - initAccidentByYear(); - }) - } type EChartsOption = echarts.EChartsOption // 隐患整改情况 - const initAccidentByMonth =()=>{ + const initAccidentByMonth =(one:number,two:number,three:number,four:number,five:number)=>{ let dom = document.getElementById(accidentMonth.value); let myChart = echarts.init(dom); @@ -78,7 +192,7 @@ }, series: [ { - name: '月度数据', + name: '事故等级数量', type: 'pie', radius: ['50%', '80%'], avoidLabelOverlap: false, @@ -106,11 +220,11 @@ } }, data: [ - { value: 1, name: '特别重大事故' }, - { value: 10, name: '重大事故' }, - { value: 20, name: '较大事故' }, - { value: 33, name: '一般事故' }, - { value: 50, name: '未遂事故' } + { value: one, name: '特别重大事故' }, + { value: two, name: '重大事故' }, + { value: three, name: '较大事故' }, + { value: four, name: '一般事故' }, + { value: five, name: '未遂事故' } ], center: ['50%','60%'] } @@ -123,74 +237,7 @@ myChart.resize(); }); } - // 隐患整改情况 - const initAccidentByYear =()=>{ - let dom = document.getElementById(accidentYear.value); - let myChart = echarts.init(dom); - let option: EChartsOption; - - option = { - tooltip: { - trigger: 'item' - }, - legend: { - top: '0', - left: 'center', - itemWidth: fontSize(10), - itemHeight: fontSize(8), - textStyle:{ - color: 'auto', - fontSize: fontSize(11) - } - }, - series: [ - { - name: '年度数据', - type: 'pie', - radius: ['50%', '80%'], - avoidLabelOverlap: false, - itemStyle: { - borderRadius: fontSize(2) - }, - label: { - show: false, - position: 'outer', - fontSize: fontSize(10), - textBorderWidth: 0, - width: fontSize(40), - overflow: 'break' - }, - // labelLine: { - // show: true, - // length: fontSize(10), - // length2: fontSize(10) - // }, - emphasis: { - label: { - show: true, - fontSize: fontSize(22), - fontWeight: 'bold' - } - }, - data: [ - { value: 10, name: '特别重大事故' }, - { value: 20, name: '重大事故' }, - { value: 100, name: '较大事故' }, - { value: 130, name: '一般事故' }, - { value: 150, name: '未遂事故' } - ], - center: ['50%','60%'] - } - ] - }; - - option && myChart.setOption(option); - - window.addEventListener("resize",function (){ - myChart.resize(); - }); - } function fontSize(val){ let nowClientWidth = document.documentElement.clientWidth; @@ -198,25 +245,33 @@ } const getTheme =()=>{ if(screenTheme.value.isDark){ - state.choose = 'choose-dark' + state.selector = 'select-dark' }else{ - state.choose = 'choose-light' + state.selector = 'select-light' } } watchEffect(() => { if(props.theme){ - state.choose = 'choose-dark' + state.selector = 'select-dark' }else{ - state.choose = 'choose-light' + state.selector = 'select-light' } + getDataByYearId() }) + const changeTime = (value)=>{ + state.timeValue[0] = value[0] + state.timeValue[1] = value[1] + getDataByYearId() + } // 页面载入时执行方法 onMounted(() => { - initAccidentByMonth(); - getTheme() + getTheme(); + getTime(); + makeList(); + getDataByYearId(); // initAccidentByYear(); }); @@ -226,9 +281,8 @@ return { accidentMonth, - accidentYear, Search, - changeTab, + changeTime, fontSize, ...toRefs(state) }; @@ -243,58 +297,115 @@ padding: 5%; position: relative; - .choose-dark{ + .select-dark{ position: absolute; - right: 4%; - bottom: 4%; - z-index: 999; - display: flex; - align-items: center; - font-size: 0.75rem; - justify-content: space-between; + z-index: 99999; + top: -20px; + right: 3rem; + width: 30%; + height: 1.5rem; + margin-right: 0.8rem; - div{ - padding: 2px 6px; - box-sizing: border-box; - color: rgba(17,254,238,.4); + ::v-deep(.el-cascader){ + width: 100% !important; + line-height: 100%; + } + ::v-deep(.el-popper){ + background-color: rgba(10,31,92,1); border: 1px solid rgba(17,254,238,.4); - border-radius: 2px; - cursor: pointer; - } - div:hover{ color: #11FEEE; - border: 1px solid #11FEEE; + z-index: 999999 !important; + .el-cascader-node__label{ + color: #11FEEE; + } + .el-icon{ + color: #11FEEE; + } + .el-cascader-node{ + &:hover{ + background: #0049af; + } + } } - .act{ + ::v-deep(.el-cascader-menu){ + min-width: 50px !important; + } + ::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; - border: 1px solid #11FEEE; + + input{ + font-size: 0.8rem; + color: #11FEEE; + } + .el-icon{ + color: #11FEEE; + } } } - .choose-light{ - position: absolute; - right: 4%; - bottom: 4%; - z-index: 999; - display: flex; - align-items: center; - font-size: 0.75rem; - justify-content: space-between; - div{ - padding: 2px 6px; - box-sizing: border-box; - color: #ccc; + .select-light{ + position: absolute; + z-index: 99999; + top: -20px; + right: 3rem; + width: 30%; + height: 20px; + margin-right: 0.8rem; + + ::v-deep(.el-cascader){ + width: 100% !important; + line-height: 100%; + } + ::v-deep(.el-popper){ + background-color: rgba(255,255,255,1); border: 1px solid #ccc; - border-radius: 2px; - cursor: pointer; + color: #fff; + z-index: 999999 !important; + .el-cascader-node__label{ + color: #000; + } + .el-icon{ + color: #000; + } + .el-cascader-node{ + &:hover{ + background: #ccc; + } + } } - div:hover{ - color: #333; - border: 1px solid #333; + ::v-deep(.el-cascader-menu){ + min-width: 80px !important; } - .act{ - color: #333; - border: 1px solid #333; + ::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; + } } } .month{ -- Gitblit v1.9.2