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/danger.vue | 416 +++++++++++++++++++++++++++++++++++++---------------------- 1 files changed, 262 insertions(+), 154 deletions(-) diff --git a/src/views/riskWarningSys/warningBigScreen/components/danger.vue b/src/views/riskWarningSys/warningBigScreen/components/danger.vue index ccf8a14..0f140b4 100644 --- a/src/views/riskWarningSys/warningBigScreen/components/danger.vue +++ b/src/views/riskWarningSys/warningBigScreen/components/danger.vue @@ -1,15 +1,16 @@ <template> <div class="charts-cont"> -<!-- <el-select v-model="selected" class="choose" size="small">--> -<!-- <el-option label="月度" value="1"/>--> -<!-- <el-option label="年度" value="2"/>--> -<!-- </el-select>--> - <div :class="choose"> - <div :class="cur===1?'act':''" @click="changeTab(1)">企业</div> - <div :class="cur===2?'act':''" @click="changeTab(2)">部门</div> - </div> - <div v-show="cur===1" class="month" :id="dangerMonth"></div> - <div v-show="cur===2" class="year" :id="dangerYear"></div> + <div :class="selector"> + <el-cascader + class="timeSe" + :teleported="false" + v-model="timeValue" + :options="optionList" + :props="riskProps" + @change="changeTime" + /> + </div> + <div class="month" :id="dangerMonth"></div> </div> </template> @@ -36,11 +37,15 @@ import * as echarts from "echarts"; import '/@/theme/bigScreen.css' import {useScreenTheme} from "/@/stores/screenTheme"; + import {riskWarningApi} from "/@/api/riskWarning"; interface stateType { - cur: number, - choose: string + selector: string, + timeValue: Array<any>, + optionList: Array<any>, + riskProps: object, + dangerData: Array<any> } export default defineComponent({ name: 'danger', @@ -55,21 +60,131 @@ const screenThemes = useScreenTheme() const { screenTheme } = storeToRefs(screenThemes); const dangerMonth = ref("eChartFix" + Date.now() + Math.random()) - const dangerYear = ref("eChartFix" + Date.now() + Math.random()) const state = reactive<stateType>({ - cur: 1, - choose: 'choose-dark' + selector: 'select-dark', + timeValue: [], + dangerData: [], + optionList: [], + riskProps: { + expandTrigger: 'hover' + }, }) + 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 changeTab =(i)=>{ - state.cur = i - nextTick(()=>{ - initdangerByYear() - }) - } + const changeTime = (value)=>{ + state.timeValue[0] = value[0] + state.timeValue[1] = value[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().getSelfPreventByTimeDep(data); + if (res.data.code === '200') { + state.dangerData = res.data.data + const danger = [ + {value: state.dangerData[0].detail.lightRiskCount,name: '一般隐患'}, + {value: state.dangerData[0].detail.heavyRiskCount,name: '重大隐患'} + ] + initdangerByMonth(danger) + } else { + ElMessage({ + type: 'warning', + message: res.data.msg + }); + } + } + type EChartsOption = echarts.EChartsOption // 隐患整改情况 - const initdangerByMonth =()=>{ + const initdangerByMonth =(danger)=>{ let dom = document.getElementById(dangerMonth.value); let myChart = echarts.init(dom); @@ -116,10 +231,7 @@ fontWeight: 'bold' } }, - data: [ - { value: 235, name: '一般隐患' }, - { value: 1048, name: '重大隐患' } - ], + data: danger, center: ['50%','55%'] } ] @@ -131,103 +243,42 @@ myChart.resize(); }); } - // 隐患整改情况 - const initdangerByYear =()=>{ - let dom = document.getElementById(dangerYear.value); - let myChart = echarts.init(dom); - let option: EChartsOption; - - option = { - tooltip: { - trigger: 'item' - }, - color: ['#FAC858','#EE6666'], - legend: { - top: '8%', - left: 'center', - itemWidth: fontSize(10), - itemHeight: fontSize(8), - textStyle:{ - color: 'auto', - fontSize: fontSize(11) - } - }, - series: [ - { - name: 'Access From', - type: 'pie', - radius: '65%', - avoidLabelOverlap: true, - label: { - show: true, - position: 'inside', - fontSize: fontSize(12), - color: '#ffffff', - textBorderWidth: 0, - width: 30, - overflow: 'break' - }, - labelLine: { - show: true, - length: 10, - length2: 10 - }, - emphasis: { - label: { - show: true, - fontSize: fontSize(22), - fontWeight: 'bold' - } - }, - data: [ - { value: 35, name: '一般隐患' }, - { value: 1048, name: '重大隐患' } - ], - center: ['50%','55%'] - } - ] - }; - - option && myChart.setOption(option); - - window.addEventListener("resize",function (){ - myChart.resize(); - }); - } function fontSize(val){ let nowClientWidth = document.documentElement.clientWidth; return val * (nowClientWidth/1920) * Number(props.size); } const getTheme =()=>{ - if(screenTheme.value.isDark){ - state.choose = 'choose-dark' - }else{ - state.choose = 'choose-light' - } + if(screenTheme.value.isDark){ + state.selector = 'select-dark' + }else{ + state.selector = 'select-light' + } } watchEffect(() => { - if(props.theme){ - state.choose = 'choose-dark' - }else{ - state.choose = 'choose-light' - } + if(props.theme){ + state.selector = 'select-dark' + }else{ + state.selector = 'select-light' + } + getDataByYearId() }) // 页面载入时执行方法 onMounted(() => { - initdangerByMonth(); + getTime() getTheme() + makeList() + getDataByYearId() }); return { dangerMonth, - dangerYear, Search, + changeTime, fontSize, - changeTab, ...toRefs(state) }; }, @@ -241,60 +292,117 @@ padding: 2% 2% 0; position: relative; - .choose-dark{ - position: absolute; - right: 4%; - bottom: 4%; - z-index: 999; - display: flex; - align-items: center; - font-size: 0.75rem; - justify-content: space-between; + .select-dark{ + position: absolute; + z-index: 99999; + bottom: 0; + left: 2rem; + width: 50%; + height: 1.5rem; + margin-right: 0.8rem; - div{ - padding: 2px 6px; - box-sizing: border-box; - color: rgba(17,254,238,.4); - border: 1px solid rgba(17,254,238,.4); - border-radius: 2px; - cursor: pointer; - } - div:hover{ - color: #11FEEE; - border: 1px solid #11FEEE; - } - .act{ - color: #11FEEE; - border: 1px solid #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; + ::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); + color: #11FEEE; + z-index: 999999 !important; + .el-cascader-node__label{ + color: #11FEEE; + } + .el-icon{ + color: #11FEEE; + } + .el-cascader-node{ + &:hover{ + background: #0049af; + } + } + } + ::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; - div{ - padding: 2px 6px; - box-sizing: border-box; - color: #ccc; - border: 1px solid #ccc; - border-radius: 2px; - cursor: pointer; - } - div:hover{ - color: #333; - border: 1px solid #333; - } - .act{ - color: #333; - border: 1px solid #333; - } - } + input{ + font-size: 0.8rem; + color: #11FEEE; + } + .el-icon{ + color: #11FEEE; + } + } + } + + .select-light{ + position: absolute; + z-index: 99999; + bottom: 0; + left: 2rem; + width: 50%; + 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; + color: #fff; + z-index: 999999 !important; + .el-cascader-node__label{ + color: #000; + } + .el-icon{ + color: #000; + } + .el-cascader-node{ + &:hover{ + background: #ccc; + } + } + } + ::v-deep(.el-cascader-menu){ + min-width: 80px !important; + } + ::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{ width: 100%; height: 100%; -- Gitblit v1.9.2