From 29cbdcfc6bdd19e4f2ce6abd8034277431071db8 Mon Sep 17 00:00:00 2001 From: X_Rian <904416525@qq.com> Date: Wed, 5 Jun 2024 18:31:26 +0800 Subject: [PATCH 1/3] =?UTF-8?q?=E6=97=A0=E6=84=9F=E5=88=B7=E6=96=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/modules/agjtCommandApi.ts | 53 ++++++---- src/api/modules/projectOverview.ts | 54 +++++----- src/api/modules/video.ts | 2 +- .../commandCenter/centerBottom.vue | 24 ++--- .../commandScreen/commandCenter/centerTop.vue | 33 ++++--- .../commandCenter/leftBottom.vue | 62 +++++++----- .../commandScreen/commandCenter/leftTop.vue | 93 +++++++++-------- .../commandScreen/commandCenter/rightAll.vue | 99 +++++++++++-------- 8 files changed, 241 insertions(+), 179 deletions(-) diff --git a/src/api/modules/agjtCommandApi.ts b/src/api/modules/agjtCommandApi.ts index ff8f6e9..5ba972b 100644 --- a/src/api/modules/agjtCommandApi.ts +++ b/src/api/modules/agjtCommandApi.ts @@ -9,11 +9,15 @@ export const getMemberJobStatusApi = (params: {}) => { }; // 检查人 export const getInspectManStatusApi = (params: {}) => { - return http.post(BASEURL + `/xmgl/xzSecurityQualityInspectionRecord/statsByInspectMan`, params, { headers: { noLoading: true } }); + return http.post(BASEURL + `/xmgl/xzSecurityQualityInspectionRecord/statsByInspectMan`, params, { + headers: { noLoading: true } + }); }; // 按分包单位分析 export const getEnterpriseStatusApi = (params: {}) => { - return http.post(BASEURL + `/xmgl/xzSecurityQualityInspectionRecord/statsByEnterprise`, params, { headers: { noLoading: true } }); + return http.post(BASEURL + `/xmgl/xzSecurityQualityInspectionRecord/statsByEnterprise`, params, { + headers: { noLoading: true } + }); }; // 危大工程弹窗 @@ -49,17 +53,20 @@ export const getProgressContentApi = (params: {}) => { return http.get(BASEURL + `/xmgl/xzTaskProgressContent/page`, params, { headers: { noLoading: true } }); }; - // 风险统计弹窗 // 顶部数据 export const getStatisticsNumDataApi = (params: {}) => { - return http.post(BASEURL + `/xmgl/xzSecurityQualityInspectionRecord/selectQualityStatisticsNum`, params, { headers: { noLoading: true } }); + return http.post(BASEURL + `/xmgl/xzSecurityQualityInspectionRecord/selectQualityStatisticsNum`, params, { + headers: { noLoading: true } + }); }; // 安全隐患 // 顶部数据 export const getQualityStatisticsNumDataApi = (params: {}) => { - return http.post(BASEURL + `/xmgl/xzSecurityQualityInspectionRecord/selectQualityStatisticsNumList`, params, { headers: { noLoading: true } }); + return http.post(BASEURL + `/xmgl/xzSecurityQualityInspectionRecord/selectQualityStatisticsNumList`, params, { + headers: { noLoading: true } + }); }; // 获取分包单位 export const getProjectEnterpriseApi = (params: {}) => { @@ -86,35 +93,41 @@ export const getAlarmTypeCountApi = (params: {}) => { }; // 顶部数据分页接口 export const getAlarmTypeCountPageApi = (params: {}) => { - return http.post(BASEURL + `/xmgl/aiStatistic/selectAiAnalyseHardWareAlarmTypeCountPage`, params, { headers: { noLoading: true } }); + return http.post(BASEURL + `/xmgl/aiStatistic/selectAiAnalyseHardWareAlarmTypeCountPage`, params, { + headers: { noLoading: true } + }); }; // centerTop底部按钮显示数据接口 -export const getStatsDirectorateBigScreenApi = (params: {}) => { - return http.post(BASEURL + `/xmgl/xzSecurityQualityInspectionRecord/statsDirectorateBigScreen`, params, { headers: { noLoading: true } }); +export const getStatsDirectorateBigScreenApi = (params: {}, showLoading: boolean) => { + return http.post(BASEURL + `/xmgl/xzSecurityQualityInspectionRecord/statsDirectorateBigScreen`, params, { + headers: { noLoading: showLoading } + }); }; // centerTop评分数据接口 -export const getStatScoreApi = (params: {}) => { - return http.get(BASEURL + `/xmgl/xzSecurityQualityInspectionRecord/getStatScore`, params, { headers: { noLoading: true } }); +export const getStatScoreApi = (params: {}, showLoading: boolean) => { + return http.get(BASEURL + `/xmgl/xzSecurityQualityInspectionRecord/getStatScore`, params, { headers: { noLoading: showLoading } }); }; // 项目人员考勤 // 出勤人员/考勤日环比 -export const getPersonTypeAndEduStatisticsApi = (params: {}) => { - return http.post(BASEURL + `/xmgl/workerInfo/selectPersonTypeAndEduStatistics`, params, { headers: { noLoading: true } }); +export const getPersonTypeAndEduStatisticsApi = (params: {}, showLoading: boolean) => { + return http.post(BASEURL + `/xmgl/workerInfo/selectPersonTypeAndEduStatistics`, params, { + headers: { noLoading: showLoading } + }); }; // 总包出勤情况分析 -export const queryAttendanceOfEachCompanyApi = (params: {}) => { - return http.get(BASEURL + `/xmgl/workerAttendance/queryAttendanceOfEachCompany`, params, { headers: { noLoading: true } }); +export const queryAttendanceOfEachCompanyApi = (params: {}, showLoading: boolean) => { + return http.get(BASEURL + `/xmgl/workerAttendance/queryAttendanceOfEachCompany`, params, { + headers: { noLoading: showLoading } + }); }; // 进度情况分析 // 项目总进度/项目剩余天数 -export const getCountTaskProgressApi = (params: {}) => { - return http.post(BASEURL + `/xmgl/xzTaskProgress/countTaskProgress`, params, { headers: { noLoading: true } }); +export const getCountTaskProgressApi = (params: {}, showLoading: boolean) => { + return http.post(BASEURL + `/xmgl/xzTaskProgress/countTaskProgress`, params, { headers: { noLoading: showLoading } }); }; // 总包进度列表 -export const queryCountEnterpriseApi = (params: {}) => { - return http.post(BASEURL + `/xmgl/xzTaskProgressTotal/countEnterprise`, params, { headers: { noLoading: true } }); +export const queryCountEnterpriseApi = (params: {}, showLoading: boolean) => { + return http.post(BASEURL + `/xmgl/xzTaskProgressTotal/countEnterprise`, params, { headers: { noLoading: showLoading } }); }; - - diff --git a/src/api/modules/projectOverview.ts b/src/api/modules/projectOverview.ts index d9693ef..1493726 100644 --- a/src/api/modules/projectOverview.ts +++ b/src/api/modules/projectOverview.ts @@ -3,8 +3,8 @@ import http from "@/api"; const BASEURL = import.meta.env.VITE_API_URL; // 项目信息 -export const getProjectDetail = (params: {}) => { - return http.post(BASEURL + `/xmgl/project/getProjectInfoBySn`, params, { headers: { noLoading: true } }); +export const getProjectDetail = (params: {}, showLoading: boolean) => { + return http.post(BASEURL + `/xmgl/project/getProjectInfoBySn`, params, { headers: { noLoading: showLoading } }); }; // 统计企业下项目各人员统计 @@ -40,13 +40,13 @@ export const eidtProjectShowConfig = (params: {}) => { }; // 查询效果图 -export const queryBySnData = (params: {}) => { - return http.post(BASEURL + `/xmgl/projectShowConfig/queryBySn`, params, { headers: { noLoading: true } }); +export const queryBySnData = (params: {}, showLoading: boolean) => { + return http.post(BASEURL + `/xmgl/projectShowConfig/queryBySn`, params, { headers: { noLoading: showLoading } }); }; // 里程碑字典 -export const getStageOption = (params: {}) => { - return http.get(BASEURL + `/xmgl/dictionaryItem/list`, params, { headers: { noLoading: true } }); +export const getStageOption = (params: {}, showLoading: boolean) => { + return http.get(BASEURL + `/xmgl/dictionaryItem/list`, params, { headers: { noLoading: showLoading } }); }; //甘特图-列表查询任务进度 @@ -55,12 +55,16 @@ export const getParentChildTaskListApi = (params: {}) => { }; // 隐患统计智能分析 -export const getSelectQualityStatisticsNumApi = (params: {}) => { - return http.post(BASEURL + `/xmgl/xzSecurityQualityInspectionRecord/selectQualityStatisticsNum`, params); +export const getSelectQualityStatisticsNumApi = (params: {}, showLoading: boolean) => { + return http.post(BASEURL + `/xmgl/xzSecurityQualityInspectionRecord/selectQualityStatisticsNum`, params, { + headers: { noLoading: showLoading } + }); }; -export const getCountDangerLevelApi = (params: {}) => { - return http.post(BASEURL + `/xmgl/xzSecurityQualityInspectionRecord/countDangerLevel`, params); +export const getCountDangerLevelApi = (params: {}, showLoading: boolean) => { + return http.post(BASEURL + `/xmgl/xzSecurityQualityInspectionRecord/countDangerLevel`, params, { + headers: { noLoading: showLoading } + }); }; // 分包单位统计 @@ -88,36 +92,42 @@ export const getXzSecurityQualitylnspectionRecordSuperviseApi = (params: {}) => }; // 隐患智能分析 -export const getNoticeListApi = (params: {}) => { - return http.post(BASEURL + `/xmgl/notice/list`, params); +export const getNoticeListApi = (params: {}, showLoading: boolean) => { + return http.post(BASEURL + `/xmgl/notice/list`, params, { headers: { noLoading: showLoading } }); }; // 安全问题统计数据|列表 -export const getInspectionSelectQualityApi = (params: {}) => { - return http.post(BASEURL + `/xmgl/xzSecurityQualityInspectionRecord/selectQualityStatisticsNum`, params); +export const getInspectionSelectQualityApi = (params: {}, showLoading: boolean) => { + return http.post(BASEURL + `/xmgl/xzSecurityQualityInspectionRecord/selectQualityStatisticsNum`, params, { + headers: { noLoading: showLoading } + }); }; export const getInspectionSelectQualityListApi = (params: {}) => { return http.post(BASEURL + `/xmgl/xzSecurityQualityInspectionRecord/selectQualityStatisticsNumList`, params); }; // 风险走势图 -export const getInspectionRiskChartApi = (params: {}) => { - return http.post(BASEURL + `/xmgl/xzSecurityQualityInspectionRecord/riskChart`, params); +export const getInspectionRiskChartApi = (params: {}, showLoading: boolean) => { + return http.post(BASEURL + `/xmgl/xzSecurityQualityInspectionRecord/riskChart`, params, { + headers: { noLoading: showLoading } + }); }; // 特殊作业 -export const getSpecialCountAllSpecialApi = (params: {}) => { - return http.post(BASEURL + `/xmgl/xzSpecial/countAllSpecial`, params); +export const getSpecialCountAllSpecialApi = (params: {}, showLoading: boolean) => { + return http.post(BASEURL + `/xmgl/xzSpecial/countAllSpecial`, params, { headers: { noLoading: showLoading } }); }; // 应急类型统计(今日) -export const getCountEmergencyTypedApi = (params: {}) => { - return http.post(BASEURL + `/xmgl/xzEmergencyRecord/countEmergencyTyped`, params); +export const getCountEmergencyTypedApi = (params: {}, showLoading: boolean) => { + return http.post(BASEURL + `/xmgl/xzEmergencyRecord/countEmergencyTyped`, params, { headers: { noLoading: showLoading } }); }; // 应急处置(近七日) -export const getCountAlarmNumByEnterpriseApi = (params: {}) => { - return http.post(BASEURL + `/xmgl/xzEmergencyRecord/countAlarmNumByEnterprise`, params); +export const getCountAlarmNumByEnterpriseApi = (params: {}, showLoading: boolean) => { + return http.post(BASEURL + `/xmgl/xzEmergencyRecord/countAlarmNumByEnterprise`, params, { + headers: { noLoading: showLoading } + }); }; // 获取应急物资 diff --git a/src/api/modules/video.ts b/src/api/modules/video.ts index b1cc92a..b5019e4 100644 --- a/src/api/modules/video.ts +++ b/src/api/modules/video.ts @@ -21,5 +21,5 @@ export const getSafeHatSessionApi = (params: {}) => { // 现场视频 export const selectLiveVideoListApi = (params: {}) => { - return http.get(BASEURL + `/xmgl/project/getProjectExtendInfo`, params); + return http.get(BASEURL + `/xmgl/project/getProjectExtendInfo`, params, { headers: { noLoading: true }}); }; diff --git a/src/views/commandScreen/commandCenter/centerBottom.vue b/src/views/commandScreen/commandCenter/centerBottom.vue index f63503d..fdb4424 100644 --- a/src/views/commandScreen/commandCenter/centerBottom.vue +++ b/src/views/commandScreen/commandCenter/centerBottom.vue @@ -159,10 +159,10 @@ let listData = ref([ // { header: 'AI报警', type: 3, content: '1#塔吊报警频次较上周增长60%，塔吊间各个设之间的衔接进行全面检查，以防止...', startTime: '2024-04-01', endTime: "2024-04-20" }, ]); -const getNoticeList = async () => { +const getNoticeList = async (showLoading: boolean) => { // const res: any = await getNoticeListApi({ projectSn: store.sn, type: 10, pageNo: 1, pageSize: 99999, }); // const res: any = await getNoticeListApi({ isBigScreen: 1, type: 32 }); // 公告 - const res: any = await getNoticeListApi({ isBigScreen: 1, type: 31 }); + const res: any = await getNoticeListApi({ isBigScreen: 1, type: 31 }, showLoading); console.log("隐患智能分析", res); listData.value = res.result.records; @@ -666,11 +666,11 @@ function getMessCountEchart() { }); } -const getMessCountEchartType = async () => { +const getMessCountEchartType = async (showLoading: boolean) => { const res: any = await getCountEmergencyTypedApi({ projectSn: store.sn, type: 1 - }); + },showLoading); console.log("应急统计图", res); messCountType.value.data = res.result.data.map((item: any) => { return { @@ -690,11 +690,11 @@ const getMessCountEchartType = async () => { getMessCountEchart(); }; -const getCountAlarmNumByEnterprise = async () => { +const getCountAlarmNumByEnterprise = async (showLoading: boolean) => { const res: any = await getCountAlarmNumByEnterpriseApi({ projectSn: store.sn, type: 1 - }); + },showLoading); dataListAlarm.value = res.result.reduce((prev: any[], item: any) => { console.log("1111", prev); item.list.forEach((ele: any) => { @@ -723,16 +723,16 @@ const getCountAlarmNumByEnterprise = async () => { console.log("应急处置统计图", res); getMessEchart(); }; -const setIntervalFn = () => { - getNoticeList(); - getCountAlarmNumByEnterprise(); - getMessCountEchartType(); +const setIntervalFn = (showLoading: boolean) => { + getNoticeList(showLoading); + getCountAlarmNumByEnterprise(showLoading); + getMessCountEchartType(showLoading); }; onMounted(async () => { - setIntervalFn(); + setIntervalFn(false); // 定时三十秒刷新 setInterval(() => { - setIntervalFn(); + setIntervalFn(true); }, 30000); }); diff --git a/src/views/commandScreen/commandCenter/centerTop.vue b/src/views/commandScreen/commandCenter/centerTop.vue index 3e100b0..48a3b05 100644 --- a/src/views/commandScreen/commandCenter/centerTop.vue +++ b/src/views/commandScreen/commandCenter/centerTop.vue @@ -174,8 +174,8 @@ const getVideoList = async () => { }; let statsDirectorateBigScreen = ref({} as any); //获取centerTop底部按钮显示数据 -const getStatsDirectorateBigScreen = async () => { - const res = await getStatsDirectorateBigScreenApi({ projectSn: store.sn }); +const getStatsDirectorateBigScreen = async (showLoading: boolean) => { + const res = await getStatsDirectorateBigScreenApi({ projectSn: store.sn }, showLoading); statsDirectorateBigScreen.value = res.result; }; let statScore = ref({ @@ -187,8 +187,8 @@ let statScore = ref({ lastMonthTotal: 0 } as any); //获取centerTop底部按钮显示数据 -const getStatScore = async () => { - const res = await getStatScoreApi({ projectSn: store.sn }); +const getStatScore = async (showLoading: boolean) => { + const res = await getStatScoreApi({ projectSn: store.sn }, showLoading); console.log("获取项目信息6666666666666666666666666666666666", res); statScore.value = res.result; }; @@ -240,11 +240,14 @@ const uploadSuccess = () => { }); }; // 查询效果图 -function getQueryBySnData() { - queryBySnData({ - projectSn: store.sn, - showType: 3 - }).then((res: any) => { +function getQueryBySnData(showLoading: boolean) { + queryBySnData( + { + projectSn: store.sn, + showType: 3 + }, + showLoading + ).then((res: any) => { console.log(res, "效果图"); if (res.result) { picUrl.value = res.result.configValue; @@ -266,17 +269,17 @@ function saveOrDeleteVideo(url) { defineExpose({ getQueryBySnData }); -const setIntervalFn = () => { +const setIntervalFn = (showLoading: boolean) => { getVideoList(); - getQueryBySnData(); - getStatsDirectorateBigScreen(); - getStatScore(); + getQueryBySnData(showLoading); + getStatsDirectorateBigScreen(showLoading); + getStatScore(showLoading); }; onMounted(async () => { - setIntervalFn(); + setIntervalFn(false); // 定时三十秒刷新 setInterval(() => { - setIntervalFn(); + setIntervalFn(true); }, 30000); }); diff --git a/src/views/commandScreen/commandCenter/leftBottom.vue b/src/views/commandScreen/commandCenter/leftBottom.vue index 20e82a7..fe3a017 100644 --- a/src/views/commandScreen/commandCenter/leftBottom.vue +++ b/src/views/commandScreen/commandCenter/leftBottom.vue @@ -159,10 +159,13 @@ let totalPerson = ref("" as any); //考勤日环比 let totalPersonRhbRatio = ref("" as any); //获取出勤人员数据/考勤日环比 -const getPersonTypeAndEduStatistics = async () => { - const res: any = await getPersonTypeAndEduStatisticsApi({ - projectSn: store.sn - }); +const getPersonTypeAndEduStatistics = async (showLoading: boolean) => { + const res: any = await getPersonTypeAndEduStatisticsApi( + { + projectSn: store.sn + }, + showLoading + ); if (res.result) { console.log("出勤人员数据/考勤日环比", res); totalPerson.value = res.result.personType.attendancePerson.totalPerson; @@ -182,11 +185,14 @@ let xData = ref([] as any); let yData = ref([] as any); //获取总包出勤情况分析数据 let isFlag = ref(true as any); -const queryAttendanceOfEachCompany = async () => { - const res: any = await queryAttendanceOfEachCompanyApi({ - projectSn: store.sn, - isCountMainEnterprise: 1 - }); +const queryAttendanceOfEachCompany = async (showLoading: boolean) => { + const res: any = await queryAttendanceOfEachCompanyApi( + { + projectSn: store.sn, + isCountMainEnterprise: 1 + }, + showLoading + ); if (res.result) { console.log("获取总包出勤情况分析数据", res); projectCompanyWorkTotalList.value = res.result.projectCompanyWorkTotalList; @@ -364,10 +370,13 @@ let projectTotalProgress = ref("" as any); // 项目剩余天数 let projectSurplusDayNum = ref({} as any); // 获取项目总进度/项目剩余天数 -const getCountTaskProgress = async () => { - const res: any = await getCountTaskProgressApi({ - projectSn: store.sn - }); +const getCountTaskProgress = async (showLoading: boolean) => { + const res: any = await getCountTaskProgressApi( + { + projectSn: store.sn + }, + showLoading + ); if (res.result) { console.log("项目总进度/项目剩余天数", res); projectTotalProgress.value = res.result.projectTotalProgress + ""; @@ -377,28 +386,31 @@ const getCountTaskProgress = async () => { // 总包进度列表 let processList = ref([] as any); // 获取总包进度列表 -const queryCountEnterprise = async () => { - const res: any = await queryCountEnterpriseApi({ - projectSn: store.sn, - isCountMainEnterprise: 1 - }); +const queryCountEnterprise = async (showLoading: boolean) => { + const res: any = await queryCountEnterpriseApi( + { + projectSn: store.sn, + isCountMainEnterprise: 1 + }, + showLoading + ); if (res.result) { console.log("总包进度列表", res); processList.value = res.result; } }; -const setIntervalFn = () => { +const setIntervalFn = (showLoading: boolean) => { // drawBar() - getPersonTypeAndEduStatistics(); - queryAttendanceOfEachCompany(); - getCountTaskProgress(); - queryCountEnterprise(); + getPersonTypeAndEduStatistics(showLoading); + queryAttendanceOfEachCompany(showLoading); + getCountTaskProgress(showLoading); + queryCountEnterprise(showLoading); }; onMounted(async () => { - setIntervalFn(); + setIntervalFn(false); // 定时三十秒刷新 setInterval(() => { - setIntervalFn(); + setIntervalFn(true); }, 30000); }); diff --git a/src/views/commandScreen/commandCenter/leftTop.vue b/src/views/commandScreen/commandCenter/leftTop.vue index 12aeef4..ec690ef 100644 --- a/src/views/commandScreen/commandCenter/leftTop.vue +++ b/src/views/commandScreen/commandCenter/leftTop.vue @@ -15,50 +15,53 @@
- 项目名称： - {{ projectData.projectName || "" }} + 项目名称： + {{ projectData.projectName || "" }}
- 项目地址： - {{addressData()}} + 项目地址： + {{ addressData() }}
- 项目编号： - {{ projectData.projectNumber || "" }} + 项目编号： + {{ projectData.projectNumber || "" }}
-
-
-
+
+
+
项目经理： {{ projectData.projectManage || "" }}
-
+
联系电话： {{ projectData.projectTel || "" }}
-
-
+
+
建筑面积： - {{ projectData.projectAcreage || "" }} {{ projectData.projectAcreage ? '㎡' : "" }} + {{ projectData.projectAcreage || "" }} {{ projectData.projectAcreage ? "㎡" : "" }}
-
+
开工日期： {{ projectData.startWorkDate || "" }}
-
-
+
+
工程类别： - {{ projectData.projectType && projectTypeEnumList.length > 0 ? projectTypeEnumList[projectData.projectType - 1].name : "" }} -
- + {{ + projectData.projectType && projectTypeEnumList.length > 0 + ? projectTypeEnumList[projectData.projectType - 1].name + : "" + }} +
+
- +
+ 安全隐患治理
-
+ +
+ 危大工程
-
+ - 25分 -
- 安全教育 + +
+ 安全教育
-
+ +
+ 风险管理
-
+ +
+ AI警报
@@ -107,6 +112,8 @@ import Card from "@/components/card.vue"; import { ref, onMounted, watch } from "vue"; import { GlobalStore } from "@/stores"; import { ElMessage } from "element-plus"; +import * as echarts from "echarts"; +import 'echarts-liquidfill'; import { editProjectInfo, eidtProjectShowConfig, queryBySnData } from "@/api/modules/projectOverview"; import { getStatsDirectorateBigScreenApi, getStatScoreApi } from "@/api/modules/agjtCommandApi"; @@ -141,6 +148,401 @@ watch( } } ); + +//绘画安全隐患治理水波图 +function drawAqWater(){ + type EChartsOption = echarts.EChartsOption; + var chartDom = document.getElementById("waterAq")!; + var myChart = echarts.init(chartDom); + var option: EChartsOption; + // 配置项 + option = { + series: [ + { + type: "liquidFill", //设置图表类型 + // data: [0.6], // 设置水位，值为0到1之间 + data:[0.001,0.001,0.001,0.001,0.001], //设置水位，可以写多个值，用来设置多个水位 + // data: [ + // 0.2, + // { + // value: 0.3, // 图形数据写法二 + // direction: "left", // 水波运动方向 + // itemStyle: { + // color: "blue", // 水波颜色 + // opacity: 0.8, // 透明度 + // }, + // emphasis: { + // itemStyle: { + // color: "lightblue", // 鼠标移入时的水波颜色 + // opacity: 1, // 鼠标移入时的透明度 + // }, + // }, + // }, + // ], + waveAnimation:true,//是否开启水波动画, + amplitude: 15, // 设置振幅，值越大波形越尖 + waveLength:150,//水波的长度，值越大水波越长 + shape: "circle", //设置形状，可选为'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow' + direction: "right", //设置方向，可选为'left', 'right', 'top', 'bottom', + radius: "60%", // 设置图的大小 默认为50% + // color:['#1E90FF','#191970','#000080','#6495ED','#0000FF'] ,// 设置颜色，可以设置多个值，用来设置多个水位 + color:['#156ACF'] ,// 设置颜色，可以设置多个值，用来设置多个水位 + center:['50%','50%'],//中心点的位置1E90FF + // animationEasing:'linear', + animationEasing:'easeOut', + outline: { + borderDistance: 4, // 外边框距离 + itemStyle: { + borderWidth: 2, // 外边框宽度 + borderColor: "#156ACF", // 外边框颜色 + }, + }, + // // 水波样式 + // itemStyle:{ + // opacity:0.5, // 透明度 + // color:'red', // 统一配置水波的颜色 + // shadowBlur:10, // 水波阴影大小 + // shadowColor:'red', // 阴影颜色 + // shadowOffsetX:10, // 阴影水平偏移量 + // shadowOffsetY:10, // 阴影竖直偏移量 + // }, + backgroundStyle: { + color: "rgba(0,0,0,0)", // 背景色 + }, + label: { + normal: { + formatter: function(){ + return statScore.value.hiddenDangerScore + "分" + }, + textStyle: { + // color: "#6495ED", //蓝色 + color: "#fff", + insideColor: "#fff", + fontSize: 16, + + }, + }, + }, + }, + ], + }; + // 使用配置项设置图表 + myChart.setOption(option); +} +//绘画危大工程水波图 +function drawWdWater(){ + type EChartsOption = echarts.EChartsOption; + var chartDom = document.getElementById("waterWd")!; + var myChart = echarts.init(chartDom); + var option: EChartsOption; + // 配置项 + option = { + series: [ + { + type: "liquidFill", //设置图表类型 + // data: [0.6], // 设置水位，值为0到1之间 + data:[0.001,0.001,0.001,0.001,0.001], //设置水位，可以写多个值，用来设置多个水位 + // data: [ + // 0.2, + // { + // value: 0.3, // 图形数据写法二 + // direction: "left", // 水波运动方向 + // itemStyle: { + // color: "blue", // 水波颜色 + // opacity: 0.8, // 透明度 + // }, + // emphasis: { + // itemStyle: { + // color: "lightblue", // 鼠标移入时的水波颜色 + // opacity: 1, // 鼠标移入时的透明度 + // }, + // }, + // }, + // ], + waveAnimation:true,//是否开启水波动画, + amplitude: 15, // 设置振幅，值越大波形越尖 + waveLength:150,//水波的长度，值越大水波越长 + shape: "circle", //设置形状，可选为'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow' + direction: "right", //设置方向，可选为'left', 'right', 'top', 'bottom', + radius: "60%", // 设置图的大小 默认为50% + // color:['#1E90FF','#191970','#000080','#6495ED','#0000FF'] ,// 设置颜色，可以设置多个值，用来设置多个水位 + color:['#156ACF'] ,// 设置颜色，可以设置多个值，用来设置多个水位 + center:['50%','50%'],//中心点的位置1E90FF + // animationEasing:'linear', + animationEasing:'easeOut', + outline: { + borderDistance: 4, // 外边框距离 + itemStyle: { + borderWidth: 2, // 外边框宽度 + borderColor: "#156ACF", // 外边框颜色 + }, + }, + // // 水波样式 + // itemStyle:{ + // opacity:0.5, // 透明度 + // color:'red', // 统一配置水波的颜色 + // shadowBlur:10, // 水波阴影大小 + // shadowColor:'red', // 阴影颜色 + // shadowOffsetX:10, // 阴影水平偏移量 + // shadowOffsetY:10, // 阴影竖直偏移量 + // }, + backgroundStyle: { + color: "rgba(0,0,0,0)", // 背景色 + }, + label: { + normal: { + formatter: function(){ + return statScore.value.dangerEngScore + "分" + }, + textStyle: { + color: "#fff", + insideColor: "#fff", + fontSize: 16, + }, + }, + }, + }, + ], + }; + // 使用配置项设置图表 + myChart.setOption(option); +} +//绘画安全隐患治理水波图 +function drawJyWater(){ + type EChartsOption = echarts.EChartsOption; + var chartDom = document.getElementById("waterJy")!; + var myChart = echarts.init(chartDom); + var option: EChartsOption; + // 配置项 + option = { + series: [ + { + type: "liquidFill", //设置图表类型 + // data: [0.6], // 设置水位，值为0到1之间 + data:[0.001,0.001,0.001,0.001,0.001], //设置水位，可以写多个值，用来设置多个水位 + // data: [ + // 0.2, + // { + // value: 0.3, // 图形数据写法二 + // direction: "left", // 水波运动方向 + // itemStyle: { + // color: "blue", // 水波颜色 + // opacity: 0.8, // 透明度 + // }, + // emphasis: { + // itemStyle: { + // color: "lightblue", // 鼠标移入时的水波颜色 + // opacity: 1, // 鼠标移入时的透明度 + // }, + // }, + // }, + // ], + waveAnimation:true,//是否开启水波动画, + amplitude: 15, // 设置振幅，值越大波形越尖 + waveLength:150,//水波的长度，值越大水波越长 + shape: "circle", //设置形状，可选为'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow' + direction: "right", //设置方向，可选为'left', 'right', 'top', 'bottom', + radius: "60%", // 设置图的大小 默认为50% + // color:['#1E90FF','#191970','#000080','#6495ED','#0000FF'] ,// 设置颜色，可以设置多个值，用来设置多个水位 + color:['#156ACF'] ,// 设置颜色，可以设置多个值，用来设置多个水位 + center:['50%','50%'],//中心点的位置1E90FF + // animationEasing:'linear', + animationEasing:'easeOut', + outline: { + borderDistance: 4, // 外边框距离 + itemStyle: { + borderWidth: 2, // 外边框宽度 + borderColor: "#156ACF", // 外边框颜色 + }, + }, + // // 水波样式 + // itemStyle:{ + // opacity:0.5, // 透明度 + // color:'red', // 统一配置水波的颜色 + // shadowBlur:10, // 水波阴影大小 + // shadowColor:'red', // 阴影颜色 + // shadowOffsetX:10, // 阴影水平偏移量 + // shadowOffsetY:10, // 阴影竖直偏移量 + // }, + backgroundStyle: { + color: "rgba(0,0,0,0)", // 背景色 + }, + label: { + normal: { + formatter: function(){ + // return statScore.value + "分" + return "25分" + }, + textStyle: { + color: "#fff", + insideColor: "#fff", + fontSize: 16, + }, + }, + }, + }, + ], + }; + // 使用配置项设置图表 + myChart.setOption(option); +} +//绘画安全隐患治理水波图 +function drawFxWater(){ + type EChartsOption = echarts.EChartsOption; + var chartDom = document.getElementById("waterFx")!; + var myChart = echarts.init(chartDom); + var option: EChartsOption; + // 配置项 + option = { + series: [ + { + type: "liquidFill", //设置图表类型 + // data: [0.6], // 设置水位，值为0到1之间 + data:[0.001,0.001,0.001,0.001,0.001], //设置水位，可以写多个值，用来设置多个水位 + // data: [ + // 0.2, + // { + // value: 0.3, // 图形数据写法二 + // direction: "left", // 水波运动方向 + // itemStyle: { + // color: "blue", // 水波颜色 + // opacity: 0.8, // 透明度 + // }, + // emphasis: { + // itemStyle: { + // color: "lightblue", // 鼠标移入时的水波颜色 + // opacity: 1, // 鼠标移入时的透明度 + // }, + // }, + // }, + // ], + waveAnimation:true,//是否开启水波动画, + amplitude: 15, // 设置振幅，值越大波形越尖 + waveLength:150,//水波的长度，值越大水波越长 + shape: "circle", //设置形状，可选为'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow' + direction: "right", //设置方向，可选为'left', 'right', 'top', 'bottom', + radius: "60%", // 设置图的大小 默认为50% + // color:['#1E90FF','#191970','#000080','#6495ED','#0000FF'] ,// 设置颜色，可以设置多个值，用来设置多个水位 + color:['#156ACF'] ,// 设置颜色，可以设置多个值，用来设置多个水位 + center:['50%','50%'],//中心点的位置1E90FF + // animationEasing:'linear', + animationEasing:'easeOut', + outline: { + borderDistance: 4, // 外边框距离 + itemStyle: { + borderWidth: 2, // 外边框宽度 + borderColor: "#156ACF", // 外边框颜色 + }, + }, + // // 水波样式 + // itemStyle:{ + // opacity:0.5, // 透明度 + // color:'red', // 统一配置水波的颜色 + // shadowBlur:10, // 水波阴影大小 + // shadowColor:'red', // 阴影颜色 + // shadowOffsetX:10, // 阴影水平偏移量 + // shadowOffsetY:10, // 阴影竖直偏移量 + // }, + backgroundStyle: { + color: "rgba(0,0,0,0)", // 背景色 + }, + label: { + normal: { + formatter: function(){ + return statScore.value.riskScore + "分" + }, + textStyle: { + color: "#fff", + insideColor: "#fff", + fontSize: 16, + }, + }, + }, + }, + ], + }; + // 使用配置项设置图表 + myChart.setOption(option); +} +//绘画安全隐患治理水波图 +function drawZnWater(){ + type EChartsOption = echarts.EChartsOption; + var chartDom = document.getElementById("waterZn")!; + var myChart = echarts.init(chartDom); + var option: EChartsOption; + // 配置项 + option = { + series: [ + { + type: "liquidFill", //设置图表类型 + // data: [0.6], // 设置水位，值为0到1之间 + data:[0.001,0.001,0.001,0.001,0.001], //设置水位，可以写多个值，用来设置多个水位 + // data: [ + // 0.2, + // { + // value: 0.3, // 图形数据写法二 + // direction: "left", // 水波运动方向 + // itemStyle: { + // color: "blue", // 水波颜色 + // opacity: 0.8, // 透明度 + // }, + // emphasis: { + // itemStyle: { + // color: "lightblue", // 鼠标移入时的水波颜色 + // opacity: 1, // 鼠标移入时的透明度 + // }, + // }, + // }, + // ], + waveAnimation:true,//是否开启水波动画, + amplitude: 15, // 设置振幅，值越大波形越尖 + waveLength:150,//水波的长度，值越大水波越长 + shape: "circle", //设置形状，可选为'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow' + direction: "right", //设置方向，可选为'left', 'right', 'top', 'bottom', + radius: "60%", // 设置图的大小 默认为50% + // color:['#1E90FF','#191970','#000080','#6495ED','#0000FF'] ,// 设置颜色，可以设置多个值，用来设置多个水位 + color:['#156ACF'] ,// 设置颜色，可以设置多个值，用来设置多个水位 + center:['50%','50%'],//中心点的位置1E90FF + // animationEasing:'linear', + animationEasing:'easeOut', + outline: { + borderDistance: 4, // 外边框距离 + itemStyle: { + borderWidth: 2, // 外边框宽度 + borderColor: "#156ACF", // 外边框颜色 + }, + }, + // // 水波样式 + // itemStyle:{ + // opacity:0.5, // 透明度 + // color:'red', // 统一配置水波的颜色 + // shadowBlur:10, // 水波阴影大小 + // shadowColor:'red', // 阴影颜色 + // shadowOffsetX:10, // 阴影水平偏移量 + // shadowOffsetY:10, // 阴影竖直偏移量 + // }, + backgroundStyle: { + color: "rgba(0,0,0,0)", // 背景色 + }, + label: { + normal: { + formatter: function(){ + return statScore.value.aiScore + "分" + }, + textStyle: { + color: "#fff", + insideColor: "#fff", + fontSize: 16, + }, + }, + }, + }, + ], + }; + // 使用配置项设置图表 + myChart.setOption(option); +} + //效果图 const picUrl = ref("" as any); @@ -205,6 +607,12 @@ const getStatScore = async () => { const res = await getStatScoreApi({ projectSn: store.sn }); console.log("获取项目信息6666666666666666666666666666666666", res); statScore.value = res.result; + + drawAqWater() + drawWdWater() + drawJyWater() + drawFxWater() + drawZnWater() }; function boxStyle(item: any) { @@ -285,6 +693,7 @@ const setIntervalFn = () => { getQueryBySnData(); getStatsDirectorateBigScreen(); getStatScore(); + drawAqWater() }; onMounted(async () => { setIntervalFn();