1037 lines
39 KiB
Vue
1037 lines
39 KiB
Vue
|
<template>
|
||
|
|
<div class="project-safety-check main-page">
|
||
|
|
<el-col :span="6" class="h100">
|
||
|
|
<module-one-1-1 label="安全隐患排查" class="chart1-module">
|
||
|
|
<el-col :span="12" v-for="(it, idx) in chart1Data" :key="idx">
|
||
|
|
<div
|
||
|
|
class="equipment-list-min equipment-list-min_div quality-target-index-min quality-target-index-min_div">
|
||
|
|
|
||
|
|
<div class="czz-number-img czz-number-img-blue">
|
||
|
|
<svg-icon icon-class="notesearch"></svg-icon>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
<div class="equipment-list-data equipment-list-data_div_top">
|
||
|
|
<span>{{ it.name }}</span>
|
||
|
|
</div>
|
||
|
|
<div class="equipment-list-data equipment-list-data_div_bottom">
|
||
|
|
<span class="sp-data">{{ it.value || 0 }}</span><span class="sp-unit">条</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</el-col>
|
||
|
|
</module-one-1-1>
|
||
|
|
<module-one-2-1 label="日常巡检">
|
||
|
|
<img src="images/icon2001.png" class="img-openwin" @click="showDlg(1)" />
|
||
|
|
<div class="div-item-chart">
|
||
|
|
<div class="data-item-chart">
|
||
|
|
<div class="total-info">{{ item1Data.total }}<br />
|
||
|
|
<span class="sp-label">问题总数</span>
|
||
|
|
</div>
|
||
|
|
<div class="chart-gif chart-overview-gif"></div>
|
||
|
|
<my-chart :key="itemChartKey1" id="project-safety-check-item1" width="100%" height="100%"
|
||
|
|
:render="o => renderDataItem(1)"></my-chart>
|
||
|
|
</div>
|
||
|
|
<div class="div-item-info" :key="itemChartKey1">
|
||
|
|
<div v-for="(it, idx) in item1Data.infos" :key="idx" :class="'item-info'">
|
||
|
|
<span class="sp-name">{{ it.name }}</span>
|
||
|
|
<span class="sp-lend" :class="'is-' + it.type"></span>
|
||
|
|
<span class="sp-value led-number">{{ it.value }}</span>
|
||
|
|
<span class="sp-percent led-number" v-if="idx > 0">{{ it.percent }}%</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="div-item-data">
|
||
|
|
<div class="glr-title">最新提交</div>
|
||
|
|
<div class="div-item-list scroll">
|
||
|
|
<div v-for="(it, idx) in item1Data.items" :key="idx" class="list-item">
|
||
|
|
<el-image class="img-sm" fit="scale-down" :src="it.smarkUrl"
|
||
|
|
:preview-src-list="[it.smarkUrl]"></el-image>
|
||
|
|
<div class="list-item-info">
|
||
|
|
<div class="item-row">
|
||
|
|
<span class="sp-label">提交人:</span>
|
||
|
|
<span class="sp-data">{{ it.createUser }}</span>
|
||
|
|
</div>
|
||
|
|
<div class="item-row">
|
||
|
|
<span class="sp-label">整改人:</span>
|
||
|
|
<span class="sp-data">{{ it.lordSentUser }}</span>
|
||
|
|
</div>
|
||
|
|
<div class="item-row">
|
||
|
|
<span class="sp-label">复检人:</span>
|
||
|
|
<span class="sp-data">{{ it.recheckSendUser }}</span>
|
||
|
|
</div>
|
||
|
|
<div class="item-row">
|
||
|
|
<span class="sp-label">隐患描述:</span>
|
||
|
|
<span class="sp-data">{{ it.workParts }}</span>
|
||
|
|
</div>
|
||
|
|
<div class="item-row">
|
||
|
|
<span class="sp-label">整改要求:</span>
|
||
|
|
<span class="sp-data">{{ it.changeInfo }}</span>
|
||
|
|
</div>
|
||
|
|
<div class="item-row">
|
||
|
|
<span class="sp-label">状态:</span>
|
||
|
|
<span class="sp-data">{{ getStatus(it.checkState) }}</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</module-one-2-1>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="18" class="h100">
|
||
|
|
<module-one-1-3 label="隐患类别统计">
|
||
|
|
<img src="images/icon2001.png" class="img-openwin" @click="showDlg(0)" />
|
||
|
|
<my-chart :key="chartKey2" id="project-safety-check-chart2" width="100%" height="100%"
|
||
|
|
:render="renderChart2"></my-chart>
|
||
|
|
</module-one-1-3>
|
||
|
|
<el-row class="el-right">
|
||
|
|
<el-col :span="8">
|
||
|
|
<module-one-2-1 label="周检">
|
||
|
|
<img src="images/icon2001.png" class="img-openwin" @click="showDlg(2)" />
|
||
|
|
<div class="div-item-chart">
|
||
|
|
<div class="data-item-chart">
|
||
|
|
<div class="total-info">{{ item2Data.total }}<br />
|
||
|
|
<span class="sp-label">问题总数</span>
|
||
|
|
</div>
|
||
|
|
<div class="chart-gif chart-overview-gif"></div>
|
||
|
|
<my-chart :key="itemChartKey1" id="project-safety-check-item2" width="100%"
|
||
|
|
height="100%" :render="o => renderDataItem(2)"></my-chart>
|
||
|
|
</div>
|
||
|
|
<div class="div-item-info" :key="itemChartKey1">
|
||
|
|
<div v-for="(it, idx) in item2Data.infos" :key="idx" :class="'item-info'">
|
||
|
|
<span class="sp-name">{{ it.name }}</span>
|
||
|
|
<span class="sp-lend" :class="'is-' + it.type"></span>
|
||
|
|
<span class="sp-value led-number">{{ it.value }}</span>
|
||
|
|
<span class="sp-percent led-number" v-if="idx > 0">{{ it.percent }}%</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<div class="div-item-data">
|
||
|
|
<div class="glr-title">最新提交</div>
|
||
|
|
<div class="div-item-list scroll">
|
||
|
|
<div v-for="(it, idx) in item2Data.items" :key="idx" class="list-item">
|
||
|
|
<el-image class="img-sm" fit="scale-down" :src="it.smarkUrl"
|
||
|
|
:preview-src-list="[it.smarkUrl]"></el-image>
|
||
|
|
<div class="list-item-info">
|
||
|
|
<div class="item-row">
|
||
|
|
<span class="sp-label">提交人:</span>
|
||
|
|
<span class="sp-data">{{ it.createUser }}</span>
|
||
|
|
</div>
|
||
|
|
<div class="item-row">
|
||
|
|
<span class="sp-label">整改人:</span>
|
||
|
|
<span class="sp-data">{{ it.lordSentUser }}</span>
|
||
|
|
</div>
|
||
|
|
<div class="item-row">
|
||
|
|
<span class="sp-label">复检人:</span>
|
||
|
|
<span class="sp-data">{{ it.recheckSendUser }}</span>
|
||
|
|
</div>
|
||
|
|
<div class="item-row">
|
||
|
|
<span class="sp-label">隐患描述:</span>
|
||
|
|
<span class="sp-data">{{ it.workParts }}</span>
|
||
|
|
</div>
|
||
|
|
<div class="item-row">
|
||
|
|
<span class="sp-label">整改要求:</span>
|
||
|
|
<span class="sp-data">{{ it.changeInfo }}</span>
|
||
|
|
</div>
|
||
|
|
<div class="item-row">
|
||
|
|
<span class="sp-label">状态:</span>
|
||
|
|
<span class="sp-data">{{ getStatus(it.checkState) }}</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</module-one-2-1>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="8">
|
||
|
|
<module-one-2-1 label="月检">
|
||
|
|
<img src="images/icon2001.png" class="img-openwin" @click="showDlg(3)" />
|
||
|
|
<div class="div-item-chart">
|
||
|
|
<div class="data-item-chart">
|
||
|
|
<div class="total-info">{{ item3Data.total }}<br />
|
||
|
|
<span class="sp-label">问题总数</span>
|
||
|
|
</div>
|
||
|
|
<div class="chart-gif chart-overview-gif"></div>
|
||
|
|
<my-chart :key="itemChartKey1" id="project-safety-check-item3" width="100%"
|
||
|
|
height="100%" :render="o => renderDataItem(3)"></my-chart>
|
||
|
|
</div>
|
||
|
|
<div class="div-item-info" :key="itemChartKey1">
|
||
|
|
<div v-for="(it, idx) in item3Data.infos" :key="idx" :class="'item-info'">
|
||
|
|
<span class="sp-name">{{ it.name }}</span>
|
||
|
|
<span class="sp-lend" :class="'is-' + it.type"></span>
|
||
|
|
<span class="sp-value led-number">{{ it.value }}</span>
|
||
|
|
<span class="sp-percent led-number" v-if="idx > 0">{{ it.percent }}%</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<div class="div-item-data">
|
||
|
|
<div class="glr-title">最新提交</div>
|
||
|
|
<div class="div-item-list scroll">
|
||
|
|
<div v-for="(it, idx) in item3Data.items" :key="idx" class="list-item">
|
||
|
|
<el-image class="img-sm" fit="scale-down" :src="it.smarkUrl"
|
||
|
|
:preview-src-list="[it.smarkUrl]"></el-image>
|
||
|
|
<div class="list-item-info">
|
||
|
|
<div class="item-row">
|
||
|
|
<span class="sp-label">提交人:</span>
|
||
|
|
<span class="sp-data">{{ it.createUser }}</span>
|
||
|
|
</div>
|
||
|
|
<div class="item-row">
|
||
|
|
<span class="sp-label">整改人:</span>
|
||
|
|
<span class="sp-data">{{ it.lordSentUser }}</span>
|
||
|
|
</div>
|
||
|
|
<div class="item-row">
|
||
|
|
<span class="sp-label">复检人:</span>
|
||
|
|
<span class="sp-data">{{ it.recheckSendUser }}</span>
|
||
|
|
</div>
|
||
|
|
<div class="item-row">
|
||
|
|
<span class="sp-label">隐患描述:</span>
|
||
|
|
<span class="sp-data">{{ it.workParts }}</span>
|
||
|
|
</div>
|
||
|
|
<div class="item-row">
|
||
|
|
<span class="sp-label">整改要求:</span>
|
||
|
|
<span class="sp-data">{{ it.changeInfo }}</span>
|
||
|
|
</div>
|
||
|
|
<div class="item-row">
|
||
|
|
<span class="sp-label">状态:</span>
|
||
|
|
<span class="sp-data">{{ getStatus(it.checkState) }}</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</module-one-2-1>
|
||
|
|
</el-col>
|
||
|
|
<el-col :span="8">
|
||
|
|
<module-one-2-1 label="转型检查">
|
||
|
|
<img src="images/icon2001.png" class="img-openwin" @click="showDlg(4)" />
|
||
|
|
<div class="div-item-chart">
|
||
|
|
<div class="data-item-chart">
|
||
|
|
<div class="total-info">{{ item4Data.total }}<br />
|
||
|
|
<span class="sp-label">问题总数</span>
|
||
|
|
</div>
|
||
|
|
<div class="chart-gif chart-overview-gif"></div>
|
||
|
|
<my-chart :key="itemChartKey1" id="project-safety-check-item4" width="100%"
|
||
|
|
height="100%" :render="o => renderDataItem(3)"></my-chart>
|
||
|
|
</div>
|
||
|
|
<div class="div-item-info" :key="itemChartKey1">
|
||
|
|
<div v-for="(it, idx) in item4Data.infos" :key="idx" :class="'item-info'">
|
||
|
|
<span class="sp-name">{{ it.name }}</span>
|
||
|
|
<span class="sp-lend" :class="'is-' + it.type"></span>
|
||
|
|
<span class="sp-value led-number">{{ it.value }}</span>
|
||
|
|
<span class="sp-percent led-number" v-if="idx > 0">{{ it.percent }}%</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
<div class="div-item-data">
|
||
|
|
<div class="glr-title">最新提交</div>
|
||
|
|
<div class="div-item-list scroll">
|
||
|
|
<div v-for="(it, idx) in item4Data.items" :key="idx" class="list-item">
|
||
|
|
<el-image class="img-sm" fit="scale-down" :src="it.smarkUrl"
|
||
|
|
:preview-src-list="[it.smarkUrl]"></el-image>
|
||
|
|
<div class="list-item-info">
|
||
|
|
<div class="item-row">
|
||
|
|
<span class="sp-label">提交人:</span>
|
||
|
|
<span class="sp-data">{{ it.createUser }}</span>
|
||
|
|
</div>
|
||
|
|
<div class="item-row">
|
||
|
|
<span class="sp-label">整改人:</span>
|
||
|
|
<span class="sp-data">{{ it.lordSentUser }}</span>
|
||
|
|
</div>
|
||
|
|
<div class="item-row">
|
||
|
|
<span class="sp-label">复检人:</span>
|
||
|
|
<span class="sp-data">{{ it.recheckSendUser }}</span>
|
||
|
|
</div>
|
||
|
|
<div class="item-row">
|
||
|
|
<span class="sp-label">隐患描述:</span>
|
||
|
|
<span class="sp-data">{{ it.workParts }}</span>
|
||
|
|
</div>
|
||
|
|
<div class="item-row">
|
||
|
|
<span class="sp-label">整改要求:</span>
|
||
|
|
<span class="sp-data">{{ it.changeInfo }}</span>
|
||
|
|
</div>
|
||
|
|
<div class="item-row">
|
||
|
|
<span class="sp-label">状态:</span>
|
||
|
|
<span class="sp-data">{{ getStatus(it.checkState) }}</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</module-one-2-1>
|
||
|
|
</el-col>
|
||
|
|
</el-row>
|
||
|
|
</el-col>
|
||
|
|
<safetyCheckDialog ref="dlg" />
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import safetyCheckDialog from './dialog/safetyCheckDialog.vue'
|
||
|
|
export default {
|
||
|
|
components: {
|
||
|
|
safetyCheckDialog,
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
dangerTypeDict: [],
|
||
|
|
chartKey2: 0,
|
||
|
|
itemChartKey1: 0,
|
||
|
|
dpi: '',
|
||
|
|
selProject: null,
|
||
|
|
legendOpt1: {
|
||
|
|
icon: "rect",
|
||
|
|
textStyle: {
|
||
|
|
color: "#c3dbfd",
|
||
|
|
fontSize: 14,
|
||
|
|
rich: {
|
||
|
|
name: {
|
||
|
|
color: "#c3dbfd",
|
||
|
|
padding: [0, 20, 0, 0],
|
||
|
|
},
|
||
|
|
percent: {
|
||
|
|
color: "#4676FD"
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
overviewText: '问题数',
|
||
|
|
chart1Data: [],
|
||
|
|
chart2Data: [],
|
||
|
|
item1Data: {
|
||
|
|
total: 0,
|
||
|
|
datas: [],
|
||
|
|
infos: [],
|
||
|
|
items: [],
|
||
|
|
},
|
||
|
|
item2Data: {
|
||
|
|
total: 0,
|
||
|
|
datas: [],
|
||
|
|
infos: [],
|
||
|
|
items: [],
|
||
|
|
},
|
||
|
|
item3Data: {
|
||
|
|
total: 0,
|
||
|
|
datas: [],
|
||
|
|
infos: [],
|
||
|
|
items: [],
|
||
|
|
},
|
||
|
|
item4Data: {
|
||
|
|
total: 0,
|
||
|
|
datas: [],
|
||
|
|
infos: [],
|
||
|
|
items: [],
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
window.safetyApp = this;
|
||
|
|
this.$store.dispatch('ChangeNav', 301);
|
||
|
|
this.$bus.$on('projectChange', prj => {
|
||
|
|
this.selProject = prj;
|
||
|
|
this.init();
|
||
|
|
});
|
||
|
|
this.selProject = this.$store.getters.selProject;
|
||
|
|
this.init();
|
||
|
|
this.dpi = this.$dpi();
|
||
|
|
window.addEventListener("resize", () => {
|
||
|
|
if (this.dpi != this.$dpi()) {
|
||
|
|
this.dpi = this.$dpi();
|
||
|
|
this.chartKey++;
|
||
|
|
this.chartKey2++;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
this.$api.dict("ssp_proble_sub_type").then((d) => {
|
||
|
|
this.dangerTypeDict = d || [];
|
||
|
|
});
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
showDlg(n) {
|
||
|
|
this.$refs.dlg.showDialog(this.selProject, n, this.dangerTypeDict);
|
||
|
|
},
|
||
|
|
init() {
|
||
|
|
if (!this.selProject) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
let postData = {
|
||
|
|
projectId: this.selProject.id,
|
||
|
|
comId: this.selProject.comId
|
||
|
|
};
|
||
|
|
let ajaxs = [
|
||
|
|
this.$api.safety.groupByProblemType(postData),
|
||
|
|
this.$api.safety.groupByDangerType(postData),
|
||
|
|
this.$api.safety.listCountForBG({ ...postData, problemType: 1, infoType: 0 }),
|
||
|
|
this.$api.safety.listForBG({ ...postData, problemType: 1, infoType: 0, pageNum: 1, pageSize: 5 }),
|
||
|
|
this.$api.safety.listCountForBG({ ...postData, problemType: 2, infoType: 0 }),
|
||
|
|
this.$api.safety.listForBG({ ...postData, problemType: 2, infoType: 0, pageNum: 1, pageSize: 5 }),
|
||
|
|
this.$api.safety.listCountForBG({ ...postData, problemType: 3, infoType: 0 }),
|
||
|
|
this.$api.safety.listForBG({ ...postData, problemType: 3, infoType: 0, pageNum: 1, pageSize: 5 }),
|
||
|
|
this.$api.safety.listCountForBG({ ...postData, problemType: 4, infoType: 0 }),
|
||
|
|
this.$api.safety.listForBG({ ...postData, problemType: 4, infoType: 0, pageNum: 1, pageSize: 5 }),
|
||
|
|
];
|
||
|
|
this.$api.http.all(ajaxs).then(res => {
|
||
|
|
this.chart1Data = (res[0].data || []).map(it => {
|
||
|
|
return {
|
||
|
|
id: it.nickedInfo,
|
||
|
|
value: it.id,
|
||
|
|
name: it.problemType,
|
||
|
|
data: it
|
||
|
|
}
|
||
|
|
});
|
||
|
|
this.chart2Data = (res[1].data || []).map(it => {
|
||
|
|
return {
|
||
|
|
id: it.nickedInfo,
|
||
|
|
name: it.dangerType,
|
||
|
|
value1: it.id,
|
||
|
|
value2: it.comId,
|
||
|
|
}
|
||
|
|
});
|
||
|
|
this.showChart1();//安全隐患排查
|
||
|
|
this.showChart2();//隐患类别统计
|
||
|
|
this.makeItemData(this.item1Data, res[2].data)
|
||
|
|
this.item1Data.items = res[3].rows;
|
||
|
|
this.makeItemData(this.item2Data, res[4].data)
|
||
|
|
this.item2Data.items = res[5].rows;
|
||
|
|
this.makeItemData(this.item3Data, res[6].data)
|
||
|
|
this.item3Data.items = res[7].rows;
|
||
|
|
this.makeItemData(this.item4Data, res[8].data)
|
||
|
|
this.item4Data.items = res[9].rows;
|
||
|
|
this.itemChartKey1++;
|
||
|
|
});
|
||
|
|
},
|
||
|
|
showChart1(n) {
|
||
|
|
|
||
|
|
},
|
||
|
|
showChart2() {
|
||
|
|
this.chartKey2++;
|
||
|
|
},
|
||
|
|
getStatus(s) {
|
||
|
|
let checkStates = [{ value: "0", label: '待整改' }, { value: "1", label: '待复检' },
|
||
|
|
{ value: "3", label: '复检驳回' },
|
||
|
|
{ value: "4", label: '复检通过' }];
|
||
|
|
let objs = checkStates.filter(it => it.value == s);
|
||
|
|
return objs.length > 0 ? objs[0].label : '';
|
||
|
|
},
|
||
|
|
makeItemData(item, res) {
|
||
|
|
let labels = ['问题总数', '待整改', '待复检', '复检驳回', '整改完成', '超时整改'];
|
||
|
|
item.total = res[0].id;
|
||
|
|
let total = res[0].id;
|
||
|
|
item.datas = [];
|
||
|
|
for (let i = 1; i < 5; i++) {
|
||
|
|
item.datas.push({
|
||
|
|
name: labels[i],
|
||
|
|
value: res[i].id
|
||
|
|
});
|
||
|
|
}
|
||
|
|
item.infos = [];
|
||
|
|
for (let i = 0; i < res.length; i++) {
|
||
|
|
item.infos.push({
|
||
|
|
name: labels[i],
|
||
|
|
value: res[i].id,
|
||
|
|
type: res[i].projectName,
|
||
|
|
percent: total == 0 ? 0 : (res[i].id / total * 100.0).toFixed(1)
|
||
|
|
});
|
||
|
|
}
|
||
|
|
},
|
||
|
|
renderDataItem(n) {
|
||
|
|
let is1K = this.$dpi() == "1K";
|
||
|
|
let is2K = this.$dpi() == "2K";
|
||
|
|
let objs = this._data['item' + n + 'Data'];
|
||
|
|
let option = {
|
||
|
|
color: ["#71BCC4", "#EEBE47", "#5EA85D", "#5B84EB", "#E76168"],
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
type: 'pie',
|
||
|
|
radius: ['40%', '70%'],
|
||
|
|
padAngle: 1,
|
||
|
|
itemStyle: {
|
||
|
|
borderRadius: 5
|
||
|
|
}, emphasis: {
|
||
|
|
label: {
|
||
|
|
show: false,
|
||
|
|
}
|
||
|
|
},
|
||
|
|
label: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
|
||
|
|
|
||
|
|
labelLine: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
data: objs.datas
|
||
|
|
}
|
||
|
|
]
|
||
|
|
};
|
||
|
|
return option;
|
||
|
|
},
|
||
|
|
renderChart2(opt) {
|
||
|
|
let is1K = this.$dpi() == "1K";
|
||
|
|
let is2K = this.$dpi() == "2K";
|
||
|
|
let option = {
|
||
|
|
grid: {
|
||
|
|
left: "5%",
|
||
|
|
right: "5%",
|
||
|
|
bottom: "0%",
|
||
|
|
top: "15%",
|
||
|
|
containLabel: true,
|
||
|
|
},
|
||
|
|
tooltip: {
|
||
|
|
trigger: "axis",
|
||
|
|
valueFormatter: (v) => { return v },
|
||
|
|
textStyle: {
|
||
|
|
fontSize: is1K ? 12 : is2K ? 14 : 24
|
||
|
|
},
|
||
|
|
},
|
||
|
|
legend: {
|
||
|
|
top: is1K ? '0%' : is2K ? '0%' : '0%',
|
||
|
|
left: 'center',
|
||
|
|
itemWidth: is1K ? 25 : is2K ? 30 : 40,
|
||
|
|
itemHeight: is1K ? 14 : is2K ? 20 : 20,
|
||
|
|
itemGap: is1K ? 20 : is2K ? 30 : 40,
|
||
|
|
textStyle: {
|
||
|
|
color: "#fff",
|
||
|
|
fontSize: is1K ? 14 : is2K ? 20 : 30,
|
||
|
|
}
|
||
|
|
},
|
||
|
|
xAxis: [
|
||
|
|
{
|
||
|
|
type: "category",
|
||
|
|
data: this.chart2Data.map(it => it.name.replace(/[“”]/g, "'")),
|
||
|
|
axisLabel: {
|
||
|
|
width: is1K ? 60 : is2K ? 140 : 220,
|
||
|
|
rotate: 15,
|
||
|
|
fontSize: is1K ? 12 : is2K ? 14 : 22,
|
||
|
|
overflow: "break",
|
||
|
|
color: "#a2c8f9"
|
||
|
|
},
|
||
|
|
splitLine: {
|
||
|
|
lineStyle: {
|
||
|
|
opacity: 0.1
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
],
|
||
|
|
yAxis: [
|
||
|
|
{
|
||
|
|
type: "value",
|
||
|
|
minInterval: 1,
|
||
|
|
axisLabel: {
|
||
|
|
formatter: '{value}',
|
||
|
|
color: "#2ec2b3",
|
||
|
|
fontSize: is1K ? 12 : is2K ? 14 : 24
|
||
|
|
},
|
||
|
|
splitLine: {
|
||
|
|
lineStyle: {
|
||
|
|
opacity: 0.1
|
||
|
|
}
|
||
|
|
},
|
||
|
|
},
|
||
|
|
],
|
||
|
|
series: [
|
||
|
|
{
|
||
|
|
name: '问题数',
|
||
|
|
type: "bar",
|
||
|
|
barGap: '0%',
|
||
|
|
barWidth: '20%',
|
||
|
|
label: {
|
||
|
|
show: true,
|
||
|
|
position: "top",
|
||
|
|
color: "#4DAAFC",
|
||
|
|
fontSize: is1K ? 12 : is2K ? 14 : 24
|
||
|
|
},
|
||
|
|
lineStyle: {
|
||
|
|
color: "#7ddff2",
|
||
|
|
},
|
||
|
|
itemStyle: {
|
||
|
|
normal: { areaStyle: { type: "default", color: "#7ddff2", opacity: 0.1 } },
|
||
|
|
},
|
||
|
|
data: this.chart2Data.map(it => it.value1),
|
||
|
|
},
|
||
|
|
{
|
||
|
|
name: '待改数',
|
||
|
|
type: "bar",
|
||
|
|
barGap: '0%',
|
||
|
|
barWidth: '20%',
|
||
|
|
label: {
|
||
|
|
show: true,
|
||
|
|
position: "top",
|
||
|
|
color: "#4DAAFC",
|
||
|
|
fontSize: is1K ? 12 : is2K ? 14 : 24
|
||
|
|
},
|
||
|
|
lineStyle: {
|
||
|
|
color: "#006594",
|
||
|
|
},
|
||
|
|
itemStyle: {
|
||
|
|
normal: { areaStyle: { type: "default", color: "#006594", opacity: 0.1 } },
|
||
|
|
},
|
||
|
|
data: this.chart2Data.map(it => it.value2),
|
||
|
|
}
|
||
|
|
],
|
||
|
|
};
|
||
|
|
return option;
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="less">
|
||
|
|
.project-safety-check {
|
||
|
|
.screen-one-1-3 {
|
||
|
|
height: calc(33% - 20px) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.el-right {
|
||
|
|
height: calc(66% - 20px) !important;
|
||
|
|
|
||
|
|
.el-col-8 {
|
||
|
|
height: 100%;
|
||
|
|
|
||
|
|
.screen-one-2-1 {
|
||
|
|
margin: 0px 20px;
|
||
|
|
height: calc(100% - 0px) !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.chart1-module {
|
||
|
|
.el-col-12 {
|
||
|
|
height: 50%;
|
||
|
|
width: 50%;
|
||
|
|
display: flex;
|
||
|
|
|
||
|
|
.czz-number-img {
|
||
|
|
display: flex;
|
||
|
|
width: 80px;
|
||
|
|
height: 80px;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
|
||
|
|
svg {
|
||
|
|
width: 30px !important;
|
||
|
|
height: 30px !important;
|
||
|
|
fill: #00aaff59 !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.equipment-list-data_div_top {
|
||
|
|
span {
|
||
|
|
font-size: 14px;
|
||
|
|
color: #cbdaff;
|
||
|
|
font-weight: normal;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.equipment-list-data_div_bottom {
|
||
|
|
margin-top: 10px;
|
||
|
|
|
||
|
|
.sp-data {
|
||
|
|
font-size: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.sp-unit {
|
||
|
|
font-size: 14px;
|
||
|
|
color: #cbdaff;
|
||
|
|
font-weight: normal;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.div-item-chart {
|
||
|
|
position: relative;
|
||
|
|
height: 230px;
|
||
|
|
|
||
|
|
.data-item-chart {
|
||
|
|
height: 230px;
|
||
|
|
width: 230px;
|
||
|
|
display: inline-block;
|
||
|
|
position: absolute;
|
||
|
|
left: -30px;
|
||
|
|
|
||
|
|
.total-info {
|
||
|
|
position: absolute;
|
||
|
|
font-size: 20px;
|
||
|
|
top: calc(50% - 20px);
|
||
|
|
left: calc(50% - 50px);
|
||
|
|
display: inline-block;
|
||
|
|
width: 100px;
|
||
|
|
height: 40px;
|
||
|
|
text-align: center;
|
||
|
|
|
||
|
|
.sp-label {
|
||
|
|
font-size: 14px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.chart-overview-gif {
|
||
|
|
width: 80px;
|
||
|
|
height: 80px;
|
||
|
|
top: calc(50% - 40px);
|
||
|
|
left: calc(50% - 40px);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.div-item-info {
|
||
|
|
display: inline-block;
|
||
|
|
width: calc(100% - 180px);
|
||
|
|
right: -0px;
|
||
|
|
top: 20px;
|
||
|
|
position: absolute;
|
||
|
|
|
||
|
|
.item-info {
|
||
|
|
line-height: 30px;
|
||
|
|
|
||
|
|
.sp-lend {
|
||
|
|
display: inline-block;
|
||
|
|
margin-left: 8px;
|
||
|
|
width: 10px;
|
||
|
|
height: 20px;
|
||
|
|
position: relative;
|
||
|
|
top: 4px;
|
||
|
|
|
||
|
|
&.is-b {
|
||
|
|
background-color: #71BCC4;
|
||
|
|
}
|
||
|
|
|
||
|
|
&.is-c {
|
||
|
|
background-color: #EEBE47;
|
||
|
|
}
|
||
|
|
|
||
|
|
&.is-d {
|
||
|
|
background-color: #5EA85D;
|
||
|
|
}
|
||
|
|
|
||
|
|
&.is-e {
|
||
|
|
background-color: #5B84EB;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.sp-name {
|
||
|
|
display: inline-block;
|
||
|
|
text-align: right;
|
||
|
|
width: 70px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.sp-value {
|
||
|
|
margin-left: 8px;
|
||
|
|
font-size: 24px;
|
||
|
|
display: inline-block;
|
||
|
|
text-align: center;
|
||
|
|
min-width: 70px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.sp-percent {
|
||
|
|
margin-left: 8px;
|
||
|
|
color: #5B84EB;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.div-item-data {
|
||
|
|
height: calc(100% - 230px);
|
||
|
|
|
||
|
|
.div-item-list {
|
||
|
|
height: calc(100% - 20px);
|
||
|
|
overflow-y: auto;
|
||
|
|
|
||
|
|
.list-item {
|
||
|
|
display: flex;
|
||
|
|
margin-top: 10px;
|
||
|
|
border-top: solid 1px #cccccc88;
|
||
|
|
padding-top: 10px;
|
||
|
|
|
||
|
|
&:first-child {
|
||
|
|
margin-top: 0px;
|
||
|
|
border-top: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.img-sm {
|
||
|
|
width: calc(100% - 300px);
|
||
|
|
height: 120px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.list-item-info {
|
||
|
|
width: 300px;
|
||
|
|
font-size: 12px;
|
||
|
|
padding-left: 10px;
|
||
|
|
|
||
|
|
.item-row {
|
||
|
|
line-height: 24px;
|
||
|
|
|
||
|
|
.sp-label {
|
||
|
|
color: #8BFFD2;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (min-width: 1921px) and (max-width: 2560px) {
|
||
|
|
.chart1-module {
|
||
|
|
.el-col-12 {
|
||
|
|
.czz-number-img {
|
||
|
|
display: flex;
|
||
|
|
width: 100px;
|
||
|
|
height: 100px;
|
||
|
|
|
||
|
|
svg {
|
||
|
|
width: 40px !important;
|
||
|
|
height: 40px !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.equipment-list-data_div_top {
|
||
|
|
span {
|
||
|
|
font-size: 24px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.equipment-list-data_div_bottom {
|
||
|
|
margin-top: 20px;
|
||
|
|
|
||
|
|
.sp-data {
|
||
|
|
font-size: 32px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.sp-unit {
|
||
|
|
font-size: 24px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.div-item-chart {
|
||
|
|
position: relative;
|
||
|
|
height: 260px;
|
||
|
|
|
||
|
|
.data-item-chart {
|
||
|
|
height: 260px;
|
||
|
|
width: 260px;
|
||
|
|
left: -30px;
|
||
|
|
|
||
|
|
.total-info {
|
||
|
|
font-size: 24px;
|
||
|
|
top: calc(50% - 20px);
|
||
|
|
left: calc(50% - 50px);
|
||
|
|
width: 100px;
|
||
|
|
height: 40px;
|
||
|
|
|
||
|
|
.sp-label {
|
||
|
|
font-size: 20px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.chart-overview-gif {
|
||
|
|
width: 80px;
|
||
|
|
height: 80px;
|
||
|
|
top: calc(50% - 40px);
|
||
|
|
left: calc(50% - 40px);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.div-item-info {
|
||
|
|
width: calc(100% - 230px);
|
||
|
|
right: -0px;
|
||
|
|
top: 20px;
|
||
|
|
|
||
|
|
.item-info {
|
||
|
|
line-height: 30px;
|
||
|
|
|
||
|
|
.sp-lend {
|
||
|
|
margin-left: 8px;
|
||
|
|
width: 10px;
|
||
|
|
height: 20px;
|
||
|
|
top: 4px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.sp-name {
|
||
|
|
width: 90px;
|
||
|
|
font-size: 20px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.sp-value {
|
||
|
|
margin-left: 8px;
|
||
|
|
font-size: 32px;
|
||
|
|
min-width: 150px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.sp-percent {
|
||
|
|
font-size: 20px;
|
||
|
|
margin-left: 8px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.div-item-data {
|
||
|
|
height: calc(100% - 260px);
|
||
|
|
|
||
|
|
.glr-title {
|
||
|
|
font-size: 24px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.div-item-list {
|
||
|
|
height: calc(100% - 20px);
|
||
|
|
|
||
|
|
.list-item {
|
||
|
|
margin-top: 10px;
|
||
|
|
padding-top: 10px;
|
||
|
|
|
||
|
|
.img-sm {
|
||
|
|
width: calc(100% - 400px);
|
||
|
|
height: 120px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.list-item-info {
|
||
|
|
width: 400px;
|
||
|
|
font-size: 16px;
|
||
|
|
padding-left: 10px;
|
||
|
|
|
||
|
|
.item-row {
|
||
|
|
line-height: 30px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (min-width: 2561px) {
|
||
|
|
.chart1-module {
|
||
|
|
.el-col-12 {
|
||
|
|
.czz-number-img {
|
||
|
|
display: flex;
|
||
|
|
width: 160px;
|
||
|
|
height: 160px;
|
||
|
|
|
||
|
|
svg {
|
||
|
|
width: 60px !important;
|
||
|
|
height: 60px !important;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.equipment-list-data_div_top {
|
||
|
|
span {
|
||
|
|
font-size: 32px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.equipment-list-data_div_bottom {
|
||
|
|
margin-top: 20px;
|
||
|
|
|
||
|
|
.sp-data {
|
||
|
|
font-size: 40px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.sp-unit {
|
||
|
|
font-size: 32px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
.div-item-chart {
|
||
|
|
position: relative;
|
||
|
|
height: 320px;
|
||
|
|
|
||
|
|
.data-item-chart {
|
||
|
|
height: 320px;
|
||
|
|
width: 320px;
|
||
|
|
left: -30px;
|
||
|
|
|
||
|
|
.total-info {
|
||
|
|
font-size: 32px;
|
||
|
|
top: calc(50% - 20px);
|
||
|
|
left: calc(50% - 60px);
|
||
|
|
width: 120px;
|
||
|
|
height: 40px;
|
||
|
|
|
||
|
|
.sp-label {
|
||
|
|
font-size: 24px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.chart-overview-gif {
|
||
|
|
width: 80px;
|
||
|
|
height: 80px;
|
||
|
|
top: calc(50% - 40px);
|
||
|
|
left: calc(50% - 40px);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.div-item-info {
|
||
|
|
width: calc(100% - 300px);
|
||
|
|
right: -0px;
|
||
|
|
top: 20px;
|
||
|
|
|
||
|
|
.item-info {
|
||
|
|
line-height: 40px;
|
||
|
|
|
||
|
|
.sp-lend {
|
||
|
|
margin-left: 8px;
|
||
|
|
width: 10px;
|
||
|
|
height: 20px;
|
||
|
|
top: 4px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.sp-name {
|
||
|
|
width: 120px;
|
||
|
|
font-size: 30px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.sp-value {
|
||
|
|
margin-left: 8px;
|
||
|
|
font-size: 36px;
|
||
|
|
min-width: 200px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.sp-percent {
|
||
|
|
font-size: 24px;
|
||
|
|
margin-left: 8px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.div-item-data {
|
||
|
|
height: calc(100% - 320px);
|
||
|
|
|
||
|
|
.glr-title {
|
||
|
|
font-size: 28px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.div-item-list {
|
||
|
|
height: calc(100% - 20px);
|
||
|
|
|
||
|
|
.list-item {
|
||
|
|
margin-top: 10px;
|
||
|
|
padding-top: 10px;
|
||
|
|
|
||
|
|
.img-sm {
|
||
|
|
width: calc(100% - 600px);
|
||
|
|
height: 120px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.list-item-info {
|
||
|
|
width: 600px;
|
||
|
|
font-size: 20px;
|
||
|
|
padding-left: 10px;
|
||
|
|
|
||
|
|
.item-row {
|
||
|
|
line-height: 32px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
</style>
|