1081 lines
24 KiB
Vue
1081 lines
24 KiB
Vue
<!-- eslint-disable vue/v-on-event-hyphenation -->
|
|
<template>
|
|
<div class="rightAll">
|
|
<div class="card-content">
|
|
<Card title="隐患智能统计分析">
|
|
<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 class="contentTop contentMiddle">
|
|
<div class="ctHead" @click="onEchartsSafeTab(1)">
|
|
<div>
|
|
重大隐患超期未整改<text>{{ overdueMajorDangerCount }}</text
|
|
>个，占比<text>{{ overdueMajorDangerRate }}%</text>
|
|
</div>
|
|
</div>
|
|
<div class="cmHead" @click="onEchartsSafeTab(2)">
|
|
<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="dataCode != 200">
|
|
<img src="@/assets/images/noData.png" alt="" />
|
|
<p>暂无数据</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
<div class="enterprise-box">
|
|
<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="enterprise-info">
|
|
<div>辽宁五寰科技有限公司{{ item }}</div>
|
|
<div class="line1" style="display: flex">
|
|
<span style="margin-left: 15px">事故报警总数</span>
|
|
<div class="numberCard" v-for="(ele, i) in '204'" :key="i">{{ ele }}</div>
|
|
</div>
|
|
</div>
|
|
<div class="enterprise-list">
|
|
<div class="enterprise-title">
|
|
<div>入场人员总数</div>
|
|
<div>55</div>
|
|
</div>
|
|
<div class="enterprise-title">
|
|
<div>企业安全分</div>
|
|
<div>55</div>
|
|
</div>
|
|
<div class="enterprise-title">
|
|
<div>安全隐患总数</div>
|
|
<div>55</div>
|
|
</div>
|
|
<div class="enterprise-title">
|
|
<div>质量隐患总数</div>
|
|
<div>55</div>
|
|
</div>
|
|
<div class="enterprise-title">
|
|
<div>特殊作业数量</div>
|
|
<div>55</div>
|
|
</div>
|
|
<div class="enterprise-title">
|
|
<div>培训未通过率</div>
|
|
<div>56%</div>
|
|
</div>
|
|
</div>
|
|
</el-carousel-item>
|
|
</el-carousel>
|
|
</Card>
|
|
</div>
|
|
<div class="manAnalysis-box">
|
|
<Card title="区域人员数量分析">
|
|
<div id="eacherManAnalysis" style="width: 100%; height: 100%"></div>
|
|
</Card>
|
|
</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";
|
|
import { getCountDangerLevelApi, getInspectionSelectQualityApi } from "@/api/modules/projectOverview";
|
|
|
|
import * as echarts from "echarts";
|
|
const store = GlobalStore();
|
|
const echartsTest = ref();
|
|
let questionTotal = ref(0 as any);
|
|
|
|
const emits = defineEmits(["openDialog"]);
|
|
|
|
// 打开弹窗
|
|
// const openDialogData = (obj: any) => {
|
|
// console.log("111111111111");
|
|
// emits("openDialog", obj);
|
|
// };
|
|
|
|
let dateRange = ref([] as any);
|
|
|
|
let majorDangerCount = ref(0 as any);
|
|
let majorDangerRate = ref(0 as any);
|
|
let overdueMajorDangerCount = ref(0 as any);
|
|
let overdueMajorDangerRate = ref(0 as any);
|
|
|
|
let dataList = ref([
|
|
{
|
|
enumType: "",
|
|
value: 30,
|
|
show: true,
|
|
name: "重大隐患",
|
|
greatFaultLevelNumJzrRate: "",
|
|
rectificationNum: "",
|
|
rectificationNumJzrRate: "",
|
|
rectificationName: "",
|
|
itemStyle: {
|
|
normal: {
|
|
color: "#EC6266",
|
|
borderWidth: 20
|
|
}
|
|
}
|
|
},
|
|
{
|
|
enumType: "",
|
|
value: 70,
|
|
show: true,
|
|
name: "一般隐患",
|
|
greatFaultLevelNumJzrRate: "",
|
|
rectificationNum: "",
|
|
rectificationNumJzrRate: "",
|
|
rectificationName: "",
|
|
itemStyle: {
|
|
normal: {
|
|
color: "#6375C7",
|
|
borderWidth: 20
|
|
}
|
|
}
|
|
}
|
|
]);
|
|
let dataCode = ref(0);
|
|
|
|
const classColorList = ref(["#EC6266", "#6375C7", "#038cf5", "#01d6f4"]);
|
|
|
|
const onEchartsSafeTab = (type: number) => {
|
|
const resultInfo = {
|
|
index: 7,
|
|
title: "超期未整改",
|
|
majorInfo: {
|
|
isOverdueRectification: 1,
|
|
isNotQualified: 0,
|
|
inspectStartTime: dateRange.value[0],
|
|
inspectEndTime: dateRange.value[1]
|
|
}
|
|
};
|
|
if (type == 1) {
|
|
resultInfo.title = "超期未整改";
|
|
resultInfo.majorInfo.isOverdueRectification = 1;
|
|
resultInfo.majorInfo.isNotQualified = 0;
|
|
emits("openDialog", resultInfo);
|
|
} else if (type == 2) {
|
|
resultInfo.title = "未销项";
|
|
resultInfo.majorInfo.isOverdueRectification = 0;
|
|
resultInfo.majorInfo.isNotQualified = 1;
|
|
emits("openDialog", resultInfo);
|
|
}
|
|
};
|
|
|
|
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") as any);
|
|
let option = {
|
|
animation: false, // 取消动画
|
|
tooltip: {
|
|
trigger: "item"
|
|
},
|
|
title: {
|
|
text: questionTotal.value,
|
|
subtext: "累计隐患总数",
|
|
x: "17%",
|
|
y: "center",
|
|
textAlign: "center",
|
|
textStyle: {
|
|
color: "#fff",
|
|
fontSize: 26,
|
|
fontWeight: "normal",
|
|
// align: "center",
|
|
fontFamily: "sadigitalNumber"
|
|
},
|
|
subtextStyle: {
|
|
color: "#ccc",
|
|
fontSize: 10,
|
|
fontWeight: "normal"
|
|
// align: "center"
|
|
}
|
|
},
|
|
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}}`;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
{
|
|
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: ["18%", "50%"],
|
|
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: ["18%", "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: ["18%", "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 (showLoading: boolean) => {
|
|
// 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 result: any = await getInspectionSelectQualityApi(
|
|
{
|
|
projectSn: store.sn,
|
|
inspectStartTime: dateRange.value[0],
|
|
inspectEndTime: dateRange.value[1]
|
|
},
|
|
showLoading
|
|
);
|
|
|
|
console.log("安全统计数据", result);
|
|
dataList.value = [];
|
|
for (let index = 0; index < 5; index++) {
|
|
let obj = {
|
|
enumType: "",
|
|
value: 30,
|
|
show: true,
|
|
name: "重大隐患",
|
|
greatFaultLevelNumJzrRate: "",
|
|
rectificationNum: "",
|
|
rectificationNumJzrRate: "",
|
|
rectificationName: "",
|
|
itemStyle: {
|
|
normal: {
|
|
color: classColorList.value[index],
|
|
borderWidth: 20
|
|
}
|
|
}
|
|
};
|
|
if (index == 0) {
|
|
obj.value = result.result.greatFaultLevelNum;
|
|
obj.greatFaultLevelNumJzrRate = result.result.greatFaultLevelNumJzrRate;
|
|
obj.rectificationNum = result.result.rectificationNum;
|
|
obj.rectificationNumJzrRate = result.result.rectificationNumYesterday;
|
|
obj.rectificationName = "未整改";
|
|
} else if (index == 1) {
|
|
obj.name = "较大隐患";
|
|
obj.value = result.result.largerRiskNum;
|
|
obj.greatFaultLevelNumJzrRate = result.result.largerRiskNumJzrRate;
|
|
obj.rectificationNum = result.result.reviewNum;
|
|
obj.rectificationNumJzrRate = result.result.reviewNumYesterday;
|
|
obj.rectificationName = "未复查";
|
|
} else if (index == 2) {
|
|
obj.name = "一般隐患";
|
|
obj.value = result.result.generalRiskNum;
|
|
obj.greatFaultLevelNumJzrRate = result.result.generalRiskNumJzrRate;
|
|
obj.rectificationNum = result.result.verificationNum;
|
|
obj.rectificationNumJzrRate = result.result.verificationNumJzrRate;
|
|
obj.rectificationName = "未核验";
|
|
} else if (index == 3) {
|
|
obj.name = "低隐患";
|
|
obj.value = result.result.lowRiskNum;
|
|
obj.greatFaultLevelNumJzrRate = result.result.lowRiskNumJzrRate;
|
|
obj.rectificationNum = result.result.closeInspectionNum;
|
|
obj.rectificationNumJzrRate = result.result.closeInspectionNumJzrRate;
|
|
obj.rectificationName = "合格";
|
|
} else if (index == 4) {
|
|
obj.name = "无";
|
|
obj.value = result.result.lowRiskNum;
|
|
obj.greatFaultLevelNumJzrRate = result.result.lowRiskNumJzrRate;
|
|
obj.rectificationNum = result.result.overdueNotCloseNum;
|
|
obj.rectificationNumJzrRate = result.result.overdueNotCloseNumYesterday;
|
|
obj.rectificationName = "超期未关闭";
|
|
}
|
|
|
|
dataList.value.push(obj);
|
|
}
|
|
questionTotal.value = result.result.dangerNum;
|
|
dataCode.value = result.code;
|
|
// overdueMajorDangerCount.value = result.result.overdueRectificationNum;
|
|
// overdueMajorDangerRate.value = result.result.overdueRectificationNumRatio;
|
|
// majorDangerCount.value = result.result.notCloseNum;
|
|
// majorDangerRate.value = result.result.percent;
|
|
console.log("1111111111111", dataList.value);
|
|
|
|
const res: any = await getCountDangerLevelApi(
|
|
{
|
|
projectSn: store.sn,
|
|
isOverdueRectification: 1,
|
|
inspectStartTime: dateRange.value[0],
|
|
inspectEndTime: dateRange.value[1]
|
|
},
|
|
showLoading
|
|
);
|
|
// 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();
|
|
};
|
|
|
|
const qualityInfo = async (showLoading: boolean) => {
|
|
// 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]
|
|
},
|
|
showLoading
|
|
);
|
|
// 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();
|
|
};
|
|
|
|
function getManAnalysisEchart() {
|
|
const echartsTest = echarts.init(document.getElementById("eacherManAnalysis") as any);
|
|
let option = {
|
|
tooltip: {
|
|
trigger: "axis",
|
|
confine: true
|
|
},
|
|
legend: {
|
|
trigger: "item",
|
|
position: "inside",
|
|
top: "3%",
|
|
x: "center",
|
|
textStyle: {
|
|
color: "#fff"
|
|
},
|
|
itemWidth: 10,
|
|
itemHeight: 10,
|
|
icon: "roundRect",
|
|
data: ["一号区域", "二号区域", "三号区域", "四号区域"]
|
|
},
|
|
// color: ["#2BA5FF", "#F97766", "#1EF1FF", "#1EF1FF"],
|
|
grid: {
|
|
left: "6%",
|
|
right: "6%",
|
|
top: "15%",
|
|
bottom: "5%",
|
|
containLabel: true
|
|
},
|
|
xAxis: {
|
|
type: "category",
|
|
boundaryGap: false,
|
|
data: ["1", "5", "10", "15", "20", "25"],
|
|
axisLabel: {
|
|
color: "#fff"
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: "#172A44"
|
|
}
|
|
}
|
|
},
|
|
yAxis: {
|
|
// name: "数量",
|
|
nameTextStyle: {
|
|
color: "#fff"
|
|
},
|
|
axisLabel: {
|
|
color: "#fff"
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
color: "#172A44"
|
|
}
|
|
},
|
|
axisTick: {
|
|
show: false
|
|
},
|
|
axisLine: {
|
|
show: false,
|
|
lineStyle: {
|
|
color: "#2079A0"
|
|
}
|
|
}
|
|
// type: 'value'
|
|
},
|
|
// dataZoom: [
|
|
// {
|
|
// id: "dataZoomX",
|
|
// type: "inside",
|
|
// xAxisIndex: [0],
|
|
// brushSelect: false,
|
|
// zoomOnMouseWheel: false,
|
|
// moveOnMouseWheel: true, // 开启滚轮平移
|
|
// moveOnMouseMove: true, // 鼠标移动能触发数据窗口平移
|
|
// preventDefaultMouseMove: false,
|
|
// // start:100,
|
|
// startValue: riskList.value.length - 1,
|
|
// endValue: riskList.value.length - 6,
|
|
// // 滚动条高度
|
|
// width: 8,
|
|
// // 滚动条显示位置
|
|
// // height: "80%",
|
|
// // 距离右边
|
|
// right: 3,
|
|
// // 控制手柄的尺寸
|
|
// handleSize: 0,
|
|
// filterMode: "empty"
|
|
// // top: "top",
|
|
// }
|
|
// ],
|
|
series: [
|
|
{
|
|
name: "一号区域",
|
|
type: "line",
|
|
// stack: "Total",
|
|
lineStyle: {
|
|
color: "rgba(43, 165, 255, 1) ",
|
|
shadowBlur: 12,
|
|
shadowColor: "rgba(43, 165, 255, 0.9)",
|
|
shadowOffsetX: 1,
|
|
shadowOffsetY: 1
|
|
},
|
|
itemStyle: {
|
|
color: "rgba(43, 165, 255, 1) ",
|
|
borderWidth: 1,
|
|
borderColor: "#FFF"
|
|
},
|
|
smooth: true,
|
|
symbol: "none",
|
|
data: [12, 8, 15, 20, 32, 20]
|
|
},
|
|
{
|
|
name: "二号区域",
|
|
type: "line",
|
|
lineStyle: {
|
|
color: "rgba(249, 119, 102, 1) ",
|
|
shadowBlur: 12,
|
|
shadowColor: "rgba(249, 119, 102, 0.9)",
|
|
shadowOffsetX: 1,
|
|
shadowOffsetY: 1
|
|
},
|
|
itemStyle: {
|
|
color: "rgba(249, 119, 102, 1) ",
|
|
borderWidth: 1,
|
|
borderColor: "#FFF"
|
|
},
|
|
smooth: true,
|
|
symbol: "none",
|
|
data: [12, 3, 4, 5, 6, 10]
|
|
},
|
|
{
|
|
name: "三号区域",
|
|
type: "line",
|
|
lineStyle: {
|
|
color: "rgba(30, 241, 255, 1) ",
|
|
shadowBlur: 12,
|
|
shadowColor: "rgba(30, 241, 255, 0.9)",
|
|
shadowOffsetX: 1,
|
|
shadowOffsetY: 1
|
|
},
|
|
itemStyle: {
|
|
color: "rgba(30, 241, 255, 1) ",
|
|
borderWidth: 1,
|
|
borderColor: "#FFF"
|
|
},
|
|
smooth: true,
|
|
symbol: "none",
|
|
data: [20, 30, 14, 15, 26, 1]
|
|
},
|
|
{
|
|
name: "四号区域",
|
|
type: "line",
|
|
// stack: "Total",
|
|
lineStyle: {
|
|
color: "rgba(255, 181, 179, 1)",
|
|
shadowBlur: 12,
|
|
shadowColor: "rgba(255, 181, 179, 0.9)",
|
|
shadowOffsetX: 1,
|
|
shadowOffsetY: 1
|
|
},
|
|
itemStyle: {
|
|
color: "rgba(255, 181, 179, 1) ",
|
|
borderWidth: 1,
|
|
borderColor: "#FFF"
|
|
},
|
|
smooth: true,
|
|
symbol: "none",
|
|
data: [10, 82, 52, 10, 42, 20]
|
|
}
|
|
]
|
|
};
|
|
echartsTest.setOption(option, true);
|
|
window.addEventListener("resize", () => {
|
|
console.log(echartsTest);
|
|
echartsTest.resize();
|
|
});
|
|
console.log(echartsTest);
|
|
console.log("我是随机数", Math.floor(Math.random() * 256));
|
|
}
|
|
|
|
watch(
|
|
dateRange,
|
|
() => {
|
|
if (dateRange.value == null) {
|
|
dateRange.value = [];
|
|
}
|
|
getSafeInfo(true);
|
|
qualityInfo(true);
|
|
// await getSelectQualityStatisticsNum();
|
|
},
|
|
{ deep: true }
|
|
);
|
|
|
|
const setIntervalFn = (showLoading: boolean) => {
|
|
getSafeInfo(showLoading);
|
|
qualityInfo(showLoading);
|
|
getManAnalysisEchart();
|
|
};
|
|
|
|
onMounted(async () => {
|
|
setIntervalFn(false);
|
|
// setInterval(() => {
|
|
// setIntervalFn(true);
|
|
// }, 30000);
|
|
});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.manAnalysis-box {
|
|
height: 32%;
|
|
margin-top: 1%;
|
|
}
|
|
.enterprise-box {
|
|
height: 28%;
|
|
margin-top: 1%;
|
|
:deep(.h-card .content) {
|
|
padding: 6px 10px;
|
|
height: 78%;
|
|
margin-top: 1%;
|
|
}
|
|
.enterprise-info {
|
|
display: flex;
|
|
margin: 0 18px;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
> div:first-child {
|
|
font-size: 16px;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
.enterprise-list {
|
|
display: grid;
|
|
grid-template-columns: 33% 33% 33%;
|
|
margin: 4px 8px 10px 8px;
|
|
.enterprise-title {
|
|
margin-left: 10px;
|
|
margin-top: 10px;
|
|
}
|
|
.enterprise-title {
|
|
height: 50.95px;
|
|
background: url("@/assets/images/overviewScreen/card-icon.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
padding: 4px 16px;
|
|
> div:first-child {
|
|
font-size: 16px;
|
|
color: #ffffff;
|
|
}
|
|
> div:last-child {
|
|
font-size: 24px;
|
|
color: #65d7f9;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.card-content {
|
|
height: 40%;
|
|
.hRight {
|
|
width: 50%;
|
|
position: absolute;
|
|
top: 1%;
|
|
right: 0;
|
|
}
|
|
.contentTop {
|
|
width: 100%;
|
|
height: 100% !important;
|
|
|
|
.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: 71%;
|
|
// background-color: darkred;
|
|
}
|
|
}
|
|
|
|
.contentMiddle {
|
|
width: 100%;
|
|
height: 25%;
|
|
|
|
.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;
|
|
}
|
|
}
|
|
|
|
.cmContent {
|
|
height: 85%;
|
|
// background-color: darkred;
|
|
}
|
|
}
|
|
}
|
|
|
|
.line1 {
|
|
color: #fff;
|
|
padding-top: 5px;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
line-height: 30px;
|
|
height: 30px;
|
|
font-size: 16px;
|
|
|
|
.numberCard {
|
|
font-size: 26px;
|
|
padding: 0 8px;
|
|
margin-left: 3px;
|
|
font-weight: bold;
|
|
color: #47bcec;
|
|
background: url("@/assets/images/commandScreen/number-bg.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
:deep(.h-card .content) {
|
|
margin-top: 1%;
|
|
}
|
|
.safetext1 {
|
|
position: absolute;
|
|
top: 8%;
|
|
color: white;
|
|
left: 42%;
|
|
}
|
|
.safetext2 {
|
|
position: absolute;
|
|
top: 8%;
|
|
color: white;
|
|
right: 3%;
|
|
}
|
|
:deep(.el-carousel__container) {
|
|
height: 100%;
|
|
}
|
|
:deep() {
|
|
.el-carousel__indicators li {
|
|
padding-top: 6px;
|
|
padding-bottom: 2px;
|
|
}
|
|
.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;
|
|
}
|
|
}
|
|
|
|
.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: 100%;
|
|
}
|
|
.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%;
|
|
}
|
|
}
|
|
:deep(.el-input__inner) {
|
|
color: #fff;
|
|
}
|
|
|
|
:deep(.el-select .el-input .el-select__caret) {
|
|
color: #fff;
|
|
}
|
|
|
|
:deep(.el-input__wrapper) {
|
|
width: 85%;
|
|
height: 0%;
|
|
background: #0d2956;
|
|
}
|
|
|
|
:deep(.el-range-separator) {
|
|
color: #ccc;
|
|
font-size: 10px;
|
|
}
|
|
|
|
:deep(.el-range-input) {
|
|
color: #ccc;
|
|
font-size: 10px;
|
|
}
|
|
</style>
|