1172 lines
26 KiB
Vue
1172 lines
26 KiB
Vue
<template>
|
||
<div class="rightAll">
|
||
<div class="header">
|
||
<div class="hLeft">
|
||
隐患统计智能分析
|
||
</div>
|
||
<div class="hRight">
|
||
<el-date-picker style="width: 85%" v-model="dateRange" type="daterange" range-separator="至"
|
||
start-placeholder="开始日期" end-placeholder="结束日期" value-format="YYYY-MM-DD" />
|
||
</div>
|
||
</div>
|
||
<div class="content">
|
||
<div class="contentTop">
|
||
<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 class="notoDta" v-if="dataList.length == 0">
|
||
<img src="@/assets/images/noData.png" alt="" />
|
||
<p>暂无数据</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="contentMiddle">
|
||
<div class="cmHead">
|
||
<div>重大隐患未销项<text>{{ majorDangerCount }}</text>个，占比<text>{{ majorDangerRate }}%</text></div>
|
||
</div>
|
||
<div class="cmContent">
|
||
<div id="echarts2" style="width: 100%; height: 100%"></div>
|
||
<div class="notoDta" v-if="dataList2.length == 0">
|
||
<img src="@/assets/images/noData.png" alt="" />
|
||
<p>暂无数据</p>
|
||
</div>
|
||
<!-- <div id="echartsMajorDanger" style="width: 100%; height: 100%"></div> -->
|
||
</div>
|
||
</div>
|
||
|
||
<div class="contentBottom">
|
||
<div class="cbHeader">
|
||
<div class="cbHeaderInfo">
|
||
<div class="cubeIcon"></div>
|
||
<div class="cLeft">隐患智能分析</div>
|
||
</div>
|
||
<div class="cbHeaderLine"></div>
|
||
</div>
|
||
<div class="cbContent">
|
||
<div v-if="listData2.length < 10 && listData2.length !== 0">
|
||
<div class="item" v-for="(item, index) in listData2" :key="index">
|
||
<div class="itemHead">
|
||
<div class="itemHeadInner1" v-if="JSON.parse(item.payload).level === 1">重大风险</div>
|
||
<div class="itemHeadInner2" v-if="JSON.parse(item.payload).level === 2">较大风险</div>
|
||
<div class="itemHeadInner3" v-if="JSON.parse(item.payload).level === 3">一般风险</div>
|
||
<div class="itemHeadInner4" v-if="JSON.parse(item.payload).level === 4">低风险</div>
|
||
<div class="itemContent">
|
||
<el-tooltip class="box-item" effect="dark" :content="item.msg" placement="top-start">
|
||
<text style="margin-left:10px">{{ item.msg }}</text>
|
||
</el-tooltip>
|
||
</div>
|
||
</div>
|
||
<div class="itemTime">
|
||
<text class="timeInfo">{{ JSON.parse(item.payload).time }}</text>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="notoDta" v-else-if="listData2.length == 0">
|
||
<img src="@/assets/images/noData.png" alt="" />
|
||
<p>暂无数据</p>
|
||
</div>
|
||
<div v-else>
|
||
|
||
<vue3-seamless-scroll v-if="listData2.length > 0" :speed="1" :list="listData2" :step="0.3" :limitScrollNum="10" :hover="true" class="scroll">
|
||
<div class="item" v-for="(item, index) in listData2" :key="index">
|
||
<div class="itemHead">
|
||
<div class="itemHeadInner1" v-if="JSON.parse(item.payload).level === 1">重大风险</div>
|
||
<div class="itemHeadInner2" v-if="JSON.parse(item.payload).level === 2">较大风险</div>
|
||
<div class="itemHeadInner3" v-if="JSON.parse(item.payload).level === 3">一般风险</div>
|
||
<div class="itemHeadInner4" v-if="JSON.parse(item.payload).level === 4">低风险</div>
|
||
<div class="itemContent">
|
||
<el-tooltip class="box-item" effect="dark" :content="item.msg" placement="top-start">
|
||
<text style="margin-left:10px">{{ item.msg }}</text>
|
||
</el-tooltip>
|
||
</div>
|
||
</div>
|
||
<div class="itemTime">
|
||
<text class="timeInfo">{{ JSON.parse(item.payload).time }}</text>
|
||
</div>
|
||
</div>
|
||
</vue3-seamless-scroll>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
|
||
import Card from "@/components/card.vue";
|
||
import { onMounted, ref,watch } from "vue";
|
||
import { GlobalStore } from "@/stores";
|
||
const store = GlobalStore();
|
||
import {
|
||
getProjectInspectRecordCountApi,
|
||
getSelectQualityStatisticsNumApi,
|
||
getCountDangerLevelApi,
|
||
getNoticeListApi
|
||
} from "@/api/modules/projectOverview";
|
||
import { selectQualityStatisticsApi } from "@/api/modules/projectOverview";
|
||
import * as echarts from "echarts";
|
||
const echartsTest = ref();
|
||
let questionTotal = ref(0 as any);
|
||
|
||
const emits = defineEmits(["openDialog"])
|
||
|
||
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 listData2 = ref([
|
||
// { title: '隐患分类', type: 1, msg: '经过智能分析统计，近一个月脚手架类安全隐患最多达...' },
|
||
// { title: '重大隐患', type: 2, msg: '组织专业人员对隐患进行彻底排查和评估，明确隐患的性质、范围和...' },
|
||
// { title: '隐患分类', type: 1, msg: '经过智能分析统计，近一个月脚手架类安全隐患最多达...' },
|
||
// { title: '重大隐患', type: 2, msg: '组织专业人员对隐患进行彻底排查和评估，明确隐患的性质、范围和...' },
|
||
// { title: '隐患分类', type: 1, msg: '经过智能分析统计，近一个月脚手架类安全隐患最多达...' },
|
||
// { title: '重大隐患', type: 2, msg: '组织专业人员对隐患进行彻底排查和评估，明确隐患的性质、范围和...' },
|
||
// { title: '隐患分类', type: 1, msg: '经过智能分析统计，近一个月脚手架类安全隐患最多达...' },
|
||
// { title: '重大隐患', type: 2, msg: '组织专业人员对隐患进行彻底排查和评估，明确隐患的性质、范围和...' },
|
||
// { title: '隐患分类', type: 1, msg: '经过智能分析统计，近一个月脚手架类安全隐患最多达...' },
|
||
// { title: '重大隐患', type: 2, msg: '组织专业人员对隐患进行彻底排查和评估，明确隐患的性质、范围和...' },
|
||
// { title: '隐患分类', type: 1, msg: '经过智能分析统计，近一个月脚手架类安全隐患最多达...' },
|
||
])
|
||
|
||
let dataList = ref([
|
||
{
|
||
enumType:"",
|
||
value: 30,
|
||
show: true,
|
||
name: "重大隐患",
|
||
itemStyle: {
|
||
normal: {
|
||
color: "#EC6266",
|
||
borderWidth: 20
|
||
}
|
||
}
|
||
},
|
||
{
|
||
enumType:"",
|
||
value: 70,
|
||
show: true,
|
||
name: "一般隐患",
|
||
itemStyle: {
|
||
normal: {
|
||
color: "#6375C7",
|
||
borderWidth: 20
|
||
}
|
||
}
|
||
}
|
||
]);
|
||
|
||
const classColorList = ref(["#EC6266","#6375C7","#038cf5","#01d6f4"]);
|
||
|
||
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;
|
||
}
|
||
|
||
function drawEchart() {
|
||
echartsTest.value = echarts.init(document.getElementById("echartsSafe"));
|
||
let option = {
|
||
animation: false, // 取消动画
|
||
tooltip: {
|
||
trigger: "item"
|
||
},
|
||
title: {
|
||
text: questionTotal.value,
|
||
subtext: "超期未整改数",
|
||
x: "24%",
|
||
y: "center",
|
||
textAlign: "center",
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontSize: 26,
|
||
fontWeight: "normal",
|
||
// align: "center",
|
||
fontFamily: "sadigitalNumber"
|
||
},
|
||
subtextStyle: {
|
||
color: "#ccc",
|
||
fontSize: 12,
|
||
fontWeight: "normal"
|
||
// align: "center"
|
||
}
|
||
},
|
||
legend: {
|
||
selectedMode: true, // 取消图例上的点击事件
|
||
icon: "rect",
|
||
type: "plain",
|
||
orient: "vertical",
|
||
left: "55%",
|
||
top: "20%",
|
||
align: "left",
|
||
itemGap: 20,
|
||
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:any) {
|
||
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: 1,
|
||
color: "#52bef0"
|
||
},
|
||
{
|
||
offset: 0,
|
||
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.value.setOption(option, true);
|
||
window.addEventListener("resize", () => {
|
||
console.log(echartsTest)
|
||
echartsTest.value.resize();
|
||
})
|
||
console.log(echartsTest.value);
|
||
|
||
//图例点击事件
|
||
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],
|
||
}
|
||
})
|
||
})
|
||
}
|
||
|
||
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;
|
||
|
||
|
||
const res: any = await getCountDangerLevelApi({ projectSn: store.sn, isOverdueRectification: 1,inspectStartTime:dateRange.value[0],inspectEndTime:dateRange.value[1], });
|
||
dataList.value = res.result.data.map((item: any, index: number) => {
|
||
return {
|
||
...item,
|
||
value: item.count,
|
||
show: true,
|
||
itemStyle: {
|
||
normal: {
|
||
color: classColorList.value[index],
|
||
borderWidth: 20
|
||
}
|
||
}
|
||
};
|
||
});
|
||
questionTotal.value = res.result.count;
|
||
console.log("饼图", res);
|
||
|
||
const filterResult = res.result.data.find((item:any) => item.enumType == 1);
|
||
|
||
overdueMajorDangerCount.value = filterResult.count;
|
||
overdueMajorDangerRate.value = filterResult.percent;
|
||
|
||
drawEchart();
|
||
};
|
||
|
||
|
||
let dataList2 = ref([
|
||
{
|
||
enumType:"",
|
||
value: 30,
|
||
show: true,
|
||
name: "重大隐患",
|
||
itemStyle: {
|
||
normal: {
|
||
color: "#038cf5",
|
||
borderWidth: 20
|
||
}
|
||
}
|
||
},
|
||
{
|
||
value: 70,
|
||
show: true,
|
||
name: "一般隐患",
|
||
itemStyle: {
|
||
normal: {
|
||
color: "#01d6f4",
|
||
borderWidth: 20
|
||
}
|
||
}
|
||
},
|
||
]);
|
||
|
||
function drawEchart2() {
|
||
let echartsTest = echarts.init(document.getElementById("echarts2"));
|
||
let option = {
|
||
tooltip: {
|
||
trigger: "item"
|
||
},
|
||
title: {
|
||
text: questionTotal.value,
|
||
// text: '100%',
|
||
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: true, // 取消图例上的点击事件
|
||
icon: "rect",
|
||
type: "plain",
|
||
orient: "vertical",
|
||
left: "55%",
|
||
top: "20%",
|
||
align: "left",
|
||
itemGap: 20,
|
||
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: dataList2.value.map(item => {
|
||
if (item.show) {
|
||
return item.name;
|
||
}
|
||
}),
|
||
formatter: function (data:any) {
|
||
if (dataList2.value && dataList2.value.length) {
|
||
for (var i = 0; i < dataList2.value.length; i++) {
|
||
if (data === dataList2.value[i].name) {
|
||
var value = dataList2.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: dataList2.value
|
||
},
|
||
{
|
||
type: "pie",
|
||
radius: ["57", "60"],
|
||
center: ["25%", "55%"],
|
||
label: {
|
||
show: false
|
||
},
|
||
|
||
data: Pie()
|
||
}
|
||
]
|
||
};
|
||
echartsTest.setOption(option, true);
|
||
window.addEventListener("resize", () => {
|
||
echartsTest.resize();
|
||
})
|
||
//图例点击事件
|
||
echartsTest.on('legendselectchanged', (params: any) => {
|
||
console.log(emits);
|
||
echartsTest.setOption({
|
||
legend: { selected: { [params.name]: true } }
|
||
})
|
||
|
||
emits("openDialog", {
|
||
index: 7,
|
||
title: params.name + "未消项目",
|
||
majorInfo:{
|
||
isOverdueRectification:0,
|
||
isNotQualified:1,
|
||
enumType:dataList2.value.find(item => item.name == params.name)?.enumType,
|
||
inspectStartTime:dateRange.value[0],
|
||
inspectEndTime:dateRange.value[1],
|
||
}
|
||
})
|
||
})
|
||
}
|
||
|
||
const qualityInfo = async () => {
|
||
// const res: any = await selectQualityStatisticsApi({ projectSn: store.sn });
|
||
// dataList2.value[0].value = res.result.total.rectificationNum;
|
||
// dataList2.value[1].value = res.result.total.totalNum - res.result.total.rectificationNum;
|
||
// questionTotal.value = res.result.total.totalNum;
|
||
|
||
const res: any = await getCountDangerLevelApi({
|
||
projectSn: store.sn,
|
||
isNotQualified: 1,
|
||
inspectStartTime:dateRange.value[0],
|
||
inspectEndTime:dateRange.value[1],
|
||
});
|
||
dataList2.value = res.result.data.map((item: any, index: number) => {
|
||
return {
|
||
...item,
|
||
value: item.count,
|
||
show: true,
|
||
itemStyle: {
|
||
normal: {
|
||
color: classColorList.value[index],
|
||
borderWidth: 20
|
||
}
|
||
}
|
||
};
|
||
});
|
||
questionTotal.value = res.result.count;
|
||
|
||
const filterResult = res.result.data.find((item:any) => item.enumType == 1);
|
||
majorDangerCount.value = filterResult.count;
|
||
majorDangerRate.value = filterResult.percent;
|
||
|
||
drawEchart2();
|
||
};
|
||
|
||
const getSelectQualityStatisticsNum = async () => {
|
||
const res: any = await getSelectQualityStatisticsNumApi({
|
||
projectSn: store.sn,
|
||
inspectStartTime:dateRange.value[0],
|
||
inspectEndTime:dateRange.value[1],
|
||
});
|
||
console.log(res);
|
||
}
|
||
|
||
const getNoticeList = async () => {
|
||
// const res: any = await getNoticeListApi({ projectSn: store.sn, type: 10, pageNo: 1, pageSize: 99999, });
|
||
const res: any = await getNoticeListApi({ isBigScreen: 1 ,type:31});
|
||
console.log('隐患智能分析', res);
|
||
listData2.value = res.result.records;
|
||
// listData2.value.push({
|
||
// accountId:"1779721457571291137",
|
||
// id:"1789601398432559107",
|
||
// imageUrl:null,
|
||
// isRead:0,
|
||
// msg:"区域1检查到一条四川成润智慧科技的雨落管安全隐患问题，请注意监督整改！",
|
||
// payload:"{\"level\":4,\"time\":\"2024-05-12 18:19:40\"}",
|
||
// sendTime: "2024-05-12 18:19:57",
|
||
// title: "大屏通知",
|
||
// type: "31",
|
||
// })
|
||
console.log("================================",listData2.value)
|
||
}
|
||
|
||
watch(dateRange,async () => {
|
||
if(dateRange.value == null) {
|
||
dateRange.value = [];
|
||
}
|
||
await getSafeInfo();
|
||
await qualityInfo();
|
||
// await getSelectQualityStatisticsNum();
|
||
},{deep:true})
|
||
|
||
|
||
onMounted(async () => {
|
||
await getSafeInfo();
|
||
await qualityInfo();
|
||
await getSelectQualityStatisticsNum();
|
||
await getNoticeList();
|
||
});
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.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%;
|
||
}
|
||
}
|
||
|
||
.scroll {
|
||
height: 100%;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.rightAll {
|
||
background: url("@/assets/images/commandScreen/card-right-all.png") no-repeat;
|
||
// background-color: #fff;
|
||
background-size: 100% 100%;
|
||
width: 100%;
|
||
height: 102.1%;
|
||
|
||
.header {
|
||
// width: 100%;
|
||
// height: 100%;
|
||
display: flex;
|
||
// align-items: center;
|
||
justify-content: space-between;
|
||
padding: 20px 20px;
|
||
border-bottom: 1px solid #0059ff;
|
||
|
||
.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;
|
||
}
|
||
|
||
.hRight {
|
||
width: 50%;
|
||
}
|
||
}
|
||
|
||
.content {
|
||
padding: 0 20px;
|
||
height: 100%;
|
||
|
||
.contentTop {
|
||
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;
|
||
}
|
||
}
|
||
|
||
.contentMiddle {
|
||
width: 100%;
|
||
height: 25%;
|
||
|
||
.cmHead {
|
||
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: #0db027;
|
||
}
|
||
}
|
||
|
||
.cmContent {
|
||
height: 85%;
|
||
// background-color: darkred;
|
||
}
|
||
}
|
||
|
||
.contentBottom {
|
||
// width: 100%;
|
||
height: 42.5%;
|
||
// background-color: darkred;
|
||
|
||
// width: 100%;
|
||
// background-color: #fff;
|
||
// padding: 0 20px;
|
||
position: relative;
|
||
overflow: hidden;
|
||
.cbHeader {
|
||
width: 100%;
|
||
height: 40px;
|
||
|
||
// background-color: darkred;
|
||
.cbHeaderInfo {
|
||
color: #fff;
|
||
display: flex;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
|
||
.cLeft {
|
||
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;
|
||
}
|
||
|
||
.cubeIcon {
|
||
width: 36px;
|
||
height: 36px;
|
||
// background-color: #fff;
|
||
background: url("@/assets/images/commandScreen/head-cube.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
// margin-left: -5px;
|
||
margin: 0 3px 0 -5px;
|
||
}
|
||
}
|
||
|
||
.cbHeaderLine {
|
||
height: 4px;
|
||
width: 100%;
|
||
// background-color: darkblue;
|
||
background: url("@/assets/images/commandScreen/head-line.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
}
|
||
.cbContent {
|
||
width: 100%;
|
||
height: calc(100% - 55px);
|
||
overflow: hidden;
|
||
// height: 100%;
|
||
|
||
// background: #fff;
|
||
.item {
|
||
width: 100%;
|
||
line-height: 110%;
|
||
display: flex;
|
||
align-items: center;
|
||
// justify-content: flex-start;
|
||
justify-content: space-between;
|
||
// background-color: green;
|
||
color: #fff;
|
||
|
||
.itemHead {
|
||
white-space: nowrap;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-size: 16px;
|
||
width: 65%;
|
||
|
||
|
||
.itemHeadInner1 {
|
||
border: 1px solid #e02020;
|
||
box-shadow: 0 0 0 1px #e02020;
|
||
background: rgba(224,32,32, 0.4);
|
||
border-radius: 3px;
|
||
padding: 0 15px;
|
||
margin: 9px 0;
|
||
margin-left: 2px;
|
||
}
|
||
|
||
.itemHeadInner2 {
|
||
font-size: 16px;
|
||
border: 1px solid #f46649;
|
||
box-shadow: 0 0 0 1px #f46649;
|
||
background: rgba(244,102,73, 0.4);
|
||
border-radius: 3px;
|
||
padding: 0 15px;
|
||
margin: 9px 0;
|
||
margin-left: 2px;
|
||
}
|
||
.itemHeadInner3 {
|
||
font-size: 16px;
|
||
border: 1px solid #ecbe45;
|
||
box-shadow: 0 0 0 1px #ecbe45;
|
||
background: rgba(236,190,69, 0.4);
|
||
border-radius: 3px;
|
||
padding: 0 15px;
|
||
margin: 9px 0;
|
||
margin-left: 2px;
|
||
}
|
||
.itemHeadInner4 {
|
||
font-size: 16px;
|
||
border: 1px solid #5394f7;
|
||
box-shadow: 0 0 0 1px #5394f7;
|
||
background: rgba(83,148,247, 0.4);
|
||
border-radius: 3px;
|
||
padding: 0 23px;
|
||
margin: 9px 0;
|
||
margin-left: 2px;
|
||
}
|
||
|
||
.itemContent {
|
||
margin-left: 10px;
|
||
font-size: 15px;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
width: 100%;
|
||
line-height: 30px;
|
||
}
|
||
}
|
||
|
||
.itemTime {
|
||
// background-color: #fff;
|
||
width: 35%;
|
||
font-size: 16px;
|
||
margin-left: 10px;
|
||
|
||
.timeInfo {
|
||
width: 100%;
|
||
// display: flex;
|
||
// justify-content: flex-end;
|
||
// margin-right: 10px;
|
||
font-size: 15px;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
// .cbContent {
|
||
// width: 100%;
|
||
// height: calc(100% - 60px);
|
||
|
||
// // background: #fff;
|
||
// .item {
|
||
// // width: 100%;
|
||
// line-height: 130%;
|
||
// display: flex;
|
||
// align-items: center;
|
||
// justify-content: flex-start;
|
||
// // background-color: green;
|
||
// color: #fff;
|
||
|
||
// .itemHead {
|
||
// white-space: nowrap;
|
||
|
||
// .itemHeadInner {
|
||
// font-size: 16px;
|
||
// border: 1px solid #f77c7d;
|
||
// box-shadow: 0 0 0 1px #f77c7d;
|
||
// background: rgba(247, 124, 125, 0.4);
|
||
// border-radius: 3px;
|
||
// padding: 0 15px;
|
||
// margin: 9px 0;
|
||
// margin-left: 2px;
|
||
// }
|
||
|
||
// .itemHeadInner2 {
|
||
// font-size: 16px;
|
||
// border: 1px solid #56a8f8;
|
||
// box-shadow: 0 0 0 1px #56a8f8;
|
||
// background: rgba(86, 168, 248, 0.4);
|
||
// border-radius: 3px;
|
||
// padding: 0 15px;
|
||
// margin: 9px 0;
|
||
// margin-left: 2px;
|
||
// }
|
||
|
||
// .itemHeadInner3 {
|
||
// font-size: 16px;
|
||
// border: 1px solid #0db027;
|
||
// box-shadow: 0 0 0 1px #0db027;
|
||
// background: rgba(13, 176, 39, 0.4);
|
||
// border-radius: 3px;
|
||
// padding: 0 15px;
|
||
// margin: 9px 0;
|
||
// margin-left: 2px;
|
||
// }
|
||
// }
|
||
|
||
// .itemContent {
|
||
// margin-left: 10px;
|
||
// font-size: 15px;
|
||
// white-space: nowrap;
|
||
// overflow: hidden;
|
||
// text-overflow: ellipsis;
|
||
|
||
// }
|
||
// }
|
||
// }
|
||
}
|
||
}
|
||
}
|
||
|
||
::v-deep .el-input__inner {
|
||
color: #fff;
|
||
}
|
||
|
||
::v-deep .el-select .el-input .el-select__caret {
|
||
color: #fff;
|
||
}
|
||
|
||
::v-deep .el-input__wrapper {
|
||
width: 85%;
|
||
height: 0%;
|
||
background: #0d2956;
|
||
}
|
||
|
||
::v-deep .el-range-separator {
|
||
color: #ccc;
|
||
font-size: 10px;
|
||
}
|
||
|
||
::v-deep .el-range-input {
|
||
color: #ccc;
|
||
font-size: 10px;
|
||
}
|
||
</style>
|