1105 lines
26 KiB
Vue
1105 lines
26 KiB
Vue
s
|
||
<template>
|
||
<div class="leftBottom">
|
||
<!-- <div class="header">
|
||
<div class="hLeft"><span></span></div>
|
||
</div> -->
|
||
<div class="content">
|
||
<Card title="审批数据汇总">
|
||
<div class="diy-title">（近七日）</div>
|
||
<div class="barContent" v-if="!drawInfo.isFlag">
|
||
<div id="bar" style="width: 100%; height: 100%" ref="bar"></div>
|
||
</div>
|
||
<div class="barContent" v-else>
|
||
<div class="gobackbar" @click="goBackBar()">
|
||
<div class="left-dap"></div>
|
||
返回
|
||
</div>
|
||
<div id="bar2" style="width: 100%; height: 100%" ref="bar2"></div>
|
||
</div>
|
||
<!-- <div class="cbProcess" v-if="!isFlag">
|
||
<div class="notoDta" v-if="projectCompanyWorkTotalList.length == 0">
|
||
<img src="@/assets/images/noData.png" style="margin-top: 100px" alt="" />
|
||
<p>暂无数据</p>
|
||
</div>
|
||
</div> -->
|
||
</Card>
|
||
</div>
|
||
<!-- <div class="header">
|
||
<div class="hLeft">进度概况</div>
|
||
</div> -->
|
||
<div class="content" style="backgound: black">
|
||
<Card title="进度概况">
|
||
<div class="cbLine1">
|
||
<div style="display: flex">
|
||
<span>项目总进度:</span>
|
||
<div class="numberCard" v-for="(item, i) in projectTotalProgress" :key="i">
|
||
{{ item }}
|
||
</div>
|
||
<span style="margin-left: 5px">%</span>
|
||
</div>
|
||
<div style="display: flex">
|
||
<span style="margin-left: 15px">项目剩余天数</span>
|
||
<div class="numberCard" v-for="(item, i) in projectSurplusDayNum" :key="i">
|
||
{{ item }}
|
||
</div>
|
||
<span style="margin-left: 5px">天</span>
|
||
</div>
|
||
</div>
|
||
<div class="cbProcess" v-if="processList.length >= 5">
|
||
<!-- 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>
|
||
<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> -->
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
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";
|
||
import { GlobalStore } from "@/stores";
|
||
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
|
||
const store = GlobalStore();
|
||
// const activeName = ref("总包出勤情况分析");
|
||
// const activeIndex = ref("0" as any);
|
||
//出勤人员数据
|
||
let totalPerson = ref("" as any);
|
||
//考勤日环比
|
||
let totalPersonRhbRatio = ref("" as any);
|
||
//获取出勤人员数据/考勤日环比
|
||
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;
|
||
// if(totalPerson.value.length < 4){
|
||
// let temp = 4-totalPerson.value.length
|
||
// for(let i = 0;i<temp;i++){
|
||
// totalPerson.value = "0" + totalPerson.value
|
||
// }
|
||
// }
|
||
totalPersonRhbRatio.value = res.result.personType.attendancePerson.totalPersonRhbRatio;
|
||
}
|
||
};
|
||
|
||
const drawInfo = reactive({
|
||
isFlag: false
|
||
});
|
||
const stateInfo = reactive({
|
||
dataInfo: {
|
||
passed: 0,
|
||
rejected: 0,
|
||
underApproval: 0
|
||
},
|
||
dataDetail: {
|
||
num: 0,
|
||
name: "待审批"
|
||
}
|
||
});
|
||
//绘画柱状图
|
||
function drawBar() {
|
||
console.log("---------------------bar--------");
|
||
const echartsTest = echarts.init(document.getElementById("bar"));
|
||
// const maxCount: any = specialList.value.sort((a: any, b: any) => b.totalNum - a.totalNum);
|
||
let option = {
|
||
color: ["#26FFCB", "#24CBFF", "#2651FF"],
|
||
tooltip: {
|
||
trigger: "item"
|
||
},
|
||
series: [
|
||
{
|
||
name: "Access From",
|
||
type: "pie",
|
||
radius: ["35%", "60%"],
|
||
avoidLabelOverlap: false,
|
||
minAngle: 35,
|
||
label: {
|
||
padding: [0, -50],
|
||
lineHeight: 30,
|
||
color: "#0FD4F1",
|
||
show: true,
|
||
// position: "outside", // 标签位置，'outside' 表示标签在扇形外侧
|
||
formatter: "{c|{c}}\n{b|{b}}", // 标签文本格式器，{b} 显示名称，{c} 数据值
|
||
rich: {
|
||
b: {
|
||
fontFamily: "ABeeZee, ABeeZee",
|
||
fontWeight: "400",
|
||
fontSize: 15,
|
||
color: "#FFFFFF"
|
||
},
|
||
c: {
|
||
fontFamily: "ABeeZee, ABeeZee",
|
||
fontWeight: "400",
|
||
fontSize: 21,
|
||
color: "#0FD4F1"
|
||
}
|
||
}
|
||
},
|
||
labelLine: {
|
||
lineStyle: {
|
||
color: "#3FBEFF"
|
||
},
|
||
show: true, // 是否显示标签线
|
||
length: 30, // 标签线长度
|
||
length2: 80 // 第二段标签线长度，默认为长度
|
||
},
|
||
data: [
|
||
{ value: stateInfo.dataInfo.underApproval, name: "审批中" },
|
||
{ value: stateInfo.dataInfo.rejected, name: "已驳回" },
|
||
{ value: stateInfo.dataInfo.passed, name: "已通过" }
|
||
]
|
||
}
|
||
]
|
||
};
|
||
echartsTest.setOption(option, true);
|
||
window.addEventListener("resize", () => {
|
||
console.log(echartsTest);
|
||
echartsTest.resize();
|
||
});
|
||
//图例点击事件
|
||
echartsTest.on("click", (params: any) => {
|
||
console.log(params, params.name);
|
||
drawInfo.isFlag = true;
|
||
const obj = {
|
||
审批中: "RUNNING",
|
||
已驳回: "REFUSE",
|
||
已通过: "PASS"
|
||
} as any;
|
||
nextTick(() => {
|
||
getStatDetailByState(false, obj[params.name]);
|
||
});
|
||
// echartsTest.setOption({
|
||
// legend: { selected: { [params.name]: true } }
|
||
// });
|
||
});
|
||
}
|
||
const goBackBar = () => {
|
||
drawInfo.isFlag = false;
|
||
nextTick(() => {
|
||
drawBar();
|
||
});
|
||
};
|
||
let dataList = ref([
|
||
{
|
||
enumType: "",
|
||
value: 142,
|
||
show: true,
|
||
name: "人员",
|
||
greatFaultLevelNumJzrRate: "",
|
||
rectificationNum: "",
|
||
rectificationNumJzrRate: "",
|
||
rectificationName: "",
|
||
itemStyle: {
|
||
color: "#59F7CA"
|
||
}
|
||
},
|
||
{
|
||
enumType: "",
|
||
value: 246,
|
||
show: true,
|
||
name: "车辆",
|
||
greatFaultLevelNumJzrRate: "",
|
||
rectificationNum: "",
|
||
rectificationNumJzrRate: "",
|
||
rectificationName: "",
|
||
itemStyle: {
|
||
color: "#62F2F8"
|
||
}
|
||
},
|
||
{
|
||
enumType: "",
|
||
value: 315,
|
||
show: true,
|
||
name: "材料",
|
||
greatFaultLevelNumJzrRate: "",
|
||
rectificationNum: "",
|
||
rectificationNumJzrRate: "",
|
||
rectificationName: "",
|
||
itemStyle: {
|
||
color: "#F2BA48"
|
||
}
|
||
},
|
||
{
|
||
enumType: "",
|
||
value: 420,
|
||
show: true,
|
||
name: "访客",
|
||
greatFaultLevelNumJzrRate: "",
|
||
rectificationNum: "",
|
||
rectificationNumJzrRate: "",
|
||
rectificationName: "",
|
||
itemStyle: {
|
||
color: "#81C4E5"
|
||
}
|
||
},
|
||
{
|
||
enumType: "",
|
||
value: 263,
|
||
show: true,
|
||
name: "特殊作业",
|
||
greatFaultLevelNumJzrRate: "",
|
||
rectificationNum: "",
|
||
rectificationNumJzrRate: "",
|
||
rectificationName: "",
|
||
itemStyle: {
|
||
color: "#FDFDFC"
|
||
}
|
||
}
|
||
]);
|
||
//绘画柱状图
|
||
function drawBar2() {
|
||
console.log("---------------------bar--------");
|
||
const echartsTest = echarts.init(document.getElementById("bar2"));
|
||
// const maxCount: any = specialList.value.sort((a: any, b: any) => b.totalNum - a.totalNum);
|
||
let option = {
|
||
color: ["#59F7CA", "#62F2F8", "#F2BA48", "#81C4E5", "#FDFDFC"],
|
||
animation: false, // 取消动画
|
||
tooltip: {
|
||
trigger: "item"
|
||
},
|
||
title: {
|
||
text: stateInfo.dataDetail.num,
|
||
subtext: stateInfo.dataDetail.name,
|
||
x: "29%",
|
||
y: "40%",
|
||
textAlign: "center",
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontSize: 20,
|
||
fontWeight: "normal",
|
||
// align: "center",
|
||
fontFamily: "ABeeZee, ABeeZee"
|
||
},
|
||
subtextStyle: {
|
||
color: "#9BB7D4",
|
||
fontSize: 16,
|
||
fontWeight: "normal",
|
||
fontFamily: "ABeeZee, ABeeZee"
|
||
// align: "center"
|
||
}
|
||
},
|
||
legend: [
|
||
{
|
||
title: "风险图",
|
||
selectedMode: true, // 取消图例上的点击事件
|
||
icon: "circle",
|
||
// type: "plain",
|
||
orient: "vertical",
|
||
type: "scroll", //legend要多，进行分页处理
|
||
right: "2%",
|
||
top: "20%",
|
||
// bottom: "12%",
|
||
align: "left",
|
||
itemGap: 12,
|
||
itemWidth: 30, // 设置宽度
|
||
itemHeight: 9, // 设置高度
|
||
symbolKeepAspect: false,
|
||
textStyle: {
|
||
width: 150,
|
||
color: "#000",
|
||
rich: {
|
||
name: {
|
||
align: "left",
|
||
fontSize: 14,
|
||
color: "#9BB7D4"
|
||
// width: 60
|
||
},
|
||
value: {
|
||
align: "left",
|
||
fontSize: 16,
|
||
color: "#9BB7D4"
|
||
},
|
||
value1: {
|
||
align: "left",
|
||
fontSize: 16,
|
||
color: "#FFFFFF"
|
||
}
|
||
}
|
||
},
|
||
data: dataList.value.map((item, index) => {
|
||
if (item.show) {
|
||
return item.name;
|
||
}
|
||
}),
|
||
formatter: function (data: any) {
|
||
if (dataList.value && dataList.value.length) {
|
||
for (let i = 0; i < dataList.value.length; i++) {
|
||
if (data === dataList.value[i].name) {
|
||
if (data == "无") return;
|
||
let value = dataList.value[i].value;
|
||
let percentage = dataList.value[i].percentage + "%";
|
||
return "{name| " + data + "} {gap| }" + `{value|${value}} {gap| } {value1|${percentage}}`;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
],
|
||
series: [
|
||
// 外侧光线(数据只是用于占位)
|
||
{
|
||
name: "",
|
||
type: "pie",
|
||
radius: [100, 95],
|
||
center: ["30%", "50%"],
|
||
hoverAnimation: false,
|
||
tooltip: {
|
||
trigger: "none" // 内层饼图也设置 tooltip.trigger 为 'none'
|
||
},
|
||
itemStyle: {
|
||
show: false,
|
||
borderRadius: 10,
|
||
borderWidth: 10
|
||
},
|
||
label: {
|
||
show: false,
|
||
position: "center"
|
||
},
|
||
emphasis: {
|
||
label: {
|
||
show: false
|
||
}
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
},
|
||
data: [
|
||
{
|
||
enumType: "",
|
||
value: 5,
|
||
show: true,
|
||
greatFaultLevelNumJzrRate: "",
|
||
rectificationNum: "",
|
||
rectificationNumJzrRate: "",
|
||
rectificationName: "",
|
||
itemStyle: {
|
||
normal: {
|
||
color: "transparent"
|
||
}
|
||
}
|
||
},
|
||
{
|
||
enumType: "",
|
||
value: 7,
|
||
show: true,
|
||
greatFaultLevelNumJzrRate: "",
|
||
rectificationNum: "",
|
||
rectificationNumJzrRate: "",
|
||
rectificationName: "",
|
||
itemStyle: {
|
||
normal: {
|
||
color: "#F6FCFD"
|
||
}
|
||
}
|
||
},
|
||
{
|
||
enumType: "",
|
||
value: 2,
|
||
show: true,
|
||
greatFaultLevelNumJzrRate: "",
|
||
rectificationNum: "",
|
||
rectificationNumJzrRate: "",
|
||
rectificationName: "",
|
||
itemStyle: {
|
||
normal: {
|
||
color: "transparent"
|
||
}
|
||
}
|
||
},
|
||
{
|
||
enumType: "",
|
||
value: 24,
|
||
show: true,
|
||
greatFaultLevelNumJzrRate: "",
|
||
rectificationNum: "",
|
||
rectificationNumJzrRate: "",
|
||
rectificationName: "",
|
||
itemStyle: {
|
||
normal: {
|
||
color: "#1FC1DB"
|
||
}
|
||
}
|
||
},
|
||
{
|
||
enumType: "",
|
||
value: 2,
|
||
show: true,
|
||
greatFaultLevelNumJzrRate: "",
|
||
rectificationNum: "",
|
||
rectificationNumJzrRate: "",
|
||
rectificationName: "",
|
||
itemStyle: {
|
||
normal: {
|
||
color: "transparent"
|
||
}
|
||
}
|
||
},
|
||
{
|
||
enumType: "",
|
||
value: 7,
|
||
show: true,
|
||
greatFaultLevelNumJzrRate: "",
|
||
rectificationNum: "",
|
||
rectificationNumJzrRate: "",
|
||
rectificationName: "",
|
||
itemStyle: {
|
||
normal: {
|
||
color: "#FFFFFF"
|
||
}
|
||
}
|
||
},
|
||
{
|
||
enumType: "",
|
||
value: 3,
|
||
show: true,
|
||
greatFaultLevelNumJzrRate: "",
|
||
rectificationNum: "",
|
||
rectificationNumJzrRate: "",
|
||
rectificationName: "",
|
||
itemStyle: {
|
||
normal: {
|
||
color: "transparent"
|
||
}
|
||
}
|
||
},
|
||
{
|
||
enumType: "",
|
||
value: 50,
|
||
show: true,
|
||
greatFaultLevelNumJzrRate: "",
|
||
rectificationNum: "",
|
||
rectificationNumJzrRate: "",
|
||
rectificationName: "",
|
||
itemStyle: {
|
||
normal: {
|
||
color: "#1FC1DB"
|
||
}
|
||
}
|
||
}
|
||
]
|
||
},
|
||
{
|
||
name: "",
|
||
type: "pie",
|
||
radius: [60, 80],
|
||
center: ["30%", "50%"],
|
||
hoverAnimation: true,
|
||
itemStyle: {
|
||
borderWidth: 3,
|
||
borderColor: "#000"
|
||
},
|
||
label: {
|
||
show: false,
|
||
position: "center"
|
||
},
|
||
emphasis: {
|
||
label: {
|
||
show: false
|
||
}
|
||
},
|
||
labelLine: {
|
||
show: false
|
||
},
|
||
data: dataList.value
|
||
},
|
||
{
|
||
type: "pie",
|
||
radius: ["52", "55"],
|
||
center: ["30%", "50%"],
|
||
label: {
|
||
show: false
|
||
},
|
||
tooltip: {
|
||
trigger: "none" // 内层饼图也设置 tooltip.trigger 为 'none'
|
||
},
|
||
data: [
|
||
{
|
||
value: 100,
|
||
itemStyle: {
|
||
color: {
|
||
type: "linear",
|
||
x: 1,
|
||
y: 0.7,
|
||
x2: 1,
|
||
y2: 1,
|
||
colorStops: [
|
||
{
|
||
offset: 0,
|
||
color: "rgba(30,216,246,1)"
|
||
},
|
||
{
|
||
offset: 1,
|
||
color: "rgba(11,37,69,0)"
|
||
}
|
||
],
|
||
global: false
|
||
}
|
||
}
|
||
}
|
||
]
|
||
}
|
||
]
|
||
};
|
||
echartsTest.setOption(option, true);
|
||
window.addEventListener("resize", () => {
|
||
console.log(echartsTest);
|
||
echartsTest.resize();
|
||
});
|
||
}
|
||
|
||
//进度数据
|
||
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
||
let listData = ref([
|
||
{ a: "新地能源工程技术有限公司", b: "54" },
|
||
{ a: "中冶沈勘秦皇岛工程设计研究总院有限公司", b: "23" },
|
||
{ a: "鞍山电力实业有限公司", b: "49" },
|
||
{ a: "鞍钢矿业资源利用（鞍山）有限公司", b: "35" },
|
||
{ a: "上海建工五建集团有限公司", b: "34" },
|
||
{ a: "辽宁普凡建设有限公司", b: "67" },
|
||
{ a: "沈阳隆基电磁科技股份有限公司", b: "56" },
|
||
{ a: "中国科学院过程工程研究所", b: "78" },
|
||
{ a: "宏大爆破工程集团有限责任公司", b: "45" },
|
||
{ a: "鞍钢集团矿业设计研究院有限公司", b: "23" },
|
||
{ a: "辽宁电力能源发展集团监理有限公司鞍山分公司", b: "69" },
|
||
{ a: "辽宁五寰特种材料与智能装备产业技术研究院有限公司", b: "27" },
|
||
{ a: "中铝山东工程技术有限公司", b: "59" },
|
||
{ a: "中国华冶科工集团有限公司", b: "14" },
|
||
{ a: "沈阳岩土工程技术测试开发有限公司", b: "38" },
|
||
{ a: "永明项目管理有限公司", b: "41" }
|
||
] as any);
|
||
|
||
// 进度情况分析
|
||
// 项目总进度
|
||
let projectTotalProgress = ref("" as any);
|
||
// 项目剩余天数
|
||
let projectSurplusDayNum = ref({} as any);
|
||
// 获取项目总进度/项目剩余天数
|
||
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 + "";
|
||
projectSurplusDayNum.value = res.result.projectSurplusDayNum + "";
|
||
}
|
||
};
|
||
// 总包进度列表
|
||
let processList = ref([] as any);
|
||
// 获取总包进度列表
|
||
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;
|
||
// processList.value = [
|
||
// {
|
||
// enterpriseName: "广东省某某科技有限公司(东北厂区)",
|
||
// changeAfter: 70
|
||
// },
|
||
// {
|
||
// enterpriseName: "广州市某公司名称(东北厂区)",
|
||
// changeAfter: 65
|
||
// },
|
||
// {
|
||
// enterpriseName: "企业名称(东北厂区)",
|
||
// changeAfter: 60
|
||
// },
|
||
// {
|
||
// enterpriseName: "这里是第四名企业名称(东北厂区)",
|
||
// changeAfter: 55
|
||
// }
|
||
// ];
|
||
}
|
||
};
|
||
|
||
// 获取审批数据汇总
|
||
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);
|
||
};
|
||
onMounted(async () => {
|
||
setIntervalFn(false);
|
||
// 定时三十秒刷新
|
||
setInterval(() => {
|
||
setIntervalFn(true);
|
||
}, 30000);
|
||
});
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
:deep(.h-card .content) {
|
||
height: 79%;
|
||
padding: 10px 10px;
|
||
margin-top: 1%;
|
||
overflow: hidden;
|
||
}
|
||
.diy-title {
|
||
position: absolute;
|
||
top: 3.5%;
|
||
left: 34%;
|
||
font-family: OPPOSansH;
|
||
font-size: 14px;
|
||
color: #6b7b99;
|
||
letter-spacing: 2px; /* 设置文字间距为2像素 */
|
||
}
|
||
.leftBottom {
|
||
// background: url("@/assets/images/commandScreen/card-left-bottom.png") no-repeat;
|
||
// background-size: 100% 100%;
|
||
height: 100%;
|
||
|
||
.header {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 10px 20px;
|
||
margin-top: 6px;
|
||
border-top: none;
|
||
border-left: none;
|
||
border-right: none;
|
||
border-bottom: 1px solid #0059ff;
|
||
// height: 43px;
|
||
background: url("@/assets/images/overviewScreen/card-header.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
|
||
.hLeft {
|
||
width: 50%;
|
||
font-size: 20px;
|
||
font-weight: bold;
|
||
// background-image: linear-gradient(to bottom left, #c8e3ff, #007aff);
|
||
-webkit-background-clip: text;
|
||
background-clip: text;
|
||
// color: transparent;
|
||
font-style: oblique;
|
||
color: white;
|
||
}
|
||
}
|
||
|
||
.content {
|
||
// background-color: darkred;
|
||
height: 50%;
|
||
// background: url("@/assets/images/overviewScreen/card-content.png") no-repeat;
|
||
// background-size: 100% 100%;
|
||
margin-top: 11px;
|
||
// margin: 10px 20px;
|
||
position: relative;
|
||
|
||
.barContent {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: relative;
|
||
.gobackbar {
|
||
color: #fff;
|
||
font-size: 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
cursor: pointer;
|
||
position: absolute;
|
||
right: 4px;
|
||
top: 4px;
|
||
z-index: 999;
|
||
.left-dap {
|
||
width: 18px;
|
||
height: 18px;
|
||
background-image: url(@/assets/images/overviewScreen/left-dap.png);
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
}
|
||
}
|
||
|
||
.cbLine1 {
|
||
color: #fff;
|
||
padding-top: 5px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
line-height: 30px;
|
||
height: 30px;
|
||
font-size: 15px;
|
||
|
||
.numberCard {
|
||
font-size: 15px;
|
||
padding: 0 8px;
|
||
margin-left: 3px;
|
||
font-weight: bold;
|
||
color: #47bcec;
|
||
background: url("@/assets/images/commandScreen/number-bg.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
}
|
||
|
||
.cbProcess {
|
||
// padding-top: 5px;
|
||
// height: calc(100% - 55px);
|
||
overflow: hidden;
|
||
|
||
// background-color: #fff;
|
||
.pItem {
|
||
width: 100%;
|
||
height: 55px;
|
||
display: flex;
|
||
// background-color: #fff;
|
||
font-size: 13px;
|
||
color: #fff;
|
||
|
||
.pLeft {
|
||
width: 20%;
|
||
height: 55px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
.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;
|
||
justify-content: space-between;
|
||
height: 30px;
|
||
|
||
.prtLeft {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: flex-end;
|
||
}
|
||
|
||
.prtRight {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: flex-end;
|
||
}
|
||
}
|
||
|
||
.prBottom {
|
||
// background-color: purple;
|
||
height: 15px;
|
||
|
||
.processLineBg {
|
||
background-color: rgba(50, 50, 50, 0.5);
|
||
|
||
// transform: scaleX(-1);
|
||
.processLine {
|
||
margin-top: 10px;
|
||
// padding-top: 10px;
|
||
height: 5px;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
|
||
.processLineBtn {
|
||
width: 3px;
|
||
height: 9px;
|
||
background: #fff;
|
||
transform: translateY(-2px);
|
||
}
|
||
}
|
||
|
||
// .plBgc1{
|
||
// background: rgb(150,0,0);
|
||
// background: linear-gradient(90deg, rgba(50,50,50,0.5) 10%, rgba(150,0,0,1) 100%);
|
||
// }
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.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>
|