feat: 项目看板大屏页面添加
This commit is contained in:
kun
parent
6202602cbe
commit
e64d92cc64
@ -1,18 +1,36 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="leftTop">
|
<div class="leftTop">
|
||||||
<Card title="智能设备">
|
<Card title="进度概况">
|
||||||
<div class="deviceData">
|
<div class="box-content">
|
||||||
<div class="deviceDataA">
|
<div class="top-content">
|
||||||
<div class="num">
|
<div class="top-content-left">
|
||||||
<i>{{ statisticsCount.devcount.ufaceDevNum || 0 }}</i>
|
项目总进度
|
||||||
|
<span v-if="!projectData?.totalProjectDay" class="dayImg">0</span>
|
||||||
|
<span v-else class="dayImg" v-for="item in projectData?.totalProjectDay" :key="item">{{ item }}</span>
|
||||||
|
<span style="margin-left: 4%">%</span>
|
||||||
|
</div>
|
||||||
|
<div class="top-content-right">
|
||||||
|
项目剩余天数
|
||||||
|
<span v-if="!projectData?.totalProjectDay" class="dayImg">0</span>
|
||||||
|
<span v-else class="dayImg" v-for="item in projectData?.totalProjectDay" :key="item">{{ item }}</span>
|
||||||
|
<span style="margin-left: 4%">天</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="text">实名制设备数</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="deviceDataB">
|
<div class="bottom-content">
|
||||||
<div class="num">
|
<div class="bottom-content-item" v-for="(item,index) in topRank" :key="index">
|
||||||
<i>{{ statisticsCount.devcount.environmentDevNum || 0 }}</i>
|
<div class="item-one-style" :class="'item-one-style' + (index + 1)">Top{{ index + 1 }}</div>
|
||||||
|
<div class="item-two-style">
|
||||||
|
<div class="two-part-one">
|
||||||
|
<span>{{item.name}}</span>
|
||||||
|
<span>{{item.percent || 0}}%</span>
|
||||||
|
</div>
|
||||||
|
<div class="two-part-two">
|
||||||
|
<div class="bg-progress"></div>
|
||||||
|
<div class="finished-progress" :class="'finished-progress' + (index + 1)" :style="{width: item.percent + '%'}"></div>
|
||||||
|
<div class="finished-point" :class="'finished-point' + (index + 1)" :style="{left: item.percent + '%'}"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="text">环境设备数</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</Card>
|
</Card>
|
||||||
@ -32,21 +50,27 @@ const props = withDefaults(defineProps<Props>(), {
|
|||||||
devcount: {}
|
devcount: {}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
// 人员概况数据
|
const projectData = ref({
|
||||||
const statisticsCount = ref({
|
totalProjectDay: "180"
|
||||||
devcount: {}
|
});
|
||||||
} as any);
|
const topRank = ref([
|
||||||
|
{
|
||||||
watch(
|
name: "广东省某某科技有限公司(东北厂区)",
|
||||||
() => props.statisticsCount,
|
percent: 70
|
||||||
newVal => {
|
},
|
||||||
// console.log(newVal, "newVal");
|
{
|
||||||
if (newVal) {
|
name: "广州市某公司名称(东北厂区)",
|
||||||
// props.xData = newVal;
|
percent: 65
|
||||||
statisticsCount.value = newVal;
|
},
|
||||||
}
|
{
|
||||||
|
name: "企业名称(东北厂区)",
|
||||||
|
percent: 60
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "这里是第四名企业名称(东北厂区)",
|
||||||
|
percent: 55
|
||||||
}
|
}
|
||||||
);
|
])
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
@ -54,39 +78,127 @@ watch(
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
.box-content {
|
||||||
.deviceData {
|
.top-content {
|
||||||
width: 100%;
|
display: flex;
|
||||||
height: 100%;
|
align-items: center;
|
||||||
display: flex;
|
justify-content: space-between;
|
||||||
|
margin: 0 2%;
|
||||||
.deviceDataA {
|
padding-top: 3%;
|
||||||
width: 40%;
|
> div {
|
||||||
height: 85%;
|
width: 45%;
|
||||||
background: url("@/assets/images/comprehensiveManage/project13.png") no-repeat;
|
line-height: 32px;
|
||||||
background-size: 100% 100%;
|
font-size: 14px;
|
||||||
margin: 4% 5%;
|
color: #fff;
|
||||||
color: #fff;
|
.dayImg {
|
||||||
text-align: center;
|
margin-left: 2%;
|
||||||
|
font-size: 26px;
|
||||||
|
display: inline-block;
|
||||||
|
width: 29px;
|
||||||
|
height: 32px;
|
||||||
|
font-family: sadigitalNumber;
|
||||||
|
background: url("@/assets/images/comprehensiveManage/project1.png") no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
text-align: center;
|
||||||
|
color: #4ac0f3;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
.deviceDataB {
|
.bottom-content {
|
||||||
width: 40%;
|
margin: 0 2%;
|
||||||
height: 85%;
|
margin-top: 6%;
|
||||||
background: url("@/assets/images/comprehensiveManage/project13.png") no-repeat;
|
&-item:not(:last-child){
|
||||||
background-size: 100% 100%;
|
margin-bottom: 3%;
|
||||||
margin: 4% 5%;
|
}
|
||||||
color: #fff;
|
&-item {
|
||||||
text-align: center;
|
display: flex;
|
||||||
}
|
align-items: center;
|
||||||
.num {
|
.item-one-style {
|
||||||
margin-top: 30%;
|
width: 60px;
|
||||||
font-size: 32px;
|
height: 20px;
|
||||||
font-weight: bold;
|
font-family: ABeeZee, ABeeZee;
|
||||||
}
|
font-weight: 400;
|
||||||
.text {
|
font-size: 14px;
|
||||||
font-size: 14px;
|
color: #e3e9f3;
|
||||||
|
border-radius: 10px;
|
||||||
color: #ccc;
|
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;
|
||||||
|
flex-direction: column;
|
||||||
|
color: white;
|
||||||
|
margin-left: 2%;
|
||||||
|
.two-part-one {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
> span:nth-child(1) {
|
||||||
|
font-family: ABeeZee, ABeeZee;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #e3e9f3;
|
||||||
|
}
|
||||||
|
> span:nth-child(2) {
|
||||||
|
font-family: ABeeZee, ABeeZee;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 18px;
|
||||||
|
color: #eaeef5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.two-part-two {
|
||||||
|
position: relative;
|
||||||
|
.bg-progress {
|
||||||
|
position: absolute;
|
||||||
|
top: 3px;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 3px;
|
||||||
|
background: #ffffff;
|
||||||
|
opacity: 0.2;
|
||||||
|
}
|
||||||
|
.finished-progress {
|
||||||
|
position: absolute;
|
||||||
|
top: 3px;
|
||||||
|
left: 0;
|
||||||
|
height: 3px;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
.finished-progress1 {
|
||||||
|
background: linear-gradient(270deg, #e24a3b 0%, rgba(226, 74, 59, 0) 100%);
|
||||||
|
}
|
||||||
|
.finished-progress2 {
|
||||||
|
background: linear-gradient( 270deg, #C9B217 0%, rgba(201,178,23,0) 100%);
|
||||||
|
}
|
||||||
|
.finished-progress3 {
|
||||||
|
background: linear-gradient( 270deg, #3877F2 0%, rgba(56,119,242,0) 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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -6,8 +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="
|
<div class="change-echart" @click="showOne = true;">
|
||||||
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>
|
||||||
@ -21,7 +20,7 @@
|
|||||||
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, watch } from "vue";
|
import { ref, onMounted, nextTick } from "vue";
|
||||||
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();
|
||||||
@ -165,6 +164,9 @@ const drawOneEchart = () => {
|
|||||||
// 控制台输出点击的数据的信息
|
// 控制台输出点击的数据的信息
|
||||||
console.log(params);
|
console.log(params);
|
||||||
showOne.value = false;
|
showOne.value = false;
|
||||||
|
nextTick(() => {
|
||||||
|
drawTwoEchart();
|
||||||
|
})
|
||||||
// 您可以在这里添加您的逻辑代码
|
// 您可以在这里添加您的逻辑代码
|
||||||
// 例如：弹出自定义的对话框或者执行其他操作
|
// 例如：弹出自定义的对话框或者执行其他操作
|
||||||
});
|
});
|
||||||
@ -467,29 +469,9 @@ const drawTwoEchart = () => {
|
|||||||
console.log(echartsOne);
|
console.log(echartsOne);
|
||||||
echartsOne.resize();
|
echartsOne.resize();
|
||||||
});
|
});
|
||||||
//图例点击事件
|
|
||||||
// echartsTest.value.on("legendselectchanged", (params: any) => {
|
|
||||||
// console.log(emits);
|
|
||||||
// echartsTest.value.setOption({
|
|
||||||
// legend: { selected: { [params.name]: true } }
|
|
||||||
// });
|
|
||||||
|
|
||||||
// emits("openDialog", {
|
|
||||||
// index: 7,
|
|
||||||
// title: params.name + "超期未整改",
|
|
||||||
// majorInfo: {
|
|
||||||
// isOverdueRectification: 1,
|
|
||||||
// isNotQualified: 0,
|
|
||||||
// enumType: dataList.value.find(item => item.name == params.name)?.enumType,
|
|
||||||
// inspectStartTime: dateRange.value[0],
|
|
||||||
// inspectEndTime: dateRange.value[1]
|
|
||||||
// }
|
|
||||||
// });
|
|
||||||
// });
|
|
||||||
};
|
};
|
||||||
onMounted(async () => {
|
onMounted(async () => {
|
||||||
drawOneEchart();
|
drawOneEchart();
|
||||||
drawTwoEchart();
|
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user