diff --git a/.env.development b/.env.development index eeec5b4..57b613a 100644 --- a/.env.development +++ b/.env.development @@ -3,8 +3,8 @@ NODE_ENV = 'development' # 本地环境接口地址(/api/index.ts文件中使用) # 后端本地 -# VITE_API_URL = 'http://192.168.34.221:19111' -VITE_API_URL = 'http://192.168.34.221:9111' #雄哥本地 +VITE_API_URL = 'http://192.168.34.155:19111' +# VITE_API_URL = 'http://192.168.34.221:9111' #雄哥本地 # VITE_API_URL = 'http://182.90.224.237:51234' #雄哥远程 # VITE_API_URL = 'http://192.168.34.221:28889' # VITE_API_URL = 'http://121.196.214.246/api' diff --git a/src/api/modules/agjtOverviewApi.ts b/src/api/modules/agjtOverviewApi.ts index 0d3554f..9794ec8 100644 --- a/src/api/modules/agjtOverviewApi.ts +++ b/src/api/modules/agjtOverviewApi.ts @@ -15,3 +15,12 @@ export const videoHkVqdcountQualityApi = (params: {}, showLoading: boolean) => { export const videoFullCountFullApi = (params: {}, showLoading: boolean) => { return http.post(BASEURL + `/xmgl/xzHikvisionVideoFull/countFull`, params, { headers: { noLoading: showLoading } }); }; + +// 审批数据汇总 +export const getStatByStateApi = (params: {}, showLoading: boolean) => { + return http.get(BASEURL + `/xmgl/xzFlow/getStatByState`, params, { headers: { noLoading: showLoading } }); +}; + +export const getStatDetailByStateApi = (params: {}, showLoading: boolean) => { + return http.get(BASEURL + `/xmgl/xzFlow/getStatDetailByState`, params, { headers: { noLoading: showLoading } }); +}; diff --git a/src/config/config.ts b/src/config/config.ts index 6ff2206..c1a2a08 100644 --- a/src/config/config.ts +++ b/src/config/config.ts @@ -29,9 +29,9 @@ export const BASE_IMAGE_URL = import.meta.env.VITE_BASE_IMAGE_URL; // export const COMPANY: string = "as"; //鞍山项目 // export const COMPANY: string = "agjt"; //鞍钢集团 // export const COMPANY: string = "agjtLive"; //鞍钢集团现场大屏 -export const COMPANY: string = "agjtCommand"; //鞍钢集团指挥部大屏 +// export const COMPANY: string = "agjtCommand"; //鞍钢集团指挥部大屏 // export const COMPANY: string = "agjtProjectKanban"; //鞍钢集团项目看板大屏 -// export const COMPANY: string = "agjtOverviewScreen"; //鞍钢集团项目总览 +export const COMPANY: string = "agjtOverviewScreen"; //鞍钢集团项目总览 // export const COMPANY: string = "slx"; //苏立信项目 // export const COMPANY: string = "hfqc"; //合肥启程项目 // export const COMPANY: string = "jsyc"; // 江苏盐城项目 diff --git a/src/routers/modules/staticRouter.ts b/src/routers/modules/staticRouter.ts index a7c5fd8..083d2fd 100644 --- a/src/routers/modules/staticRouter.ts +++ b/src/routers/modules/staticRouter.ts @@ -25,9 +25,9 @@ export const staticRouter: RouteRecordRaw[] = [ path: "/large", name: "大屏", // // component: () => import("@/views/sevenLargeScreen/indexL.vue"), //七参数标准版 - component: () => import("@/views/commandScreen/indexCommand.vue"), //指挥部大屏 + // component: () => import("@/views/commandScreen/indexCommand.vue"), //指挥部大屏 // component: () => import("@/views/agjtLiveScreen/indexLive.vue"), //鞍钢现场大屏 - // component: () => import("@/views/overviewScreen/indexCommand.vue"), //总览大屏 + component: () => import("@/views/overviewScreen/indexCommand.vue"), //总览大屏 // component: () => import("@/views/agjtProjectKanban/indexL.vue"), //鞍钢集团项目看板大屏 // component: () => import("@/views/sevenLargeScreen/indexL_syhy.vue"), // 只有一级路由(盘锦、嘉兴、鄱湖美湾医疗项目需切换至该首页) children: [ diff --git a/src/views/agjtProjectKanban/comprehensiveManage/projectOverview/leftBottom.vue b/src/views/agjtProjectKanban/comprehensiveManage/projectOverview/leftBottom.vue index e55ab99..5da2551 100644 --- a/src/views/agjtProjectKanban/comprehensiveManage/projectOverview/leftBottom.vue +++ b/src/views/agjtProjectKanban/comprehensiveManage/projectOverview/leftBottom.vue @@ -1,92 +1,140 @@ +s diff --git a/src/views/agjtProjectKanban/comprehensiveManage/projectOverview/leftCenter.vue b/src/views/agjtProjectKanban/comprehensiveManage/projectOverview/leftCenter.vue index c6abc44..eed70d2 100644 --- a/src/views/agjtProjectKanban/comprehensiveManage/projectOverview/leftCenter.vue +++ b/src/views/agjtProjectKanban/comprehensiveManage/projectOverview/leftCenter.vue @@ -6,7 +6,7 @@
-
+
返回
@@ -20,7 +20,8 @@ import Card from "@/components/card.vue"; import { GlobalStore } from "@/stores"; import { COMPANY } from "@/config/config"; -import { ref, onMounted, nextTick } from "vue"; +import { ref, onMounted, nextTick, reactive } from "vue"; +import { getStatByStateApi, getStatDetailByStateApi } from "@/api/modules/agjtOverviewApi"; import { getPersonTypeAndEduStatisticsApi } from "@/api/modules/labor"; import * as echarts from "echarts"; const store = GlobalStore(); @@ -101,6 +102,17 @@ let dataList = ref([ } } ]); +const stateInfo = reactive({ + dataInfo: { + passed: 0, + rejected: 0, + underApproval: 0 + }, + dataDetail: { + num: 0, + name: "待审批" + } +}); // 审批数据汇总图形 const drawOneEchart = () => { const echartsOne = echarts.init(document.getElementById("echartsDataCountOne")); @@ -113,14 +125,16 @@ const drawOneEchart = () => { { name: "Access From", type: "pie", - radius: ["40%", "70%"], + top: "2%", + radius: ["35%", "60%"], avoidLabelOverlap: false, + minAngle: 35, label: { padding: [0, -50], lineHeight: 30, color: "#0FD4F1", show: true, - position: "outside", // 标签位置，'outside' 表示标签在扇形外侧 + // position: "outside", // 标签位置，'outside' 表示标签在扇形外侧 formatter: "{c|{c}}\n{b|{b}}", // 标签文本格式器，{b} 显示名称，{c} 数据值 rich: { b: { @@ -146,9 +160,9 @@ const drawOneEchart = () => { length2: 80 // 第二段标签线长度，默认为长度 }, data: [ - { value: 1048, name: "审批中" }, - { value: 735, name: "已驳回" }, - { value: 580, name: "已通过" } + { value: stateInfo.dataInfo.underApproval, name: "审批中" }, + { value: stateInfo.dataInfo.rejected, name: "已驳回" }, + { value: stateInfo.dataInfo.passed, name: "已通过" } ] } ] @@ -161,14 +175,19 @@ const drawOneEchart = () => { //图例点击事件 // 为饼图添加点击事件 - echartsOne.on("click", function (params:any) { + echartsOne.on("click", function (params: any) { // 控制台输出点击的数据的信息 - console.log(params,666); + console.log(params, 666); typeData.value = params.data; showOne.value = false; + const obj = { + 审批中: "RUNNING", + 已驳回: "REFUSE", + 已通过: "PASS" + } as any; nextTick(() => { - drawTwoEchart(); - }) + getStatDetailByState(false, obj[params.name]); + }); // 您可以在这里添加您的逻辑代码 // 例如：弹出自定义的对话框或者执行其他操作 }); @@ -183,8 +202,8 @@ const drawTwoEchart = () => { trigger: "item" }, title: { - text: typeData.value.value, - subtext: typeData.value.name, + text: stateInfo.dataDetail.num, + subtext: stateInfo.dataDetail.name, x: "29%", y: "40%", textAlign: "center", @@ -208,23 +227,26 @@ const drawTwoEchart = () => { title: "风险图", selectedMode: true, // 取消图例上的点击事件 icon: "circle", - type: "plain", + // type: "plain", orient: "vertical", - right: "10%", - top: "22%", + type: "scroll", //legend要多，进行分页处理 + right: "3%", + top: "20%", + // bottom: "12%", align: "left", - itemGap: 14, - itemWidth: 8, // 设置宽度 - itemHeight: 15, // 设置高度 + itemGap: 10, + itemWidth: 30, // 设置宽度 + itemHeight: 9, // 设置高度 symbolKeepAspect: false, textStyle: { + width: 150, color: "#000", rich: { name: { align: "left", fontSize: 14, - color: "#9BB7D4", - width: 60 + color: "#9BB7D4" + // width: 60 }, value: { align: "left", @@ -249,11 +271,7 @@ const drawTwoEchart = () => { if (data === dataList.value[i].name) { if (data == "无") return; let value = dataList.value[i].value; - const greatFaultLevelNumJzrRate = Number(dataList.value[i].greatFaultLevelNumJzrRate); - let percentage = - greatFaultLevelNumJzrRate >= 0 - ? greatFaultLevelNumJzrRate + "%" - : greatFaultLevelNumJzrRate.toString().substr(1) + "%"; + let percentage = dataList.value[i].percentage + "%"; return "{name| " + data + "} {gap| }" + `{value|${value}} {gap| } {value1|${percentage}}`; } } @@ -472,8 +490,64 @@ const drawTwoEchart = () => { echartsOne.resize(); }); }; -onMounted(async () => { +// 获取审批数据汇总 +const getStatByState = async (showLoading: boolean) => { + const res: any = await getStatByStateApi( + { + projectSn: store.sn + }, + showLoading + ); + if (res.result) { + console.log("审批数据汇总", res); + stateInfo.dataInfo = res.result; + } drawOneEchart(); +}; +// 获取审批数据汇总详情 +const getStatDetailByState = async (showLoading: boolean, state: string) => { + const res: any = await getStatDetailByStateApi( + { + projectSn: store.sn, + state: state + }, + showLoading + ); + if (res.result) { + console.log("审批数据汇总详情", res); + stateInfo.dataDetail = res.result[0]; + const colorList = ["#59F7CA", "#62F2F8", "#F2BA48", "#81C4E5", "#FDFDFC"]; + dataList.value = res.result + .map((item: any, index: number) => { + if (index == 0) return; + return { + enumType: "", + percentage: item.ratio, + value: item.num, + show: true, + name: item.name, + greatFaultLevelNumJzrRate: "", + rectificationNum: "", + rectificationNumJzrRate: "", + rectificationName: "", + itemStyle: { + color: colorList[index] + } + }; + }) + .filter((item: any) => item); + } + drawTwoEchart(); +}; +const setIntervalFn = (showLoading: boolean) => { + getStatByState(showLoading); +}; +onMounted(async () => { + setIntervalFn(false); + // 定时三十秒刷新 + setInterval(() => { + setIntervalFn(true); + }, 30000); }); diff --git a/src/views/overviewScreen/commandCenter/leftBottom.vue b/src/views/overviewScreen/commandCenter/leftBottom.vue index f380ee1..89330c3 100644 --- a/src/views/overviewScreen/commandCenter/leftBottom.vue +++ b/src/views/overviewScreen/commandCenter/leftBottom.vue @@ -126,6 +126,7 @@ import { onMounted, ref, reactive, nextTick } from "vue"; import Card from "@/components/card.vue"; import * as echarts from "echarts"; // import ECharts from "vue-echarts"; +import { getStatByStateApi, getStatDetailByStateApi } from "@/api/modules/agjtOverviewApi"; import { getPersonTypeAndEduStatisticsApi, getCountTaskProgressApi, queryCountEnterpriseApi } from "@/api/modules/agjtCommandApi"; // import type { TabsPaneContext, ElMessageBox } from "element-plus"; // import * as ElementPlusIconsVue from "@element-plus/icons-vue"; @@ -162,6 +163,17 @@ const getPersonTypeAndEduStatistics = async (showLoading: boolean) => { const drawInfo = reactive({ isFlag: false }); +const stateInfo = reactive({ + dataInfo: { + passed: 0, + rejected: 0, + underApproval: 0 + }, + dataDetail: { + num: 0, + name: "待审批" + } +}); //绘画柱状图 function drawBar() { console.log("---------------------bar--------"); @@ -176,14 +188,15 @@ function drawBar() { { name: "Access From", type: "pie", - radius: ["40%", "70%"], + radius: ["35%", "60%"], avoidLabelOverlap: false, + minAngle: 35, label: { padding: [0, -50], lineHeight: 30, color: "#0FD4F1", show: true, - position: "outside", // 标签位置，'outside' 表示标签在扇形外侧 + // position: "outside", // 标签位置，'outside' 表示标签在扇形外侧 formatter: "{c|{c}}\n{b|{b}}", // 标签文本格式器，{b} 显示名称，{c} 数据值 rich: { b: { @@ -209,9 +222,9 @@ function drawBar() { length2: 80 // 第二段标签线长度，默认为长度 }, data: [ - { value: 1048, name: "审批中" }, - { value: 735, name: "已驳回" }, - { value: 580, name: "已通过" } + { value: stateInfo.dataInfo.underApproval, name: "审批中" }, + { value: stateInfo.dataInfo.rejected, name: "已驳回" }, + { value: stateInfo.dataInfo.passed, name: "已通过" } ] } ] @@ -225,8 +238,13 @@ function drawBar() { echartsTest.on("click", (params: any) => { console.log(params, params.name); drawInfo.isFlag = true; + const obj = { + 审批中: "RUNNING", + 已驳回: "REFUSE", + 已通过: "PASS" + } as any; nextTick(() => { - drawBar2(); + getStatDetailByState(false, obj[params.name]); }); // echartsTest.setOption({ // legend: { selected: { [params.name]: true } } @@ -318,8 +336,8 @@ function drawBar2() { trigger: "item" }, title: { - text: "9900", - subtext: "待审批", + text: stateInfo.dataDetail.num, + subtext: stateInfo.dataDetail.name, x: "29%", y: "40%", textAlign: "center", @@ -343,23 +361,26 @@ function drawBar2() { title: "风险图", selectedMode: true, // 取消图例上的点击事件 icon: "circle", - type: "plain", + // type: "plain", orient: "vertical", - right: "10%", - top: "22%", + type: "scroll", //legend要多，进行分页处理 + right: "2%", + top: "20%", + // bottom: "12%", align: "left", - itemGap: 14, - itemWidth: 8, // 设置宽度 - itemHeight: 15, // 设置高度 + itemGap: 10, + itemWidth: 30, // 设置宽度 + itemHeight: 9, // 设置高度 symbolKeepAspect: false, textStyle: { + width: 150, color: "#000", rich: { name: { align: "left", fontSize: 14, - color: "#9BB7D4", - width: 60 + color: "#9BB7D4" + // width: 60 }, value: { align: "left", @@ -384,11 +405,7 @@ function drawBar2() { if (data === dataList.value[i].name) { if (data == "无") return; let value = dataList.value[i].value; - const greatFaultLevelNumJzrRate = Number(dataList.value[i].greatFaultLevelNumJzrRate); - let percentage = - greatFaultLevelNumJzrRate >= 0 - ? greatFaultLevelNumJzrRate + "%" - : greatFaultLevelNumJzrRate.toString().substr(1) + "%"; + let percentage = dataList.value[i].percentage + "%"; return "{name| " + data + "} {gap| }" + `{value|${value}} {gap| } {value1|${percentage}}`; } } @@ -682,8 +699,58 @@ const queryCountEnterprise = async (showLoading: boolean) => { // ]; } }; -const setIntervalFn = (showLoading: boolean) => { + +// 获取审批数据汇总 +const getStatByState = async (showLoading: boolean) => { + const res: any = await getStatByStateApi( + { + projectSn: store.sn + }, + showLoading + ); + if (res.result) { + console.log("审批数据汇总", res); + stateInfo.dataInfo = res.result; + } drawBar(); +}; +// 获取审批数据汇总详情 +const getStatDetailByState = async (showLoading: boolean, state: string) => { + const res: any = await getStatDetailByStateApi( + { + projectSn: store.sn, + state: state + }, + showLoading + ); + if (res.result) { + console.log("审批数据汇总详情", res); + stateInfo.dataDetail = res.result[0]; + const colorList = ["#59F7CA", "#62F2F8", "#F2BA48", "#81C4E5", "#FDFDFC"]; + dataList.value = res.result + .map((item: any, index: number) => { + if (index == 0) return; + return { + enumType: "", + percentage: item.ratio, + value: item.num, + show: true, + name: item.name, + greatFaultLevelNumJzrRate: "", + rectificationNum: "", + rectificationNumJzrRate: "", + rectificationName: "", + itemStyle: { + color: colorList[index] + } + }; + }) + .filter((item: any) => item); + } + drawBar2(); +}; +const setIntervalFn = (showLoading: boolean) => { + getStatByState(showLoading); getPersonTypeAndEduStatistics(showLoading); getCountTaskProgress(showLoading); queryCountEnterprise(showLoading);