diff --git a/src/views/commandScreen/commandCenter/leftBottom.vue b/src/views/commandScreen/commandCenter/leftBottom.vue index e63bbab..907ba03 100644 --- a/src/views/commandScreen/commandCenter/leftBottom.vue +++ b/src/views/commandScreen/commandCenter/leftBottom.vue @@ -59,7 +59,7 @@ let listData = ref([ ]) let questionTotal = ref(0 as any); -let dataList = ref([ +let dataList2 = ref([ { value: 30, show: true, @@ -94,6 +94,7 @@ let dataList = ref([ } } ]); + function Pie() { let dataArr = []; for (var i = 0; i < 150; i++) { @@ -126,7 +127,7 @@ function Pie() { return dataArr; } -function drawEchart() { +function drawEchart2() { let echartsTest = echarts.init(document.getElementById("echartsEdu")); let option = { tooltip: { @@ -182,16 +183,16 @@ function drawEchart() { } } }, - data: dataList.value.map(item => { + data: dataList2.value.map(item => { if (item.show) { return item.name; } }), formatter: function (data) { - if (dataList.value && dataList.value.length) { - for (var i = 0; i < dataList.value.length; i++) { - if (data === dataList.value[i].name) { - var value = dataList.value[i].value; + if (dataList2.value && dataList2.value.length) { + for (var i = 0; i < dataList2.value.length; i++) { + if (data === dataList2.value[i].name) { + var value = dataList2.value[i].value; var percentage = value + "%"; return "{name| " + data + "} {gap| }" + "{value|" + value + " " + "}"; } @@ -327,7 +328,7 @@ function drawEchart() { labelLine: { show: false }, - data: dataList.value + data: dataList2.value }, { type: "pie", @@ -351,10 +352,10 @@ function drawEchart() { // const safeData = ref(null as any); const qualityInfo = async () => { const res: any = await selectQualityStatisticsApi({ projectSn: store.sn }); - dataList.value[0].value = res.result.total.rectificationNum; - dataList.value[1].value = res.result.total.totalNum - res.result.total.rectificationNum; + dataList2.value[0].value = res.result.total.rectificationNum; + dataList2.value[1].value = res.result.total.totalNum - res.result.total.rectificationNum; questionTotal.value = res.result.total.totalNum; - drawEchart(); + drawEchart2(); }; //将方法暴露给父组件 defineExpose({ diff --git a/src/views/commandScreen/commandCenter/leftTop.vue b/src/views/commandScreen/commandCenter/leftTop.vue index cf1d3e5..d719ffc 100644 --- a/src/views/commandScreen/commandCenter/leftTop.vue +++ b/src/views/commandScreen/commandCenter/leftTop.vue @@ -10,14 +10,16 @@
- - - + + +
排名
-
姓名
-
整改数量
+
姓名
+
分组单位
+
整改数量
+
发起隐患处
整改率
及时整改率
@@ -47,10 +49,18 @@ import { getStageOption } from "@/api/modules/projectOverview"; import type { TabsPaneContext } from 'element-plus' const activeName = ref('first') +const activeIndex = ref('1' as any) let dateRange = ref([] as any) const handleClick = (tab: TabsPaneContext, event: Event) => { - console.log(tab, event) +// console.log(tab, event) +// console.log('tab',tab.index) +// console.log('activeName',activeName.value) +// if(activeName.value === 'first') console.log('1') +// if(activeName.value === 'second') console.log('2') +// if(activeName.value === 'third') console.log('3') + activeIndex.value = tab.index + console.log('activeIndex',activeIndex.value) } const tabList = [ { sortLine: '1', name: 'Tom', count: '1', rate: '100%', immediateRate: '100%'}, diff --git a/src/views/commandScreen/commandCenter/rightAll.vue b/src/views/commandScreen/commandCenter/rightAll.vue index 5006269..99750fe 100644 --- a/src/views/commandScreen/commandCenter/rightAll.vue +++ b/src/views/commandScreen/commandCenter/rightAll.vue @@ -23,7 +23,8 @@
重大隐患未销项{{majorDangerCount}}个,占比{{majorDangerRate}}%
-
+
+
@@ -59,10 +60,11 @@ import Card from "@/components/card.vue"; import { onMounted, ref } from "vue"; import { GlobalStore } from "@/stores"; -import rightTop from "@/views/commandScreen/commandCenter/rightTop.vue"; -import rightCenter from "@/views/commandScreen/commandCenter/rightCenter.vue"; +// import rightTop from "@/views/commandScreen/commandCenter/rightTop.vue"; +// import rightCenter from "@/views/commandScreen/commandCenter/rightCenter.vue"; const store = GlobalStore(); import { getProjectInspectRecordCountApi } from "@/api/modules/projectOverview"; +import { selectQualityStatisticsApi } from "@/api/modules/projectOverview"; import * as echarts from "echarts"; const echartsTest = ref(); let questionTotal = ref(0 as any); @@ -99,8 +101,7 @@ let dataList = ref([ { value: 30, show: true, - name: "未整改安全问题", - + name: "重大隐患", itemStyle: { normal: { color: "#EC6266", @@ -111,7 +112,7 @@ let dataList = ref([ { value: 70, show: true, - name: "已整改安全问题", + name: "一般隐患", itemStyle: { normal: { color: "#6375C7", @@ -120,6 +121,7 @@ let dataList = ref([ } } ]); + function Pie() { let dataArr = []; for (var i = 0; i < 150; i++) { @@ -160,7 +162,7 @@ function drawEchart() { }, title: { text: questionTotal.value, - subtext: "安全问题数", + subtext: "超期未整改数", x: "24%", y: "center", textAlign: "center", @@ -183,8 +185,8 @@ function drawEchart() { icon: "rect", type: "plain", orient: "vertical", - left: "50%", - top: "40%", + left: "55%", + top: "35%", align: "left", itemGap: 30, itemWidth: 8, // 设置宽度 @@ -364,53 +366,13 @@ function drawEchart() { } ] }; -// let option = { -// tooltip: { -// trigger: 'item' -// }, -// legend: { -// top: '5%', -// left: 'center' -// }, -// series: [ -// { -// name: 'Access From', -// type: 'pie', -// radius: ['40%', '70%'], -// avoidLabelOverlap: false, -// label: { -// show: false, -// position: 'center' -// }, -// emphasis: { -// label: { -// show: true, -// fontSize: 40, -// fontWeight: 'bold' -// } -// }, -// labelLine: { -// show: false -// }, -// data: [ -// { value: 1048, name: 'Search Engine' }, -// { value: 735, name: 'Direct' }, -// { value: 580, name: 'Email' }, -// { value: 484, name: 'Union Ads' }, -// { value: 300, name: 'Video Ads' } -// ] -// } -// ] -// }; echartsTest.value.setOption(option, true); window.addEventListener("resize", () => { console.log(echartsTest) echartsTest.value.resize(); }) } - //获取安全管理 -// const safeData = ref(null as any); const getSafeInfo = async () => { const res: any = await getProjectInspectRecordCountApi({ projectSn: store.sn }); // console.log("获取安全管理", res); @@ -420,12 +382,269 @@ const getSafeInfo = async () => { questionTotal.value = res.result.totalNum; drawEchart(); }; + +let dataList2 = ref([ + { + value: 30, + show: true, + name: "重大隐患", + itemStyle: { + normal: { + color: "#038cf5", + borderWidth: 20 + } + } + }, + { + value: 70, + show: true, + name: "一般隐患", + itemStyle: { + normal: { + color: "#01d6f4", + borderWidth: 20 + } + } + }, +]); + +function drawEchart2() { + let echartsTest = echarts.init(document.getElementById("echarts2")); + let option = { + tooltip: { + trigger: "item" + }, + title: { + text: questionTotal.value, + // text: '100%', + subtext: "入场三级教育\n完成率", + x: "24%", + y: "center", + textAlign: "center", + textStyle: { + color: "#fff", + fontSize: 26, + fontWeight: "normal", + // align: "center", + // width: "200px", + fontFamily: "sadigitalNumber" + }, + subtextStyle: { + color: "#ccc", + fontSize: 12, + fontWeight: "normal" + // align: "center", + } + }, + legend: { + selectedMode: false, // 取消图例上的点击事件 + icon: "rect", + type: "plain", + orient: "vertical", + left: "55%", + top: "35%", + align: "left", + itemGap: 30, + itemWidth: 8, // 设置宽度 + itemHeight: 7, // 设置高度 + symbolKeepAspect: false, + textStyle: { + color: "#000", + rich: { + name: { + verticalAlign: "right", + align: "left", + fontSize: 14, + color: "#FFFFFF" + }, + value: { + align: "left", + fontSize: 14, + color: "#FFFFFF" + } + } + }, + data: dataList2.value.map(item => { + if (item.show) { + return item.name; + } + }), + formatter: function (data) { + if (dataList2.value && dataList2.value.length) { + for (var i = 0; i < dataList2.value.length; i++) { + if (data === dataList2.value[i].name) { + var value = dataList2.value[i].value; + var percentage = value + "%"; + return "{name| " + data + "} {gap| }" + "{value|" + value + " " + "}"; + } + } + } + } + }, + series: [ + // 外侧光线 + { + name: "", + type: "gauge", + center: ["25%", "55%"], + radius: "90%", + startAngle: 235, + endAngle: -50, + min: 0, + max: 100, + axisLine: { + show: true, + lineStyle: { + width: 2, + color: [ + [ + 100 / 100, + new echarts.graphic.LinearGradient(0, 0, 1, 0, [ + { + offset: 0, + color: "#526277" + }, + { + offset: 0.25, + color: "rgba(4, 14, 54,0.4)" + }, + { + offset: 0.7, + color: "rgba(4, 14, 54,0.4)" + }, + { + offset: 1, + color: "#526277" + } + ]) + ], + [1, "rgba(255,255,255,0)"] + ] + } + }, + + axisTick: { + show: 0 + }, + splitLine: { + show: 0 + }, + axisLabel: { + show: 0 + }, + pointer: { + show: 0 + }, + detail: { + show: 0 + } + }, + { + name: "", + type: "gauge", + center: ["25%", "55%"], + radius: "80%", + startAngle: 245, + endAngle: -115, + min: 0, + max: 100, + axisLine: { + show: true, + lineStyle: { + width: 2, + color: [ + [ + 200 / 100, + new echarts.graphic.LinearGradient(0, 0, 1, 0, [ + { + offset: 0.8, + color: "#52bef0" + }, + { + offset: 0.5, + color: "#13356b" + } + ]) + ], + [1, "rgba(255,255,255,0)"] + ] + } + }, + + axisTick: { + show: 0 + }, + splitLine: { + show: 0 + }, + axisLabel: { + show: 0 + }, + pointer: { + show: 0 + }, + detail: { + show: 0 + } + }, + { + name: "", + type: "pie", + radius: [65, 75], + center: ["25%", "55%"], + hoverAnimation: true, + itemStyle: { + borderRadius: 10, + borderWidth: 10 + }, + label: { + show: false, + position: "center" + }, + emphasis: { + label: { + show: false + } + }, + labelLine: { + show: false + }, + data: dataList2.value + }, + { + type: "pie", + radius: ["57", "60"], + center: ["25%", "55%"], + label: { + show: false + }, + + data: Pie() + } + ] + }; + echartsTest.setOption(option, true); + // window.addEventListener("resize", () => { + // console.log(666) + // echartsTest.resize(); + // }) +} +//获取质量管理 +const qualityInfo = async () => { + const res: any = await selectQualityStatisticsApi({ projectSn: store.sn }); + dataList2.value[0].value = res.result.total.rectificationNum; + dataList2.value[1].value = res.result.total.totalNum - res.result.total.rectificationNum; + questionTotal.value = res.result.total.totalNum; + drawEchart2(); +}; + //将方法暴露给父组件 defineExpose({ getSafeInfo }) onMounted(async () => { await getSafeInfo(); + await qualityInfo(); // window.onresize = function(){ // if(echartsTest.value){ // echartsTest.value.resize(); diff --git a/src/views/commandScreen/commandCenter/rightPage/rightTop.vue b/src/views/commandScreen/commandCenter/rightPage/rightTop.vue index e44a9ef..8155618 100644 --- a/src/views/commandScreen/commandCenter/rightPage/rightTop.vue +++ b/src/views/commandScreen/commandCenter/rightPage/rightTop.vue @@ -1,22 +1,134 @@ -