admin/zhgdlarge
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

flx：对接总览大屏 审批数据汇总 数据看板 审批数据汇总和进度概况轮询

Browse Source
This commit is contained in:
X_Rian 2024-06-17 18:16:19 +08:00
parent 255fdd1d6e
commit b81ae01ab6
7 changed files with 614 additions and 249 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.env.development
View File

@ -3,8 +3,8 @@ NODE_ENV = 'development'
# 本地环境接口地址(/api/index.ts文件中使用) # 本地环境接口地址(/api/index.ts文件中使用)
# 后端本地 # 后端本地
# VITE_API_URL = 'http://192.168.34.221:19111' VITE_API_URL = 'http://192.168.34.155:19111'
VITE_API_URL = 'http://192.168.34.221:9111' #雄哥本地 # VITE_API_URL = 'http://192.168.34.221:9111' #雄哥本地
# VITE_API_URL = 'http://182.90.224.237:51234' #雄哥远程 # VITE_API_URL = 'http://182.90.224.237:51234' #雄哥远程
# VITE_API_URL = 'http://192.168.34.221:28889' # VITE_API_URL = 'http://192.168.34.221:28889'
# VITE_API_URL = 'http://121.196.214.246/api' # VITE_API_URL = 'http://121.196.214.246/api'

9
src/api/modules/agjtOverviewApi.ts
View File

@ -15,3 +15,12 @@ export const videoHkVqdcountQualityApi = (params: {}, showLoading: boolean) => {
export const videoFullCountFullApi = (params: {}, showLoading: boolean) => { export const videoFullCountFullApi = (params: {}, showLoading: boolean) => {
return http.post(BASEURL + `/xmgl/xzHikvisionVideoFull/countFull`, params, { headers: { noLoading: showLoading } }); 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 } });
};

4
src/config/config.ts
View File

@ -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 = "as"; //鞍山项目
// export const COMPANY: string = "agjt"; //鞍钢集团 // export const COMPANY: string = "agjt"; //鞍钢集团
// export const COMPANY: string = "agjtLive"; //鞍钢集团现场大屏 // export const COMPANY: string = "agjtLive"; //鞍钢集团现场大屏
export const COMPANY: string = "agjtCommand"; //鞍钢集团指挥部大屏 // export const COMPANY: string = "agjtCommand"; //鞍钢集团指挥部大屏
// export const COMPANY: string = "agjtProjectKanban"; //鞍钢集团项目看板大屏 // export const COMPANY: string = "agjtProjectKanban"; //鞍钢集团项目看板大屏
// export const COMPANY: string = "agjtOverviewScreen"; //鞍钢集团项目总览 export const COMPANY: string = "agjtOverviewScreen"; //鞍钢集团项目总览
// export const COMPANY: string = "slx"; //苏立信项目 // export const COMPANY: string = "slx"; //苏立信项目
// export const COMPANY: string = "hfqc"; //合肥启程项目 // export const COMPANY: string = "hfqc"; //合肥启程项目
// export const COMPANY: string = "jsyc"; // 江苏盐城项目 // export const COMPANY: string = "jsyc"; // 江苏盐城项目

4
src/routers/modules/staticRouter.ts
View File

@ -25,9 +25,9 @@ export const staticRouter: RouteRecordRaw[] = [
path: "/large", path: "/large",
name: "大屏", name: "大屏",
// // component: () => import("@/views/sevenLargeScreen/indexL.vue"), //七参数标准版 // // 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/agjtLiveScreen/indexLive.vue"), //鞍钢现场大屏
// component: () => import("@/views/overviewScreen/indexCommand.vue"), //总览大屏 component: () => import("@/views/overviewScreen/indexCommand.vue"), //总览大屏
// component: () => import("@/views/agjtProjectKanban/indexL.vue"), //鞍钢集团项目看板大屏 // component: () => import("@/views/agjtProjectKanban/indexL.vue"), //鞍钢集团项目看板大屏
// component: () => import("@/views/sevenLargeScreen/indexL_syhy.vue"), // 只有一级路由(盘锦、嘉兴、鄱湖美湾医疗项目需切换至该首页) // component: () => import("@/views/sevenLargeScreen/indexL_syhy.vue"), // 只有一级路由(盘锦、嘉兴、鄱湖美湾医疗项目需切换至该首页)
children: [ children: [

603
src/views/agjtProjectKanban/comprehensiveManage/projectOverview/leftBottom.vue
View File

@ -1,92 +1,140 @@
s
<template> <template>
<div class="leftTop"> <div class="leftBottom">
<Card title="进度概况"> <div class="content" style="backgound: black">
<div class="box-content"> <Card title="进度概况">
<div class="top-content"> <div class="cbLine1">
<div class="top-content-left"> <div style="display: flex">
项目总进度 <span>项目总进度:</span>
<span v-if="!projectData?.totalProgress" class="dayImg">0</span> <div class="numberCard" v-for="(item, i) in projectTotalProgress" :key="i">
<span v-else class="dayImg" v-for="item in projectData?.totalProgress" :key="item">{{ item }}</span> {{ item }}
<span style="margin-left: 4%">%</span> </div>
<span style="margin-left: 5px">%</span>
</div> </div>
<div class="top-content-right"> <div style="display: flex">
项目剩余天数 <span style="margin-left: 15px">项目剩余天数</span>
<span v-if="!projectData?.projectRestDayNum" class="dayImg">0</span> <div class="numberCard" v-for="(item, i) in projectSurplusDayNum" :key="i">
<span v-else class="dayImg" v-for="item in projectData?.projectRestDayNum" :key="item">{{ item }}</span> {{ item }}
<span style="margin-left: 4%">天</span> </div>
<span style="margin-left: 5px">天</span>
</div> </div>
</div> </div>
<div class="bottom-content"> <div class="cbProcess" v-if="processList.length >= 5">
<el-scrollbar class="list-box"> <!-- v-if="listData.length>0" :list="listData" -->
<div class="bottom-content-item" v-for="(item, index) in topRank" :key="index"> <vue3-seamless-scroll
<div v-if="index < 2" class="item-one-style" :class="'item-one-style' + (index + 1)">Top{{ index + 1 }}</div> v-if="processList.length > 0"
<div v-else class="item-one-style item-one-style3">Top{{ index + 1 }}</div> :list="processList"
<div class="item-two-style"> :speed="1"
<div class="two-part-one"> :limitScrollNum="5"
<span>{{ item.enterpriseName }}</span> :step="0.3"
<span>{{ item.changeAfter || 0 }}%</span> :hover="true"
class="scroll"
>
<div class="pItem" v-for="(item, i) in processList" :key="i">
<div class="pLeft">
<span :class="['plInner', 'plBgc' + ((i + 1) % 12)]">
<span style="margin-left: 10px">Top{{ i + 1 }}</span>
</span>
</div>
<div class="pRight">
<div class="prTop">
<div class="prtLeft">{{ item.enterpriseName }}</div>
<div class="prtRight">{{ item.changeAfter }}%</div>
</div> </div>
<div class="two-part-two"> <div class="prBottom">
<div class="bg-progress"></div> <div class="processLineBg">
<div <div :class="['processLine', 'plBtnBgc' + ((i + 1) % 12)]" :style="{ width: item.changeAfter + '%' }">
v-if="index < 2" <div class="processLineBtn"></div>
class="finished-progress" </div>
:class="'finished-progress' + (index + 1)" </div>
:style="{ width: item.changeAfter + '%' }"
></div>
<div
v-else
class="finished-progress finished-progress3"
:style="{ width: item.changeAfter + '%' }"
></div>
<div class="finished-point" :class="'finished-point' + (index + 1)" :style="{ left: item.changeAfter + '%' }"></div>
</div> </div>
</div> </div>
</div> </div>
</el-scrollbar> </vue3-seamless-scroll>
</div> </div>
<div class="cbProcess" v-else-if="processList.length == 0">
<div class="notoDta" v-if="processList.length == 0">
<img src="@/assets/images/noData.png" alt="" />
<p>暂无数据</p>
</div>
</div>
<div class="cbProcess" v-else>
<!-- v-if="listData.length>0" :list="listData" -->
<!-- <vue3-seamless-scroll
v-if="processList.length>0" :list="processList"
:speed="1" :limitScrollNum="5" :step="0.3" :hover="true" class="scroll"> -->
<div class="pItem" v-for="(item, i) in processList" :key="i">
<div class="pLeft">
<span :class="['plInner', 'plBgc' + ((i + 1) % 12)]">
<span style="margin-left: 10px">Top{{ i + 1 }}</span>
</span>
</div>
<div class="pRight">
<div class="prTop">
<div class="prtLeft">{{ item.enterpriseName }}</div>
<div class="prtRight">{{ item.changeAfter }}%</div>
</div>
<div class="prBottom">
<div class="processLineBg">
<div :class="['processLine', 'plBtnBgc' + ((i + 1) % 12)]" :style="{ width: item.changeAfter + '%' }">
<div class="processLineBtn"></div>
</div>
</div>
</div>
</div>
</div>
<!-- </vue3-seamless-scroll> -->
</div>
</Card>
</div>
<!-- <div class="content">
<div class="centerBottom">
<div class="cbTop"></div>
</div> </div>
</Card> </div> -->
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { onMounted, ref } from "vue";
import Card from "@/components/card.vue"; import Card from "@/components/card.vue";
import { ref, onMounted, watch } from "vue"; import * as echarts from "echarts";
// import ECharts from "vue-echarts";
import { getCountTaskProgressApi, queryCountEnterpriseApi } from "@/api/modules/agjtCommandApi"; import { getCountTaskProgressApi, queryCountEnterpriseApi } from "@/api/modules/agjtCommandApi";
// import type { TabsPaneContext, ElMessageBox } from "element-plus";
// import * as ElementPlusIconsVue from "@element-plus/icons-vue";
import { GlobalStore } from "@/stores"; import { GlobalStore } from "@/stores";
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
const store = GlobalStore(); const store = GlobalStore();
const projectData = ref({ // const activeName = ref("总包出勤情况分析");
totalProgress: "180", // const activeIndex = ref("0" as any);
projectRestDayNum: "180" //进度数据
}); // eslint-disable-next-line @typescript-eslint/no-unused-vars
const topRank = ref([ let listData = ref([
{ { a: "新地能源工程技术有限公司", b: "54" },
enterpriseName: "广东省某某科技有限公司(东北厂区)", { a: "中冶沈勘秦皇岛工程设计研究总院有限公司", b: "23" },
changeAfter: 70 { a: "鞍山电力实业有限公司", b: "49" },
}, { a: "鞍钢矿业资源利用（鞍山）有限公司", b: "35" },
{ { a: "上海建工五建集团有限公司", b: "34" },
enterpriseName: "广州市某公司名称(东北厂区)", { a: "辽宁普凡建设有限公司", b: "67" },
changeAfter: 65 { a: "沈阳隆基电磁科技股份有限公司", b: "56" },
}, { a: "中国科学院过程工程研究所", b: "78" },
{ { a: "宏大爆破工程集团有限责任公司", b: "45" },
enterpriseName: "企业名称(东北厂区)", { a: "鞍钢集团矿业设计研究院有限公司", b: "23" },
changeAfter: 60 { a: "辽宁电力能源发展集团监理有限公司鞍山分公司", b: "69" },
}, { a: "辽宁五寰特种材料与智能装备产业技术研究院有限公司", b: "27" },
{ { a: "中铝山东工程技术有限公司", b: "59" },
enterpriseName: "这里是第四名企业名称(东北厂区)", { a: "中国华冶科工集团有限公司", b: "14" },
changeAfter: 55 { a: "沈阳岩土工程技术测试开发有限公司", b: "38" },
}, { a: "永明项目管理有限公司", b: "41" }
{ ] as any);
enterpriseName: "这里是第四名企业名称(东北厂区)",
changeAfter: 55 // 进度情况分析
}, // 项目总进度
{ let projectTotalProgress = ref("" as any);
enterpriseName: "这里是第四名企业名称(东北厂区)", // 项目剩余天数
changeAfter: 55 let projectSurplusDayNum = ref({} as any);
} // 获取项目总进度/项目剩余天数
]);
// 项目进度情况
const getCountTaskProgress = async (showLoading: boolean) => { const getCountTaskProgress = async (showLoading: boolean) => {
const res: any = await getCountTaskProgressApi( const res: any = await getCountTaskProgressApi(
{ {
@ -95,11 +143,13 @@ const getCountTaskProgress = async (showLoading: boolean) => {
showLoading showLoading
); );
if (res.result) { if (res.result) {
console.log(res.result, "项目剩余天数"); console.log("项目总进度/项目剩余天数", res);
projectData.value.totalProgress = res.result.projectTotalProgress + ""; projectTotalProgress.value = res.result.projectTotalProgress + "";
projectData.value.projectRestDayNum = res.result.projectSurplusDayNum + ""; projectSurplusDayNum.value = res.result.projectSurplusDayNum + "";
} }
}; };
// 总包进度列表
let processList = ref([] as any);
// 获取总包进度列表 // 获取总包进度列表
const queryCountEnterprise = async (showLoading: boolean) => { const queryCountEnterprise = async (showLoading: boolean) => {
const res: any = await queryCountEnterpriseApi( const res: any = await queryCountEnterpriseApi(
@ -110,143 +160,164 @@ const queryCountEnterprise = async (showLoading: boolean) => {
showLoading showLoading
); );
if (res.result) { if (res.result) {
console.log(res.result, "总包项目进度"); console.log("总包进度列表", res);
topRank.value = res.result; processList.value = res.result;
// processList.value = [
// {
// enterpriseName: "广东省某某科技有限公司(东北厂区)",
// changeAfter: 70
// },
// {
// enterpriseName: "广州市某公司名称(东北厂区)",
// changeAfter: 65
// },
// {
// enterpriseName: "企业名称(东北厂区)",
// changeAfter: 60
// },
// {
// enterpriseName: "这里是第四名企业名称(东北厂区)",
// changeAfter: 55
// }
// ];
} }
}; };
onMounted(() => {
getCountTaskProgress(true); const setIntervalFn = (showLoading: boolean) => {
queryCountEnterprise(true); getCountTaskProgress(showLoading);
queryCountEnterprise(showLoading);
};
onMounted(async () => {
setIntervalFn(false);
// 定时三十秒刷新
setInterval(() => {
setIntervalFn(true);
}, 30000);
}); });
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.leftTop { :deep(.h-card .content) {
width: 100%; height: 79%;
padding: 10px 10px;
margin-top: 1%;
overflow: hidden;
}
.leftBottom {
// background: url("@/assets/images/commandScreen/card-left-bottom.png") no-repeat;
// background-size: 100% 100%;
height: 100%; height: 100%;
display: flex;
.box-content { .content {
// background-color: darkred;
height: 100%; height: 100%;
.top-content { // background: url("@/assets/images/overviewScreen/card-content.png") no-repeat;
// background-size: 100% 100%;
margin-top: 11px;
// margin: 10px 20px;
position: relative;
.cbLine1 {
color: #fff;
padding-top: 5px;
display: flex; display: flex;
align-items: center;
justify-content: space-between; justify-content: space-between;
margin: 0 2%; align-items: center;
padding-top: 3%; line-height: 30px;
> div { height: 30px;
width: 45%; font-size: 15px;
line-height: 32px;
font-size: 14px; .numberCard {
color: #fff; font-size: 15px;
.dayImg { padding: 0 8px;
margin-left: 2%; margin-left: 3px;
font-size: 26px; font-weight: bold;
display: inline-block; color: #47bcec;
width: 29px; background: url("@/assets/images/commandScreen/number-bg.png") no-repeat;
height: 32px; background-size: 100% 100%;
font-family: sadigitalNumber;
background: url("@/assets/images/comprehensiveManage/project1.png") no-repeat;
background-size: 100% 100%;
text-align: center;
color: #4ac0f3;
}
} }
} }
.bottom-content {
margin: 0 2%; .cbProcess {
margin-top: 6%; // padding-top: 5px;
height: 66%; // height: calc(100% - 55px);
.list-box{ overflow: hidden;
height: 100%;
} // background-color: #fff;
&-item:not(:last-child) { .pItem {
margin-bottom: 3%; width: 100%;
} height: 55px;
&-item {
display: flex; display: flex;
align-items: center; // background-color: #fff;
.item-one-style { font-size: 13px;
width: 60px; color: #fff;
height: 20px;
font-family: ABeeZee, ABeeZee; .pLeft {
font-weight: 400; width: 20%;
font-size: 14px; height: 55px;
color: #e3e9f3;
border-radius: 10px;
line-height: 20px;
text-align: center;
}
.item-one-style1 {
background: linear-gradient(90deg, #e24a3b 0%, rgba(226, 74, 59, 0) 100%);
}
.item-one-style2 {
background: linear-gradient(90deg, #c9b217 0%, rgba(201, 178, 23, 0) 100%);
}
.item-one-style3 {
background: linear-gradient(90deg, #3877f2 0%, rgba(56, 119, 242, 0) 100%);
}
.item-one-style4 {
background: linear-gradient(90deg, #3877f2 0%, rgba(56, 119, 242, 0) 100%);
}
.item-two-style {
flex: 1;
display: flex; display: flex;
flex-direction: column; justify-content: center;
color: white; align-items: center;
margin-left: 2%;
.two-part-one { .plInner {
width: 80px;
// text-align: center;
line-height: 30px;
// background-color: darkred;
border-radius: 100px;
}
}
.pRight {
width: 80%;
height: 55px;
.prTop {
// background-color: darkblue;
display: flex; display: flex;
align-items: center;
justify-content: space-between; justify-content: space-between;
> span:nth-child(1) { height: 30px;
font-family: ABeeZee, ABeeZee;
font-weight: 400; .prtLeft {
font-size: 14px; display: flex;
color: #e3e9f3; justify-content: center;
align-items: flex-end;
} }
> span:nth-child(2) {
font-family: ABeeZee, ABeeZee; .prtRight {
font-weight: 400; display: flex;
font-size: 18px; justify-content: center;
color: #eaeef5; align-items: flex-end;
} }
} }
.two-part-two {
position: relative; .prBottom {
.bg-progress { // background-color: purple;
position: absolute; height: 15px;
top: 3px;
left: 0; .processLineBg {
width: 100%; background-color: rgba(50, 50, 50, 0.5);
height: 3px;
background: #ffffff; // transform: scaleX(-1);
opacity: 0.2; .processLine {
} margin-top: 10px;
.finished-progress { // padding-top: 10px;
position: absolute; height: 5px;
top: 3px; display: flex;
left: 0; justify-content: flex-end;
height: 3px;
z-index: 10; .processLineBtn {
} width: 3px;
.finished-progress1 { height: 9px;
background: linear-gradient(270deg, #e24a3b 0%, rgba(226, 74, 59, 0) 100%); background: #fff;
} transform: translateY(-2px);
.finished-progress2 { }
background: linear-gradient(270deg, #c9b217 0%, rgba(201, 178, 23, 0) 100%); }
}
.finished-progress3 { // .plBgc1{
background: linear-gradient(270deg, #3877f2 0%, rgba(56, 119, 242, 0) 100%); // background: rgb(150,0,0);
} // background: linear-gradient(90deg, rgba(50,50,50,0.5) 10%, rgba(150,0,0,1) 100%);
.finished-progress4 { // }
background: linear-gradient(270deg, #3877f2 0%, rgba(56, 119, 242, 0) 100%);
}
.finished-point {
position: absolute;
top: 1px;
width: 3px;
height: 7px;
background: #ffffff;
} }
} }
} }
@ -254,7 +325,151 @@ onMounted(() => {
} }
} }
} }
::v-deep .h-card .content {
height: 80%; .scroll {
height: 100%;
width: 100%;
overflow: hidden;
}
.notoDta {
top: 35%;
width: 50%;
// left: 40%;
position: absolute;
text-align: center;
left: 50%;
transform: translateX(-50%);
img {
width: 40%;
margin: 5% 30%;
}
p {
color: #fff;
font-size: calc(100vw * 14 / 1920);
margin: -6% 30%;
}
}
.plBgc1 {
background: rgb(139, 0, 0);
background: linear-gradient(90deg, rgba(139, 0, 0, 1) 35%, rgba(0, 0, 0, 0.5) 100%);
}
.plBtnBgc1 {
background: rgb(139, 0, 0);
background: linear-gradient(90deg, rgba(50, 50, 50, 0.5) 10%, rgba(139, 0, 0, 1) 100%);
}
.plBgc2 {
background: rgb(155, 155, 0);
background: linear-gradient(90deg, rgba(155, 155, 0, 1) 35%, rgba(0, 0, 0, 0.5) 100%);
}
.plBtnBgc2 {
background: rgb(155, 155, 0);
background: linear-gradient(90deg, rgba(50, 50, 50, 0.5) 10%, rgba(155, 155, 0, 1) 100%);
}
.plBgc3 {
background: rgb(0, 0, 139);
background: linear-gradient(90deg, rgba(0, 0, 139, 1) 35%, rgba(0, 0, 0, 0.5) 100%);
}
.plBtnBgc3 {
background: rgb(0, 0, 139);
background: linear-gradient(90deg, rgba(50, 50, 50, 0.5) 10%, rgba(0, 0, 139, 1) 100%);
}
.plBgc4 {
background: rgb(139, 0, 139);
background: linear-gradient(90deg, rgba(139, 0, 139, 1) 35%, rgba(0, 0, 0, 0.5) 100%);
}
.plBtnBgc4 {
background: rgb(139, 0, 139);
background: linear-gradient(90deg, rgba(50, 50, 50, 0.5) 10%, rgba(139, 0, 139, 1) 100%);
}
.plBgc5 {
background: rgb(72, 61, 139);
background: linear-gradient(90deg, rgba(72, 61, 139, 1) 35%, rgba(0, 0, 0, 0.5) 100%);
}
.plBtnBgc5 {
background: rgb(72, 61, 139);
background: linear-gradient(90deg, rgba(50, 50, 50, 0.5) 10%, rgba(72, 61, 139, 1) 100%);
}
.plBgc6 {
background: rgb(0, 206, 209);
background: linear-gradient(90deg, rgba(0, 206, 209, 1) 35%, rgba(0, 0, 0, 0.5) 100%);
}
.plBtnBgc6 {
background: rgb(0, 206, 209);
background: linear-gradient(90deg, rgba(50, 50, 50, 0.5) 10%, rgba(0, 206, 209, 1) 100%);
}
.plBgc7 {
background: rgb(47, 79, 79);
background: linear-gradient(90deg, rgba(47, 79, 79, 1) 35%, rgba(0, 0, 0, 0.5) 100%);
}
.plBtnBgc7 {
background: rgb(47, 79, 79);
background: linear-gradient(90deg, rgba(50, 50, 50, 0.5) 10%, rgba(47, 79, 79, 1) 100%);
}
.plBgc8 {
background: rgb(0, 100, 0);
background: linear-gradient(90deg, rgba(0, 100, 0, 1) 35%, rgba(0, 0, 0, 0.5) 100%);
}
.plBtnBgc8 {
background: rgb(0, 100, 0);
background: linear-gradient(90deg, rgba(50, 50, 50, 0.5) 10%, rgba(0, 100, 0, 1) 100%);
}
.plBgc9 {
background: rgb(189, 183, 107);
background: linear-gradient(90deg, rgba(189, 183, 107, 1) 35%, rgba(0, 0, 0, 0.5) 100%);
}
.plBtnBgc9 {
background: rgb(189, 183, 107);
background: linear-gradient(90deg, rgba(50, 50, 50, 0.5) 10%, rgba(189, 183, 107, 1) 100%);
}
.plBgc10 {
background: rgb(255, 140, 0);
background: linear-gradient(90deg, rgba(255, 140, 0, 1) 35%, rgba(0, 0, 0, 0.5) 100%);
}
.plBtnBgc10 {
background: rgb(255, 140, 0);
background: linear-gradient(90deg, rgba(50, 50, 50, 0.5) 10%, rgba(255, 140, 0, 1) 100%);
}
.plBgc11 {
background: rgb(233, 150, 122);
background: linear-gradient(90deg, rgba(233, 150, 122, 1) 35%, rgba(0, 0, 0, 0.5) 100%);
}
.plBtnBgc11 {
background: rgb(233, 150, 122);
background: linear-gradient(90deg, rgba(50, 50, 50, 0.5) 10%, rgba(233, 150, 122, 1) 100%);
}
.plBgc0 {
background: rgb(0, 139, 139);
background: linear-gradient(90deg, rgba(0, 139, 139, 1) 35%, rgba(0, 0, 0, 0.5) 100%);
}
.plBtnBgc0 {
background: rgb(0, 139, 139);
background: linear-gradient(90deg, rgba(50, 50, 50, 0.5) 10%, rgba(0, 139, 139, 1) 100%);
} }
</style> </style>

128
src/views/agjtProjectKanban/comprehensiveManage/projectOverview/leftCenter.vue
View File

@ -6,7 +6,7 @@
<div id="echartsDataCountOne" style="width: 100%; height: 100%"></div> <div id="echartsDataCountOne" style="width: 100%; height: 100%"></div>
</div> </div>
<div class="box-content" v-show="!showOne"> <div class="box-content" v-show="!showOne">
<div class="change-echart" @click="showOne = true;"> <div class="change-echart" @click="showOne = true">
<el-icon color="#54B5E9" size="22"><ArrowLeft /></el-icon> <el-icon color="#54B5E9" size="22"><ArrowLeft /></el-icon>
<span>返回</span> <span>返回</span>
</div> </div>
@ -20,7 +20,8 @@
import Card from "@/components/card.vue"; import Card from "@/components/card.vue";
import { GlobalStore } from "@/stores"; import { GlobalStore } from "@/stores";
import { COMPANY } from "@/config/config"; 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 { getPersonTypeAndEduStatisticsApi } from "@/api/modules/labor";
import * as echarts from "echarts"; import * as echarts from "echarts";
const store = GlobalStore(); 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 drawOneEchart = () => {
const echartsOne = echarts.init(document.getElementById("echartsDataCountOne")); const echartsOne = echarts.init(document.getElementById("echartsDataCountOne"));
@ -113,14 +125,16 @@ const drawOneEchart = () => {
{ {
name: "Access From", name: "Access From",
type: "pie", type: "pie",
radius: ["40%", "70%"], top: "2%",
radius: ["35%", "60%"],
avoidLabelOverlap: false, avoidLabelOverlap: false,
minAngle: 35,
label: { label: {
padding: [0, -50], padding: [0, -50],
lineHeight: 30, lineHeight: 30,
color: "#0FD4F1", color: "#0FD4F1",
show: true, show: true,
position: "outside", // 标签位置，'outside' 表示标签在扇形外侧 // position: "outside", // 标签位置，'outside' 表示标签在扇形外侧
formatter: "{c|{c}}\n{b|{b}}", // 标签文本格式器，{b} 显示名称，{c} 数据值 formatter: "{c|{c}}\n{b|{b}}", // 标签文本格式器，{b} 显示名称，{c} 数据值
rich: { rich: {
b: { b: {
@ -146,9 +160,9 @@ const drawOneEchart = () => {
length2: 80 // 第二段标签线长度，默认为长度 length2: 80 // 第二段标签线长度，默认为长度
}, },
data: [ data: [
{ value: 1048, name: "审批中" }, { value: stateInfo.dataInfo.underApproval, name: "审批中" },
{ value: 735, name: "已驳回" }, { value: stateInfo.dataInfo.rejected, name: "已驳回" },
{ value: 580, 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; typeData.value = params.data;
showOne.value = false; showOne.value = false;
const obj = {
审批中: "RUNNING",
已驳回: "REFUSE",
已通过: "PASS"
} as any;
nextTick(() => { nextTick(() => {
drawTwoEchart(); getStatDetailByState(false, obj[params.name]);
}) });
// 您可以在这里添加您的逻辑代码 // 您可以在这里添加您的逻辑代码
// 例如：弹出自定义的对话框或者执行其他操作 // 例如：弹出自定义的对话框或者执行其他操作
}); });
@ -183,8 +202,8 @@ const drawTwoEchart = () => {
trigger: "item" trigger: "item"
}, },
title: { title: {
text: typeData.value.value, text: stateInfo.dataDetail.num,
subtext: typeData.value.name, subtext: stateInfo.dataDetail.name,
x: "29%", x: "29%",
y: "40%", y: "40%",
textAlign: "center", textAlign: "center",
@ -208,23 +227,26 @@ const drawTwoEchart = () => {
title: "风险图", title: "风险图",
selectedMode: true, // 取消图例上的点击事件 selectedMode: true, // 取消图例上的点击事件
icon: "circle", icon: "circle",
type: "plain", // type: "plain",
orient: "vertical", orient: "vertical",
right: "10%", type: "scroll", //legend要多，进行分页处理
top: "22%", right: "3%",
top: "20%",
// bottom: "12%",
align: "left", align: "left",
itemGap: 14, itemGap: 10,
itemWidth: 8, // 设置宽度 itemWidth: 30, // 设置宽度
itemHeight: 15, // 设置高度 itemHeight: 9, // 设置高度
symbolKeepAspect: false, symbolKeepAspect: false,
textStyle: { textStyle: {
width: 150,
color: "#000", color: "#000",
rich: { rich: {
name: { name: {
align: "left", align: "left",
fontSize: 14, fontSize: 14,
color: "#9BB7D4", color: "#9BB7D4"
width: 60 // width: 60
}, },
value: { value: {
align: "left", align: "left",
@ -249,11 +271,7 @@ const drawTwoEchart = () => {
if (data === dataList.value[i].name) { if (data === dataList.value[i].name) {
if (data == "无") return; if (data == "无") return;
let value = dataList.value[i].value; let value = dataList.value[i].value;
const greatFaultLevelNumJzrRate = Number(dataList.value[i].greatFaultLevelNumJzrRate); let percentage = dataList.value[i].percentage + "%";
let percentage =
greatFaultLevelNumJzrRate >= 0
? greatFaultLevelNumJzrRate + "%"
: greatFaultLevelNumJzrRate.toString().substr(1) + "%";
return "{name| " + data + "} {gap| }" + `{value|${value}} {gap| } {value1|${percentage}}`; return "{name| " + data + "} {gap| }" + `{value|${value}} {gap| } {value1|${percentage}}`;
} }
} }
@ -472,8 +490,64 @@ const drawTwoEchart = () => {
echartsOne.resize(); 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(); 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);
}); });
</script> </script>

111
src/views/overviewScreen/commandCenter/leftBottom.vue
View File

@ -126,6 +126,7 @@ import { onMounted, ref, reactive, nextTick } from "vue";
import Card from "@/components/card.vue"; import Card from "@/components/card.vue";
import * as echarts from "echarts"; import * as echarts from "echarts";
// import ECharts from "vue-echarts"; // import ECharts from "vue-echarts";
import { getStatByStateApi, getStatDetailByStateApi } from "@/api/modules/agjtOverviewApi";
import { getPersonTypeAndEduStatisticsApi, getCountTaskProgressApi, queryCountEnterpriseApi } from "@/api/modules/agjtCommandApi"; import { getPersonTypeAndEduStatisticsApi, getCountTaskProgressApi, queryCountEnterpriseApi } from "@/api/modules/agjtCommandApi";
// import type { TabsPaneContext, ElMessageBox } from "element-plus"; // import type { TabsPaneContext, ElMessageBox } from "element-plus";
// import * as ElementPlusIconsVue from "@element-plus/icons-vue"; // import * as ElementPlusIconsVue from "@element-plus/icons-vue";
@ -162,6 +163,17 @@ const getPersonTypeAndEduStatistics = async (showLoading: boolean) => {
const drawInfo = reactive({ const drawInfo = reactive({
isFlag: false isFlag: false
}); });
const stateInfo = reactive({
dataInfo: {
passed: 0,
rejected: 0,
underApproval: 0
},
dataDetail: {
num: 0,
name: "待审批"
}
});
//绘画柱状图 //绘画柱状图
function drawBar() { function drawBar() {
console.log("---------------------bar--------"); console.log("---------------------bar--------");
@ -176,14 +188,15 @@ function drawBar() {
{ {
name: "Access From", name: "Access From",
type: "pie", type: "pie",
radius: ["40%", "70%"], radius: ["35%", "60%"],
avoidLabelOverlap: false, avoidLabelOverlap: false,
minAngle: 35,
label: { label: {
padding: [0, -50], padding: [0, -50],
lineHeight: 30, lineHeight: 30,
color: "#0FD4F1", color: "#0FD4F1",
show: true, show: true,
position: "outside", // 标签位置，'outside' 表示标签在扇形外侧 // position: "outside", // 标签位置，'outside' 表示标签在扇形外侧
formatter: "{c|{c}}\n{b|{b}}", // 标签文本格式器，{b} 显示名称，{c} 数据值 formatter: "{c|{c}}\n{b|{b}}", // 标签文本格式器，{b} 显示名称，{c} 数据值
rich: { rich: {
b: { b: {
@ -209,9 +222,9 @@ function drawBar() {
length2: 80 // 第二段标签线长度，默认为长度 length2: 80 // 第二段标签线长度，默认为长度
}, },
data: [ data: [
{ value: 1048, name: "审批中" }, { value: stateInfo.dataInfo.underApproval, name: "审批中" },
{ value: 735, name: "已驳回" }, { value: stateInfo.dataInfo.rejected, name: "已驳回" },
{ value: 580, name: "已通过" } { value: stateInfo.dataInfo.passed, name: "已通过" }
] ]
} }
] ]
@ -225,8 +238,13 @@ function drawBar() {
echartsTest.on("click", (params: any) => { echartsTest.on("click", (params: any) => {
console.log(params, params.name); console.log(params, params.name);
drawInfo.isFlag = true; drawInfo.isFlag = true;
const obj = {
审批中: "RUNNING",
已驳回: "REFUSE",
已通过: "PASS"
} as any;
nextTick(() => { nextTick(() => {
drawBar2(); getStatDetailByState(false, obj[params.name]);
}); });
// echartsTest.setOption({ // echartsTest.setOption({
// legend: { selected: { [params.name]: true } } // legend: { selected: { [params.name]: true } }
@ -318,8 +336,8 @@ function drawBar2() {
trigger: "item" trigger: "item"
}, },
title: { title: {
text: "9900", text: stateInfo.dataDetail.num,
subtext: "待审批", subtext: stateInfo.dataDetail.name,
x: "29%", x: "29%",
y: "40%", y: "40%",
textAlign: "center", textAlign: "center",
@ -343,23 +361,26 @@ function drawBar2() {
title: "风险图", title: "风险图",
selectedMode: true, // 取消图例上的点击事件 selectedMode: true, // 取消图例上的点击事件
icon: "circle", icon: "circle",
type: "plain", // type: "plain",
orient: "vertical", orient: "vertical",
right: "10%", type: "scroll", //legend要多，进行分页处理
top: "22%", right: "2%",
top: "20%",
// bottom: "12%",
align: "left", align: "left",
itemGap: 14, itemGap: 10,
itemWidth: 8, // 设置宽度 itemWidth: 30, // 设置宽度
itemHeight: 15, // 设置高度 itemHeight: 9, // 设置高度
symbolKeepAspect: false, symbolKeepAspect: false,
textStyle: { textStyle: {
width: 150,
color: "#000", color: "#000",
rich: { rich: {
name: { name: {
align: "left", align: "left",
fontSize: 14, fontSize: 14,
color: "#9BB7D4", color: "#9BB7D4"
width: 60 // width: 60
}, },
value: { value: {
align: "left", align: "left",
@ -384,11 +405,7 @@ function drawBar2() {
if (data === dataList.value[i].name) { if (data === dataList.value[i].name) {
if (data == "无") return; if (data == "无") return;
let value = dataList.value[i].value; let value = dataList.value[i].value;
const greatFaultLevelNumJzrRate = Number(dataList.value[i].greatFaultLevelNumJzrRate); let percentage = dataList.value[i].percentage + "%";
let percentage =
greatFaultLevelNumJzrRate >= 0
? greatFaultLevelNumJzrRate + "%"
: greatFaultLevelNumJzrRate.toString().substr(1) + "%";
return "{name| " + data + "} {gap| }" + `{value|${value}} {gap| } {value1|${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(); 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); getPersonTypeAndEduStatistics(showLoading);
getCountTaskProgress(showLoading); getCountTaskProgress(showLoading);
queryCountEnterprise(showLoading); queryCountEnterprise(showLoading);