From 20b0ce2db27b64a60de60aee05dedd448099e330 Mon Sep 17 00:00:00 2001 From: 马宇豪 <978517621@qq.com> Date: 星期一, 08 七月 2024 10:12:16 +0800 Subject: [PATCH] xiugai --- src/views/riskWarningSys/warningBigScreen/components/risk.vue | 355 ++++++++-------------------------------------------------- 1 files changed, 52 insertions(+), 303 deletions(-) diff --git a/src/views/riskWarningSys/warningBigScreen/components/risk.vue b/src/views/riskWarningSys/warningBigScreen/components/risk.vue index 61b9ec3..53c9327 100644 --- a/src/views/riskWarningSys/warningBigScreen/components/risk.vue +++ b/src/views/riskWarningSys/warningBigScreen/components/risk.vue @@ -1,15 +1,15 @@ <template> <div class="charts-cont"> - <div :class="selector"> - <el-cascader - class="timeSe" - :teleported="false" - v-model="timeValue" - :options="optionList" - :props="riskProps" - @change="changeTime" - /> - </div> +<!-- <div :class="selector">--> +<!-- <el-cascader--> +<!-- class="timeSe"--> +<!-- :teleported="false"--> +<!-- v-model="timeValue"--> +<!-- :options="optionList"--> +<!-- :props="riskProps"--> +<!-- @change="changeTime"--> +<!-- />--> +<!-- </div>--> <div class="risk" :id="risk1"></div> <!-- <div v-show="curValue===false" class="risk" :id="risk2"></div>--> </div> @@ -55,7 +55,7 @@ theme: Boolean, dep: Array }, - setup(props) { + setup(props,context) { const userInfo = useUserInfo() const { userInfos } = storeToRefs(userInfo); const screenThemes = useScreenTheme() @@ -147,19 +147,6 @@ state.optionList.push(newObj) } } - // const swi = setInterval(()=>{ - // state.curValue = !state.curValue - // if(state.curValue == true){ - // nextTick(()=>{ - // initRisk1() - // }) - // }else{ - // nextTick(()=>{ - // initRisk2() - // }) - // } - // - // },5000) // 获取部门列表 const getAllDepartment = async () => { let res = await teamManageApi().getAllDepartment(); @@ -184,51 +171,13 @@ } } }; - // const recursion = (value: any) => { - // for (let i of value) { - // if (i.children.length !== 0) { - // state.departmentRecursionList.push(i); - // recursion(i.children); - // } else { - // state.departmentRecursionList.push(i); - // } - // } - // }; + 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().getPreventByTimeDep(data); + let res = await riskWarningApi().getDpLine(); if (res.data.code === '200') { state.riskData = res.data.data - const depList = [] - const deathList = [] - const hardList = [] - const lightList = [] - for(let index in state.riskData){ - state.riskData[index].depId = state.departmentRecursionList.find((i: { depId: number }) => i.depId === Number(state.riskData[index].depId))?.depName; - depList.push(state.riskData[index].depId) - deathList.push(state.riskData[index].detail.deathCount) - hardList.push(state.riskData[index].detail.heavyInjureCount) - lightList.push(state.riskData[index].detail.lightInjureCount) - } - // state.departmentList.find((i: { depId: number }) => i.depId === Number(state.details.workDetail.operationDepId))?.depName; - if(depList.length == 0){ - depList.push('该部门不包含子部门数据') - deathList.push(0) - hardList.push(0) - lightList.push(0) - } - initRisk1(depList,deathList,hardList,lightList) + initRisk1(state.riskData) + context.emit('getData',state.riskData) } else { ElMessage({ type: 'warning', @@ -246,12 +195,10 @@ type EChartsOption = echarts.EChartsOption // 隐患整改情况 - const initRisk1 =(depList,deathList,hardList,lightList)=>{ + const initRisk1 =(data)=>{ let dom = document.getElementById(risk1.value); let myChart = echarts.init(dom); - let option: EChartsOption; - option = { tooltip: { trigger: 'axis', @@ -260,245 +207,47 @@ type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow' } }, - // dataZoom: { - // type: 'slider', - // show: true, - // textStyle: { - // color: '#fff' - // }, - // realtime: true, - // top: 20, - // left: 10, - // height: 12, - // width: 80, - // start: 0, - // end: 100, - // orient: 'horizontal' - // }, - dataZoom: [ - //滑动条 + color: ['#91cc75','#ee6666'], + grid: [ { - xAxisIndex: 0, //这里是从X轴的0刻度开始 - show: false, //是否显示滑动条,不影响使用 - type: "slider", // 这个 dataZoom 组件是 slider 型 dataZoom 组件 - startValue: 0, // 从头开始。 - endValue: 6, // 一次性展示几个。 - }, - ], - legend: { - top: '0', - left: 'center', - itemWidth: fontSize(10), - itemHeight: fontSize(8), - textStyle:{ - color: 'auto', - fontSize: fontSize(12) - } - }, - grid: { - left: '2%', - right: '4%', - bottom: '0', - containLabel: true - }, - xAxis: { - type: 'category', - data: depList, - axisLine:{ - show: true, - lineStyle:{ - color: '#999' - } - }, - axisLabel:{ - color: '#999', - fontSize: fontSize(9) - } - }, - yAxis: { - type: 'value', - axisLine:{ - show: true, - lineStyle:{ - type: 'dotted' - } - }, - axisLabel:{ - color: '#999' - }, - splitLine:{ - show: false - } - }, - series: [ - { - name: '可能造成死亡的', - type: 'bar', - stack: 'total', - label: { - show: false - }, - emphasis: { - focus: 'series' - }, - data: deathList, - barCategoryGap: '50%' - }, - { - name: '可能造成重伤的', - type: 'bar', - stack: 'total', - label: { - show: false - }, - emphasis: { - focus: 'series' - }, - data: hardList, - barCategoryGap: '50%' - }, - { - name: '可能造成轻伤的', - type: 'bar', - stack: 'total', - label: { - show: false - }, - emphasis: { - focus: 'series' - }, - data: lightList, - barCategoryGap: '50%' - } - ] - }; - // option && myChart.setOption(option); - if (option && typeof option === 'object') { - myChart.setOption(option); - state.myVar = setInterval(function(){ - if (option.dataZoom[0].endValue == depList.length ) { - option.dataZoom[0].endValue = 4; - option.dataZoom[0].startValue = 0; - } else { - option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1; - option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1; + top: '5%', + right: '2%', + bottom: '10%' } - myChart.setOption(option); - }, 6000) - } + ], + xAxis: { + type: 'category', + data: data.map(i=>i.time), + axisLabel: { + color: '#fff' + } + }, + yAxis: { + type: 'value', + splitLine:{ + lineStyle: { + color: 'rgba(255,255,255,.2)' + } + } + }, + series: [ + { + name: '一般隐患', + type: 'line', + data: data.map(i=>i.generalDanger?i.generalDanger:0) + }, + { + name: '重大隐患', + type: 'line', + data: data.map(i=>i.majorDanger?i.majorDanger:0) + }, + ] + }; + option && myChart.setOption(option); window.addEventListener("resize",function (){ myChart.resize(); - }); - // echarts.init(document.getElementById(risk2.value)).dispose() + }) } - - // const initRisk2 =()=>{ - // let dom = document.getElementById(risk2.value); - // let myChart = echarts.init(dom); - // - // let option: EChartsOption; - // - // option = { - // tooltip: { - // trigger: 'axis', - // axisPointer: { - // // Use axis to trigger tooltip - // type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow' - // } - // }, - // legend: { - // top: '1%', - // left: 'center', - // itemWidth: fontSize(10), - // itemHeight: fontSize(8), - // textStyle:{ - // color: 'auto', - // fontSize: fontSize(12) - // } - // }, - // grid: { - // left: '2%', - // right: '4%', - // bottom: '0', - // containLabel: true - // }, - // xAxis: { - // type: 'category', - // data: ['F部门', 'G部门', 'H部门', 'I部门', 'J部门', 'K部门'], - // axisLine:{ - // show: true, - // lineStyle:{ - // color: '#999' - // } - // }, - // axisLabel:{ - // color: '#999' - // } - // }, - // yAxis: { - // type: 'value', - // axisLine:{ - // show: true, - // lineStyle:{ - // type: 'dotted' - // } - // }, - // axisLabel:{ - // color: '#999' - // }, - // splitLine:{ - // show: false - // } - // }, - // series: [ - // { - // name: '可能造成死亡的', - // type: 'bar', - // stack: 'total', - // label: { - // show: false - // }, - // emphasis: { - // focus: 'series' - // }, - // data: [320, 301, 334, 390, 330, 320], - // barCategoryGap: '50%' - // }, - // { - // name: '可能造成重伤的', - // type: 'bar', - // stack: 'total', - // label: { - // show: false - // }, - // emphasis: { - // focus: 'series' - // }, - // data: [90, 230, 210, 132, 101, 134], - // barCategoryGap: '50%' - // }, - // { - // name: '可能造成轻伤的', - // type: 'bar', - // stack: 'total', - // label: { - // show: false - // }, - // emphasis: { - // focus: 'series' - // }, - // data: [290, 330, 310, 191, 234, 290], - // barCategoryGap: '50%' - // } - // ] - // }; - // - // option && myChart.setOption(option); - // window.addEventListener("resize",function (){ - // myChart.resize(); - // }); - // echarts.init(document.getElementById(risk1.value)).dispose() - // } const getTheme =()=>{ if(screenTheme.value.isDark){ -- Gitblit v1.9.2