2228 lines
53 KiB
Vue
2228 lines
53 KiB
Vue
<!-- eslint-disable vue/v-on-event-hyphenation -->
|
||
<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 contentMiddle" style="height: 28%">
|
||
<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%; transform: translateY(-13px)"></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>
|
||
|
||
<!-- <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>
|
||
</div> -->
|
||
<div class="contentTop contentMiddle" style="height: 27%; margin-top: 10px">
|
||
<leftBottom @openDialogData="openDialogData"></leftBottom>
|
||
</div>
|
||
<div class="contentTop contentBottom" style="height: 22.5%; margin-top: 10px">
|
||
<div class="cbHeader">
|
||
<div class="cbHeaderInfo">
|
||
<div class="cubeIcon"></div>
|
||
<div class="cLeft title-tabs">
|
||
<div
|
||
:class="{ 'title-color': activeInfo.activeIndex == index }"
|
||
v-for="(item, index) in activeInfo.activeTitleList"
|
||
:key="item.id"
|
||
@click="handleTab(index, 1)"
|
||
>
|
||
{{ item.title }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="cbHeaderLine"></div>
|
||
</div>
|
||
<div v-if="activeInfo.activeIndex == 0" class="ctContent cbContent" style="margin-top: 1%; height: 78%">
|
||
<div id="eacherRisk" style="width: 100%; height: 100%"></div>
|
||
<div class="notoDta" v-if="riskList.length == 0">
|
||
<img src="@/assets/images/noData.png" alt="" />
|
||
<p>暂无数据</p>
|
||
</div>
|
||
</div>
|
||
<div v-else-if="activeInfo.activeIndex == 1" class="ctContent cbContent" style="height: 78%">
|
||
<radarMapOption @openRadarDialog="openDialogData" :randerInfo="randerInfo" />
|
||
</div>
|
||
</div>
|
||
<div class="contentTop contentBottom" style="margin-top: 4px">
|
||
<div class="cbHeader">
|
||
<div class="cbHeaderInfo">
|
||
<div class="cubeIcon"></div>
|
||
<div class="cLeft title-tabs">
|
||
<div
|
||
:class="{ 'title-color': activeInfo.activeIndex2 == index }"
|
||
v-for="(item, index) in activeInfo.activeTitleList2"
|
||
:key="item.id"
|
||
@click="handleTab(index, 2)"
|
||
>
|
||
{{ item.title }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="cbHeaderLine"></div>
|
||
</div>
|
||
<div v-if="activeInfo.activeIndex2 == 0" class="ctContent" style="margin-top: 1%; height: 73%">
|
||
<div id="eacherSpecial" style="width: 100%; height: 100%"></div>
|
||
<div class="notoDta" v-if="specialList.length == 0">
|
||
<img src="@/assets/images/noData.png" alt="" />
|
||
<p>暂无数据</p>
|
||
</div>
|
||
</div>
|
||
<div v-else-if="activeInfo.activeIndex2 == 1" class="ctContent" style="height: 73%">
|
||
<div class="right-dap" @click="onRightDap()"></div>
|
||
<radarMapOption v-if="activeInfo.rightFlag" :randerInfo="randerInfo2" />
|
||
<radarMapOption v-else :randerInfo="randerInfo2" />
|
||
</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 radarMapOption from "@/views/commandScreen/components/radarMapOption.vue";
|
||
// import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
|
||
// import Card from "@/components/card.vue";
|
||
import { onMounted, ref, watch, reactive } from "vue";
|
||
import { GlobalStore } from "@/stores";
|
||
import leftBottom from "@/views/commandScreen/components/leftBottom.vue";
|
||
import { getSafetyRiskByProjectApi, getSafetyRiskByEnterpriseApi, getSpecialTrendApi } from "@/api/modules/agjtCommandApi";
|
||
import {
|
||
// getProjectInspectRecordCountApi,
|
||
// selectQualityStatisticsApi
|
||
getSelectQualityStatisticsNumApi,
|
||
getCountDangerLevelApi,
|
||
getNoticeListApi,
|
||
getInspectionSelectQualityApi,
|
||
getInspectionRiskChartApi,
|
||
getSpecialCountAllSpecialApi
|
||
} 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 = async () => {
|
||
console.log("我打开了!!!!!!!!!!11");
|
||
// 人员风险趋势
|
||
const res: any = await getSafetyRiskByEnterpriseApi(
|
||
{
|
||
projectSn: store.sn
|
||
},
|
||
false
|
||
);
|
||
const resultList = [] as any[];
|
||
if (res.result) {
|
||
console.log("隐患风险预测趋势", res.result);
|
||
res.result.forEach((item: any, index: number) => {
|
||
resultList.push({
|
||
id: `list${index}`,
|
||
radius: "70%",
|
||
isLegend: "top",
|
||
radarCenter: ["50%", "60%"],
|
||
dataList: [
|
||
{
|
||
value: [item.security, item.safe, item.levelRisk, item.limitTime],
|
||
name: item.enterpriseName
|
||
// areaStyle: {}
|
||
}
|
||
],
|
||
indicator: [
|
||
{ name: "隐患未闭合", max: 1 },
|
||
{ name: "平均安全绩效评分", max: 1 },
|
||
{ name: "重大、较大隐患", max: 1 },
|
||
{ name: "隐患超期整改", max: 1 }
|
||
],
|
||
titleInfo: {
|
||
titleLeft: "未来三天安全隐患风险概率预测",
|
||
// titleRight: "查看各企业应急事故风险概率预测",
|
||
percentage: item.area
|
||
},
|
||
workerFlag: true,
|
||
workerList: [item.security, item.safe, item.levelRisk, item.limitTime]
|
||
});
|
||
});
|
||
}
|
||
const resultInfo = {
|
||
index: 11,
|
||
title: "总包单位安全隐患概率分析",
|
||
radarType: 3,
|
||
randerList: resultList
|
||
};
|
||
emits("openDialog", resultInfo);
|
||
};
|
||
|
||
const activeInfo = reactive({
|
||
activeIndex: 0,
|
||
activeTitleList: [
|
||
{
|
||
id: 1,
|
||
title: "风险走势图"
|
||
},
|
||
{ id: 2, title: "隐患风险预测趋势" }
|
||
],
|
||
activeIndex2: 0,
|
||
activeTitleList2: [
|
||
{
|
||
id: 1,
|
||
title: "特殊作业统计分析"
|
||
},
|
||
{ id: 2, title: "特殊作业风险预测趋势" }
|
||
],
|
||
rightFlag: true,
|
||
rightCount: 1
|
||
});
|
||
const randerInfo = reactive({
|
||
id: "radarMap3",
|
||
isLegend: "right",
|
||
radarCenter: ["34%", "50%"],
|
||
radius: "55%",
|
||
dataList: [
|
||
{
|
||
value: [0, 0, 0, 0],
|
||
name: "项目安全隐患风险概率预测"
|
||
// areaStyle: {}
|
||
}
|
||
],
|
||
indicator: [
|
||
{ name: "隐患未闭合", max: 1 },
|
||
{ name: "平均安全绩效评分", max: 1 },
|
||
{ name: "重大、较大隐患", max: 1 },
|
||
{ name: "隐患超期整改", max: 1 }
|
||
],
|
||
titleInfo: {
|
||
titleLeft: "未来三天安全隐患风险概率预测",
|
||
titleRight: "查看各企业安全隐患风险概率预测",
|
||
percentage: 80
|
||
},
|
||
workerFlag: true,
|
||
workerList: [] as any[]
|
||
});
|
||
const randerInfo2 = reactive({
|
||
id: "radarMap4",
|
||
isLegend: "right",
|
||
radarCenter: ["34%", "50%"],
|
||
radius: "55%",
|
||
dataList: [
|
||
{
|
||
value: [0, 0, 0, 0, 0, 0, 0, 0],
|
||
name: "恶劣天气影响风险概率预测"
|
||
// areaStyle: {}
|
||
}
|
||
],
|
||
indicator: [
|
||
{ name: "动火作业", max: 1 },
|
||
{ name: "高处作业", max: 1 },
|
||
{ name: "盲板抽堵作业", max: 1 },
|
||
{ name: "受限空间作业", max: 1 },
|
||
{ name: "断路作业", max: 1 },
|
||
{ name: "临时用电", max: 1 },
|
||
{ name: "吊装安全作业", max: 1 },
|
||
{ name: "动土作业", max: 1 }
|
||
],
|
||
titleInfo: {
|
||
titleLeft: "未来三天特殊作业风险概率预测",
|
||
// titleRight: "查看各企业特殊作业风险概率预测",
|
||
percentage: 80
|
||
},
|
||
workerFlag: true,
|
||
workerList: [] as any[]
|
||
});
|
||
//切换tab
|
||
const handleTab = (val: number, type: number) => {
|
||
if (type == 1) {
|
||
if (activeInfo.activeIndex == 1) {
|
||
activeInfo.activeIndex = val;
|
||
getInspectionRiskChart(false);
|
||
} else if (activeInfo.activeIndex == 0) {
|
||
getSafetyRiskByProject(false, 1);
|
||
}
|
||
} else if (type == 2) {
|
||
if (activeInfo.activeIndex2 == 1) {
|
||
activeInfo.activeIndex2 = val;
|
||
getCountAllSpecial(false);
|
||
} else if (activeInfo.activeIndex2 == 0) {
|
||
getSpecialTrend(false, 1);
|
||
}
|
||
}
|
||
};
|
||
|
||
// 隐患风险预测趋势
|
||
const getSafetyRiskByProject = async (showLoading: boolean, val: number) => {
|
||
const res: any = await getSafetyRiskByProjectApi(
|
||
{
|
||
projectSn: store.sn
|
||
},
|
||
showLoading
|
||
);
|
||
if (res.result) {
|
||
console.log("隐患风险预测趋势", res.result);
|
||
randerInfo.dataList[0].value = [res.result.security, res.result.safe, res.result.levelRisk, res.result.limitTime];
|
||
randerInfo.workerList = [res.result.security, res.result.safe, res.result.levelRisk, res.result.limitTime];
|
||
randerInfo.titleInfo.percentage = res.result.area;
|
||
}
|
||
activeInfo.activeIndex = val;
|
||
};
|
||
|
||
const onRightDap = () => {
|
||
activeInfo.rightCount = activeInfo.rightCount == 1 ? 2 : 1;
|
||
getSpecialTrend(false, 1, true);
|
||
};
|
||
// 特殊作业风险预测趋势
|
||
const getSpecialTrend = async (showLoading: boolean, val: number, isRight?: boolean) => {
|
||
const res: any = await getSpecialTrendApi(
|
||
{
|
||
projectSn: store.sn,
|
||
type: activeInfo.rightCount
|
||
},
|
||
showLoading
|
||
);
|
||
if (res.result) {
|
||
console.log(activeInfo.rightCount);
|
||
console.log("特殊作业风险预测趋势", res.result);
|
||
randerInfo2.dataList = [
|
||
{
|
||
name: activeInfo.rightCount == 1 ? "恶劣天气影响风险概率预测" : "隐患未消项影响风险概率预测",
|
||
value: [
|
||
res.result.specialOperationFireSafety,
|
||
res.result.highJobSafe,
|
||
res.result.blindPlatePlugSafe,
|
||
res.result.limitSpaceSafe,
|
||
res.result.openCircuitSafe,
|
||
res.result.temporaryElectricitySafe,
|
||
res.result.hoistSafetyWork,
|
||
res.result.groundSafet
|
||
]
|
||
}
|
||
];
|
||
randerInfo2.workerList = randerInfo2.dataList[0].value;
|
||
}
|
||
activeInfo.activeIndex2 = val;
|
||
if (isRight) {
|
||
activeInfo.rightFlag = !activeInfo.rightFlag;
|
||
}
|
||
};
|
||
|
||
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 listData2 = ref([]);
|
||
|
||
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"));
|
||
let option = {
|
||
animation: false, // 取消动画
|
||
tooltip: {
|
||
trigger: "item"
|
||
// position: ['50%','50%']
|
||
},
|
||
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%", "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: ["18%", "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: ["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", () => {
|
||
echartsTest.value.resize();
|
||
});
|
||
|
||
//图例点击事件
|
||
// 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]
|
||
// }
|
||
// });
|
||
// });
|
||
}
|
||
|
||
const riskList = ref([]);
|
||
// 风险走势图
|
||
function getRiskEchart() {
|
||
const echartsTest = echarts.init(document.getElementById("eacherRisk"));
|
||
let option = {
|
||
tooltip: {
|
||
trigger: "axis",
|
||
confine: true
|
||
},
|
||
legend: {
|
||
trigger: "item",
|
||
position: "inside",
|
||
x: "right",
|
||
textStyle: {
|
||
color: "#fff"
|
||
},
|
||
itemHeight: 10,
|
||
icon: "roundRect",
|
||
data: ["重大风险", "较大风险", "一般风险", "低风险"]
|
||
},
|
||
color: ["#FF3232", "#FF9901", "#FFE500", "#3A3AE7"],
|
||
grid: {
|
||
left: "6%",
|
||
right: "6%",
|
||
top: "19%",
|
||
bottom: "0%",
|
||
containLabel: true
|
||
},
|
||
xAxis: {
|
||
type: "category",
|
||
boundaryGap: false,
|
||
data: riskList.value.map((item: any) => item.yearMonth),
|
||
axisLabel: {
|
||
color: "#fff"
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: "#2079A0"
|
||
}
|
||
}
|
||
},
|
||
yAxis: {
|
||
name: "数量",
|
||
nameTextStyle: {
|
||
color: "#fff"
|
||
},
|
||
axisLabel: {
|
||
color: "#fff"
|
||
},
|
||
splitLine: {
|
||
lineStyle: {
|
||
color: "#2079A0"
|
||
}
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
axisLine: {
|
||
show: true,
|
||
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",
|
||
smooth: true,
|
||
symbol: "none",
|
||
data: riskList.value.map((item: any) => item.greatFaultLevelNum)
|
||
},
|
||
{
|
||
name: "较大风险",
|
||
type: "line",
|
||
// stack: "Total",
|
||
smooth: true,
|
||
symbol: "none",
|
||
data: riskList.value.map((item: any) => item.largerRiskNum)
|
||
},
|
||
{
|
||
name: "一般风险",
|
||
type: "line",
|
||
// stack: "Total",
|
||
smooth: true,
|
||
symbol: "none",
|
||
data: riskList.value.map((item: any) => item.generalRiskNum)
|
||
},
|
||
{
|
||
name: "低风险",
|
||
type: "line",
|
||
// stack: "Total",
|
||
smooth: true,
|
||
symbol: "none",
|
||
data: riskList.value.map((item: any) => item.lowRiskNum)
|
||
}
|
||
]
|
||
};
|
||
echartsTest.setOption(option, true);
|
||
window.addEventListener("resize", () => {
|
||
echartsTest.resize();
|
||
});
|
||
|
||
//图例点击事件
|
||
// 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]
|
||
// }
|
||
// });
|
||
// });
|
||
}
|
||
const specialList = ref([]);
|
||
// 特殊作业统计图
|
||
function getSpecialEchart() {
|
||
const echartsTest = echarts.init(document.getElementById("eacherSpecial"));
|
||
// const maxCount: any = specialList.value.sort((a: any, b: any) => b.totalNum - a.totalNum);
|
||
const safeList = specialList.value.map((item: any) => {
|
||
return {
|
||
...item,
|
||
x: item.date,
|
||
y: item.totalNum
|
||
};
|
||
});
|
||
let option = {
|
||
tooltip: {
|
||
trigger: "item",
|
||
position: "inside",
|
||
confine: true,
|
||
axisPointer: {
|
||
// 坐标轴指示器，鼠标放上时变阴影，而不是线
|
||
type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
|
||
},
|
||
// confine:true,
|
||
// position:['50%','50%'],
|
||
appendToBody: true,
|
||
textStyle: {
|
||
color: "#fff",
|
||
fontSize: "3px"
|
||
},
|
||
// backgroundColor: "#F3F3F3",
|
||
extraCssText: "width:220px;white-space:pre-wrap;box-shadow: 0px 4px 4px 0px rgba(0,0,0,0.25);",
|
||
formatter: function (params: any) {
|
||
const obj = safeList[params.dataIndex];
|
||
// 当鼠标悬停在柱子上时，显示实际数值和百分比
|
||
return (
|
||
"<div>" +
|
||
safeList[params.dataIndex].x +
|
||
"</div>" +
|
||
// return '<div style="display:flex;justify-content:space-between;"><div><span style="color:#5470c6;line-height:3px;font-weight:bolder;">●</span>动土安全作业：'+obj.xzGroundSafetNum+'</div>'+
|
||
'<div style="display:flex;justify-content:space-between;"><div><span style="color:#5470c6;line-height:3px;font-weight:bolder;">●</span>动土安全作业：' +
|
||
obj.xzGroundSafetNum +
|
||
"</div>" +
|
||
'<div><span style="color:#91cc75;line-height:3px;font-weight:bolder;">●</span>用电安全作业：' +
|
||
obj.xzTemporaryElectricitySafeNum +
|
||
"</div></div>" +
|
||
'<div style="display:flex;justify-content:space-between;"><div><span style="color:#fac858;line-height:3px;font-weight:bolder;">●</span>高处作业作业：' +
|
||
obj.xzHighJobSafeNum +
|
||
"</div>" +
|
||
'<div><span style="color:#ee6666;line-height:3px;font-weight:bolder;">●</span>盲板抽堵作业：' +
|
||
obj.xzBlindPlatePlugSafeNum +
|
||
"</div></div>" +
|
||
'<div style="display:flex;justify-content:space-between;"><div><span style="color:#73c0de;line-height:3px;font-weight:bolder;">●</span>动火安全作业：' +
|
||
obj.xzSpecialOperationFireSafetyNum +
|
||
"</div>" +
|
||
'<div><span style="color:#3ba272;line-height:3px;font-weight:bolder;">●</span>断路安全作业：' +
|
||
obj.xzOpenCircuitSafeNum +
|
||
"</div></div>" +
|
||
'<div style="display:flex;justify-content:space-between;"><div><span style="color:#fc8452;line-height:3px;font-weight:bolder;">●</span>吊装安全作业：' +
|
||
obj.xzHoistSafetyWorkNum +
|
||
"</div>" +
|
||
'<div><span style="color:#9a60b4;line-height:3px;font-weight:bolder;">●</span>受限空间作业：' +
|
||
obj.xzLimitSpaceSafeNum +
|
||
"</div></div>"
|
||
);
|
||
// return `动火安全作业：${obj.xzSpecialOperationFireSafetyNum}\n盲板抽堵作业：${obj.xzBlindPlatePlugSafeNum}\n动土安全作业：${obj.xzGroundSafetNum}\n高处作业作业：${obj.xzHighJobSafeNum}\n吊装安全作业：${obj.xzHoistSafetyWorkNum}\n受限空间作业：${obj.xzLimitSpaceSafeNum}\n断路安全作业：${obj.xzOpenCircuitSafeNum}\n用电安全作业：${obj.xzTemporaryElectricitySafeNum}`;
|
||
}
|
||
},
|
||
legend: {
|
||
show: true,
|
||
itemWidth: 10,
|
||
itemHeight: 5,
|
||
// x:'right',
|
||
textStyle: {
|
||
fontSize: "3px",
|
||
color: "#FFF"
|
||
},
|
||
// x:'left',
|
||
data: ["动土作业", "临时用电", "高处作业", "盲板抽堵", "动火作业", "断路作业", "吊装作业", "受限空间"]
|
||
// icon: 'circle'
|
||
},
|
||
grid: {
|
||
left: "3%",
|
||
right: "6%",
|
||
bottom: "0%",
|
||
top: "30%",
|
||
containLabel: true
|
||
},
|
||
xAxis: {
|
||
// name: '数量', //X轴标题
|
||
type: "value",
|
||
data: safeList.map(item => item.y),
|
||
axisTick: {
|
||
// 轴刻度
|
||
show: false
|
||
},
|
||
axisLine: {
|
||
// 轴线
|
||
show: false,
|
||
color: "#2079A0"
|
||
},
|
||
splitLine: {
|
||
show: true,
|
||
lineStyle: {
|
||
color: "#2079A0"
|
||
}
|
||
},
|
||
axisLabel: {
|
||
color: "#2079A0"
|
||
}
|
||
},
|
||
yAxis: {
|
||
type: "category",
|
||
data: safeList.map(item => item.x),
|
||
axisTick: {
|
||
// 轴刻度
|
||
show: false,
|
||
lineStyle: {
|
||
color: "#2079A0"
|
||
}
|
||
},
|
||
axisLine: {
|
||
// 轴线
|
||
show: false,
|
||
color: "#2079A0"
|
||
},
|
||
splitLine: {
|
||
lineStyle: {
|
||
color: "#2079A0"
|
||
}
|
||
},
|
||
//设置文本过长超出隐藏...表示
|
||
axisLabel: {
|
||
color: "#2079A0"
|
||
// formatter: function (params: any) {
|
||
// let val = "";
|
||
// if (params.length > 4) {
|
||
// val = params.substr(0, 4) + "...";
|
||
// return val;
|
||
// } else {
|
||
// return params;
|
||
// }
|
||
// }
|
||
}
|
||
},
|
||
dataZoom: [
|
||
{
|
||
id: "dataZoomY",
|
||
type: "inside",
|
||
yAxisIndex: [0],
|
||
brushSelect: false,
|
||
zoomOnMouseWheel: false,
|
||
moveOnMouseWheel: true, // 开启滚轮平移
|
||
moveOnMouseMove: true, // 鼠标移动能触发数据窗口平移
|
||
preventDefaultMouseMove: false,
|
||
// start:100,
|
||
startValue: safeList.length - 1,
|
||
endValue: safeList.length - 4,
|
||
// 滚动条高度
|
||
width: 8,
|
||
// 滚动条显示位置
|
||
// height: "80%",
|
||
// 距离右边
|
||
right: 3,
|
||
// 控制手柄的尺寸
|
||
handleSize: 0,
|
||
filterMode: "empty"
|
||
// top: "top",
|
||
}
|
||
],
|
||
series: [
|
||
//动土作业
|
||
{
|
||
name: "动土作业",
|
||
// data: safeList.map(item => item.y),
|
||
data: specialList.value.map((item: any) => item.xzGroundSafetNum),
|
||
type: "bar",
|
||
barWidth: "65%",
|
||
color: "#5470c6",
|
||
stack: "total",
|
||
label: {
|
||
show: true,
|
||
textStyle: {
|
||
fontSize: "3px"
|
||
}
|
||
},
|
||
emphasis: { focus: "series" }
|
||
},
|
||
//临时用电
|
||
{
|
||
name: "临时用电",
|
||
// data: safeList.map(item => item.y),
|
||
data: specialList.value.map((item: any) => item.xzTemporaryElectricitySafeNum),
|
||
type: "bar",
|
||
barWidth: "65%",
|
||
color: "#91cc75",
|
||
stack: "total",
|
||
label: {
|
||
show: true,
|
||
textStyle: {
|
||
fontSize: "3px"
|
||
}
|
||
},
|
||
emphasis: { focus: "series" }
|
||
},
|
||
//高处作业
|
||
{
|
||
name: "高处作业",
|
||
// data: safeList.map(item => item.y),
|
||
data: specialList.value.map((item: any) => item.xzHighJobSafeNum),
|
||
type: "bar",
|
||
barWidth: "65%",
|
||
color: "#fac858",
|
||
stack: "total",
|
||
label: {
|
||
show: true,
|
||
textStyle: {
|
||
fontSize: "3px"
|
||
}
|
||
},
|
||
emphasis: { focus: "series" }
|
||
},
|
||
//盲板抽堵
|
||
{
|
||
name: "盲板抽堵",
|
||
// data: safeList.map(item => item.y),
|
||
data: specialList.value.map((item: any) => item.xzBlindPlatePlugSafeNum),
|
||
type: "bar",
|
||
barWidth: "65%",
|
||
color: "#ee6666",
|
||
stack: "total",
|
||
label: {
|
||
show: true,
|
||
textStyle: {
|
||
fontSize: "3px"
|
||
}
|
||
},
|
||
emphasis: { focus: "series" }
|
||
},
|
||
//动火作业
|
||
{
|
||
name: "动火作业",
|
||
// data: safeList.map(item => item.y),
|
||
data: specialList.value.map((item: any) => item.xzSpecialOperationFireSafetyNum),
|
||
type: "bar",
|
||
barWidth: "65%",
|
||
color: "#73c0de",
|
||
stack: "total",
|
||
label: {
|
||
show: true,
|
||
textStyle: {
|
||
fontSize: "3px"
|
||
}
|
||
},
|
||
emphasis: { focus: "series" }
|
||
},
|
||
//断路作业
|
||
{
|
||
name: "断路作业",
|
||
// data: safeList.map(item => item.y),
|
||
data: specialList.value.map((item: any) => item.xzOpenCircuitSafeNum),
|
||
type: "bar",
|
||
barWidth: "65%",
|
||
color: "#3ba272",
|
||
stack: "total",
|
||
label: {
|
||
show: true,
|
||
textStyle: {
|
||
fontSize: "3px"
|
||
}
|
||
},
|
||
emphasis: { focus: "series" }
|
||
},
|
||
//吊装作业
|
||
{
|
||
name: "吊装作业",
|
||
// data: safeList.map(item => item.y),
|
||
data: specialList.value.map((item: any) => item.xzHoistSafetyWorkNum),
|
||
type: "bar",
|
||
barWidth: "65%",
|
||
color: "#fc8452",
|
||
stack: "total",
|
||
label: {
|
||
show: true,
|
||
textStyle: {
|
||
fontSize: "3px"
|
||
}
|
||
},
|
||
emphasis: { focus: "series" }
|
||
},
|
||
//受限空间
|
||
{
|
||
name: "受限空间",
|
||
// data: safeList.map(item => item.y),
|
||
data: specialList.value.map((item: any) => item.xzLimitSpaceSafeNum),
|
||
type: "bar",
|
||
barWidth: "65%",
|
||
color: "#9a60b4",
|
||
stack: "total",
|
||
label: {
|
||
show: true,
|
||
textStyle: {
|
||
fontSize: "3px"
|
||
}
|
||
},
|
||
emphasis: { focus: "series" }
|
||
}
|
||
]
|
||
};
|
||
echartsTest.setOption(option, true);
|
||
window.addEventListener("resize", () => {
|
||
echartsTest.resize();
|
||
});
|
||
}
|
||
|
||
const getSafeInfo = async (showLoading: boolean) => {
|
||
// const res: any = await getProjectInspectRecordCountApi({ projectSn: store.sn });
|
||
// 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
|
||
);
|
||
|
||
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;
|
||
|
||
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;
|
||
|
||
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) => {
|
||
// 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 (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();
|
||
};
|
||
|
||
const getSelectQualityStatisticsNum = async (showLoading: boolean) => {
|
||
const res: any = await getSelectQualityStatisticsNumApi(
|
||
{
|
||
projectSn: store.sn,
|
||
inspectStartTime: dateRange.value[0],
|
||
inspectEndTime: dateRange.value[1]
|
||
},
|
||
showLoading
|
||
);
|
||
};
|
||
|
||
const getNoticeList = async (showLoading: boolean) => {
|
||
// const res: any = await getNoticeListApi({ projectSn: store.sn, type: 10, pageNo: 1, pageSize: 99999, });
|
||
const res: any = await getNoticeListApi({ isBigScreen: 1, type: 31 }, showLoading);
|
||
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",
|
||
// })
|
||
};
|
||
|
||
watch(
|
||
dateRange,
|
||
() => {
|
||
if (dateRange.value == null) {
|
||
dateRange.value = [];
|
||
}
|
||
getSafeInfo(true);
|
||
qualityInfo(true);
|
||
// await getSelectQualityStatisticsNum();
|
||
},
|
||
{ deep: true }
|
||
);
|
||
|
||
const getInspectionRiskChart = async (showLoading: boolean) => {
|
||
const res: any = await getInspectionRiskChartApi(
|
||
{
|
||
projectSn: store.sn,
|
||
queryType: 1
|
||
},
|
||
showLoading
|
||
);
|
||
riskList.value = res.result;
|
||
getRiskEchart();
|
||
};
|
||
|
||
const getCountAllSpecial = async (showLoading: boolean) => {
|
||
const res: any = await getSpecialCountAllSpecialApi(
|
||
{
|
||
projectSn: store.sn,
|
||
type: 1
|
||
},
|
||
showLoading
|
||
);
|
||
specialList.value = res.result;
|
||
getSpecialEchart();
|
||
};
|
||
|
||
const setIntervalFn = (showLoading: boolean) => {
|
||
if (activeInfo.activeIndex == 0) {
|
||
getInspectionRiskChart(showLoading);
|
||
}
|
||
if (activeInfo.activeIndex2 == 0) {
|
||
getCountAllSpecial(showLoading);
|
||
}
|
||
|
||
getSafeInfo(showLoading);
|
||
qualityInfo(showLoading);
|
||
getSelectQualityStatisticsNum(showLoading);
|
||
getNoticeList(showLoading);
|
||
};
|
||
|
||
onMounted(async () => {
|
||
setIntervalFn(false);
|
||
setInterval(() => {
|
||
setIntervalFn(true);
|
||
}, 30000);
|
||
});
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.safetext1 {
|
||
position: absolute;
|
||
top: 6%;
|
||
color: white;
|
||
left: 42%;
|
||
}
|
||
|
||
.safetext2 {
|
||
position: absolute;
|
||
top: 6%;
|
||
color: white;
|
||
right: 3%;
|
||
}
|
||
|
||
.title-tabs {
|
||
width: initial !important;
|
||
display: flex;
|
||
align-items: center;
|
||
height: 13%;
|
||
// margin-left: 4%;
|
||
color: white !important;
|
||
|
||
> div {
|
||
// padding: 2px 0;
|
||
font-size: 13px;
|
||
font-weight: normal;
|
||
line-height: 25px;
|
||
width: 170px;
|
||
width: 140px;
|
||
text-align: center;
|
||
// background-color: #315296;
|
||
background: rgb(0, 33, 116);
|
||
background: linear-gradient(270deg, rgba(0, 33, 116, 0.8) 0%, rgba(40, 88, 184, 0.3) 96%);
|
||
cursor: pointer;
|
||
}
|
||
|
||
.title-color {
|
||
// background-color: #1449b6;
|
||
background: rgb(0, 33, 116);
|
||
background: linear-gradient(270deg, rgba(0, 33, 116, 1) 0%, rgba(40, 88, 184, 1) 96%);
|
||
}
|
||
}
|
||
|
||
.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%;
|
||
}
|
||
}
|
||
|
||
.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: 10px 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%;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
}
|
||
|
||
.content {
|
||
padding: 0 20px;
|
||
height: calc(100% - 80px);
|
||
|
||
.contentTop {
|
||
margin-top: 10px;
|
||
width: 100%;
|
||
height: 22%;
|
||
|
||
.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: 80%;
|
||
// 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;
|
||
}
|
||
}
|
||
|
||
.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;
|
||
position: relative;
|
||
// 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;
|
||
|
||
// }
|
||
// }
|
||
// }
|
||
}
|
||
}
|
||
}
|
||
|
||
.right-dap {
|
||
width: 30px;
|
||
height: 30px;
|
||
background-image: url(@/assets/images/right-dap.png);
|
||
background-repeat: no-repeat;
|
||
background-size: 100% 100%;
|
||
position: absolute;
|
||
top: 50px;
|
||
right: 25px;
|
||
cursor: pointer;
|
||
}
|
||
::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>
|