dev:指挥部大屏
This commit is contained in:
Vce
parent
ac30afc740
commit
779b8684b0
@ -56,7 +56,7 @@
|
|||||||
<div>及时整改率</div>
|
<div>及时整改率</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="listBox">
|
<div class="listBox">
|
||||||
<el-scrollbar height="150">
|
<el-scrollbar height="350">
|
||||||
<div v-for="(item, index) in tabList" :key="index" class="listStyle">
|
<div v-for="(item, index) in tabList" :key="index" class="listStyle">
|
||||||
<div>{{ item.name }}</div>
|
<div>{{ item.name }}</div>
|
||||||
<div>{{ item.count }}</div>
|
<div>{{ item.count }}</div>
|
||||||
@ -111,7 +111,23 @@ const tabList = [
|
|||||||
{ sortLine: "5", name: "Tom", count: "1", rate: "100%", immediateRate: "100%" },
|
{ sortLine: "5", name: "Tom", count: "1", rate: "100%", immediateRate: "100%" },
|
||||||
{ sortLine: "5", name: "Tom", count: "1", rate: "100%", immediateRate: "100%" },
|
{ sortLine: "5", name: "Tom", count: "1", rate: "100%", immediateRate: "100%" },
|
||||||
{ sortLine: "5", name: "Tom", count: "1", rate: "100%", immediateRate: "100%" },
|
{ sortLine: "5", name: "Tom", count: "1", rate: "100%", immediateRate: "100%" },
|
||||||
{ sortLine: "5", name: "Tom", count: "1", rate: "100%", immediateRate: "100%" }
|
{ sortLine: "5", name: "Tom", count: "1", rate: "100%", immediateRate: "100%" },
|
||||||
|
{ sortLine: "5", name: "Tom", count: "1", rate: "100%", immediateRate: "100%" },
|
||||||
|
{ sortLine: "5", name: "Tom", count: "1", rate: "100%", immediateRate: "100%" },
|
||||||
|
{ sortLine: "5", name: "Tom", count: "1", rate: "100%", immediateRate: "100%" },
|
||||||
|
{ sortLine: "5", name: "Tom", count: "1", rate: "100%", immediateRate: "100%" },
|
||||||
|
{ sortLine: "5", name: "Tom", count: "1", rate: "100%", immediateRate: "100%" },
|
||||||
|
{ sortLine: "5", name: "Tom", count: "1", rate: "100%", immediateRate: "100%" },
|
||||||
|
{ sortLine: "5", name: "Tom", count: "1", rate: "100%", immediateRate: "100%" },
|
||||||
|
{ sortLine: "5", name: "Tom", count: "1", rate: "100%", immediateRate: "100%" },
|
||||||
|
{ sortLine: "5", name: "Tom", count: "1", rate: "100%", immediateRate: "100%" },
|
||||||
|
{ sortLine: "5", name: "Tom", count: "1", rate: "100%", immediateRate: "100%" },
|
||||||
|
{ sortLine: "5", name: "Tom", count: "1", rate: "100%", immediateRate: "100%" },
|
||||||
|
{ sortLine: "5", name: "Tom", count: "1", rate: "100%", immediateRate: "100%" },
|
||||||
|
{ sortLine: "5", name: "Tom", count: "1", rate: "100%", immediateRate: "100%" },
|
||||||
|
{ sortLine: "5", name: "Tom", count: "1", rate: "100%", immediateRate: "100%" },
|
||||||
|
{ sortLine: "5", name: "Tom", count: "1", rate: "100%", immediateRate: "100%" },
|
||||||
|
{ sortLine: "5", name: "Tom", count: "1", rate: "100%", immediateRate: "100%" },
|
||||||
];
|
];
|
||||||
onMounted(async () => {});
|
onMounted(async () => {});
|
||||||
</script>
|
</script>
|
||||||
@ -228,6 +244,7 @@ onMounted(async () => {});
|
|||||||
}
|
}
|
||||||
.dialogContainer {
|
.dialogContainer {
|
||||||
padding: 0 50px;
|
padding: 0 50px;
|
||||||
|
// height: 600px;
|
||||||
::v-deep .el-tabs__item {
|
::v-deep .el-tabs__item {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
@ -298,13 +315,20 @@ onMounted(async () => {});
|
|||||||
background: url("@/assets/images/commandScreen/dialog-bg.png") no-repeat;
|
background: url("@/assets/images/commandScreen/dialog-bg.png") no-repeat;
|
||||||
// background-color: #fff;
|
// background-color: #fff;
|
||||||
background-size: 100% 100%;
|
background-size: 100% 100%;
|
||||||
|
margin-top: 12%;
|
||||||
}
|
}
|
||||||
::v-deep .el-dialog__headerbtn{
|
::v-deep .el-dialog__headerbtn{
|
||||||
right: 20px;
|
right: 35px;
|
||||||
|
top: 25px;
|
||||||
}
|
}
|
||||||
::v-deep .el-dialog .el-dialog__header .el-dialog__title{
|
::v-deep .el-dialog .el-dialog__header .el-dialog__title{
|
||||||
margin-left: 20px;
|
margin-left: 30px;
|
||||||
|
margin-top: 10px;
|
||||||
font-size: 18px;
|
font-size: 18px;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
::v-deep el-dialog__header{
|
||||||
|
margin-top: 20px;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -1,155 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="rightTop">
|
|
||||||
<div class="ctHead">
|
|
||||||
<div>重大隐患超期未整改<text>{{overdueMajorDangerCount}}</text>个，占比<text>{{overdueMajorDangerRate}}%</text></div>
|
|
||||||
</div>
|
|
||||||
<div class="ctContent">
|
|
||||||
<div id="echartsSafe" style="width: 100%; height: 100%"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import Card from "@/components/card.vue";
|
|
||||||
import { onMounted, ref } from "vue";
|
|
||||||
import { GlobalStore } from "@/stores";
|
|
||||||
import rightTop from "@/views/commandScreen/commandCenter/rightPage/rightTop.vue";
|
|
||||||
// import rightCenter from "@/views/commandScreen/commandCenter/rightCenter.vue";
|
|
||||||
const store = GlobalStore();
|
|
||||||
import { getProjectInspectRecordCountApi } from "@/api/modules/projectOverview";
|
|
||||||
import * as echarts from "echarts";
|
|
||||||
const echartsTest = ref();
|
|
||||||
let questionTotal = ref(0 as any);
|
|
||||||
|
|
||||||
let dateRange = ref([] as any);
|
|
||||||
|
|
||||||
let majorDangerCount = ref(20 as any);
|
|
||||||
let majorDangerRate = ref(50 as any);
|
|
||||||
let overdueMajorDangerCount = ref(20 as any);
|
|
||||||
let overdueMajorDangerRate = ref(50 as any);
|
|
||||||
|
|
||||||
let listData = ref([
|
|
||||||
{header: '重大风险',type: 1,content: '正处于吊装施工重大风险作业阶段，请注意在操作前，应对吊装设备进行安全把控'},
|
|
||||||
{header: '特种作业人员教育',type: 2,content: '1#塔吊报警频次较上周增长60%，塔吊间各个设备之间的衔接进行全面检查，以防止'},
|
|
||||||
{header: '重大风险',type: 1,content: '正处于吊装施工重大风险作业阶段，请注意在操作前，应对吊装设备进行安全把控'},
|
|
||||||
{header: '特种作业人员教育',type: 2,content: '1#塔吊报警频次较上周增长60%，塔吊间各个设备之间的衔接进行全面检查，以防止'},
|
|
||||||
{header: '重大风险',type: 1,content: '正处于吊装施工重大风险作业阶段，请注意在操作前，应对吊装设备进行安全把控'},
|
|
||||||
{header: '特种作业人员教育',type: 2,content: '1#塔吊报警频次较上周增长60%，塔吊间各个设备之间的衔接进行全面检查，以防止'},
|
|
||||||
{header: '重大风险',type: 1,content: '正处于吊装施工重大风险作业阶段，请注意在操作前，应对吊装设备进行安全把控'},
|
|
||||||
{header: '特种作业人员教育',type: 2,content: '1#塔吊报警频次较上周增长60%，塔吊间各个设备之间的衔接进行全面检查，以防止'},
|
|
||||||
{header: '重大风险',type: 1,content: '正处于吊装施工重大风险作业阶段，请注意在操作前，应对吊装设备进行安全把控'},
|
|
||||||
{header: '特种作业人员教育',type: 2,content: '1#塔吊报警频次较上周增长60%，塔吊间各个设备之间的衔接进行全面检查，以防止'},
|
|
||||||
{header: '重大风险',type: 1,content: '正处于吊装施工重大风险作业阶段，请注意在操作前，应对吊装设备进行安全把控'},
|
|
||||||
{header: '特种作业人员教育',type: 2,content: '1#塔吊报警频次较上周增长60%，塔吊间各个设备之间的衔接进行全面检查，以防止'},
|
|
||||||
{header: '重大风险',type: 1,content: '正处于吊装施工重大风险作业阶段，请注意在操作前，应对吊装设备进行安全把控'},
|
|
||||||
{header: '特种作业人员教育',type: 2,content: '1#塔吊报警频次较上周增长60%，塔吊间各个设备之间的衔接进行全面检查，以防止'},
|
|
||||||
{header: '重大风险',type: 1,content: '正处于吊装施工重大风险作业阶段，请注意在操作前，应对吊装设备进行安全把控'},
|
|
||||||
{header: '特种作业人员教育',type: 2,content: '1#塔吊报警频次较上周增长60%，塔吊间各个设备之间的衔接进行全面检查，以防止'},
|
|
||||||
{header: '重大风险',type: 1,content: '正处于吊装施工重大风险作业阶段，请注意在操作前，应对吊装设备进行安全把控'},
|
|
||||||
{header: '特种作业人员教育',type: 2,content: '1#塔吊报警频次较上周增长60%，塔吊间各个设备之间的衔接进行全面检查，以防止'},
|
|
||||||
])
|
|
||||||
|
|
||||||
let dataList = ref([
|
|
||||||
{
|
|
||||||
value: 30,
|
|
||||||
show: true,
|
|
||||||
name: "未整改安全问题",
|
|
||||||
|
|
||||||
itemStyle: {
|
|
||||||
normal: {
|
|
||||||
color: "#EC6266",
|
|
||||||
borderWidth: 20
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
value: 70,
|
|
||||||
show: true,
|
|
||||||
name: "已整改安全问题",
|
|
||||||
itemStyle: {
|
|
||||||
normal: {
|
|
||||||
color: "#6375C7",
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
//获取安全管理
|
|
||||||
// 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
|
|
||||||
})
|
|
||||||
onMounted(async () => {
|
|
||||||
await getSafeInfo();
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.rightTop {
|
|
||||||
margin-top: 10px;
|
|
||||||
width: 100%;
|
|
||||||
height: 25%;
|
|
||||||
.ctHead{
|
|
||||||
background-color: #002f69;
|
|
||||||
padding-bottom: 5px;
|
|
||||||
color: #fff;
|
|
||||||
height: 15%;
|
|
||||||
font-size: 16px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: flex-end;
|
|
||||||
text{
|
|
||||||
font-size: 24px;
|
|
||||||
color: #fc4c4c;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.ctContent{
|
|
||||||
height: 85%;
|
|
||||||
// background-color: darkred;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
Loading…
x
Reference in New Issue
Block a user