安全大屏安全隐患列表-部门展示列更新
This commit is contained in:
@ -23,6 +23,7 @@
|
||||
<el-col :span="12" style="height: 100%">
|
||||
<el-row style="padding: 0 10px">
|
||||
<el-col :span="24" style="margin-bottom: 1px">
|
||||
<!-- 车间安全隐患详情列表 -->
|
||||
<el-row
|
||||
style="
|
||||
font-size: 14px;
|
||||
@ -31,12 +32,25 @@
|
||||
background: rgba(0, 255, 255, 0.3);
|
||||
"
|
||||
>
|
||||
<el-col style="text-align: center" :span="3">序号</el-col>
|
||||
<el-col style="text-align: center" :span="12"
|
||||
<!-- <el-col style="text-align: center" :span="2">序号</el-col>
|
||||
<el-col style="text-align: center" :span="3">车间名</el-col>
|
||||
<el-col style="text-align: center" :span="10"
|
||||
>安全隐患内容</el-col
|
||||
>
|
||||
<el-col style="text-align: center" :span="4">措施</el-col>
|
||||
<el-col style="text-align: center" :span="3">责任人</el-col>
|
||||
<el-col style="text-align: center" :span="2">类别</el-col> -->
|
||||
<el-col
|
||||
style="text-align: center"
|
||||
v-for="item in troubleTitleList"
|
||||
:key="item.id"
|
||||
:span="
|
||||
item.name === '隐患内容'
|
||||
? getToubleContentSpan(troubleTitleList)
|
||||
: item.span
|
||||
"
|
||||
>{{ item.name }}</el-col
|
||||
>
|
||||
</el-row>
|
||||
</el-col>
|
||||
<vue-seamless-scroll
|
||||
@ -47,10 +61,103 @@
|
||||
singleHeight: 43,
|
||||
}"
|
||||
>
|
||||
<!-- 车间安全隐患列表 -->
|
||||
<!-- todo: 数据项已修改 -->
|
||||
<!-- 将list给表单 -->
|
||||
<ul class="item">
|
||||
<!-- <li v-for="item in scrollList" :key="item.id">
|
||||
<el-row style="font-size: 12px">
|
||||
<el-col style="text-align: center" :span="2">{{
|
||||
1
|
||||
}}</el-col>
|
||||
<el-col
|
||||
style="text-align: center"
|
||||
:span="3"
|
||||
:title="item.dangerContent"
|
||||
>bbbbbbbbb</el-col
|
||||
>
|
||||
<el-col
|
||||
style="text-align: center"
|
||||
:span="10"
|
||||
:title="item.dangerContent"
|
||||
>bbbbbbbbb</el-col
|
||||
>
|
||||
<el-col
|
||||
style="text-align: center"
|
||||
:span="4"
|
||||
title="aaaaaaaaaaaaaaaaaaaa"
|
||||
>
|
||||
aaaaaaaaaaaaaaaaaaaa
|
||||
</el-col>
|
||||
<el-col style="text-align: center" :span="3"
|
||||
>dddddddddddddddddddddd</el-col
|
||||
>
|
||||
<el-col style="text-align: center" :span="2"
|
||||
>eeeeeeeeeeeeeeeeeeee</el-col
|
||||
>
|
||||
</el-row>
|
||||
</li> -->
|
||||
<li v-for="item in scrollList" :key="item.id">
|
||||
<el-row style="font-size: 14px">
|
||||
<el-row style="font-size: 12px">
|
||||
<el-col style="text-align: center" :span="2">{{
|
||||
item.id
|
||||
}}</el-col>
|
||||
|
||||
<!-- start -->
|
||||
<el-col
|
||||
style="text-align: center"
|
||||
:span="
|
||||
item.name === '隐患内容'
|
||||
? getToubleContentSpan(scrollList)
|
||||
: item.span
|
||||
"
|
||||
:title="item.value"
|
||||
>{{ item.value }}</el-col
|
||||
>
|
||||
|
||||
<!-- end -->
|
||||
|
||||
<!-- <el-col
|
||||
style="text-align: center"
|
||||
:span="12"
|
||||
:title="item.dangerContent"
|
||||
>{{ item.dangerContent }}</el-col
|
||||
>
|
||||
<el-col style="text-align: center" :span="4">
|
||||
<section class="box">
|
||||
<span
|
||||
v-if="item.measures == '未整改'"
|
||||
style="
|
||||
color: #f64f58;
|
||||
font-size: 25px;
|
||||
margin-right: 3px;
|
||||
"
|
||||
>·</span
|
||||
>
|
||||
<span
|
||||
v-else
|
||||
style="
|
||||
color: #6fd1b4;
|
||||
font-size: 25px;
|
||||
margin-right: 3px;
|
||||
"
|
||||
>·</span
|
||||
>
|
||||
<span v-if="item.measures == '未整改'">未整改</span>
|
||||
<span v-else>已整改</span>
|
||||
</section>
|
||||
</el-col>
|
||||
<el-col style="text-align: center" :span="3">{{
|
||||
item.personLiable
|
||||
}}</el-col>
|
||||
<el-col style="text-align: center" :span="2">{{
|
||||
item.personLiable
|
||||
}}</el-col> -->
|
||||
</el-row>
|
||||
</li>
|
||||
<!-- <li v-for="item in scrollList" :key="item.id">
|
||||
<el-row style="font-size: 12px">
|
||||
<el-col style="text-align: center" :span="2">{{
|
||||
item.id
|
||||
}}</el-col>
|
||||
<el-col
|
||||
@ -86,8 +193,11 @@
|
||||
<el-col style="text-align: center" :span="3">{{
|
||||
item.personLiable
|
||||
}}</el-col>
|
||||
<el-col style="text-align: center" :span="2">{{
|
||||
item.personLiable
|
||||
}}</el-col>
|
||||
</el-row>
|
||||
</li>
|
||||
</li> -->
|
||||
</ul>
|
||||
</vue-seamless-scroll>
|
||||
</el-row>
|
||||
@ -110,6 +220,7 @@ import vueSeamlessScroll from "vue-seamless-scroll";
|
||||
import echarts from "echarts";
|
||||
require("echarts/theme/macarons"); // echarts theme
|
||||
import resize from "../../dashboard/mixins/resize";
|
||||
import { mapList } from "@/api/vehicleMent/map";
|
||||
export default {
|
||||
mixins: [resize],
|
||||
name: "left2",
|
||||
@ -123,6 +234,7 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
troubleItem: {},
|
||||
index: 0,
|
||||
colorList,
|
||||
|
||||
@ -133,6 +245,8 @@ export default {
|
||||
chart1: null,
|
||||
chart2: null,
|
||||
chart3: null,
|
||||
|
||||
troubleTitleList: [],
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
@ -155,6 +269,7 @@ export default {
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
this.getTroubleItem();
|
||||
this.$nextTick(() => {
|
||||
this.initChart();
|
||||
// this.initChart3()
|
||||
@ -168,16 +283,30 @@ export default {
|
||||
this.chart = null;
|
||||
},
|
||||
methods: {
|
||||
// 隐患内容列宽
|
||||
getToubleContentSpan(arr) {
|
||||
var sum = 0;
|
||||
for (var i = 0; i < arr.length; i++) {
|
||||
if (arr[i].name.indexOf("隐患内容") > -1) {
|
||||
sum += 0;
|
||||
} else {
|
||||
sum += arr[i].span;
|
||||
}
|
||||
}
|
||||
return 24 - sum;
|
||||
},
|
||||
// 总厂安全隐患柱图
|
||||
initChart() {
|
||||
this.request({
|
||||
url: "/hx/securityManagement/hiddenDanger/1",
|
||||
url: "/hx/securityManagement/hiddenDanger",
|
||||
method: "get",
|
||||
// type=1车间/=2总厂
|
||||
params: { type: 2 },
|
||||
}).then((res) => {
|
||||
if (200 == res.code) {
|
||||
let { monthList, mapList, category } = res.data;
|
||||
this.initChart2(category);
|
||||
// 饼图
|
||||
this.initChart2(mapList);
|
||||
this.chart1 = echarts.init(this.$refs.chart1);
|
||||
this.chart1.setOption({
|
||||
// legend: {
|
||||
@ -186,6 +315,10 @@ export default {
|
||||
// color: '#fff',
|
||||
// },
|
||||
// },
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
// formatter: "{a} <br/>{b}",
|
||||
},
|
||||
grid: {
|
||||
left: "3%",
|
||||
right: "6%",
|
||||
@ -195,7 +328,7 @@ export default {
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
data: monthList,
|
||||
data: monthList.map((e) => e.month),
|
||||
axisPointer: {
|
||||
type: "shadow",
|
||||
},
|
||||
@ -261,8 +394,8 @@ export default {
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
startValue: this.dataZoomStart(mapList.length, 4, "start"),
|
||||
endValue: this.dataZoomStart(mapList.length, 4, "end"),
|
||||
startValue: this.dataZoomStart(monthList.length, 4, "start"),
|
||||
endValue: this.dataZoomStart(monthList.length, 4, "end"),
|
||||
},
|
||||
{
|
||||
type: "inside",
|
||||
@ -270,11 +403,14 @@ export default {
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "利润",
|
||||
name: "安全隐患柱状图",
|
||||
type: "bar",
|
||||
barWidth: 20,
|
||||
data: mapList.map((e) => e.total),
|
||||
// data: [56.0, 14.9, 7.0, 53.2, 50.6, 76.7, 135.6, 162.2, 72.6, 30.0, 12.4, 23.3],
|
||||
data: monthList.map((e) => e.count),
|
||||
// data: [
|
||||
// 56.0, 14.9, 7.0, 53.2, 50.6, 76.7, 135.6, 162.2, 72.6, 30.0,
|
||||
// 12.4, 23.3,
|
||||
// ],
|
||||
itemStyle: {
|
||||
color: "rgb(118,196,166)",
|
||||
},
|
||||
@ -298,7 +434,8 @@ export default {
|
||||
}
|
||||
});
|
||||
},
|
||||
initChart2(category) {
|
||||
// 总厂安全隐患按类型分类饼图
|
||||
initChart2(mapList) {
|
||||
this.chart2 = echarts.init(this.$refs.chart2);
|
||||
this.chart2.setOption({
|
||||
tooltip: {
|
||||
@ -321,7 +458,7 @@ export default {
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "型号",
|
||||
name: "类型",
|
||||
type: "pie",
|
||||
radius: ["40%", "60%"],
|
||||
center: ["45%", "45%"],
|
||||
@ -342,33 +479,105 @@ export default {
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
data: category.map((e) => {
|
||||
data: mapList.map((e) => {
|
||||
console.log(e);
|
||||
return {
|
||||
value: e.NUMBERCOUNT,
|
||||
value: e.count,
|
||||
name: e.category,
|
||||
};
|
||||
}),
|
||||
// data: [
|
||||
// { value: 154, name: '型号一' },
|
||||
// { value: 775, name: '型号二' },
|
||||
// { value: 679, name: '型号三' },
|
||||
// { value: 679, name: '型号四' },
|
||||
// { value: 154, name: "型号一" },
|
||||
// { value: 775, name: "型号二" },
|
||||
// { value: 679, name: "型号三" },
|
||||
// { value: 679, name: "型号四" },
|
||||
// ],
|
||||
},
|
||||
],
|
||||
});
|
||||
},
|
||||
// 车间安全隐患列表
|
||||
initChart3() {
|
||||
this.request({
|
||||
url: "/hx/securityManagement/hiddenDanger/1",
|
||||
url: "/hx/securityManagement/hiddenDanger",
|
||||
method: "get",
|
||||
// type=1车间/=2总厂
|
||||
params: { type: 1 },
|
||||
}).then((res) => {
|
||||
if (200 == res.code) {
|
||||
this.chart3 = echarts.init(this.$refs.chart3);
|
||||
let { list, allWorkshop, mapList } = res.data;
|
||||
this.scrollList = list;
|
||||
// list 列表数据, mapList柱状图数据
|
||||
let { list, mapList } = res.data;
|
||||
// 根据troubleItem处理list
|
||||
// {"a1": true, "a2": true}
|
||||
let troubleList = this.troubleItem;
|
||||
|
||||
// 最终想要的数据
|
||||
let troubleTitleList = [];
|
||||
let troubleDataList = [];
|
||||
|
||||
// troubleTitleList.push({ name: "id", span: 2 });
|
||||
// troubleTitleList.push({ name: "车间名称", span: 4 });
|
||||
// troubleTitleList.push({ name: "隐患内容", span: 8 });
|
||||
// troubleTitleList.push({ name: "措施", span: 5 });
|
||||
// troubleTitleList.push({ name: "责任人", span: 3 });
|
||||
// troubleTitleList.push({ name: "类别", span: 2 });
|
||||
|
||||
if (troubleList.responsibleUnit) {
|
||||
troubleTitleList.push({ name: "车间名称", span: 3 });
|
||||
}
|
||||
|
||||
if (troubleList.address && troubleList.existProblem) {
|
||||
troubleTitleList.push({ name: "隐患内容", span: 10 });
|
||||
}
|
||||
|
||||
if (troubleList.updateSuggest && troubleList.tempUpdateMethod) {
|
||||
troubleTitleList.push({ name: "措施", span: 4 });
|
||||
}
|
||||
|
||||
if (troubleList.responsiblePerson) {
|
||||
troubleTitleList.push({ name: "责任人", span: 3 });
|
||||
}
|
||||
|
||||
if (troubleList.category) {
|
||||
troubleTitleList.push({ name: "类别", span: 2 });
|
||||
}
|
||||
this.troubleTitleList = troubleTitleList;
|
||||
|
||||
// 处理list得到troubleDataList
|
||||
let tmpObj = {};
|
||||
list.map((e) => {
|
||||
if (troubleList.responsibleUnit) {
|
||||
tmpObj.name = "车间名称";
|
||||
tmpObj.value = e.responsibleUnit;
|
||||
tmpObj.span = 3;
|
||||
}
|
||||
if (troubleList.address && troubleList.existProblem) {
|
||||
tmpObj.name = "隐患内容";
|
||||
tmpObj.value = e.address + "" + e.existProblem;
|
||||
tmpObj.span = 10;
|
||||
}
|
||||
if (troubleList.updateSuggest && troubleList.tempUpdateMethod) {
|
||||
tmpObj.name = "措施";
|
||||
tmpObj.value = e.updateSuggest + "" + e.tempUpdateMethod;
|
||||
tmpObj.span = 4;
|
||||
}
|
||||
if (troubleList.responsiblePerson) {
|
||||
tmpObj.name = "责任人";
|
||||
tmpObj.value = e.responsibleUnit;
|
||||
tmpObj.span = 3;
|
||||
}
|
||||
if (troubleList.category) {
|
||||
tmpObj.name = "类别";
|
||||
tmpObj.value = e.category;
|
||||
tmpObj.span = 2;
|
||||
}
|
||||
console.log(tmpObj);
|
||||
|
||||
troubleDataList.push(tmpObj);
|
||||
});
|
||||
|
||||
this.scrollList = troubleDataList;
|
||||
this.listData2 = Array(this.scrollList.length).fill(0);
|
||||
this.$refs.seamlessScroll.reset();
|
||||
this.chart3.setOption({
|
||||
@ -387,7 +596,7 @@ export default {
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
data: allWorkshop,
|
||||
data: mapList.map((e) => e.unit),
|
||||
// data: ['车间', '车间', '车间', '车间', '车间', '车间', '车间', '车间', '车间', '车间', '车间', '车间'],
|
||||
axisPointer: {
|
||||
type: "shadow",
|
||||
@ -463,33 +672,47 @@ export default {
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "利润",
|
||||
name: "安全隐患数量",
|
||||
type: "bar",
|
||||
barWidth: 20,
|
||||
data: mapList.map((e) => e.total),
|
||||
data: mapList.map((e) => e.count),
|
||||
// data: [56.0, 14.9, 7.0, 53.2, 50.6, 76.7, 135.6, 162.2, 72.6, 30.0, 12.4, 23.3],
|
||||
itemStyle: {
|
||||
color: "rgb(118,196,166)",
|
||||
},
|
||||
barGap: "0",
|
||||
},
|
||||
{
|
||||
name: "利润目标完成率",
|
||||
type: "line",
|
||||
yAxisIndex: 1,
|
||||
smooth: false,
|
||||
data: mapList.map((e) => e.rate),
|
||||
// data: [10, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2],
|
||||
itemStyle: {
|
||||
color: "#7EA7FC ",
|
||||
},
|
||||
symbol: "none",
|
||||
},
|
||||
// {
|
||||
// name: "利润目标完成率",
|
||||
// type: "line",
|
||||
// yAxisIndex: 1,
|
||||
// smooth: false,
|
||||
// data: mapList.map((e) => e.rate),
|
||||
// // data: [10, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2],
|
||||
// itemStyle: {
|
||||
// color: "#7EA7FC ",
|
||||
// },
|
||||
// symbol: "none",
|
||||
// },
|
||||
],
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
// 获取安全隐患展示配置
|
||||
getTroubleItem() {
|
||||
this.request({
|
||||
url: "/business/hxTableConfig",
|
||||
method: "get",
|
||||
params: { tableName: "hx_hidden_danger" },
|
||||
}).then((res) => {
|
||||
if (200 == res.code) {
|
||||
// 如何处理列表数据
|
||||
this.troubleItem = JSON.parse(res.data);
|
||||
console.log(this.troubleItem);
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -31,7 +31,6 @@
|
||||
icon="el-icon-s-tools"
|
||||
>展示列配置</el-button
|
||||
>
|
||||
<el-button @click="getTroubleItem">test</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user