diff --git a/src/views/commandScreen/commandCenter/centerBottom.vue b/src/views/commandScreen/commandCenter/centerBottom.vue index b118426..88dc940 100644 --- a/src/views/commandScreen/commandCenter/centerBottom.vue +++ b/src/views/commandScreen/commandCenter/centerBottom.vue @@ -6,25 +6,26 @@
应急处置(近七天)
-
事故风险趋势预期
+
事故风险预测趋势
-
+
- +
- +
@@ -119,7 +120,7 @@ import { getNoticeListApi } from "@/api/modules/projectOverview"; import { Vue3SeamlessScroll } from "vue3-seamless-scroll"; // import Card from "@/components/card.vue"; -import { ref, onMounted } from "vue"; +import { ref, onMounted, reactive } from "vue"; import { getCountEmergencyTypedApi, getCountAlarmNumByEnterpriseApi } from "@/api/modules/projectOverview"; import * as echarts from "echarts"; import { GlobalStore } from "@/stores"; @@ -167,55 +168,74 @@ const getNoticeList = async () => { console.log("================center================", listData.value); }; const dataListAlarm = ref([]); +const pageInfo = reactive({ + dataListAlarmPage: [] as any[], + page: 0 +}); +const spArr = (arr: any[], num: number) => { + let newArr = []; + for (let i = 0; i < arr.length; ) { + newArr.push(arr.slice(i, (i += num))); + } + return newArr; +}; +const onPageMess = () => { + pageInfo.page += 1; + if (pageInfo.page >= pageInfo.dataListAlarmPage.length) { + pageInfo.page = 0; + } + getMessEchart(); +}; // 应急处置 function getMessEchart() { console.log("我是应急处置11"); const echartsTest = echarts.init(document.getElementById("eacherMess")); - // 抽出企业 - const dataList = dataListAlarm.value.map((item: any) => { - return { - name: item.enterpriseName, - type: "line", - stack: "Total", - smooth: true, - symbol: "none", - data: item.dataList - }; - }); - // const dataList = [ - // { - // name: "中东责任有限公司1", - // type: "line", - // stack: "Total", - // smooth: true, - // symbol: "none", - // data: [120, 132, 101, 134, 90, 230, 210] - // }, - // { - // name: "中东责任有限公司2", - // type: "line", - // stack: "Total", - // smooth: true, - // symbol: "none", - // data: [120, 99, 101, 78, 90, 230, 210] - // }, - // { - // name: "中东责任有限公司3", - // type: "line", - // stack: "Total", - // smooth: true, - // symbol: "none", - // data: [120, 57, 101, 134, 78, 230, 210] - // }, - // { - // name: "中东责任有限公司4", - // type: "line", - // stack: "Total", - // smooth: true, - // symbol: "none", - // data: [120, 42, 42, 14, 90, 230, 210] - // } - // ]; + // pageInfo.dataListAlarmPage = spArr( + // [ + // { + // name: "中东责任有限公司1", + // type: "line", + // stack: "Total", + // smooth: true, + // symbol: "none", + // data: [120, 132, 101, 134, 90, 230, 210] + // }, + // { + // name: "中东责任有限公司2", + // type: "line", + // stack: "Total", + // smooth: true, + // symbol: "none", + // data: [120, 99, 101, 78, 90, 230, 210] + // }, + // { + // name: "中东责任有限公司3", + // type: "line", + // stack: "Total", + // smooth: true, + // symbol: "none", + // data: [120, 57, 101, 134, 78, 230, 210] + // }, + // { + // name: "中东责任有限公司4", + // type: "line", + // stack: "Total", + // smooth: true, + // symbol: "none", + // data: [120, 42, 42, 14, 90, 230, 210] + // }, + // { + // name: "中东责任有限公司5", + // type: "line", + // stack: "Total", + // smooth: true, + // symbol: "none", + // data: [120, 42, 42, 14, 90, 230, 210] + // } + // ], + // 4 + // ); + const dataList = pageInfo.dataListAlarmPage[pageInfo.page]; let option = { tooltip: { trigger: "axis" @@ -225,6 +245,8 @@ function getMessEchart() { textStyle: { color: "#fff" }, + itemHeight: 8, + itemWidth: 8, icon: "rect", data: dataList.map((item: any) => item.name), formatter: function (params: any) { @@ -660,6 +682,18 @@ const getCountAlarmNumByEnterprise = async () => { }); return prev; }, []); + // 抽出企业 + const dataList = dataListAlarm.value.map((item: any) => { + return { + name: item.enterpriseName, + type: "line", + stack: "Total", + smooth: true, + symbol: "none", + data: item.dataList + }; + }); + pageInfo.dataListAlarmPage = spArr(dataList, 4); console.log("应急处置统计图", res); getMessEchart(); }; @@ -672,6 +706,17 @@ onMounted(async () => {