158 lines
3.9 KiB
Vue
158 lines
3.9 KiB
Vue
<template>
|
|
<div style="padding: 0px">
|
|
<el-col :span="24">
|
|
<el-table
|
|
stripe
|
|
:data="distributionData"
|
|
:height="vh"
|
|
border
|
|
class="mt10"
|
|
style="width: 100%; height: 100%"
|
|
v-loading="isLoading"
|
|
header-cell-class-name="table_header"
|
|
>
|
|
<el-table-column
|
|
prop="qy"
|
|
label="区域"
|
|
align="center"
|
|
></el-table-column>
|
|
<el-table-column
|
|
prop="jcd"
|
|
label="监测点数(个数)"
|
|
align="center"
|
|
></el-table-column>
|
|
<el-table-column
|
|
prop="zc"
|
|
label="通讯正常(个数)"
|
|
align="center"
|
|
></el-table-column>
|
|
<el-table-column
|
|
prop="zd"
|
|
label="通讯中断(个数)"
|
|
align="center"
|
|
></el-table-column>
|
|
</el-table>
|
|
</el-col>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { dicData } from "@/assets/commjs/dictypeData";
|
|
import { getAreaLineDetailData } from "@/api/distribution";
|
|
export default {
|
|
props: {
|
|
item: {
|
|
type: Object,
|
|
default: null,
|
|
},
|
|
item2: {
|
|
type: Object,
|
|
default: null,
|
|
},
|
|
height: {
|
|
type: Number,
|
|
default: null,
|
|
},
|
|
height2: {
|
|
type: Number,
|
|
default: null,
|
|
},
|
|
},
|
|
watch: {
|
|
height2(a, b) {
|
|
if (a == 24) {
|
|
this.vh = document.getElementById("conmentId").offsetHeight-50;
|
|
this.queryData();
|
|
} else {
|
|
return;
|
|
}
|
|
},
|
|
height(a, b) {
|
|
if (a == 6 || a == 8 || a == 9 || a == 16) {
|
|
setTimeout(() => {
|
|
let str = document.getElementById("areamontortable").style.height;
|
|
let strsec = str.split("p");
|
|
let height = parseInt(strsec) - 50;
|
|
this.vh = height+10;
|
|
this.queryData();
|
|
}, 200);
|
|
} else {
|
|
return;
|
|
}
|
|
},
|
|
deep: true,
|
|
},
|
|
data() {
|
|
return {
|
|
isLoading: false,
|
|
vh: null,
|
|
h: 0,
|
|
classificationData: [],
|
|
distributionData: [],
|
|
time: this.timefamt(),
|
|
formData: {
|
|
deptIndex: JSON.parse(window.sessionStorage.getItem("Info")).deptId,
|
|
monitorFlag: 2,
|
|
powerFlag: 2,
|
|
serverName: "event-boot",
|
|
statisticalType: {},
|
|
},
|
|
// classificationData: [],
|
|
};
|
|
},
|
|
created() {
|
|
this.getclassificationData();
|
|
this.queryData();
|
|
},
|
|
mounted() {
|
|
setTimeout(() => {
|
|
let str = document.getElementById("areamontortable").style.height;
|
|
let strsec = str.split("p");
|
|
let height = parseInt(strsec) - 50;
|
|
this.vh = height+10;
|
|
}, 200);
|
|
},
|
|
methods: {
|
|
//获取统计类型
|
|
getclassificationData() {
|
|
var code = "Statistical_Type";
|
|
this.classificationData = dicData(code, ["Report_Type"]);
|
|
|
|
this.formData.statisticalType = this.classificationData[0];
|
|
},
|
|
timefamt() {
|
|
var date = new Date();
|
|
var year = date.getFullYear();
|
|
var month = date.getMonth() + 1;
|
|
var day = date.getDate();
|
|
month = month > 9 ? month : "0" + month;
|
|
day = day < 10 ? "0" + day : day;
|
|
var arr = [];
|
|
var time1 = year + "-" + month + "-01";
|
|
arr.push(time1);
|
|
var time2 = year + "-" + month + "-" + day;
|
|
arr.push(time2);
|
|
return arr;
|
|
},
|
|
queryData() {
|
|
this.isLoading = true;
|
|
// this.formData.searchBeginTime = this.time[0];
|
|
// this.formData.searchEndTime = this.time[1];
|
|
getAreaLineDetailData(this.formData).then((res) => {
|
|
let table = [];
|
|
for (var i = 0; i < res.data.areaValue.length; i++) {
|
|
let t = {
|
|
qy: res.data.areaValue[i][0],
|
|
jcd: res.data.areaValue[i][1],
|
|
zc: res.data.areaValue[i][2],
|
|
zd: res.data.areaValue[i][3],
|
|
};
|
|
table.push(t);
|
|
}
|
|
this.distributionData = table;
|
|
this.isLoading = false;
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|