feat: 项目看板大屏页面添加
This commit is contained in:
kun
parent
6202602cbe
commit
e64d92cc64
@ -1,18 +1,36 @@
|
||||
<template>
|
||||
<div class="leftTop">
|
||||
<Card title="智能设备">
|
||||
<div class="deviceData">
|
||||
<div class="deviceDataA">
|
||||
<div class="num">
|
||||
<i>{{ statisticsCount.devcount.ufaceDevNum || 0 }}</i>
|
||||
<Card title="进度概况">
|
||||
<div class="box-content">
|
||||
<div class="top-content">
|
||||
<div class="top-content-left">
|
||||
项目总进度
|
||||
<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 class="text">实名制设备数</div>
|
||||
</div>
|
||||
<div class="deviceDataB">
|
||||
<div class="num">
|
||||
<i>{{ statisticsCount.devcount.environmentDevNum || 0 }}</i>
|
||||
<div class="bottom-content">
|
||||
<div class="bottom-content-item" v-for="(item,index) in topRank" :key="index">
|
||||
<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 class="text">环境设备数</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
@ -32,21 +50,27 @@ const props = withDefaults(defineProps<Props>(), {
|
||||
devcount: {}
|
||||
}
|
||||
});
|
||||
// 人员概况数据
|
||||
const statisticsCount = ref({
|
||||
devcount: {}
|
||||
} as any);
|
||||
|
||||
watch(
|
||||
() => props.statisticsCount,
|
||||
newVal => {
|
||||
// console.log(newVal, "newVal");
|
||||
if (newVal) {
|
||||
// props.xData = newVal;
|
||||
statisticsCount.value = newVal;
|
||||
}
|
||||
const projectData = ref({
|
||||
totalProjectDay: "180"
|
||||
});
|
||||
const topRank = ref([
|
||||
{
|
||||
name: "广东省某某科技有限公司(东北厂区)",
|
||||
percent: 70
|
||||
},
|
||||
{
|
||||
name: "广州市某公司名称(东北厂区)",
|
||||
percent: 65
|
||||
},
|
||||
{
|
||||
name: "企业名称(东北厂区)",
|
||||
percent: 60
|
||||
},
|
||||
{
|
||||
name: "这里是第四名企业名称(东北厂区)",
|
||||
percent: 55
|
||||
}
|
||||
);
|
||||
])
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@ -54,39 +78,127 @@ watch(
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
|
||||
.deviceData {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
|
||||
.deviceDataA {
|
||||
width: 40%;
|
||||
height: 85%;
|
||||
background: url("@/assets/images/comprehensiveManage/project13.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin: 4% 5%;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
.box-content {
|
||||
.top-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin: 0 2%;
|
||||
padding-top: 3%;
|
||||
> div {
|
||||
width: 45%;
|
||||
line-height: 32px;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
.dayImg {
|
||||
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 {
|
||||
width: 40%;
|
||||
height: 85%;
|
||||
background: url("@/assets/images/comprehensiveManage/project13.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin: 4% 5%;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
}
|
||||
.num {
|
||||
margin-top: 30%;
|
||||
font-size: 32px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.text {
|
||||
font-size: 14px;
|
||||
|
||||
color: #ccc;
|
||||
.bottom-content {
|
||||
margin: 0 2%;
|
||||
margin-top: 6%;
|
||||
&-item:not(:last-child){
|
||||
margin-bottom: 3%;
|
||||
}
|
||||
&-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.item-one-style {
|
||||
width: 60px;
|
||||
height: 20px;
|
||||
font-family: ABeeZee, ABeeZee;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
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;
|
||||
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>
|
||||
<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>
|
||||
<span>返回</span>
|
||||
</div>
|
||||
@ -21,7 +20,7 @@
|
||||
import Card from "@/components/card.vue";
|
||||
import { GlobalStore } from "@/stores";
|
||||
import { COMPANY } from "@/config/config";
|
||||
import { ref, onMounted, watch } from "vue";
|
||||
import { ref, onMounted, nextTick } from "vue";
|
||||
import { getPersonTypeAndEduStatisticsApi } from "@/api/modules/labor";
|
||||
import * as echarts from "echarts";
|
||||
const store = GlobalStore();
|
||||
@ -165,6 +164,9 @@ const drawOneEchart = () => {
|
||||
// 控制台输出点击的数据的信息
|
||||
console.log(params);
|
||||
showOne.value = false;
|
||||
nextTick(() => {
|
||||
drawTwoEchart();
|
||||
})
|
||||
// 您可以在这里添加您的逻辑代码
|
||||
// 例如：弹出自定义的对话框或者执行其他操作
|
||||
});
|
||||
@ -467,29 +469,9 @@ const drawTwoEchart = () => {
|
||||
console.log(echartsOne);
|
||||
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 () => {
|
||||
drawOneEchart();
|
||||
drawTwoEchart();
|
||||
});
|
||||
</script>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user