feat: 鞍钢集团项目看板内容页面添加以及合并代码
This commit is contained in:
kun
parent
d74641e980
commit
2ee5827a20
@ -5,7 +5,7 @@ NODE_ENV = 'development'
|
||||
# 后端本地
|
||||
# VITE_API_URL = 'http://192.168.34.221:19111'
|
||||
# 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://121.196.214.246/api'
|
||||
# VITE_API_URL = 'http://jxj.zhgdyun.com:100'
|
||||
@ -24,7 +24,7 @@ VITE_API_URL = 'http://182.90.224.237:51234' #雄哥远程
|
||||
# VITE_API_URL = 'http://182.90.224.237:15551'
|
||||
# agjt
|
||||
# VITE_API_URL = 'http://42.180.188.17:9809' #生产环境
|
||||
# VITE_API_URL = 'http://42.180.188.17:11211' #测试环境
|
||||
VITE_API_URL = 'http://42.180.188.17:11211' #测试环境
|
||||
# VITE_API_URL = 'http://jxj.zhgdyun.com:19812'
|
||||
# 苏立信
|
||||
# VITE_API_URL = 'http://101.43.164.214:11111'
|
||||
|
||||
BIN
src/assets/images/comprehensiveManage/bgOne.png
Normal file
BIN
src/assets/images/comprehensiveManage/bgOne.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
@ -29,8 +29,8 @@ 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 = "agjtProjectKanban"; //鞍钢集团项目看板大屏
|
||||
// export const COMPANY: string = "agjtCommand"; //鞍钢集团指挥部大屏
|
||||
export const COMPANY: string = "agjtProjectKanban"; //鞍钢集团项目看板大屏
|
||||
// export const COMPANY: string = "slx"; //苏立信项目
|
||||
// export const COMPANY: string = "hfqc"; //合肥启程项目
|
||||
// export const COMPANY: string = "jsyc"; // 江苏盐城项目
|
||||
|
||||
@ -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/agjtProjectKanban/indexL.vue"), //鞍钢集团项目看板大屏
|
||||
component: () => import("@/views/agjtProjectKanban/indexL.vue"), //鞍钢集团项目看板大屏
|
||||
// component: () => import("@/views/sevenLargeScreen/indexL_syhy.vue"), // 只有一级路由(盘锦、嘉兴、鄱湖美湾医疗项目需切换至该首页)
|
||||
children: [
|
||||
{
|
||||
|
||||
@ -1,63 +1,106 @@
|
||||
<template>
|
||||
<div class="leftTop">
|
||||
<Card title="进度概况">
|
||||
<div class="progressContent">
|
||||
<div style="display: flex; padding: 2% 1%; color: #fff; font-size: 16px">
|
||||
<div style="width: 5px; height: 5px; background: rgba(130, 251, 234, 1); border-radius: 10px; margin: 1%"></div>
|
||||
<div><i>倒计时</i></div>
|
||||
</div>
|
||||
<div class="totalDay">
|
||||
<div style="line-height: 45px">
|
||||
项目总天数
|
||||
<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 class="dayImg">0</span>
|
||||
<span class="dayImg">4</span>
|
||||
<span class="dayImg">7</span> -->
|
||||
<span style="margin-left: 4%">天</span>
|
||||
<Card :title="activeTab == 0 ? '人员情况' : '三色评价'">
|
||||
<div class="top-content">
|
||||
<span :class="activeTab == 0 ? 'active' : ''" @click="activeTab = 0">人员情况</span>
|
||||
<span :class="activeTab == 1 ? 'active' : ''" @click="activeTab = 1">三色评价</span>
|
||||
</div>
|
||||
<div class="box-content" v-show="activeTab == 0">
|
||||
<div class="member-top-data">
|
||||
<div class="top-data-item">
|
||||
<span>未履职人员</span>
|
||||
<span>12/2500</span>
|
||||
</div>
|
||||
<div class="top-data-item">
|
||||
<span>项目经理</span>
|
||||
<span>12/25</span>
|
||||
</div>
|
||||
<div class="top-data-item">
|
||||
<span>安全员</span>
|
||||
<span>12/25</span>
|
||||
</div>
|
||||
<div class="top-data-item">
|
||||
<span>质量员</span>
|
||||
<span>12/25</span>
|
||||
</div>
|
||||
<div class="top-data-item">
|
||||
<span>监理</span>
|
||||
<span>5/5</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="residueDay">
|
||||
<div style="line-height: 45px">
|
||||
项目剩余天数
|
||||
<span v-if="!projectData?.surplusDay" class="dayImg">0</span>
|
||||
<span v-else class="dayImg" v-for="item in projectData?.surplusDay" :key="item">{{ item }}</span>
|
||||
<!-- <span class="dayImg">2</span>
|
||||
<span class="dayImg">8</span>
|
||||
<span class="dayImg">6</span> -->
|
||||
<span style="margin-left: 4%">天</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display: flex; margin-top: 4%; margin-left: 2%; color: #fff; font-size: 16px; width: 30%">
|
||||
<div style="width: 5px; height: 5px; background: rgba(130, 251, 234, 1); border-radius: 10px; margin: 1%"></div>
|
||||
<div><i>里程碑</i></div>
|
||||
</div>
|
||||
<el-scrollbar style="width: 94%; margin: 3% 0% 0% 3%; height: 30%" v-if="progressList.length > 0">
|
||||
<div class="progressData">
|
||||
<div class="data" v-for="item in progressList" :key="item.id">
|
||||
<div v-if="item.status == 0" class="text" :title="item.name">{{ item.name }}</div>
|
||||
<img v-if="item.status == 0" src="@/assets/images/comprehensiveManage/project7.png" alt="" />
|
||||
<div
|
||||
v-if="item.status == 1"
|
||||
style="color: #fff; font-size: 18px; margin-top: -5%"
|
||||
:title="item.name"
|
||||
class="statusImg1"
|
||||
>
|
||||
<div class="stage-name">{{ item.name }}</div>
|
||||
<div v-if="item.status == 1" class="statusImg"></div>
|
||||
</div>
|
||||
<img
|
||||
v-if="item.status == 1"
|
||||
style="width: 40px; margin-top: 1%"
|
||||
src="@/assets/images/comprehensiveManage/project11.png"
|
||||
alt=""
|
||||
/>
|
||||
<div class="member-bottom-table">
|
||||
<div class="list-content">
|
||||
<div class="tab-list">
|
||||
<div>企业名称</div>
|
||||
<div>未履职人数</div>
|
||||
<div>项目经理</div>
|
||||
<div>安全员</div>
|
||||
<div>质量员</div>
|
||||
<div>监理</div>
|
||||
</div>
|
||||
<el-scrollbar class="list-box">
|
||||
<div
|
||||
v-for="(item, index) in list"
|
||||
class="listStyle"
|
||||
:key="item.id"
|
||||
>
|
||||
<!-- <div style="width: 5%">{{ index + 1 }}</div> -->
|
||||
<div>{{ item.waterMeterName || "" }}</div>
|
||||
<div>{{ item.waterTonnage || 0 }}</div>
|
||||
<div>{{ item.waterTonnage || 0 }}</div>
|
||||
<div>{{ item.waterTonnage || 0 }}</div>
|
||||
<div>{{ item.waterTonnage || 0 }}</div>
|
||||
<div>{{ item.waterTonnage || 0 }}</div>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
<div class="not-data" v-if="list.length == 0">
|
||||
<img src="@/assets/images/noData.png" alt="" />
|
||||
<p>暂无数据</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="box-content" v-show="activeTab == 1">
|
||||
<div class="remark-top-data">
|
||||
<div class="top-data-item">
|
||||
<span>低风险</span>
|
||||
<span>1200</span>
|
||||
</div>
|
||||
<div class="top-data-item">
|
||||
<span>中风险</span>
|
||||
<span>25</span>
|
||||
</div>
|
||||
<div class="top-data-item">
|
||||
<span>高风险</span>
|
||||
<span>0</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="remark-bottom-table">
|
||||
<div class="list-content">
|
||||
<div class="tab-list">
|
||||
<div>企业名称</div>
|
||||
<div>高风险人数</div>
|
||||
<div>中风险人数</div>
|
||||
<div>低风险人数</div>
|
||||
</div>
|
||||
<el-scrollbar class="list-box">
|
||||
<div
|
||||
v-for="(item, index) in list"
|
||||
class="listStyle"
|
||||
:key="item.id"
|
||||
>
|
||||
<!-- <div style="width: 5%">{{ index + 1 }}</div> -->
|
||||
<div>{{ item.waterMeterName || "" }}</div>
|
||||
<div>{{ item.waterTonnage || 0 }}</div>
|
||||
<div>{{ item.waterTonnage || 0 }}</div>
|
||||
<div>{{ item.waterTonnage || 0 }}</div>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
<div class="not-data" v-if="list.length == 0">
|
||||
<img src="@/assets/images/noData.png" alt="" />
|
||||
<p>暂无数据</p>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
<div class="notoDta" v-else>
|
||||
<img src="@/assets/images/noData.png" alt="" />
|
||||
<div>暂无数据</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
@ -67,193 +110,220 @@
|
||||
<script setup lang="ts">
|
||||
import Card from "@/components/card.vue";
|
||||
import { ref, watch, onMounted } from "vue";
|
||||
import { getStageOption } from "@/api/modules/projectOverview";
|
||||
import { GlobalStore } from "@/stores";
|
||||
const store = GlobalStore();
|
||||
const progressList = ref([
|
||||
// {
|
||||
// name: "施工证获取",
|
||||
// status: 0
|
||||
// },
|
||||
// {
|
||||
// name: "土方开挖",
|
||||
// status: 0
|
||||
// },
|
||||
// {
|
||||
// name: "桩基",
|
||||
// status: 0
|
||||
// },
|
||||
// {
|
||||
// name: "支护开始",
|
||||
// status: 0
|
||||
// },
|
||||
// {
|
||||
// name: "垫层完成",
|
||||
// status: 0
|
||||
// },
|
||||
// {
|
||||
// name: "正负零",
|
||||
// status: 0
|
||||
// },
|
||||
// {
|
||||
// name: "工程达到预售条件",
|
||||
// status: 0
|
||||
// }
|
||||
] as any);
|
||||
// ts
|
||||
type Props = {
|
||||
projectData?: any; // 传入项目信息
|
||||
};
|
||||
// withDefaults 定义默认值(传入的数据类型同默认值)
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
projectData: {}
|
||||
});
|
||||
// 项目信息
|
||||
const projectData = ref({} as any);
|
||||
|
||||
watch(
|
||||
() => props.projectData,
|
||||
newVal => {
|
||||
// console.log(newVal, "newVal");
|
||||
if (newVal) {
|
||||
// props.xData = newVal;
|
||||
projectData.value = newVal;
|
||||
console.log("当前阶段", projectData.value);
|
||||
console.log("当前阶段", progressList.value);
|
||||
if (progressList.value.length > 0 && projectData.value.constructionStage) {
|
||||
progressList.value[projectData.value.constructionStage - 1].status = 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
//获取里程碑option
|
||||
const getProgressOption = async () => {
|
||||
const res: any = await getStageOption({ dictionaryEncoding: "project_construction_stage", projectSn: store.sn });
|
||||
if (res.result.length > 0) {
|
||||
let newArray = res.result.map((item: any) => {
|
||||
return {
|
||||
name: item.name,
|
||||
status: 0
|
||||
};
|
||||
});
|
||||
progressList.value = newArray;
|
||||
console.log(projectData.value, "里程碑option", res);
|
||||
if (projectData.value?.constructionStage) {
|
||||
progressList.value[projectData.value.constructionStage - 1].status = 1;
|
||||
}
|
||||
}
|
||||
};
|
||||
//将方法暴露给父组件
|
||||
defineExpose({
|
||||
getProgressOption
|
||||
})
|
||||
onMounted( async () => {
|
||||
getProgressOption();
|
||||
});
|
||||
const activeTab = ref(0);
|
||||
const list = ref([
|
||||
{waterMeterName: 123,waterTonnage:456},
|
||||
{waterMeterName: 123,waterTonnage:456},
|
||||
{waterMeterName: 123,waterTonnage:456},
|
||||
{waterMeterName: 123,waterTonnage:456}
|
||||
]) as any;
|
||||
onMounted(async () => {});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.el-scrollbar__wrap {
|
||||
overflow-x: auto;
|
||||
height: calc(100% + 20px); //多出来的20px是横向滚动条默认的样式
|
||||
}
|
||||
|
||||
.el-scrollbar {
|
||||
background: url("@/assets/images/comprehensiveManage/project4.png") no-repeat;
|
||||
background-size: 100% 40%;
|
||||
background-position-y: 30%;
|
||||
}
|
||||
|
||||
.leftTop {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.progressContent {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
.totalDay {
|
||||
width: 40%;
|
||||
float: left;
|
||||
color: #ccc;
|
||||
font-size: 16px;
|
||||
margin-left: 15%;
|
||||
}
|
||||
.residueDay {
|
||||
width: 40%;
|
||||
float: right;
|
||||
color: #ccc;
|
||||
font-size: 16px;
|
||||
margin-right: 5%;
|
||||
}
|
||||
.dayImg {
|
||||
margin-left: 2%;
|
||||
font-size: 26px;
|
||||
display: inline-block;
|
||||
width: 35px;
|
||||
height: 45px;
|
||||
font-family: sadigitalNumber;
|
||||
background: url("@/assets/images/comprehensiveManage/project1.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
text-align: center;
|
||||
color: #4ac0f3;
|
||||
}
|
||||
.progressData {
|
||||
// position: absolute;
|
||||
// bottom: 3%;
|
||||
// left: 3%;
|
||||
width: 100%;
|
||||
height: 30%;
|
||||
.top-content {
|
||||
width: 18%;
|
||||
position: absolute;
|
||||
top: 3%;
|
||||
right: 0px;
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
text-align: center;
|
||||
// background: url("@/assets/images/comprehensiveManage/project4.png") no-repeat;
|
||||
// background-size: 100% 40%;
|
||||
// background-position-y: 30%;
|
||||
// .stage-bg {
|
||||
// height: 50%;
|
||||
// position: absolute;
|
||||
// img {
|
||||
// width: 100%;
|
||||
// height: 100%;
|
||||
// }
|
||||
// }
|
||||
.data {
|
||||
color: #ccc;
|
||||
font-size: 15px;
|
||||
padding-left: 4%;
|
||||
padding-right: 1%;
|
||||
z-index: 1;
|
||||
.text {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
span {
|
||||
font-family: ABeeZee, ABeeZee;
|
||||
font-weight: normal;
|
||||
font-size: 16px;
|
||||
color: rgba(255, 255, 255, 0.6);
|
||||
letter-spacing: 1px;
|
||||
text-shadow: 0px 4px 4px #14346c;
|
||||
text-align: center;
|
||||
font-style: italic;
|
||||
text-transform: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
.active {
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
.box-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-top: 1%;
|
||||
.remark-top-data{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
margin-bottom: 2%;
|
||||
.top-data-item {
|
||||
width: 135px;
|
||||
height: 51px;
|
||||
background: url("@/assets/images/comprehensiveManage/bgOne.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0.5% 0;
|
||||
padding-left: 2%;
|
||||
span:nth-child(1) {
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
font-family: ABeeZee-Regular;
|
||||
margin-bottom: 1%;
|
||||
}
|
||||
span:nth-child(2) {
|
||||
font-size: 24px;
|
||||
color: #65d7f9;
|
||||
font-family: ABeeZee-Regular;
|
||||
}
|
||||
}
|
||||
img {
|
||||
width: 20px;
|
||||
margin-top: 18%;
|
||||
margin-left: 15%;
|
||||
.top-data-item:not(:last-child) {
|
||||
margin-right: 2%;
|
||||
}
|
||||
}
|
||||
.statusImg {
|
||||
position: absolute;
|
||||
top: 190%;
|
||||
left: -10%;
|
||||
width: 120px;
|
||||
height: 1px;
|
||||
background: url("@/assets/images/comprehensiveManage/project6.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.statusImg1 {
|
||||
.remark-bottom-table {
|
||||
height: 62%;
|
||||
box-sizing: border-box;
|
||||
margin: 0 2%;
|
||||
position: relative;
|
||||
background: url("@/assets/images/comprehensiveManage/project5.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
.stage-name {
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
.list-content {
|
||||
height: 95%;
|
||||
width: 100%;
|
||||
.tab-list {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 31px;
|
||||
background: rgba(0,122,255,0.19);
|
||||
// position: absolute;
|
||||
left: 75.5%;
|
||||
top: 75%;
|
||||
color: #ccc;
|
||||
font-size: 16px;
|
||||
// justify-content: space-around;
|
||||
div {
|
||||
width: 25%;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
.list-box {
|
||||
height: 82%;
|
||||
.listStyle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
line-height: 30px;
|
||||
margin-top: 0.5%;
|
||||
cursor: pointer;
|
||||
background: rgba(0,122,255,0.06);
|
||||
div {
|
||||
width: 25%;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
.listStyle:hover {
|
||||
background: rgba(0,122,255,0.43);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.member-top-data {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 2%;
|
||||
.top-data-item {
|
||||
width: 135px;
|
||||
height: 51px;
|
||||
background: url("@/assets/images/comprehensiveManage/bgOne.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0.5% 0;
|
||||
padding-left: 2%;
|
||||
span:nth-child(1) {
|
||||
font-size: 16px;
|
||||
color: #fff;
|
||||
font-family: ABeeZee-Regular;
|
||||
margin-bottom: 1%;
|
||||
}
|
||||
span:nth-child(2) {
|
||||
font-size: 24px;
|
||||
color: #65d7f9;
|
||||
font-family: ABeeZee-Regular;
|
||||
}
|
||||
}
|
||||
.top-data-item:not(:last-child) {
|
||||
margin-right: 2%;
|
||||
}
|
||||
}
|
||||
.member-bottom-table {
|
||||
height: 62%;
|
||||
box-sizing: border-box;
|
||||
margin: 0 2%;
|
||||
position: relative;
|
||||
.list-content {
|
||||
height: 95%;
|
||||
width: 100%;
|
||||
.tab-list {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 31px;
|
||||
background: rgba(0,122,255,0.19);
|
||||
// position: absolute;
|
||||
left: 75.5%;
|
||||
top: 75%;
|
||||
color: #ccc;
|
||||
font-size: 16px;
|
||||
// justify-content: space-around;
|
||||
div {
|
||||
width: 17%;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
.list-box {
|
||||
height: 82%;
|
||||
.listStyle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
line-height: 30px;
|
||||
margin-top: 0.5%;
|
||||
cursor: pointer;
|
||||
background: rgba(0,122,255,0.06);
|
||||
div {
|
||||
width: 17%;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
.listStyle:hover {
|
||||
background: rgba(0,122,255,0.43);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.not-data {
|
||||
top: 40%;
|
||||
width: 30%;
|
||||
left: 35%;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
img {
|
||||
width: 50%;
|
||||
}
|
||||
p {
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -262,18 +332,4 @@ onMounted( async () => {
|
||||
height: 80%;
|
||||
margin-top: 1.8%;
|
||||
}
|
||||
.notoDta {
|
||||
bottom: 10%;
|
||||
width: 20%;
|
||||
left: 35%;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
img {
|
||||
width: 40%;
|
||||
}
|
||||
div {
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,9 +1,19 @@
|
||||
<template>
|
||||
<div class="leftTop">
|
||||
<Card title="安全教育">
|
||||
<div class="video-config"></div>
|
||||
<div class="video-config">
|
||||
<el-icon class="config-icon" color="#57BCE8" size="24"><Setting /></el-icon>
|
||||
<div class="dialog-content" v-show="false">
|
||||
<div class="dialog-title">
|
||||
<div class="title-img"><img src="@/assets/images/titleIcon.png" alt="" /></div>
|
||||
<div class="title-text">
|
||||
<i>配置视频</i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="href-content" v-if="showVideo == 1">
|
||||
<el-carousel indicator-position="none" height="450px" style="width: 76%;">
|
||||
<el-carousel indicator-position="none" height="450px" style="width: 100%;">
|
||||
<el-carousel-item v-for="(item, index) in videoList" :key="item.id">
|
||||
<ckplayerComp
|
||||
:name="index"
|
||||
@ -255,6 +265,14 @@ onMounted(async () => {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
.video-config{
|
||||
position: absolute;
|
||||
top: 1.5%;
|
||||
right: 1%;
|
||||
.config-icon{
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.videoBox {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
@ -1,35 +1,30 @@
|
||||
<template>
|
||||
<div class="leftTop">
|
||||
<Card title="环境监测">
|
||||
<div class="box">
|
||||
<div id="echartsHjjc" ref="leftTopEcharts" style="width: 100%; height: 100%"></div>
|
||||
<div class="footerData">{{ analysisData }}</div>
|
||||
<div class="colour">
|
||||
<div class="colour_content">
|
||||
<div class="bg" style="background: #65d7f9; border-top-left-radius: 8px; border-bottom-left-radius: 8px"></div>
|
||||
<div class="size">优</div>
|
||||
<Card title="安全质量隐患报告">
|
||||
<div class="box-content">
|
||||
<el-scrollbar class="list-box">
|
||||
<div v-for="(item, index) in list" class="listStyle" :key="item.id">
|
||||
<div>外墙、顶板、底板出现贯通性裂缝</div>
|
||||
<div>
|
||||
<span>整改结果：</span>
|
||||
<span>已逾期</span>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<span>整改结果：</span>
|
||||
<span>已逾期</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>整改结果：</span>
|
||||
<span>已逾期</span>
|
||||
</div>
|
||||
<div>
|
||||
<span>整改结果：</span>
|
||||
<span>已逾期</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="colour_content">
|
||||
<div class="bg" style="background: #ffbb38"></div>
|
||||
<div class="size">良</div>
|
||||
</div>
|
||||
<div class="colour_content">
|
||||
<div class="bg" style="background: #fe7a18"></div>
|
||||
<div class="size">轻度污染</div>
|
||||
</div>
|
||||
<div class="colour_content">
|
||||
<div class="bg" style="background: #7718fe"></div>
|
||||
<div class="size">中度污染</div>
|
||||
</div>
|
||||
<div class="colour_content">
|
||||
<div class="bg" style="background: #890ea1"></div>
|
||||
<div class="size">重度污染</div>
|
||||
</div>
|
||||
<div class="colour_content">
|
||||
<div class="bg" style="background: #970c0c; border-top-right-radius: 8px; border-bottom-right-radius: 8px"></div>
|
||||
<div class="size">严重污染</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
@ -42,489 +37,103 @@ import { ref, onMounted, reactive } from "vue";
|
||||
import * as echarts from "echarts";
|
||||
import Card from "@/components/card.vue";
|
||||
const store = GlobalStore();
|
||||
const analysisData = ref(10 as any);
|
||||
const posCenter = ref(["50%", "64%"]);
|
||||
|
||||
function drawChart() {
|
||||
let leftTopEcharts = echarts.init(document.getElementById("echartsHjjc"));
|
||||
let option = {
|
||||
series: [
|
||||
{
|
||||
// 外围刻度
|
||||
type: "gauge",
|
||||
radius: "100%",
|
||||
center: posCenter.value,
|
||||
splitNumber: 10,
|
||||
min: 0,
|
||||
max: 500,
|
||||
startAngle: 180,
|
||||
endAngle: 0,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
width: 18,
|
||||
shadowBlur: 0,
|
||||
color: [
|
||||
[
|
||||
1,
|
||||
new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||
// {
|
||||
// offset: 0,
|
||||
// color: "rgba(151, 12, 12, 1)"
|
||||
// },
|
||||
// {
|
||||
// offset: 0.2,
|
||||
// color: "rgba(137, 14, 161, 1)"
|
||||
// },
|
||||
// {
|
||||
// offset: 0.4,
|
||||
// color: "rgba(119, 24, 254, 1)"
|
||||
// },
|
||||
// {
|
||||
// offset: 0.5,
|
||||
// color: "rgba(254, 122, 24, 1)"
|
||||
// },
|
||||
// {
|
||||
// offset: 0.8,
|
||||
// color: "rgba(255, 187, 56, 1)"
|
||||
// },
|
||||
// {
|
||||
// offset: 1,
|
||||
// color: "rgba(101, 215, 249, 1)"
|
||||
// }
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgba(101, 215, 249, 1)"
|
||||
},
|
||||
{
|
||||
offset: 0.2,
|
||||
color: "rgba(255, 187, 56, 1)"
|
||||
},
|
||||
{
|
||||
offset: 0.4,
|
||||
color: "rgba(254, 122, 24, 1)"
|
||||
},
|
||||
{
|
||||
offset: 0.5,
|
||||
color: "rgba(119, 24, 254, 1)"
|
||||
},
|
||||
{
|
||||
offset: 0.8,
|
||||
color: "rgba(137, 14, 161, 1)"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(151, 12, 12, 1)"
|
||||
}
|
||||
])
|
||||
]
|
||||
]
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
color: "#fff",
|
||||
fontSize: 10,
|
||||
distance: -40
|
||||
},
|
||||
pointer: {
|
||||
show: 0
|
||||
}
|
||||
},
|
||||
{
|
||||
// 内侧指针、数值显示
|
||||
name: "",
|
||||
type: "gauge",
|
||||
radius: "95%",
|
||||
center: posCenter.value,
|
||||
startAngle: 180,
|
||||
endAngle: 0,
|
||||
min: 0, //最小刻度
|
||||
max: 500, //最大刻度
|
||||
splitNumber: 100, //刻度数量
|
||||
axisLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: false
|
||||
}, //刻度标签。
|
||||
axisTick: {
|
||||
show: false
|
||||
}, //刻度样式
|
||||
splitLine: {
|
||||
show: true,
|
||||
length: 5,
|
||||
lineStyle: {
|
||||
color: "#87E0FB",
|
||||
width: 1
|
||||
}
|
||||
},
|
||||
detail: {
|
||||
show: false
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#fff"
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: analysisData.value
|
||||
}
|
||||
],
|
||||
z: 9
|
||||
},
|
||||
// 第三个圆
|
||||
{
|
||||
type: "gauge",
|
||||
radius: "70%",
|
||||
center: posCenter.value,
|
||||
splitNumber: 4,
|
||||
min: 0,
|
||||
max: 100,
|
||||
startAngle: 180,
|
||||
endAngle: 0,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
shadowBlur: 0,
|
||||
color: [
|
||||
[
|
||||
1,
|
||||
new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgb(1,192,229)"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#87E0FB "
|
||||
}
|
||||
])
|
||||
]
|
||||
]
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: false
|
||||
},
|
||||
pointer: {
|
||||
show: 0
|
||||
},
|
||||
detail: {
|
||||
show: 0
|
||||
}
|
||||
},
|
||||
// 第二个圆
|
||||
{
|
||||
type: "gauge",
|
||||
radius: "45%",
|
||||
center: posCenter.value,
|
||||
splitNumber: 4,
|
||||
min: 0,
|
||||
max: 100,
|
||||
startAngle: 180,
|
||||
endAngle: 0,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
shadowBlur: 0,
|
||||
color: [
|
||||
[
|
||||
1,
|
||||
new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "rgb(1,192,229)"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#87E0FB "
|
||||
}
|
||||
])
|
||||
]
|
||||
]
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: false
|
||||
},
|
||||
pointer: {
|
||||
show: 0
|
||||
},
|
||||
detail: {
|
||||
show: 0
|
||||
}
|
||||
},
|
||||
// 第一个圆
|
||||
{
|
||||
type: "gauge",
|
||||
radius: "25%",
|
||||
center: posCenter.value,
|
||||
splitNumber: 4,
|
||||
min: 0,
|
||||
max: 100,
|
||||
startAngle: 180,
|
||||
endAngle: 0,
|
||||
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
width: 200,
|
||||
shadowBlur: 0,
|
||||
color: [
|
||||
[
|
||||
1,
|
||||
new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||
{
|
||||
offset: 1,
|
||||
color: "rgba(135, 224, 251, 0.2)"
|
||||
},
|
||||
{
|
||||
offset: 0.2,
|
||||
color: "rgba(135, 224, 251, 0.7)"
|
||||
}
|
||||
])
|
||||
],
|
||||
[1, "transparent"]
|
||||
]
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: false
|
||||
},
|
||||
pointer: {
|
||||
show: 0
|
||||
},
|
||||
detail: {
|
||||
show: 0
|
||||
}
|
||||
},
|
||||
{
|
||||
type: "gauge",
|
||||
radius: "70%",
|
||||
center: posCenter.value,
|
||||
splitNumber: 0, //刻度数量
|
||||
startAngle: 180,
|
||||
endAngle: 0,
|
||||
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
width: 26,
|
||||
color: [
|
||||
[
|
||||
analysisData.value / 500,
|
||||
new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||
{
|
||||
offset: 0.5,
|
||||
color: "rgba(135, 224, 251, 1)"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#fff"
|
||||
}
|
||||
])
|
||||
],
|
||||
[1, "transparent"]
|
||||
]
|
||||
}
|
||||
},
|
||||
//分隔线样式。
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
pointer: {
|
||||
show: false
|
||||
},
|
||||
title: {
|
||||
show: false
|
||||
},
|
||||
//仪表盘详情，用于显示数据。
|
||||
detail: {
|
||||
show: false
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: analysisData.value,
|
||||
itemStyle: {
|
||||
color: "red"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
//指针外环
|
||||
type: "pie",
|
||||
hoverAnimation: false,
|
||||
legendHoverLink: false,
|
||||
center: posCenter.value,
|
||||
radius: ["8%", "6%"],
|
||||
// width:5,
|
||||
z: 10,
|
||||
label: {
|
||||
normal: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
normal: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: analysisData.value,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#87E0FB"
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
//指针内环
|
||||
type: "pie",
|
||||
hoverAnimation: false,
|
||||
legendHoverLink: false,
|
||||
center: posCenter.value,
|
||||
radius: ["-2%", "4%"],
|
||||
z: 10,
|
||||
|
||||
axisLine: {
|
||||
show: true
|
||||
},
|
||||
label: {
|
||||
normal: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
normal: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
|
||||
data: [
|
||||
{
|
||||
value: analysisData.value,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "rgba(7, 31, 60) "
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
leftTopEcharts.setOption(option);
|
||||
// window.addEventListener("resize", () => {
|
||||
// console.log(666)
|
||||
// leftTopEcharts.resize();
|
||||
// })
|
||||
// window.onresize = function () {
|
||||
// myEchart.resize();
|
||||
// }
|
||||
}
|
||||
//获取环境监测数据
|
||||
const getList = async () => {
|
||||
const res = await getCurrentDayAirQualityApi({ projectSn: store.sn });
|
||||
console.log("获取环境监测数据", res);
|
||||
if (res.result) {
|
||||
analysisData.value = res.result.analysisData;
|
||||
}
|
||||
drawChart();
|
||||
};
|
||||
//将方法暴露给父组件
|
||||
defineExpose({
|
||||
getList
|
||||
})
|
||||
onMounted( async () => {
|
||||
getList();
|
||||
// drawChart();
|
||||
});
|
||||
const list = ref([
|
||||
{ waterMeterName: 123, waterTonnage: 456 },
|
||||
{ waterMeterName: 123, waterTonnage: 456 },
|
||||
{ waterMeterName: 123, waterTonnage: 456 },
|
||||
{ waterMeterName: 123, waterTonnage: 456 }
|
||||
]) as any;
|
||||
onMounted(async () => {});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.leftTop {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.box {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
.footerData {
|
||||
position: absolute;
|
||||
top: 69%;
|
||||
left: 48%;
|
||||
font-family: sadigitalNumber;
|
||||
font-size: 14px;
|
||||
color: #fff;
|
||||
}
|
||||
.colour {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
font-size: 10px;
|
||||
left: 8%;
|
||||
top: 80%;
|
||||
color: #fff;
|
||||
|
||||
.colour_content {
|
||||
width: 14%;
|
||||
text-align: center;
|
||||
float: left;
|
||||
|
||||
.bg {
|
||||
width: 100%;
|
||||
height: 8px;
|
||||
margin-bottom: 10px;
|
||||
.box-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-top: 1%;
|
||||
.list-box {
|
||||
height: 94%;
|
||||
padding: 5px 24px;
|
||||
.listStyle {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: rgba(9, 30, 62, 0.5);
|
||||
box-shadow: 0px 3px 4px 0px rgba(17, 141, 255, 0.5), inset 0px 0px 10px 0px #118dff;
|
||||
border-radius: 0px 0px 0px 0px;
|
||||
border: 1px solid;
|
||||
opacity: 0.7;
|
||||
border-image: linear-gradient(359deg, rgba(17, 141, 255, 1), rgba(17, 141, 255, 0)) 1 1;
|
||||
padding: 9px 13px;
|
||||
margin-bottom: 10px;
|
||||
> div:nth-child(1) {
|
||||
font-family: ABeeZee, ABeeZee;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
color: #ffffff;
|
||||
line-height: 16px;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
> div:nth-child(2) {
|
||||
font-family: ABeeZee, ABeeZee;
|
||||
font-weight: 400;
|
||||
font-size: 13px;
|
||||
color: #ffffff;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
margin-bottom: 5px;
|
||||
> span:nth-child(2) {
|
||||
color: #01e1ff;
|
||||
}
|
||||
}
|
||||
> div:nth-child(3) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 2px;
|
||||
> div:nth-child(1) {
|
||||
font-family: ABeeZee, ABeeZee;
|
||||
font-weight: 400;
|
||||
font-size: 13px;
|
||||
color: #ffffff;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
> span:nth-child(2) {
|
||||
color: #01e1ff;
|
||||
}
|
||||
}
|
||||
> div:not(:nth-child(1)) {
|
||||
font-family: ABeeZee, ABeeZee;
|
||||
font-weight: 400;
|
||||
font-size: 13px;
|
||||
color: #8893a1;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.size {
|
||||
width: 100%;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
.not-data {
|
||||
top: 40%;
|
||||
width: 30%;
|
||||
left: 35%;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
img {
|
||||
width: 50%;
|
||||
}
|
||||
p {
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .h-card .content {
|
||||
height: 80%;
|
||||
}
|
||||
|
||||
@ -1,7 +1,47 @@
|
||||
<template>
|
||||
<div class="leftTop">
|
||||
<Card title="质量管理">
|
||||
<div id="echartsQuity" style="width: 100%; height: 100%"></div>
|
||||
<Card title="各企业本周数据统计">
|
||||
<el-carousel style="width: 100%;height: 100%;">
|
||||
<el-carousel-item v-for="item in 4" :key="item" style="width: 100%; height: 100%">
|
||||
<div class="box-content">
|
||||
<div class="top-content">
|
||||
<div class="top-content-left">辽宁五寰科技有限公司{{ item }}</div>
|
||||
<div class="top-content-right" style="text-align: 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="bottom-content">
|
||||
<div class="top-data-item">
|
||||
<span>入场人员总数</span>
|
||||
<span>12/2500</span>
|
||||
</div>
|
||||
<div class="top-data-item">
|
||||
<span>企业安全分</span>
|
||||
<span>85</span>
|
||||
</div>
|
||||
<div class="top-data-item">
|
||||
<span>安全隐患总数</span>
|
||||
<span>12</span>
|
||||
</div>
|
||||
<div class="top-data-item">
|
||||
<span>质量隐患总数</span>
|
||||
<span>12</span>
|
||||
</div>
|
||||
<div class="top-data-item">
|
||||
<span>特种作业数量</span>
|
||||
<span>60</span>
|
||||
</div>
|
||||
<div class="top-data-item">
|
||||
<span>培训未通过率</span>
|
||||
<span>30%</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-carousel-item>
|
||||
</el-carousel>
|
||||
</Card>
|
||||
</div>
|
||||
</template>
|
||||
@ -11,314 +51,104 @@ import Card from "@/components/card.vue";
|
||||
import { onMounted, ref } from "vue";
|
||||
import { GlobalStore } from "@/stores";
|
||||
const store = GlobalStore();
|
||||
import * as echarts from "echarts";
|
||||
import { selectQualityStatisticsApi } from "@/api/modules/projectOverview";
|
||||
|
||||
let questionTotal = ref(0 as any);
|
||||
let dataList = ref([
|
||||
{
|
||||
value: 30,
|
||||
show: true,
|
||||
name: "未整改质量问题",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#4CC4F8",
|
||||
borderWidth: 20
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
value: 70,
|
||||
show: true,
|
||||
name: "已整改质量问题",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#82FBEA",
|
||||
borderWidth: 20
|
||||
}
|
||||
}
|
||||
}
|
||||
]);
|
||||
function Pie() {
|
||||
let dataArr = [];
|
||||
for (var i = 0; i < 150; i++) {
|
||||
if (i % 2 === 0) {
|
||||
dataArr.push({
|
||||
name: (i + 1).toString(),
|
||||
value: 10,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#7cf4f1",
|
||||
borderWidth: 0,
|
||||
borderColor: "#7f6546"
|
||||
}
|
||||
}
|
||||
});
|
||||
} else {
|
||||
dataArr.push({
|
||||
name: (i + 1).toString(),
|
||||
value: 10,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "rgba(0,0,0,0)",
|
||||
borderWidth: 0,
|
||||
borderColor: "rgba(0,0,0,0)"
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
return dataArr;
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
drawEchart();
|
||||
});
|
||||
|
||||
function drawEchart() {
|
||||
let echartsTest = echarts.init(document.getElementById("echartsQuity"));
|
||||
let option = {
|
||||
tooltip: {
|
||||
trigger: "item"
|
||||
},
|
||||
title: {
|
||||
text: questionTotal.value,
|
||||
subtext: "质量问题数",
|
||||
x: "24%",
|
||||
y: "center",
|
||||
textAlign: "center",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
fontSize: 26,
|
||||
fontWeight: "normal",
|
||||
// align: "center",
|
||||
// width: "200px",
|
||||
fontFamily: "sadigitalNumber"
|
||||
},
|
||||
subtextStyle: {
|
||||
color: "#ccc",
|
||||
fontSize: 12,
|
||||
fontWeight: "normal"
|
||||
// align: "center",
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
selectedMode: false, // 取消图例上的点击事件
|
||||
icon: "rect",
|
||||
type: "plain",
|
||||
orient: "vertical",
|
||||
left: "50%",
|
||||
top: "40%",
|
||||
align: "left",
|
||||
itemGap: 30,
|
||||
itemWidth: 8, // 设置宽度
|
||||
itemHeight: 7, // 设置高度
|
||||
symbolKeepAspect: false,
|
||||
textStyle: {
|
||||
color: "#000",
|
||||
rich: {
|
||||
name: {
|
||||
verticalAlign: "right",
|
||||
align: "left",
|
||||
fontSize: 14,
|
||||
color: "#FFFFFF"
|
||||
},
|
||||
value: {
|
||||
align: "left",
|
||||
fontSize: 14,
|
||||
color: "#FFFFFF"
|
||||
}
|
||||
}
|
||||
},
|
||||
data: dataList.value.map(item => {
|
||||
if (item.show) {
|
||||
return item.name;
|
||||
}
|
||||
}),
|
||||
formatter: function (data) {
|
||||
if (dataList.value && dataList.value.length) {
|
||||
for (var i = 0; i < dataList.value.length; i++) {
|
||||
if (data === dataList.value[i].name) {
|
||||
var value = dataList.value[i].value;
|
||||
var percentage = value + "%";
|
||||
return "{name| " + data + "} {gap| }" + "{value|" + value + " " + "}";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
series: [
|
||||
// 外侧光线
|
||||
{
|
||||
name: "",
|
||||
type: "gauge",
|
||||
center: ["25%", "55%"],
|
||||
radius: "90%",
|
||||
startAngle: 235,
|
||||
endAngle: -50,
|
||||
min: 0,
|
||||
max: 100,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: [
|
||||
[
|
||||
100 / 100,
|
||||
new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||
{
|
||||
offset: 0,
|
||||
color: "#526277"
|
||||
},
|
||||
{
|
||||
offset: 0.25,
|
||||
color: "rgba(4, 14, 54,0.4)"
|
||||
},
|
||||
{
|
||||
offset: 0.7,
|
||||
color: "rgba(4, 14, 54,0.4)"
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: "#526277"
|
||||
}
|
||||
])
|
||||
],
|
||||
[1, "rgba(255,255,255,0)"]
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
axisTick: {
|
||||
show: 0
|
||||
},
|
||||
splitLine: {
|
||||
show: 0
|
||||
},
|
||||
axisLabel: {
|
||||
show: 0
|
||||
},
|
||||
pointer: {
|
||||
show: 0
|
||||
},
|
||||
detail: {
|
||||
show: 0
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "",
|
||||
type: "gauge",
|
||||
center: ["25%", "55%"],
|
||||
radius: "80%",
|
||||
startAngle: 245,
|
||||
endAngle: -115,
|
||||
min: 0,
|
||||
max: 100,
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
width: 2,
|
||||
color: [
|
||||
[
|
||||
200 / 100,
|
||||
new echarts.graphic.LinearGradient(0, 0, 1, 0, [
|
||||
{
|
||||
offset: 0.8,
|
||||
color: "#52bef0"
|
||||
},
|
||||
{
|
||||
offset: 0.5,
|
||||
color: "#13356b"
|
||||
}
|
||||
])
|
||||
],
|
||||
[1, "rgba(255,255,255,0)"]
|
||||
]
|
||||
}
|
||||
},
|
||||
|
||||
axisTick: {
|
||||
show: 0
|
||||
},
|
||||
splitLine: {
|
||||
show: 0
|
||||
},
|
||||
axisLabel: {
|
||||
show: 0
|
||||
},
|
||||
pointer: {
|
||||
show: 0
|
||||
},
|
||||
detail: {
|
||||
show: 0
|
||||
}
|
||||
},
|
||||
{
|
||||
name: "",
|
||||
type: "pie",
|
||||
radius: [65, 75],
|
||||
center: ["25%", "55%"],
|
||||
hoverAnimation: true,
|
||||
itemStyle: {
|
||||
borderRadius: 10,
|
||||
borderWidth: 10
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
position: "center"
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: false
|
||||
}
|
||||
},
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: dataList.value
|
||||
},
|
||||
{
|
||||
type: "pie",
|
||||
radius: ["57", "60"],
|
||||
center: ["25%", "55%"],
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
|
||||
data: Pie()
|
||||
}
|
||||
]
|
||||
};
|
||||
echartsTest.setOption(option, true);
|
||||
// window.addEventListener("resize", () => {
|
||||
// console.log(666)
|
||||
// echartsTest.resize();
|
||||
// })
|
||||
}
|
||||
//获取质量管理
|
||||
// const safeData = ref(null as any);
|
||||
const qualityInfo = async () => {
|
||||
const res: any = await selectQualityStatisticsApi({ projectSn: store.sn });
|
||||
dataList.value[0].value = res.result.total.rectificationNum;
|
||||
dataList.value[1].value = res.result.total.totalNum - res.result.total.rectificationNum;
|
||||
questionTotal.value = res.result.total.totalNum;
|
||||
drawEchart();
|
||||
};
|
||||
//将方法暴露给父组件
|
||||
defineExpose({
|
||||
qualityInfo
|
||||
})
|
||||
onMounted( async () => {
|
||||
qualityInfo();
|
||||
const projectData = ref({
|
||||
totalProjectDay: "180"
|
||||
});
|
||||
onMounted(() => {});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
<style lang="scss" scoped>
|
||||
.leftTop {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.box-content {
|
||||
.top-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin: 0 4%;
|
||||
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;
|
||||
}
|
||||
}
|
||||
&-left {
|
||||
font-family: ABeeZee, ABeeZee;
|
||||
font-weight: 400;
|
||||
font-size: 16px !important;
|
||||
color: #ffffff;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
text-transform: none;
|
||||
}
|
||||
}
|
||||
.bottom-content {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-gap: 10px;
|
||||
margin: 0 6%;
|
||||
margin-top: 3%;
|
||||
.top-data-item {
|
||||
width: 125px;
|
||||
height: 51px;
|
||||
background: url("@/assets/images/comprehensiveManage/bgOne.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 2% 0;
|
||||
padding-left: 8%;
|
||||
margin-bottom: 8%;
|
||||
span:nth-child(1) {
|
||||
font-size: 13px;
|
||||
color: #fff;
|
||||
font-family: ABeeZee-Regular;
|
||||
margin-bottom: 1%;
|
||||
}
|
||||
span:nth-child(2) {
|
||||
font-size: 24px;
|
||||
color: #65d7f9;
|
||||
font-family: ABeeZee-Regular;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
::v-deep .h-card .content {
|
||||
height: 80%;
|
||||
}
|
||||
::v-deep .el-carousel__container {
|
||||
height: 100%;
|
||||
}
|
||||
:deep(){
|
||||
.el-carousel__indicator--horizontal .el-carousel__button {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: #A8C3DD;
|
||||
border: 1px solid #A8C3DD;
|
||||
border-radius: 50%;
|
||||
opacity: 0.3;
|
||||
}
|
||||
.el-carousel__indicator--horizontal.is-active .el-carousel__button{
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: #4AC0F3;
|
||||
border: 1px solid #4AC0F3;
|
||||
border-radius: 50%;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,7 +1,31 @@
|
||||
<template>
|
||||
<div class="leftTop">
|
||||
<Card title="安全管理">
|
||||
<div id="echartsSafe" style="width: 100%; height: 100%"></div>
|
||||
<Card title="隐患智能统计分析">
|
||||
<div class="box-content">
|
||||
<div class="contentTop contentMiddle">
|
||||
<div class="ctHead">
|
||||
<div>
|
||||
质量重大隐患超期未整改<text>{{ overdueMajorDangerCount }}</text
|
||||
>个，占比<text>{{ overdueMajorDangerRate }}%</text>
|
||||
</div>
|
||||
</div>
|
||||
<div class="cmHead">
|
||||
<div>
|
||||
安全重大隐患未销项<text>{{ majorDangerCount }}</text
|
||||
>个，占比<text>{{ majorDangerRate }}%</text>
|
||||
</div>
|
||||
</div>
|
||||
<div class="ctContent" style="position: relative">
|
||||
<div id="echartsSafe" style="width: 100%; height: 100%;"></div>
|
||||
<div class="safetext1" v-if="dataList.length != 0">状态统计（较昨日）</div>
|
||||
<div class="safetext2" v-if="dataList.length != 0">风险统计（较昨日）</div>
|
||||
<div class="notoDta" v-if="dataList.length == 0">
|
||||
<img src="@/assets/images/noData.png" alt="" />
|
||||
<p>暂无数据</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
</div>
|
||||
</template>
|
||||
@ -10,18 +34,24 @@
|
||||
import Card from "@/components/card.vue";
|
||||
import { onMounted, ref } from "vue";
|
||||
import { GlobalStore } from "@/stores";
|
||||
const store = GlobalStore();
|
||||
import { getProjectInspectRecordCountApi } from "@/api/modules/projectOverview";
|
||||
import * as echarts from "echarts";
|
||||
const echartsTest = ref();
|
||||
const store = GlobalStore();
|
||||
let questionTotal = ref(0 as any);
|
||||
|
||||
const echartsTest = ref();
|
||||
const majorDangerCount = ref(0 as any);
|
||||
const majorDangerRate = ref(0 as any);
|
||||
const overdueMajorDangerCount = ref(0 as any);
|
||||
const overdueMajorDangerRate = ref(0 as any);
|
||||
let dataList = ref([
|
||||
{
|
||||
enumType: "",
|
||||
value: 30,
|
||||
show: true,
|
||||
name: "未整改安全问题",
|
||||
|
||||
name: "重大隐患",
|
||||
greatFaultLevelNumJzrRate: "",
|
||||
rectificationNum: "",
|
||||
rectificationNumJzrRate: "",
|
||||
rectificationName: "",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#EC6266",
|
||||
@ -30,9 +60,14 @@ let dataList = ref([
|
||||
}
|
||||
},
|
||||
{
|
||||
enumType: "",
|
||||
value: 70,
|
||||
show: true,
|
||||
name: "已整改安全问题",
|
||||
name: "一般隐患",
|
||||
greatFaultLevelNumJzrRate: "",
|
||||
rectificationNum: "",
|
||||
rectificationNumJzrRate: "",
|
||||
rectificationName: "",
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#6375C7",
|
||||
@ -41,7 +76,7 @@ let dataList = ref([
|
||||
}
|
||||
}
|
||||
]);
|
||||
function Pie() {
|
||||
const Pie = () => {
|
||||
let dataArr = [];
|
||||
for (var i = 0; i < 150; i++) {
|
||||
if (i % 2 === 0) {
|
||||
@ -72,18 +107,19 @@ function Pie() {
|
||||
}
|
||||
return dataArr;
|
||||
}
|
||||
|
||||
function drawEchart() {
|
||||
const drawEchart = () => {
|
||||
echartsTest.value = echarts.init(document.getElementById("echartsSafe"));
|
||||
let option = {
|
||||
animation: false, // 取消动画
|
||||
tooltip: {
|
||||
trigger: "item"
|
||||
trigger: "item",
|
||||
// position: ['50%','50%']
|
||||
},
|
||||
title: {
|
||||
text: questionTotal.value,
|
||||
subtext: "安全问题数",
|
||||
x: "24%",
|
||||
y: "center",
|
||||
text: 100,
|
||||
subtext: "累计隐患总数",
|
||||
x: "17%",
|
||||
y: "36%",
|
||||
textAlign: "center",
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
@ -94,63 +130,158 @@ function drawEchart() {
|
||||
},
|
||||
subtextStyle: {
|
||||
color: "#ccc",
|
||||
fontSize: 12,
|
||||
fontSize: 10,
|
||||
fontWeight: "normal"
|
||||
// align: "center"
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
selectedMode: false, // 取消图例上的点击事件
|
||||
icon: "rect",
|
||||
type: "plain",
|
||||
orient: "vertical",
|
||||
left: "50%",
|
||||
top: "40%",
|
||||
align: "left",
|
||||
itemGap: 30,
|
||||
itemWidth: 8, // 设置宽度
|
||||
itemHeight: 7, // 设置高度
|
||||
symbolKeepAspect: false,
|
||||
textStyle: {
|
||||
color: "#000",
|
||||
rich: {
|
||||
name: {
|
||||
verticalAlign: "right",
|
||||
align: "left",
|
||||
fontSize: 14,
|
||||
color: "#FFFFFF"
|
||||
},
|
||||
value: {
|
||||
align: "left",
|
||||
fontSize: 14,
|
||||
color: "#FFFFFF"
|
||||
legend: [
|
||||
{
|
||||
title: "风险图",
|
||||
selectedMode: true, // 取消图例上的点击事件
|
||||
icon: "rect",
|
||||
type: "plain",
|
||||
orient: "vertical",
|
||||
right: "0%",
|
||||
top: "25%",
|
||||
align: "left",
|
||||
itemGap: 14,
|
||||
itemWidth: 8, // 设置宽度
|
||||
itemHeight: 7, // 设置高度
|
||||
symbolKeepAspect: false,
|
||||
textStyle: {
|
||||
color: "#000",
|
||||
rich: {
|
||||
name: {
|
||||
verticalAlign: "right",
|
||||
align: "left",
|
||||
fontSize: 10,
|
||||
color: "#FFFFFF"
|
||||
},
|
||||
value: {
|
||||
align: "left",
|
||||
fontSize: 14,
|
||||
color: "#FFFFFF"
|
||||
},
|
||||
color1: {
|
||||
align: "left",
|
||||
fontSize: 14,
|
||||
color: "#0063C4"
|
||||
},
|
||||
color2: {
|
||||
align: "left",
|
||||
fontSize: 14,
|
||||
color: "#D81E06"
|
||||
},
|
||||
value1: {
|
||||
align: "left",
|
||||
fontSize: 12,
|
||||
color: "#FFFFFF"
|
||||
}
|
||||
}
|
||||
},
|
||||
data: dataList.value.map((item, index) => {
|
||||
if (item.show && index != 4) {
|
||||
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;
|
||||
const greatFaultLevelNumJzrRate = Number(dataList.value[i].greatFaultLevelNumJzrRate);
|
||||
let percentage =
|
||||
greatFaultLevelNumJzrRate >= 0
|
||||
? greatFaultLevelNumJzrRate + "%"
|
||||
: greatFaultLevelNumJzrRate.toString().substr(1) + "%";
|
||||
|
||||
const templateString = greatFaultLevelNumJzrRate > 0 ? `color1|↑` : "color2|↓";
|
||||
return "{name| " + data + "} {gap| }" + `{value|${value}} {${templateString}} {value1|${percentage}}`;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
data: dataList.value.map(item => {
|
||||
if (item.show) {
|
||||
return item.name;
|
||||
}
|
||||
}),
|
||||
formatter: function (data) {
|
||||
if (dataList.value && dataList.value.length) {
|
||||
for (var i = 0; i < dataList.value.length; i++) {
|
||||
if (data === dataList.value[i].name) {
|
||||
var value = dataList.value[i].value;
|
||||
var percentage = value + "%";
|
||||
return "{name| " + data + "} {gap| }" + "{value|" + value + " " + "}";
|
||||
{
|
||||
name: "状态统计（较昨日）",
|
||||
selectedMode: false, // 取消图例上的点击事件
|
||||
icon: "none",
|
||||
type: "plain",
|
||||
orient: "vertical",
|
||||
left: "35%",
|
||||
top: "25%",
|
||||
align: "left",
|
||||
itemGap: 14,
|
||||
itemWidth: 8, // 设置宽度
|
||||
itemHeight: 7, // 设置高度
|
||||
symbolKeepAspect: false,
|
||||
textStyle: {
|
||||
color: "#000",
|
||||
rich: {
|
||||
name: {
|
||||
verticalAlign: "right",
|
||||
align: "left",
|
||||
fontSize: 10,
|
||||
color: "#FFFFFF"
|
||||
},
|
||||
value: {
|
||||
align: "left",
|
||||
fontSize: 14,
|
||||
color: "#FFFFFF"
|
||||
},
|
||||
color1: {
|
||||
align: "left",
|
||||
fontSize: 14,
|
||||
color: "#0063C4"
|
||||
},
|
||||
color2: {
|
||||
align: "left",
|
||||
fontSize: 14,
|
||||
color: "#D81E06"
|
||||
},
|
||||
value1: {
|
||||
align: "left",
|
||||
fontSize: 12,
|
||||
color: "#FFFFFF"
|
||||
}
|
||||
}
|
||||
},
|
||||
data: dataList.value.map(item => {
|
||||
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) {
|
||||
let value = dataList.value[i].rectificationNum;
|
||||
let rectificationName = dataList.value[i].rectificationName;
|
||||
const rectificationNumJzrRate = Number(dataList.value[i].rectificationNumJzrRate);
|
||||
let percentage =
|
||||
rectificationNumJzrRate >= 0
|
||||
? rectificationNumJzrRate.toFixed(2) + "%"
|
||||
: rectificationNumJzrRate.toFixed(2).toString().substr(1) + "%";
|
||||
const templateString = rectificationNumJzrRate > 0 ? `color1|↑` : "color2|↓";
|
||||
// ↓
|
||||
return (
|
||||
"{name| " + rectificationName + "} {gap| }" + `{value|${value}} {${templateString}} {value1|${percentage}}`
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
],
|
||||
series: [
|
||||
// 外侧光线
|
||||
{
|
||||
name: "",
|
||||
type: "gauge",
|
||||
center: ["25%", "55%"],
|
||||
radius: "90%",
|
||||
center: ["18%", "52%"],
|
||||
radius: "88%",
|
||||
startAngle: 235,
|
||||
endAngle: -50,
|
||||
min: 0,
|
||||
@ -205,7 +336,7 @@ function drawEchart() {
|
||||
{
|
||||
name: "",
|
||||
type: "gauge",
|
||||
center: ["25%", "55%"],
|
||||
center: ["18%", "52%"],
|
||||
radius: "80%",
|
||||
startAngle: 245,
|
||||
endAngle: -115,
|
||||
@ -254,7 +385,7 @@ function drawEchart() {
|
||||
name: "",
|
||||
type: "pie",
|
||||
radius: [65, 75],
|
||||
center: ["25%", "55%"],
|
||||
center: ["18%", "52%"],
|
||||
hoverAnimation: true,
|
||||
itemStyle: {
|
||||
borderRadius: 10,
|
||||
@ -277,7 +408,7 @@ function drawEchart() {
|
||||
{
|
||||
type: "pie",
|
||||
radius: ["57", "60"],
|
||||
center: ["25%", "55%"],
|
||||
center: ["18%", "52%"],
|
||||
label: {
|
||||
show: false
|
||||
},
|
||||
@ -285,80 +416,124 @@ function drawEchart() {
|
||||
}
|
||||
]
|
||||
};
|
||||
// let option = {
|
||||
// tooltip: {
|
||||
// trigger: 'item'
|
||||
// },
|
||||
// legend: {
|
||||
// top: '5%',
|
||||
// left: 'center'
|
||||
// },
|
||||
// series: [
|
||||
// {
|
||||
// name: 'Access From',
|
||||
// type: 'pie',
|
||||
// radius: ['40%', '70%'],
|
||||
// avoidLabelOverlap: false,
|
||||
// label: {
|
||||
// show: false,
|
||||
// position: 'center'
|
||||
// },
|
||||
// emphasis: {
|
||||
// label: {
|
||||
// show: true,
|
||||
// fontSize: 40,
|
||||
// fontWeight: 'bold'
|
||||
// }
|
||||
// },
|
||||
// labelLine: {
|
||||
// show: false
|
||||
// },
|
||||
// data: [
|
||||
// { value: 1048, name: 'Search Engine' },
|
||||
// { value: 735, name: 'Direct' },
|
||||
// { value: 580, name: 'Email' },
|
||||
// { value: 484, name: 'Union Ads' },
|
||||
// { value: 300, name: 'Video Ads' }
|
||||
// ]
|
||||
// }
|
||||
// ]
|
||||
// };
|
||||
echartsTest.value.setOption(option, true);
|
||||
window.addEventListener("resize", () => {
|
||||
console.log(echartsTest)
|
||||
echartsTest.value.resize();
|
||||
})
|
||||
}
|
||||
});
|
||||
|
||||
//获取安全管理
|
||||
// const safeData = ref(null as any);
|
||||
const getSafeInfo = async () => {
|
||||
const res: any = await getProjectInspectRecordCountApi({ projectSn: store.sn });
|
||||
// console.log("获取安全管理", res);
|
||||
// safeData.value = res.result;
|
||||
dataList.value[0].value = res.result.rectificationNum;
|
||||
dataList.value[1].value = res.result.totalNum - res.result.rectificationNum;
|
||||
questionTotal.value = res.result.totalNum;
|
||||
drawEchart();
|
||||
};
|
||||
//将方法暴露给父组件
|
||||
defineExpose({
|
||||
getSafeInfo
|
||||
})
|
||||
//图例点击事件
|
||||
// echartsTest.value.on("legendselectchanged", (params: any) => {
|
||||
// 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 () => {
|
||||
await getSafeInfo();
|
||||
// window.onresize = function(){
|
||||
// if(echartsTest.value){
|
||||
// echartsTest.value.resize();
|
||||
// }
|
||||
// }
|
||||
drawEchart();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
<style lang="scss" scoped>
|
||||
.safetext1 {
|
||||
position: absolute;
|
||||
top: 6%;
|
||||
color: white;
|
||||
left: 42%;
|
||||
}
|
||||
.safetext2 {
|
||||
position: absolute;
|
||||
top: 6%;
|
||||
color: white;
|
||||
right: 3%;
|
||||
}
|
||||
.leftTop {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
.box-content {
|
||||
height: 100%;
|
||||
.contentTop {
|
||||
margin-top: 10px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.ctHead {
|
||||
background-color: #002f69;
|
||||
padding-bottom: 5px;
|
||||
color: #fff;
|
||||
height: 13%;
|
||||
font-size: 16px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-end;
|
||||
cursor: pointer;
|
||||
|
||||
text {
|
||||
font-size: 24px;
|
||||
color: #fc4c4c;
|
||||
}
|
||||
}
|
||||
|
||||
.ctContent {
|
||||
height: 68%;
|
||||
// background-color: darkred;
|
||||
}
|
||||
}
|
||||
|
||||
.contentMiddle {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.cmHead {
|
||||
background-color: #002f69;
|
||||
padding-bottom: 5px;
|
||||
color: #fff;
|
||||
height: 13%;
|
||||
font-size: 16px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-end;
|
||||
margin-top: 1%;
|
||||
cursor: pointer;
|
||||
|
||||
text {
|
||||
font-size: 24px;
|
||||
color: #0db027;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.notoDta {
|
||||
top: 25%;
|
||||
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%;
|
||||
}
|
||||
}
|
||||
::v-deep .h-card .content {
|
||||
height: 80%;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user