提交
This commit is contained in:
384
src/views/BusinessAdministrator/transport/AbnormalStatistics.vue
Normal file
384
src/views/BusinessAdministrator/transport/AbnormalStatistics.vue
Normal file
@@ -0,0 +1,384 @@
|
||||
<template>
|
||||
<div class="pd10" v-loading="loading" element-loading-text="数据加载中">
|
||||
<div v-show="flg">
|
||||
<el-form :inline="true" :model="formData">
|
||||
<el-form-item label="终端等级:">
|
||||
<el-select v-model="formData.lineGrade" placeholder="终端等级" clearable>
|
||||
<el-option
|
||||
v-for="item in terminalClass"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<Timeinterval ref="interval" :interval="3"></Timeinterval>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit" class="ml10" icon="el-icon-search">查询</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-row>
|
||||
<el-col :span="24" :style="'height:' + vh + 'px'">
|
||||
<div id="Statistics">
|
||||
<div id="electr6" ref="fg" :style="`width:100%;height:100%;`"></div>
|
||||
</div>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="24">
|
||||
<el-table
|
||||
stripe
|
||||
header-cell-class-name="table_header"
|
||||
:data="datamock"
|
||||
style="width: 100%"
|
||||
:height="vh + 'px'"
|
||||
border
|
||||
:default-sort="{ prop: 'time', order: 'descending' }"
|
||||
>
|
||||
<el-table-column prop="time" label="时间" sortable></el-table-column>
|
||||
<el-table-column prop="deviceAbnormalNum" label="终端异常个数">
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.deviceAbnormalNum == 3.14159 ? '暂无数据' : scope.row.deviceAbnormalNum }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" min-width="40">
|
||||
<template slot-scope="scope">
|
||||
<el-button size="mini" type="primary" @click="details(scope.row)" icon="el-icon-view">
|
||||
终端详情
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
background
|
||||
align="right"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="formData.pageNum"
|
||||
:page-sizes="[20, 30, 40, 50, 100]"
|
||||
:page-size="formData.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
class="mt10"
|
||||
></el-pagination>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<TerminalDetails v-if="!flg" @back="onSubmit" :TerminalDetails="tableData" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Timeinterval from '@/views/components/TimePicker/index4'
|
||||
import { dicData } from '@/assets/commjs/dictypeData'
|
||||
import yan from '@/assets/commjs/color'
|
||||
import TerminalDetails from './components/AbnormalStatisticsCild/TerminalDetails.vue'
|
||||
import { getDailyDeviceAbnormalStatistics, getDailyDeviceAbnormal } from '@/api/integraliy/AbnormalStatistics'
|
||||
import { onLienRate1, onLienRate2, onLienRate3, Integrity1, Integrity2, Integrity3 } from '@/assets/commjs/color'
|
||||
export default {
|
||||
name: 'abnormalstatistics',
|
||||
components: {
|
||||
Timeinterval,
|
||||
TerminalDetails
|
||||
},
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
flg: true,
|
||||
zoom: '', //图表焦点校验
|
||||
vh: undefined,
|
||||
h: undefined,
|
||||
formData: {
|
||||
lineGrade: '', //终端等级
|
||||
searchBeginTime: '', //开始
|
||||
searchEndTime: '', //结束
|
||||
pageNum: 1,
|
||||
pageSize: 20
|
||||
},
|
||||
item: ['', ''],
|
||||
myChartes: '',
|
||||
terminalClass: [], //终端等级
|
||||
datamock: [],
|
||||
tableData: [],
|
||||
timeFlag: '',
|
||||
total: undefined
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getclassificationData()
|
||||
},
|
||||
mounted() {
|
||||
this.setHeight()
|
||||
window.addEventListener('resize', this.setHeight)
|
||||
this.resizeEchart()
|
||||
window.addEventListener('resize', () => {
|
||||
if (this.myChartes !== '') {
|
||||
this.myChartes.resize()
|
||||
}
|
||||
})
|
||||
|
||||
this.onSubmit()
|
||||
},
|
||||
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.setHeight)
|
||||
},
|
||||
methods: {
|
||||
setHeight() {
|
||||
let heightd = (window.sessionStorage.getItem('appheight') - 95) / 2
|
||||
this.h = heightd + 'px'
|
||||
this.vh = (window.sessionStorage.getItem('appheight') - 95) / 2
|
||||
},
|
||||
|
||||
//获取类型
|
||||
getclassificationData() {
|
||||
//监测点等级
|
||||
this.terminalClass = dicData('Dev_Level', [])
|
||||
this.formData.lineGrade = this.terminalClass[0].id
|
||||
},
|
||||
//查询
|
||||
onSubmit() {
|
||||
this.loading = true
|
||||
this.flg = true
|
||||
this.item = this.$refs.interval.timeValue
|
||||
this.formData.searchBeginTime = this.item[0]
|
||||
this.formData.searchEndTime = this.item[1]
|
||||
getDailyDeviceAbnormalStatistics(this.formData).then(res => {
|
||||
this.datamock = res.data.records.reverse()
|
||||
this.total = res.data.total
|
||||
this.loading = false
|
||||
this.$nextTick(() => {
|
||||
this.chart()
|
||||
})
|
||||
})
|
||||
},
|
||||
//每页条数改变时触发 选择一页显示多少行
|
||||
handleSizeChange(val) {
|
||||
this.formData.pageSize = val
|
||||
this.onSubmit()
|
||||
},
|
||||
//当前页改变时触发 跳转其他页
|
||||
handleCurrentChange(val) {
|
||||
this.formData.pageNum = val
|
||||
this.onSubmit()
|
||||
},
|
||||
//点击切换
|
||||
details(e) {
|
||||
// console.log(e);
|
||||
this.flg = false
|
||||
let data = {
|
||||
lineGrade: this.formData.lineGrade,
|
||||
searchBeginTime: e.time, //开始
|
||||
searchEndTime: e.time //结束
|
||||
}
|
||||
getDailyDeviceAbnormal(data).then(res => {
|
||||
this.tableData = res.data
|
||||
})
|
||||
},
|
||||
chart() {
|
||||
let echarts = require('echarts')
|
||||
let domID1 = document.getElementById('electr6')
|
||||
this.myChartes = echarts.init(domID1, null, { renderer: 'svg' })
|
||||
setTimeout(() => {
|
||||
domID1.style.width = window.sessionStorage.getItem('Statistics') - 40 + 'px'
|
||||
domID1.style.height = (window.sessionStorage.getItem('appheight') - 95) / 2 + 'px'
|
||||
}, 0)
|
||||
let handle = []
|
||||
let time = []
|
||||
let echartsData = JSON.parse(JSON.stringify(this.datamock))
|
||||
echartsData.forEach(item => {
|
||||
handle.push(item.deviceAbnormalNum)
|
||||
time.push(item.time)
|
||||
})
|
||||
let echartsColor = JSON.parse(window.localStorage.echartsColor)
|
||||
this.myChartes.clear()
|
||||
var option = {
|
||||
backgroundColor: '#fff', //背景色,
|
||||
title: {
|
||||
text: '终端异常个数统计',
|
||||
left: 'center',
|
||||
textStyle: {
|
||||
fontSize: yan.EchartObject.titleNamefontSize1,
|
||||
color: echartsColor.WordColor
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
label: {
|
||||
color: '#fff',
|
||||
fontSize: 16
|
||||
}
|
||||
},
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontStyle: 'normal',
|
||||
opacity: 0.35,
|
||||
fontSize: 14
|
||||
},
|
||||
backgroundColor: 'rgba(0,0,0,0.35)',
|
||||
formatter: function (params) {
|
||||
// console.log(params);
|
||||
var tips = ''
|
||||
|
||||
for (var i = 0; i < params.length; i++) {
|
||||
if (params[i].value == 3.14159) {
|
||||
tips += '时间' + ':' + params[i].name + '<br/>'
|
||||
tips += '终端异常个数' + ':暂无数据<br/>'
|
||||
} else {
|
||||
tips += '时间' + ':' + params[i].name + '<br/>'
|
||||
tips += '终端异常个数' + ':' + params[i].value + '<br/>'
|
||||
}
|
||||
}
|
||||
return tips
|
||||
}
|
||||
},
|
||||
toolbox: {
|
||||
show: true
|
||||
},
|
||||
legend: {
|
||||
right: 40,
|
||||
top: 5,
|
||||
data: ['终端异常个数'],
|
||||
textStyle: {
|
||||
color: echartsColor.WordColor,
|
||||
rich: {
|
||||
a: {
|
||||
verticalAlign: 'middle'
|
||||
}
|
||||
},
|
||||
padding: [2, 0, 0, 0] //[上、右、下、左]
|
||||
}
|
||||
},
|
||||
grid: yan.EchartObject.gridk,
|
||||
dataZoom: yan.EchartObject.dataZoom,
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: time,
|
||||
name: '时间',
|
||||
nameTextStyle: {
|
||||
color: echartsColor.WordColor
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: echartsColor.thread
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
// interval: 0,
|
||||
textStyle: {
|
||||
fontFamily: yan.EchartObject.fontFamily,
|
||||
color: echartsColor.WordColor,
|
||||
fontSize: yan.EchartObject.xNamefontSize
|
||||
}
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
name: '单位(个)',
|
||||
nameTextStyle: {
|
||||
color: echartsColor.WordColor
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
// axisLabel: {
|
||||
// formatter: "{value}M",
|
||||
// },
|
||||
// axisLine: { show: true },
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: echartsColor.thread
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: echartsColor.WordColor,
|
||||
fontSize: yan.EchartObject.xNamefontSize
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '终端异常个数',
|
||||
type: 'bar',
|
||||
barMaxWidth: yan.EchartObject.barMaxWidth,
|
||||
itemStyle: {
|
||||
normal: { show: true, color: echartsColor.FigureColor[0] }
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
textStyle: {
|
||||
//数值样式
|
||||
color: echartsColor.WordColor
|
||||
},
|
||||
fontSize: 12
|
||||
},
|
||||
data: handle
|
||||
}
|
||||
]
|
||||
}
|
||||
this.myChartes.setOption(option)
|
||||
window.echartsArr.push(this.myChartes)
|
||||
// myChart.resize();
|
||||
let _this = this
|
||||
_this.$erd.listenTo(_this.$refs.fg, element => {
|
||||
_this.$nextTick(() => {
|
||||
// domID1.style.width = document.getElementById("drag-dept-right").offsetWidth - 30 + "px",
|
||||
;(domID1.style.width = document.getElementById('Statistics').offsetWidth - 0 + 'px'),
|
||||
_this.myChartes.resize()
|
||||
})
|
||||
})
|
||||
},
|
||||
resizeEchart() {
|
||||
var elementResizeDetectorMaker = require('element-resize-detector')
|
||||
var erd = elementResizeDetectorMaker()
|
||||
erd.listenTo(document.getElementById('Statistics'), element => {
|
||||
let domeId = document.getElementById('Statistics')
|
||||
let domeId2 = document.getElementById('electr6')
|
||||
domeId2.style.width = domeId.offsetWidth - 0 + 'px'
|
||||
// this.$nextTick(() => {
|
||||
if (this.myChartes !== '') {
|
||||
this.myChartes.resize()
|
||||
}
|
||||
// });
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
computed: {},
|
||||
|
||||
watch: {}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
@import url('../../../styles/comStyle.less');
|
||||
::v-deep .el-form-item--small .el-form-item__content,
|
||||
.el-form-item--small .el-form-item__label {
|
||||
height: 32px;
|
||||
}
|
||||
.box {
|
||||
display: flex;
|
||||
.boxR {
|
||||
flex: 1;
|
||||
}
|
||||
.boxL {
|
||||
width: 400px;
|
||||
}
|
||||
}
|
||||
::v-deep .el-table .cell {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
291
src/views/BusinessAdministrator/transport/OfflineViewing.vue
Normal file
291
src/views/BusinessAdministrator/transport/OfflineViewing.vue
Normal file
@@ -0,0 +1,291 @@
|
||||
<template>
|
||||
<div class="pd10">
|
||||
<div v-show="view">
|
||||
<div class="box">
|
||||
<el-upload
|
||||
class="upload-demo"
|
||||
ref="upload"
|
||||
action="#"
|
||||
:http-request="upload"
|
||||
:limit="2"
|
||||
accept=".DAT,.CFG"
|
||||
:on-exceed="handleExceed"
|
||||
:before-upload="handleBeforeUpload"
|
||||
:show-file-list="false"
|
||||
>
|
||||
<el-button type="primary" size="small" icon="el-icon-top"
|
||||
>上传文件</el-button
|
||||
>
|
||||
</el-upload>
|
||||
|
||||
<el-button
|
||||
type="primary"
|
||||
style="margin-left: 10px"
|
||||
size="small"
|
||||
icon="el-icon-delete"
|
||||
@click="
|
||||
fileList = [];
|
||||
$refs.upload.clearFiles();
|
||||
"
|
||||
>删除文件</el-button
|
||||
>
|
||||
<el-button type="primary" size="small" icon="el-icon-view" @click="Look"
|
||||
>查看波形</el-button
|
||||
>
|
||||
</div>
|
||||
|
||||
<el-table
|
||||
stripe
|
||||
:data="fileList"
|
||||
highlight-current-row
|
||||
border
|
||||
header-cell-class-name="table_header"
|
||||
style="width: 100%"
|
||||
class="mt10"
|
||||
>
|
||||
<el-table-column prop="name" label="文件名称" align="center">
|
||||
</el-table-column>
|
||||
<el-table-column prop="size" label="文件大小" align="center">
|
||||
<template slot-scope="scope">
|
||||
<span>
|
||||
{{
|
||||
1 * 1024 * 1024 > scope.row.size
|
||||
? (scope.row.size / 1024).toFixed(2) + "(Kb)"
|
||||
: (scope.row.size / 1024 / 1024).toFixed(2) + "(Mb)"
|
||||
}}</span
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<span
|
||||
v-if="view2"
|
||||
style="font-size: 14px; font-weight: ; line-height: 30px"
|
||||
>值类型选择:</span
|
||||
>
|
||||
<el-select
|
||||
v-if="view2"
|
||||
v-model="value"
|
||||
@change="changeView"
|
||||
placeholder="请选择值类型"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-button
|
||||
v-if="view2"
|
||||
@click="backbxlb"
|
||||
type="primary"
|
||||
class="el-icon-refresh-right"
|
||||
style="float: right"
|
||||
>返回</el-button
|
||||
>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-tabs v-if="view2" v-model="bxactiveName" @tab-click="bxhandleClick">
|
||||
<el-tab-pane
|
||||
label="瞬时波形"
|
||||
name="ssbx"
|
||||
:style="'height:' + bxecharts + ';overflow-y: scroll;'"
|
||||
>
|
||||
<shushiboxi
|
||||
v-if="bxactiveName == 'ssbx' && showBoxi"
|
||||
:value="value"
|
||||
:wp="wp"
|
||||
></shushiboxi>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane
|
||||
label="RMS波形"
|
||||
name="rmsbx"
|
||||
:style="'height:' + bxecharts + ';overflow-y: scroll;'"
|
||||
>
|
||||
<rmsboxi
|
||||
v-if="bxactiveName == 'rmsbx' && showBoxi"
|
||||
:value="value"
|
||||
:wp="wp"
|
||||
></rmsboxi>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import api from "@/api/pollution/pollution";
|
||||
import rmsboxi from "./components/rmsboxi.vue";
|
||||
import shushiboxi from "./components/shushiboxi.vue";
|
||||
export default {
|
||||
name: "offlinewaveform",
|
||||
components: { rmsboxi, shushiboxi },
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
fileList: [],
|
||||
fileType: ["DAT", "CFG"],
|
||||
view2: false,
|
||||
view: true,
|
||||
bxecharts: null,
|
||||
wp: {},
|
||||
//里层默认波形tab标签页
|
||||
bxactiveName: "ssbx",
|
||||
value: 1,
|
||||
showBoxi: true,
|
||||
options: [
|
||||
{
|
||||
value: 1,
|
||||
label: "一次值",
|
||||
},
|
||||
{
|
||||
value: 2,
|
||||
label: "二次值",
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
mounted() {
|
||||
this.setHeight()
|
||||
window.addEventListener('resize', this.setHeight)
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.setHeight)
|
||||
},
|
||||
methods: {
|
||||
setHeight() {
|
||||
this.bxecharts = window.sessionStorage.getItem("appheight") - 100 + "px";
|
||||
|
||||
|
||||
},
|
||||
changeView() {
|
||||
this.showBoxi = false;
|
||||
setTimeout(() => {
|
||||
this.showBoxi = true;
|
||||
}, 0);
|
||||
},
|
||||
//文件上传
|
||||
upload(params) {
|
||||
this.fileList.push(params.file);
|
||||
},
|
||||
|
||||
handleExceed(files, fileList) {
|
||||
this.$message.warning(`只能上传1组波形文件`);
|
||||
},
|
||||
|
||||
// 上传前校检格式和大小
|
||||
handleBeforeUpload(file) {
|
||||
// 校检文件类型
|
||||
if (this.fileType) {
|
||||
let fileExtension = "";
|
||||
let fileExtensionL = "";
|
||||
let fileName = "";
|
||||
let fileNameL = "";
|
||||
|
||||
if (file.name.lastIndexOf(".") > -1) {
|
||||
fileExtensionL = file.name.substring(0, file.name.lastIndexOf("."));
|
||||
fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1);
|
||||
}
|
||||
const isTypeOk = this.fileType.some((type) => {
|
||||
if (file.type.indexOf(type) > -1) return true;
|
||||
return !!(fileExtension && fileExtension.indexOf(type) > -1);
|
||||
});
|
||||
if (!isTypeOk) {
|
||||
this.$message.error(
|
||||
`文件格式不正确, 请上传${this.fileType.join("/")}格式文件!`
|
||||
);
|
||||
return false;
|
||||
}
|
||||
if (this.fileList.length > 0) {
|
||||
fileName = this.fileList[0].name.slice(
|
||||
this.fileList[0].name.lastIndexOf(".") + 1
|
||||
);
|
||||
fileNameL = this.fileList[0].name.substring(
|
||||
0,
|
||||
this.fileList[0].name.lastIndexOf(".")
|
||||
);
|
||||
|
||||
if (fileName == fileExtension) {
|
||||
this.$message.error(
|
||||
`${this.fileType.join(
|
||||
" / "
|
||||
)}是一组波形文件!已有${fileName}文件,请上传${
|
||||
fileName == "DAT" ? "CFG" : "DAT"
|
||||
}文件`
|
||||
);
|
||||
return false;
|
||||
}
|
||||
if (fileNameL != fileExtensionL) {
|
||||
this.$message.error(
|
||||
"上传文件的名称必须和已上传的文件名称保持一致!"
|
||||
);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this.$message("正在上传文件，请稍候...");
|
||||
return true;
|
||||
},
|
||||
|
||||
//里层波形tab标签页触发事件
|
||||
bxhandleClick(tab, event) {
|
||||
if (tab.name == "ssbx") {
|
||||
this.bxactiveName = "ssbx";
|
||||
} else if (tab.name == "rmsbx") {
|
||||
this.bxactiveName = "rmsbx";
|
||||
}
|
||||
},
|
||||
// 查看
|
||||
Look() {
|
||||
if (this.fileList.length != 2) {
|
||||
this.$message({
|
||||
message: "请上传1组波形文件!",
|
||||
type: "warning",
|
||||
});
|
||||
return;
|
||||
}
|
||||
let form = new FormData();
|
||||
|
||||
form.append("file1", this.fileList[0]);
|
||||
form.append("file2", this.fileList[1]);
|
||||
|
||||
api.uploadFileAndViewWave(form).then((res) => {
|
||||
if (res != undefined) {
|
||||
this.wp = res.data;
|
||||
setTimeout(() => {
|
||||
this.view = false;
|
||||
this.view2 = true;
|
||||
}, 0);
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
//返回触发事件
|
||||
backbxlb() {
|
||||
this.view = true;
|
||||
this.view2 = false;
|
||||
},
|
||||
},
|
||||
|
||||
computed: {},
|
||||
|
||||
watch: {},
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
@import url("../../../styles/comStyle.less");
|
||||
.box {
|
||||
display: flex;
|
||||
}
|
||||
.el-icon-refresh-right {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,420 @@
|
||||
<template>
|
||||
<div class="pd10" v-loading="isLoading" element-loading-text="数据加载中">
|
||||
<!--查询条件-->
|
||||
<el-form :inline="true" :model="formData">
|
||||
<el-form-item label="终端等级:">
|
||||
<el-select v-model="formData.lineGrade" placeholder="终端等级" clearable>
|
||||
<el-option
|
||||
v-for="item in terminalClass"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<Timeinterval ref="interval" :interval="3"></Timeinterval>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit" class="ml10" icon="el-icon-search">查询</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<!--内容区-->
|
||||
<el-row>
|
||||
<el-col :span="24" :style="'height:' + vh + 'px'">
|
||||
<div id="ranking">
|
||||
<div id="tubiao" ref="fg" style="width: 100%"></div>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-table
|
||||
stripe
|
||||
header-cell-class-name="table_header"
|
||||
:data="tableData"
|
||||
border
|
||||
highlight-current-row
|
||||
default-expand-all
|
||||
:height="vhh"
|
||||
>
|
||||
<el-table-column show-overflow-tooltip label="序号" width="80" align="center">
|
||||
<template scope="scope">
|
||||
<span>{{ (formData.pageNum - 1) * formData.pageSize + scope.$index + 1 }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" prop="name" label="终端名称"></el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
prop="substation"
|
||||
label="变电站"
|
||||
show-overflow-tooltip
|
||||
></el-table-column>
|
||||
<el-table-column align="center" prop="runFlag" label="终端状态">
|
||||
<template slot-scope="scope">
|
||||
<span type="primary" v-if="scope.row.runFlag === 0">投运</span>
|
||||
<span type="primary" v-if="scope.row.runFlag === 1">热备用</span>
|
||||
<span type="primary" v-if="scope.row.runFlag === 2">停运</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" prop="comFlag" label="通讯状态">
|
||||
<template slot-scope="scope">
|
||||
<el-tag
|
||||
type="primary"
|
||||
v-if="scope.row.comFlag === 0"
|
||||
style="color: #fff; background: #cc0000"
|
||||
size="small"
|
||||
>
|
||||
中断
|
||||
</el-tag>
|
||||
<el-tag
|
||||
type="primary"
|
||||
v-if="scope.row.comFlag === 1"
|
||||
style="color: #fff; background: #2e8b57"
|
||||
size="small"
|
||||
>
|
||||
正常
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" prop="updateTime" label="最新数据时间" sortable></el-table-column>
|
||||
<el-table-column align="center" prop="flowMeal" label="套餐流量(MB)" sortable></el-table-column>
|
||||
<el-table-column align="center" prop="statisValue" sortable label="已用流量(MB)"></el-table-column>
|
||||
<el-table-column align="center" prop="flowProportion" sortable label="流量使用占比(%)">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ (scope.row.flowProportion * 100).toFixed() }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
background
|
||||
align="right"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="formData.pageNum"
|
||||
:page-sizes="[20, 30, 40, 50, 100]"
|
||||
:page-size="formData.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
class="mt10"
|
||||
></el-pagination>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Timeinterval from '@/views/components/TimePicker/index4'
|
||||
import { dicData } from '@/assets/commjs/dictypeData'
|
||||
import yan from '@/assets/commjs/color'
|
||||
import { getNewDeviceRunStatistics } from '@/api/BusinessAdministrator/OperationStatistics'
|
||||
export default {
|
||||
name: 'operatingstatistic',
|
||||
components: {
|
||||
Timeinterval
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
zoom: '', //图表焦点校验
|
||||
vh: null,
|
||||
vhh: null,
|
||||
isLoading: false,
|
||||
myChartes: '',
|
||||
formData: {
|
||||
lineGrade: '', //终端等级
|
||||
searchBeginTime: '', //开始
|
||||
searchEndTime: '', //结束
|
||||
pageNum: 1,
|
||||
pageSize: 20
|
||||
},
|
||||
item: ['', ''],
|
||||
vh: undefined,
|
||||
terminalClass: [], //终端等级
|
||||
teriminal: '',
|
||||
teriminaloption: [],
|
||||
tableData: [],
|
||||
total: undefined // 总条数
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getclassificationData()
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.setHeight()
|
||||
window.addEventListener('resize', this.setHeight)
|
||||
|
||||
this.resizeEchart()
|
||||
|
||||
// this.vh =window.sessionStorage.getItem('appheight') - 125 + "px";
|
||||
this.onSubmit()
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.setHeight)
|
||||
},
|
||||
methods: {
|
||||
setHeight() {
|
||||
this.vh = (window.sessionStorage.getItem('appheight') - 95) / 2
|
||||
this.vhh = (window.sessionStorage.getItem('appheight') - 95) / 2
|
||||
if (this.myChartes !== '') {
|
||||
this.myChartes.resize()
|
||||
}
|
||||
},
|
||||
//获取类型
|
||||
getclassificationData() {
|
||||
//监测点等级
|
||||
this.terminalClass = dicData('Dev_Level', [])
|
||||
this.formData.lineGrade = this.terminalClass[0].id
|
||||
},
|
||||
//查询
|
||||
onSubmit() {
|
||||
if (this.formData.formData !== '') {
|
||||
this.formData.pageNum = 1
|
||||
}
|
||||
this.tableData = []
|
||||
this.isLoading = true
|
||||
this.$refs.interval.timeOptions = [
|
||||
// { label: "年份", value: 1 },
|
||||
// { label: "季度", value: 2 },
|
||||
{ label: '月份', value: 3 }
|
||||
// { label: "周", value: 4 },
|
||||
// // { label: "自定义", value: 5 },
|
||||
]
|
||||
this.item = this.$refs.interval.timeValue
|
||||
this.formData.searchBeginTime = this.item[0]
|
||||
this.formData.searchEndTime = this.item[1]
|
||||
getNewDeviceRunStatistics(this.formData).then(res => {
|
||||
this.isLoading = false
|
||||
if (res.code == 'A0000') {
|
||||
this.tableData = res.data.records
|
||||
this.total = res.data.total
|
||||
this.$nextTick(() => {
|
||||
this.initData()
|
||||
})
|
||||
} else {
|
||||
this.$message({
|
||||
message: res.message,
|
||||
type: 'warning'
|
||||
})
|
||||
}
|
||||
})
|
||||
// this.initData();
|
||||
},
|
||||
//分页查询用
|
||||
onSubmit1() {
|
||||
this.isLoading = true
|
||||
this.item = this.$refs.interval.timeValue
|
||||
this.formData.searchBeginTime = this.item[0]
|
||||
this.formData.searchEndTime = this.item[1]
|
||||
getNewDeviceRunStatistics(this.formData).then(res => {
|
||||
this.isLoading = false
|
||||
if (res.code == 'A0000') {
|
||||
this.tableData = res.data.records
|
||||
this.total = res.data.total
|
||||
this.$nextTick(() => {
|
||||
this.initData()
|
||||
})
|
||||
} else {
|
||||
this.$message({
|
||||
message: res.message,
|
||||
type: 'warning'
|
||||
})
|
||||
}
|
||||
})
|
||||
// this.initData();
|
||||
},
|
||||
//每页条数改变时触发 选择一页显示多少行
|
||||
handleSizeChange(val) {
|
||||
this.formData.pageSize = val
|
||||
this.onSubmit1()
|
||||
},
|
||||
//当前页改变时触发 跳转其他页
|
||||
handleCurrentChange(val) {
|
||||
this.formData.pageNum = val
|
||||
this.onSubmit1()
|
||||
},
|
||||
initData() {
|
||||
const echarts = require('echarts')
|
||||
let domID1 = document.getElementById('tubiao')
|
||||
this.myChartes = echarts.init(domID1, null, { renderer: 'svg' })
|
||||
setTimeout(() => {
|
||||
domID1.style.width = window.sessionStorage.getItem('ranking') - 40 + 'px'
|
||||
domID1.style.height = (window.sessionStorage.getItem('appheight') - 95) / 2 + 'px'
|
||||
}, 0)
|
||||
let name = []
|
||||
let flowMeal = []
|
||||
let statisValue = []
|
||||
let echartsData = JSON.parse(JSON.stringify(this.tableData))
|
||||
echartsData.forEach(item => {
|
||||
name.push(item.name)
|
||||
flowMeal.push(item.flowMeal)
|
||||
statisValue.push(item.statisValue)
|
||||
})
|
||||
let echartsColor = JSON.parse(window.localStorage.echartsColor)
|
||||
this.myChartes.clear()
|
||||
var option = {
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
name: '终端\n名称',
|
||||
nameTextStyle: {
|
||||
color: echartsColor.WordColor
|
||||
},
|
||||
data: name.slice(0, 20),
|
||||
axisLine: { show: true },
|
||||
axisLabel: {
|
||||
// padding: [0, 10, 0, 10],
|
||||
// interval: 0,
|
||||
textStyle: {
|
||||
fontFamily: yan.EchartObject.fontFamily,
|
||||
color: echartsColor.WordColor,
|
||||
fontSize: yan.EchartObject.xNamefontSize
|
||||
}
|
||||
}
|
||||
},
|
||||
yAxis: {
|
||||
name: '单位:MB',
|
||||
nameTextStyle: {
|
||||
color: echartsColor.WordColor
|
||||
},
|
||||
type: 'value',
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: echartsColor.thread
|
||||
}
|
||||
},
|
||||
axisLabel: {
|
||||
color: echartsColor.WordColor,
|
||||
fontSize: yan.EchartObject.xNamefontSize
|
||||
}
|
||||
},
|
||||
grid: yan.EchartObject.gridd,
|
||||
dataZoom: yan.EchartObject.dataZoom,
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
label: {
|
||||
color: '#fff',
|
||||
fontSize: 16
|
||||
}
|
||||
},
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontStyle: 'normal',
|
||||
opacity: 0.35,
|
||||
fontSize: 14
|
||||
},
|
||||
backgroundColor: 'rgba(0,0,0,0.35)',
|
||||
formatter: function (params) {
|
||||
// console.log(params);
|
||||
var tips = ''
|
||||
for (var i = 0; i < echartsData.length; i++) {
|
||||
if (echartsData[i].name == params[0].name) {
|
||||
tips += echartsData[i].substation + '_' + params[0].name + '</br/>'
|
||||
break
|
||||
}
|
||||
}
|
||||
for (var i = 0; i < params.length; i++) {
|
||||
tips += params[i].seriesName + ':' + ' ' + ' ' + ' ' + params[i].value + '<br/>'
|
||||
}
|
||||
return tips
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
right: 40,
|
||||
top: 5,
|
||||
data: ['套餐总量', '流量使用量'],
|
||||
textStyle: {
|
||||
color: echartsColor.WordColor,
|
||||
rich: {
|
||||
a: {
|
||||
verticalAlign: 'middle'
|
||||
}
|
||||
},
|
||||
padding: [2, 0, 0, 0] //[上、右、下、左]
|
||||
}
|
||||
},
|
||||
title: {
|
||||
text: '流量使用占比排名',
|
||||
left: 'center',
|
||||
textStyle: {
|
||||
fontSize: yan.EchartObject.titleNamefontSize1,
|
||||
color: echartsColor.WordColor
|
||||
}
|
||||
},
|
||||
// colors: echartsColor.FigureColor,
|
||||
series: [
|
||||
{
|
||||
name: '套餐总量',
|
||||
data: flowMeal.slice(0, 20),
|
||||
type: 'bar',
|
||||
barMaxWidth: yan.EchartObject.barMaxWidth,
|
||||
z: '-1',
|
||||
barGap: '-100%',
|
||||
label: {
|
||||
show: true,
|
||||
position: 'top',
|
||||
fontSize: 10,
|
||||
textStyle: {
|
||||
//数值样式
|
||||
color: echartsColor.WordColor
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: { show: true, color: echartsColor.FigureColor[0] }
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '流量使用量',
|
||||
data: statisValue.slice(0, 20),
|
||||
type: 'bar',
|
||||
barMaxWidth: yan.EchartObject.barMaxWidth,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'inside',
|
||||
fontSize: 10,
|
||||
textStyle: {
|
||||
//数值样式
|
||||
color: echartsColor.WordColor
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: { show: true, color: echartsColor.FigureColor[5] }
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
this.myChartes.setOption(option)
|
||||
window.echartsArr.push(this.myChartes)
|
||||
// myChart.resize();
|
||||
let _this = this
|
||||
_this.$erd.listenTo(_this.$refs.fg, element => {
|
||||
_this.$nextTick(() => {
|
||||
// domID1.style.width = document.getElementById("drag-dept-right").offsetWidth - 30 + "px",
|
||||
;(domID1.style.width = document.getElementById('ranking').offsetWidth - 0 + 'px'),
|
||||
_this.myChartes.resize()
|
||||
})
|
||||
})
|
||||
},
|
||||
resizeEchart() {
|
||||
var elementResizeDetectorMaker = require('element-resize-detector')
|
||||
var erd = elementResizeDetectorMaker()
|
||||
erd.listenTo(document.getElementById('ranking'), element => {
|
||||
let domeId = document.getElementById('ranking')
|
||||
let domeId2 = document.getElementById('tubiao')
|
||||
domeId2.style.width = domeId.offsetWidth - 0 + 'px'
|
||||
// this.$nextTick(() => {
|
||||
if (this.myChartes !== '') {
|
||||
this.myChartes.resize()
|
||||
}
|
||||
// });
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
@import url('../../../styles/comStyle.less');
|
||||
</style>
|
||||
1033
src/views/BusinessAdministrator/transport/Statistics.vue
Normal file
1033
src/views/BusinessAdministrator/transport/Statistics.vue
Normal file
File diff suppressed because it is too large
Load Diff
71
src/views/BusinessAdministrator/transport/complete.vue
Normal file
71
src/views/BusinessAdministrator/transport/complete.vue
Normal file
@@ -0,0 +1,71 @@
|
||||
<template>
|
||||
<el-container class="pd10">
|
||||
<el-main class="main">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="24">
|
||||
<el-tabs type="border-card" v-model="activeName">
|
||||
<el-tab-pane label="完整性列表" name="tab1" :style="'height:' + vh + ';'">
|
||||
<dataintegrity v-if="activeName == 'tab1'"></dataintegrity>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="完整性图表" name="tab2" :style="'height:' + vh + ';'">
|
||||
<dataintegrityechart v-if="activeName == 'tab2'" />
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</template>
|
||||
<script>
|
||||
import { dicData } from '../../../assets/commjs/dictypeData'
|
||||
import api from '@/api/integraliy/integraliy'
|
||||
import dataintegrity from './components/completeCild/dataintegrity.vue'
|
||||
import dataintegrityechart from './components/completeCild/dataintegrityechart.vue'
|
||||
//import dataintegrityechart from '../../components/dataintegrityechart'
|
||||
|
||||
export default {
|
||||
name: 'sjwzx',
|
||||
components: {
|
||||
dataintegrity,
|
||||
dataintegrityechart
|
||||
// dataintegrityechart
|
||||
},
|
||||
watch: {},
|
||||
computed: {},
|
||||
data() {
|
||||
return {
|
||||
activeName: 'tab1',
|
||||
vh: undefined
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
mounted() {
|
||||
this.setHeight()
|
||||
window.addEventListener('resize', this.setHeight)
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.setHeight)
|
||||
},
|
||||
methods: {
|
||||
setHeight() {
|
||||
this.vh = window.sessionStorage.getItem('appheight') - 83 + 'px'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.main {
|
||||
overflow: hidden;
|
||||
}
|
||||
::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
height: 0;
|
||||
}
|
||||
</style>
|
||||
<style lang="less" scoped>
|
||||
@import url('../../../styles/comStyle.less');
|
||||
::v-deep .el-form-item--small .el-form-item__content,
|
||||
.el-form-item--small .el-form-item__label {
|
||||
height: 32px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,268 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="svgIcon">
|
||||
<el-button size="mini" class="back" type="primary" @click="$emit('back')" icon="el-icon-refresh-left"
|
||||
>返回</el-button
|
||||
>
|
||||
</div>
|
||||
|
||||
<el-table
|
||||
stripe
|
||||
:data="TerminalDetails"
|
||||
class="xshou"
|
||||
style="width: 100%; margin-bottom: 10px"
|
||||
row-key="id"
|
||||
id="rebateSetTable"
|
||||
border
|
||||
highlight-current-row
|
||||
:height="vh + 'px'"
|
||||
header-cell-class-name="table_header"
|
||||
v-loading="loading"
|
||||
element-loading-text="数据加载中"
|
||||
:header-cell-style="{
|
||||
height: '25px',
|
||||
padding: '0px',
|
||||
}"
|
||||
:row-style="{ height: '28px' }"
|
||||
:cell-style="{ padding: '2px' }"
|
||||
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
|
||||
>
|
||||
<el-table-column
|
||||
min-width="150"
|
||||
prop="deviceName"
|
||||
label="台账信息"
|
||||
:show-overflow-tooltip="true"
|
||||
class="TAB"
|
||||
width="200"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="cityName"
|
||||
align="center"
|
||||
label="所属地区"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="subName"
|
||||
align="center"
|
||||
label="变电站"
|
||||
:show-overflow-tooltip="true"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="integrityValue"
|
||||
align="center"
|
||||
min-width="80"
|
||||
label="数据完整性(%)"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{
|
||||
scope.row.integrityValue == null
|
||||
? "/"
|
||||
: scope.row.integrityValue.toFixed(2)
|
||||
}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="onlineRateValue"
|
||||
align="center"
|
||||
min-width="80"
|
||||
label="在线率(%)"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{
|
||||
scope.row.onlineRateValue == null
|
||||
? "/"
|
||||
: scope.row.onlineRateValue.toFixed(2)
|
||||
}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="comOutCount"
|
||||
align="center"
|
||||
min-width="100"
|
||||
label="通讯中断(次)"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="alarmCount"
|
||||
align="center"
|
||||
min-width="100"
|
||||
label="终端告警(次)"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="flowValue"
|
||||
align="center"
|
||||
min-width="100"
|
||||
label="终端流量(%)"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" min-width="60">
|
||||
<template slot-scope="scope">
|
||||
<el-button size="mini" type="primary" @click="details(scope.row)" icon="el-icon-view"
|
||||
>详情</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-dialog
|
||||
:close-on-click-modal="false"
|
||||
:title="title"
|
||||
v-if="dialogVisible"
|
||||
:visible.sync="dialogVisible"
|
||||
width="30%"
|
||||
>
|
||||
<el-collapse v-model="activeNames">
|
||||
<el-collapse-item title="终端基础信息" name="1">
|
||||
<div>
|
||||
{{ Basicinformation }}
|
||||
</div>
|
||||
<div></div>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="数据完整性" name="2">
|
||||
<div>
|
||||
{{ Dataintegrity }}
|
||||
</div>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="在线率" name="3">
|
||||
<div>
|
||||
{{ onlinerate }}
|
||||
</div>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="终端通讯信息" name="4">
|
||||
<div style="white-space: pre-line">
|
||||
{{ Communicationinformation }}
|
||||
</div>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="终端告警信息" name="5">
|
||||
<div style="white-space: pre-line">
|
||||
{{ alarminformation }}
|
||||
</div>
|
||||
</el-collapse-item>
|
||||
<el-collapse-item title="终端流量信息" name="6">
|
||||
<div>
|
||||
{{ trafficinformation }}
|
||||
</div>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="dialogVisible = false"
|
||||
>确 定</el-button
|
||||
>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
TerminalDetails: {
|
||||
type: Array,
|
||||
default: undefined,
|
||||
},
|
||||
},
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
activeNames: ["1", "2", "3", "4", "5", "6"],
|
||||
title: "",
|
||||
dialogVisible: false,
|
||||
loading: true,
|
||||
vh: undefined,
|
||||
tableData: [],
|
||||
Basicinformation: "",
|
||||
Dataintegrity: "",
|
||||
onlinerate: "",
|
||||
Communicationinformation: "",
|
||||
alarminformation: "",
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
mounted() {
|
||||
this.setHeight()
|
||||
window.addEventListener('resize', this.setHeight)
|
||||
//this.loading = true
|
||||
this.tableData = this.TerminalDetails;
|
||||
if (this.tableData != []) {
|
||||
this.loading = false;
|
||||
}
|
||||
},
|
||||
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.setHeight)
|
||||
},
|
||||
methods: {
|
||||
setHeight() {
|
||||
this.vh = window.sessionStorage.getItem("appheight") - 50;
|
||||
|
||||
|
||||
},
|
||||
details(e) {
|
||||
this.title = "异常终端详情";
|
||||
this.dialogVisible = true;
|
||||
this.Basicinformation =
|
||||
e.cityName + "_" + e.subName + "," + e.deviceName + ";";
|
||||
if (e.integrityFlag == "0") {
|
||||
this.Dataintegrity =
|
||||
"数据完整性" + ":" + e.integrityValue + "%" + "[不合格]";
|
||||
} else if (e.integrityFlag == "1") {
|
||||
this.Dataintegrity =
|
||||
"数据完整性" + ":" + e.integrityValue + "%" + "[合格]";
|
||||
}
|
||||
if (e.onlineRateFlag == "-1") {
|
||||
this.onlinerate = "在线率" + ":" + e.onlineRateValue + "%" + "[不合格]";
|
||||
} else if (e.onlineRateFlag == "1") {
|
||||
this.onlinerate = "在线率" + ":" + e.onlineRateValue + "%" + "[合格]";
|
||||
}
|
||||
this.Communicationinformation = e.comOutDesc.replace(/,/g, "\n");
|
||||
this.alarminformation = e.alarmDesc.replace(/,/g, "\n");
|
||||
// console.log(this.Communicationinformation);
|
||||
// this.alarminformation = e.alarmDesc
|
||||
this.trafficinformation =
|
||||
e.deviceName + "终端流量已使用" + e.flowValue + "%";
|
||||
},
|
||||
},
|
||||
|
||||
computed: {},
|
||||
|
||||
watch: {},
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
@import url("../../../../../styles/comStyle.less");
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
.svgIcon {
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
}
|
||||
.back {
|
||||
margin-right: 10px;
|
||||
margin-bottom: 10px;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
::v-deep .el-collapse-item__header.is-active {
|
||||
color: rgb(4, 199, 179);
|
||||
border-bottom-color: transparent;
|
||||
}
|
||||
::v-deep .el-collapse-item__header {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 48px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
line-height: 48px;
|
||||
color: #e8a806;
|
||||
cursor: pointer;
|
||||
background-color: #fff;
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
outline: 0;
|
||||
-webkit-box-align: center;
|
||||
-webkit-transition: border-bottom-color 0.3s;
|
||||
transition: border-bottom-color 0.3s;
|
||||
-ms-flex-align: center;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,392 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form :inline="true" :model="formData">
|
||||
<el-form-item>
|
||||
<el-switch class="tableScopeSwitch" :active-value="2" :inactive-value="1" active-text="全网" inactive-text="网公司"
|
||||
inactive-color="#666666" v-model="formData.monitorFlag">
|
||||
</el-switch></el-form-item>
|
||||
<el-form-item label="统计类型:">
|
||||
<el-select v-model="formData.statisticalType" placeholder="请选择统计类型" style="width: 160px">
|
||||
<el-option v-for="item in classificationData" :key="item.id" :label="item.name" :value="{
|
||||
label: item.name,
|
||||
value: item.id,
|
||||
name: item.name,
|
||||
id: item.id,
|
||||
code: item.code,
|
||||
sort: item.sort,
|
||||
}">
|
||||
</el-option> </el-select></el-form-item>
|
||||
<el-form-item label="终端等级:">
|
||||
<el-select v-model="formData.algoDescribe" multiple collapse-tags placeholder="终端等级" style="width: 160px">
|
||||
<el-option v-for="item in terminalClass" :key="item.id" :label="item.label" :value="item.id">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="电压等级:">
|
||||
<el-select v-model="formData.scale" multiple collapse-tags placeholder="请选择电压等级" style="width: 160px">
|
||||
<el-option v-for="item in voltageleveloption" :key="item.id" :label="item.name" :value="{
|
||||
label: item.name,
|
||||
value: item.id,
|
||||
code: item.code,
|
||||
name: item.name,
|
||||
id: item.id,
|
||||
sort: item.sort,
|
||||
}">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="终端厂家:">
|
||||
<el-select v-model="formData.manufacturer" multiple collapse-tags placeholder="请选择终端厂家" style="width: 160px">
|
||||
<el-option v-for="item in terminaloption" :key="item.id" :label="item.name" :value="{
|
||||
label: item.name,
|
||||
value: item.id,
|
||||
code: item.code,
|
||||
name: item.name,
|
||||
id: item.id,
|
||||
sort: item.sort,
|
||||
}">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="终端厂家:">
|
||||
<el-select
|
||||
v-model="formData.manufacturer"
|
||||
multiple
|
||||
collapse-tags
|
||||
placeholder="请选择终端厂家"
|
||||
style="width: 160px;"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in terminaloption"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="{
|
||||
label: item.name,
|
||||
value: item.id,
|
||||
code: item.code,
|
||||
name: item.name,
|
||||
id: item.id,
|
||||
sort: item.sort
|
||||
}"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item> -->
|
||||
<el-form-item label="干扰源类型:">
|
||||
<el-select v-model="formData.loadType" multiple collapse-tags placeholder="请选择干扰源类型" style="width: 180px">
|
||||
<el-option v-for="item in interfereoption" :key="item.id" :label="item.name" :value="{
|
||||
label: item.name,
|
||||
value: item.id,
|
||||
code: item.code,
|
||||
name: item.name,
|
||||
id: item.id,
|
||||
sort: item.sort,
|
||||
}">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="合格率:">
|
||||
<el-select v-model="formData.linePassRate" placeholder="请选择合格率" style="width: 180px">
|
||||
<el-option label="合格" value="1"> </el-option>
|
||||
<el-option label="不合格" value="0"> </el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<Area @click="handleNodeClick"></Area>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<Timeinterval ref="Timeinterval" :interval="3"></Timeinterval>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit" class="ml10" icon="el-icon-search">查询</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" class="ml10" icon="el-icon-search" @click="Reset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-select v-show="false" v-model="ExpandedNum" @change="handleExpandNumChange" placeholder="选择展开级别" size="mini"
|
||||
style="width: 100px; left: 0px">
|
||||
<el-option label="不展开" :value="0"></el-option>
|
||||
<el-option label="展开1" :value="1"></el-option>
|
||||
<el-option label="展开2" :value="2"></el-option>
|
||||
<el-option label="展开3" :value="3"></el-option>
|
||||
</el-select>
|
||||
<el-table stripe :data="tableData" class="xshou" style="width: 100%; margin-bottom: 10px" row-key="id"
|
||||
id="rebateSetTable" border highlight-current-row :height="vh + 'px'" :expand-row-keys="expandID"
|
||||
header-cell-class-name="table_header" v-loading="loading" element-loading-text="数据加载中"
|
||||
:row-style="{ height: '25px' }" :cell-style="{ padding: '0px' }"
|
||||
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
|
||||
<el-table-column min-width="150" prop="name" :label="typedata" :show-overflow-tooltip="true" class="TAB"
|
||||
width="200">
|
||||
</el-table-column>
|
||||
<el-table-column min-width="80" align="center" prop="voltageLevel" v-if="dydj" label="电压等级">
|
||||
<template slot-scope="scope">
|
||||
<div v-if="scope.row.level == 6">
|
||||
<span v-if="scope.row.lineScale == null" type="primary" size="small">/</span>
|
||||
<span v-if="scope.row.lineScale != null" type="primary" size="small">{{ scope.row.lineScale }}</span>
|
||||
</div>
|
||||
<div v-else>
|
||||
<span v-if="scope.row.subScale == null" type="primary" size="small">/</span>
|
||||
<span v-if="scope.row.subScale != null" type="primary" size="small">{{ scope.row.subScale }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column min-width="100" align="center" prop="ip" label="网络参数">
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.ip == null" type="primary" size="small">/</span>
|
||||
<span v-if="scope.row.ip != null" type="primary" size="small">{{
|
||||
scope.row.ip
|
||||
}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- <el-table-column min-width='150' align="center" prop="name" :show-overflow-tooltip='true' label="名称" >
|
||||
|
||||
</el-table-column> -->
|
||||
<el-table-column min-width="100" align="center" prop="manufacturer" label="厂家">
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.manufacturer == null" type="primary" size="small">/</span>
|
||||
<span v-if="scope.row.manufacturer != null" type="primary" size="small">{{ scope.row.manufacturer }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column min-width="150" align="center" prop="name" label="终端名称">
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.name == null" type="primary" size="small">/</span>
|
||||
<span v-if="scope.row.name != null" type="primary" size="small">{{
|
||||
scope.row.name
|
||||
}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column min-width="80" align="center" prop="comFlag" label="通讯状态">
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.comFlag == null" type="primary" size="small">/</span>
|
||||
<span v-if="scope.row.comFlag == 0" type="primary" size="small">中断</span>
|
||||
<span v-if="scope.row.comFlag == 1" type="primary" size="small">正常</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column min-width="100" align="center" prop="updateTime" label="最新数据时间">
|
||||
<!-- :show-overflow-tooltip="true" -->
|
||||
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.updateTime == null" type="primary" size="small">/</span>
|
||||
<span v-if="scope.row.updateTime != null" type="primary" size="small">{{ scope.row.updateTime }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column min-width="100" align="center" prop="integrityData" label="完整性(%)">
|
||||
<template slot-scope="scope">
|
||||
<span v-if="
|
||||
scope.row.integrityData == null ||
|
||||
scope.row.integrityData == 3.14159
|
||||
" type="primary" size="small">暂无数据</span>
|
||||
<span v-else type="primary" size="small">{{
|
||||
scope.row.integrityData.toFixed(2)
|
||||
}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { dicData } from "@/assets/commjs/dictypeData";
|
||||
import Area from "@/views/components/Area/Area.vue";
|
||||
import Timeinterval from "@/views/components/Timeinterval.vue";
|
||||
import { getLineIntegrityData } from "@/api/integraliy/integraliy";
|
||||
export default {
|
||||
components: {
|
||||
Area,
|
||||
Timeinterval,
|
||||
},
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
vh: undefined,
|
||||
formData: {
|
||||
//后面需要修改
|
||||
deptIndex: "",
|
||||
monitorFlag: 2,
|
||||
powerFlag: 2,
|
||||
loadType: [],
|
||||
manufacturer: [],
|
||||
searchBeginTime: "",
|
||||
searchEndTime: "",
|
||||
statisticalType: "",
|
||||
scale: [],
|
||||
linePassRate: "",
|
||||
},
|
||||
classificationData: [],
|
||||
dejioption: [],
|
||||
deji: "",
|
||||
//电压等级
|
||||
voltageleveloption: [],
|
||||
interfereoption: [],
|
||||
terminaloption: [],
|
||||
ExpandedNum: 2,
|
||||
tableData: [],
|
||||
typedata: "",
|
||||
dydj: true,
|
||||
expandID: [],
|
||||
loading: false,
|
||||
terminalClass: [
|
||||
{
|
||||
id: 0,
|
||||
value: "0",
|
||||
label: "极重要",
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
value: "1",
|
||||
label: "重要",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
value: "2",
|
||||
label: "普通",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
value: "3",
|
||||
label: "不重要",
|
||||
},
|
||||
], //终端等级
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.info();
|
||||
},
|
||||
mounted() {
|
||||
this.vh = window.sessionStorage.getItem("appheight") - 170;
|
||||
this.handleExpandNumChange();
|
||||
|
||||
this.formData.deptIndex = JSON.parse(
|
||||
window.sessionStorage.getItem("Info")
|
||||
).deptId;
|
||||
this.onSubmit();
|
||||
},
|
||||
methods: {
|
||||
//字典表
|
||||
info() {
|
||||
// 获取统计类型
|
||||
this.classificationData = dicData("Statistical_Type", ["Report_Type"]);
|
||||
this.formData.statisticalType = this.classificationData[0];
|
||||
// 字典获取数据电压等级;
|
||||
this.voltageleveloption = dicData("Dev_Voltage", []);
|
||||
this.formData.scale = this.voltageleveloption;
|
||||
//字典获取数据终端厂家
|
||||
this.terminaloption = dicData("Dev_Manufacturers", []);
|
||||
this.formData.manufacturer = this.terminaloption;
|
||||
//字典获取数据干扰源类型
|
||||
this.interfereoption = dicData("Interference_Source", []);
|
||||
this.formData.loadType = this.interfereoption;
|
||||
},
|
||||
// 区域
|
||||
handleNodeClick(data) {
|
||||
// console.log(data);
|
||||
this.formData.deptIndex = data.id;
|
||||
},
|
||||
// 查询
|
||||
onSubmit() {
|
||||
this.loading = true;
|
||||
// console.log("========", this.formData);
|
||||
|
||||
(this.formData.serverName = "harmonic-boot"),
|
||||
(this.formData.searchBeginTime = this.$refs.Timeinterval.timeValue[0]);
|
||||
this.formData.searchEndTime = this.$refs.Timeinterval.timeValue[1];
|
||||
this.typedata = this.formData.statisticalType.label;
|
||||
getLineIntegrityData(this.formData).then((res) => {
|
||||
if (res.code == "A0000") {
|
||||
// console.log(res.data[0].deviceName === null)
|
||||
if (res.data.length == 0) {
|
||||
this.tableData = [];
|
||||
this.loading = false;
|
||||
} else {
|
||||
// this.tableData = res.data
|
||||
res.data.forEach((m) => {
|
||||
m.id = this.guid();
|
||||
m.children.forEach((n) => {
|
||||
n.id = this.guid();
|
||||
n.children.forEach((d) => {
|
||||
d.id = this.guid();
|
||||
|
||||
d.children.forEach((c) => {
|
||||
c.id = this.guid();
|
||||
c.children.forEach((p) => {
|
||||
p.id = this.guid();
|
||||
p.children.forEach((a) => {
|
||||
a.id = this.guid();
|
||||
a.children.forEach((r) => {
|
||||
r.id = this.guid();
|
||||
r.children.forEach((t) => {
|
||||
t.id = this.guid();
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
this.tableData = res.data;
|
||||
this.handleExpandNumChange();
|
||||
this.loading = false;
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
// 重置
|
||||
Reset() {
|
||||
this.formData = {
|
||||
//后面需要修改
|
||||
deptIndex: "",
|
||||
monitorFlag: 2,
|
||||
powerFlag: 2,
|
||||
loadType: [],
|
||||
manufacturer: [],
|
||||
searchBeginTime: "",
|
||||
searchEndTime: "",
|
||||
statisticalType: "",
|
||||
scale: [],
|
||||
linePassRate: "",
|
||||
};
|
||||
},
|
||||
//判断需要展开层级
|
||||
handleExpandNumChange() {
|
||||
if (this.ExpandedNum > 0) {
|
||||
this.setExpandKeys(this.tableData);
|
||||
}
|
||||
},
|
||||
//层级展开递归方法
|
||||
setExpandKeys(dataList, n) {
|
||||
if (!n) n = 1;
|
||||
for (let i = 0; i < dataList.length; i++) {
|
||||
if (n <= this.ExpandedNum) {
|
||||
//this.expandID=[]
|
||||
this.expandID.push(`${dataList[i].id}`);
|
||||
if (dataList[i].hasOwnProperty("children")) {
|
||||
const children = dataList[i].children;
|
||||
this.setExpandKeys(children, n + 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
guid() {
|
||||
return "xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx".replace(/[xy]/g, function (c) {
|
||||
let r = (Math.random() * 16) | 0,
|
||||
v = c === "x" ? r : (r & 0x3) | 0x8;
|
||||
return v.toString(16);
|
||||
});
|
||||
},
|
||||
},
|
||||
|
||||
computed: {},
|
||||
|
||||
watch: {},
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
@import url("../../../../../styles/comStyle.less");
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
::v-deep .el-tooltip {
|
||||
text-align: left !important;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,541 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form :inline="true" :model="formData">
|
||||
<el-form-item>
|
||||
<el-switch class="tableScopeSwitch" :active-value="2" :inactive-value="1" active-text="全网"
|
||||
inactive-text="网公司" inactive-color="#666666" v-model="formData.monitorFlag"></el-switch>
|
||||
</el-form-item>
|
||||
<el-form-item label="统计类型:">
|
||||
<el-select v-model="formData.statisticalType" placeholder="请选择统计类型" style="width: 160px">
|
||||
<el-option v-for="item in classificationData" :key="item.id" :label="item.name" :value="{
|
||||
label: item.name,
|
||||
value: item.id,
|
||||
name: item.name,
|
||||
id: item.id,
|
||||
code: item.code,
|
||||
sort: item.sort
|
||||
}"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="终端等级:">
|
||||
<el-select v-model="formData.algoDescribe" multiple collapse-tags placeholder="终端等级"
|
||||
style="width: 160px">
|
||||
<el-option v-for="item in terminalClass" :key="item.id" :label="item.label"
|
||||
:value="item.id"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="电压等级:">
|
||||
<el-select v-model="formData.scale" multiple collapse-tags placeholder="请选择电压等级" style="width: 160px">
|
||||
<el-option v-for="item in voltageleveloption" :key="item.id" :label="item.name" :value="{
|
||||
label: item.name,
|
||||
value: item.id,
|
||||
code: item.code,
|
||||
name: item.name,
|
||||
id: item.id,
|
||||
sort: item.sort
|
||||
}"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="终端厂家:">
|
||||
<el-select
|
||||
v-model="formData.manufacturer"
|
||||
multiple
|
||||
collapse-tags
|
||||
placeholder="请选择终端厂家"
|
||||
style="width: 160px;"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in terminaloption"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="{
|
||||
label: item.name,
|
||||
value: item.id,
|
||||
code: item.code,
|
||||
name: item.name,
|
||||
id: item.id,
|
||||
sort: item.sort
|
||||
}"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item> -->
|
||||
<el-form-item label="终端厂家:">
|
||||
<el-select v-model="formData.manufacturer" multiple collapse-tags placeholder="请选择终端厂家"
|
||||
style="width: 160px">
|
||||
<el-option v-for="item in terminaloption" :key="item.id" :label="item.name" :value="{
|
||||
label: item.name,
|
||||
value: item.id,
|
||||
code: item.code,
|
||||
name: item.name,
|
||||
id: item.id,
|
||||
sort: item.sort
|
||||
}"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="干扰源类型:">
|
||||
<el-select v-model="formData.loadType" multiple collapse-tags placeholder="请选择干扰源类型"
|
||||
style="width: 180px">
|
||||
<el-option v-for="item in interfereoption" :key="item.id" :label="item.name" :value="{
|
||||
label: item.name,
|
||||
value: item.id,
|
||||
code: item.code,
|
||||
name: item.name,
|
||||
id: item.id,
|
||||
sort: item.sort
|
||||
}"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="合格率:">
|
||||
<el-select v-model="formData.linePassRate" placeholder="请选择合格率" style="width: 180px">
|
||||
<el-option label="合格" value="1"></el-option>
|
||||
<el-option label="不合格" value="0"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<Area @click="handleNodeClick"></Area>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<Timeinterval ref="Timeinterval" :interval="3"></Timeinterval>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit" class="ml10" icon="el-icon-search">查询</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" class="ml10" icon="el-icon-search" @click="Reset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-row>
|
||||
<el-col :span="24" style="height: 100px">
|
||||
<div ref="fg" v-loading="loading" id="dataintegrity" :style="'zoom:' + device"></div>
|
||||
<!-- -->
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { dicData } from '@/assets/commjs/dictypeData'
|
||||
import Area from '@/views/components/Area/Area.vue'
|
||||
import Timeinterval from '@/views/components/Timeinterval.vue'
|
||||
import { getLineIntegrityData } from '@/api/integraliy/integraliy'
|
||||
import { onLienRate1, onLienRate2, onLienRate3, Integrity1, Integrity2, Integrity3 } from '@/assets/commjs/color'
|
||||
export default {
|
||||
components: {
|
||||
Area,
|
||||
Timeinterval
|
||||
},
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
zoom: '',
|
||||
vh: undefined,
|
||||
formData: {
|
||||
//后面需要修改
|
||||
deptIndex: '',
|
||||
monitorFlag: 2,
|
||||
powerFlag: 2,
|
||||
loadType: [],
|
||||
manufacturer: [],
|
||||
searchBeginTime: '',
|
||||
searchEndTime: '',
|
||||
statisticalType: '',
|
||||
scale: [],
|
||||
linePassRate: ''
|
||||
},
|
||||
classificationData: [],
|
||||
dejioption: [],
|
||||
deji: '',
|
||||
//电压等级
|
||||
voltageleveloption: [],
|
||||
interfereoption: [],
|
||||
terminaloption: [],
|
||||
tableData: [],
|
||||
title: '',
|
||||
dydj: true,
|
||||
expandID: [],
|
||||
loading: false,
|
||||
title: '',
|
||||
device: 1,
|
||||
terminalClass: [
|
||||
{
|
||||
id: 0,
|
||||
value: '0',
|
||||
label: '极重要'
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
value: '1',
|
||||
label: '重要'
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
value: '2',
|
||||
label: '普通'
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
value: '3',
|
||||
label: '不重要'
|
||||
}
|
||||
] //终端等级
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.info()
|
||||
},
|
||||
mounted() {
|
||||
this.setHeight()
|
||||
window.addEventListener('resize', this.setHeight)
|
||||
|
||||
this.zoom = 1 / document.body.style.zoom
|
||||
window.addEventListener('resize', () => {
|
||||
this.zoom = 1 / document.body.style.zoom
|
||||
// this.myChartes.resize();
|
||||
})
|
||||
|
||||
|
||||
this.formData.deptIndex = JSON.parse(window.sessionStorage.getItem('Info')).deptId
|
||||
this.onSubmit()
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.setHeight)
|
||||
},
|
||||
methods: {
|
||||
setHeight() {
|
||||
setTimeout(() => {
|
||||
; (document.getElementById('dataintegrity').style.width = `100%`),
|
||||
// document.getElementById("app-main-in").offsetWidth - 100 + "px"
|
||||
(document.getElementById('dataintegrity').style.height =
|
||||
window.sessionStorage.getItem('appheight') - 240 + 'px')
|
||||
this.device = window.devicePixelRatio
|
||||
if (this.device == 1) {
|
||||
this.tableheight = this.tableheight * 2
|
||||
}
|
||||
if (this.device == 1.25) {
|
||||
this.tableheight = this.tableheight * 1.6
|
||||
}
|
||||
if (this.device == 1.5) {
|
||||
this.tableheight = this.tableheight * 1.93
|
||||
}
|
||||
}, 0)
|
||||
this.vh = window.sessionStorage.getItem('appheight') - 170
|
||||
},
|
||||
//字典表
|
||||
info() {
|
||||
// 获取统计类型
|
||||
this.classificationData = dicData('Statistical_Type', ['Report_Type'])
|
||||
this.formData.statisticalType = this.classificationData[0]
|
||||
// 字典获取数据电压等级;
|
||||
this.voltageleveloption = dicData('Dev_Voltage', [])
|
||||
this.formData.scale = this.voltageleveloption
|
||||
//字典获取数据终端厂家
|
||||
this.terminaloption = dicData('Dev_Manufacturers', [])
|
||||
this.formData.manufacturer = this.terminaloption
|
||||
//字典获取数据干扰源类型
|
||||
this.interfereoption = dicData('Interference_Source', [])
|
||||
this.formData.loadType = this.interfereoption
|
||||
},
|
||||
// 区域
|
||||
handleNodeClick(data) {
|
||||
// console.log(data);
|
||||
this.formData.deptIndex = data.id
|
||||
},
|
||||
// 查询
|
||||
onSubmit() {
|
||||
this.loading = true
|
||||
|
||||
; (this.formData.serverName = 'harmonic-boot'),
|
||||
(this.formData.searchBeginTime = this.$refs.Timeinterval.timeValue[0])
|
||||
this.formData.searchEndTime = this.$refs.Timeinterval.timeValue[1]
|
||||
this.title = this.formData.statisticalType.label
|
||||
getLineIntegrityData(this.formData).then(res => {
|
||||
if (res.code == 'A0000') {
|
||||
let title = []
|
||||
let integrityData = []
|
||||
res.data.forEach(item => {
|
||||
title.push(item.name)
|
||||
integrityData.push(item.integrityData)
|
||||
})
|
||||
this.dataintegritys(title, integrityData)
|
||||
}
|
||||
})
|
||||
},
|
||||
// 重置
|
||||
Reset() {
|
||||
this.formData = {
|
||||
//后面需要修改
|
||||
deptIndex: '',
|
||||
monitorFlag: 2,
|
||||
powerFlag: 2,
|
||||
loadType: [],
|
||||
manufacturer: [],
|
||||
searchBeginTime: '',
|
||||
searchEndTime: '',
|
||||
statisticalType: '',
|
||||
scale: [],
|
||||
linePassRate: ''
|
||||
}
|
||||
},
|
||||
dataintegritys(title, integrityData) {
|
||||
// console.log("===", title, integrityData);
|
||||
|
||||
this.loading = true
|
||||
const echarts = require('echarts')
|
||||
let runstatus = document.getElementById('dataintegrity')
|
||||
var myChartes = echarts.init(runstatus)
|
||||
|
||||
myChartes.clear()
|
||||
var option = {
|
||||
title: {
|
||||
text: this.title,
|
||||
left: 'center'
|
||||
|
||||
//subtext: '单位(%)'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
// 坐标轴指示器，坐标轴触发有效
|
||||
type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
|
||||
},
|
||||
formatter: function (params) {
|
||||
var tips = ''
|
||||
tips += params[0].name + '</br/>'
|
||||
for (var i = 0; i < params.length; i++) {
|
||||
if (params[i].value == 3.14159) {
|
||||
tips += params[i].seriesName + ':暂无数据<br/>'
|
||||
} else {
|
||||
tips += params[i].seriesName + ':' + params[i].value + '%<br/>'
|
||||
}
|
||||
}
|
||||
return tips
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '2%',
|
||||
right: '2%',
|
||||
bottom: '10px',
|
||||
containLabel: true
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
// data: this.xdata,
|
||||
data: title,
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisTick: {
|
||||
alignWithLabel: true
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
fontFamily: 'dinproRegular',
|
||||
color: '#000'
|
||||
},
|
||||
rotate: 39
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
symbol: ['none', 'arrow']
|
||||
}
|
||||
}
|
||||
],
|
||||
toolbox: {
|
||||
show: true,
|
||||
feature: {
|
||||
saveAsImage: { show: true }
|
||||
// dataZoom: {
|
||||
// yAxisIndex: 'none'
|
||||
// },
|
||||
// //restore: {},
|
||||
// mark : {show: true},
|
||||
//magicType : {show: true, type: ['line', 'bar']}
|
||||
}
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
name: '单位(%)',
|
||||
type: 'value',
|
||||
min: 0,
|
||||
max: 100,
|
||||
splitLine: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
symbol: ['none', 'arrow']
|
||||
},
|
||||
splitArea: {
|
||||
show: true
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '',
|
||||
// name: this.timeValue,
|
||||
barMaxWidth: 45,
|
||||
type: 'bar',
|
||||
label: {
|
||||
normal: {
|
||||
show: false,
|
||||
position: 'top'
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
// 随机显示
|
||||
//color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}
|
||||
|
||||
// 定制显示（按顺序）
|
||||
color: function (params) {
|
||||
if (params.value == 3.14159) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: '#ccc'
|
||||
}
|
||||
],
|
||||
false
|
||||
)
|
||||
} else if (params.value >= 90) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: Integrity1
|
||||
}
|
||||
],
|
||||
false
|
||||
)
|
||||
} else if (params.value >= 60 && params.value <= 90) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: Integrity2
|
||||
}
|
||||
],
|
||||
false
|
||||
)
|
||||
// && params.value > 5
|
||||
} else if (params.value <= 60) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: Integrity3
|
||||
}
|
||||
],
|
||||
false
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
markLine: {
|
||||
silent: false,
|
||||
symbol: 'circle',
|
||||
data: [
|
||||
{
|
||||
name: '完整性≥90%',
|
||||
yAxis: 100,
|
||||
lineStyle: {
|
||||
color: Integrity1
|
||||
},
|
||||
label: {
|
||||
position: 'middle',
|
||||
formatter: '{b}',
|
||||
textStyle: {
|
||||
color: Integrity1
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '60%≤完整性<90%',
|
||||
yAxis: 90,
|
||||
lineStyle: {
|
||||
color: Integrity2
|
||||
},
|
||||
label: {
|
||||
position: 'middle',
|
||||
formatter: '{b}',
|
||||
textStyle: {
|
||||
color: Integrity2
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '完整性<60%',
|
||||
yAxis: 60,
|
||||
lineStyle: {
|
||||
color: Integrity3
|
||||
},
|
||||
label: {
|
||||
position: 'middle',
|
||||
formatter: '{b}',
|
||||
textStyle: {
|
||||
color: Integrity3
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
// data: this.ydata
|
||||
data: integrityData
|
||||
}
|
||||
]
|
||||
}
|
||||
let _this = this
|
||||
myChartes.setOption(option)
|
||||
window.echartsArr.push(myChartes)
|
||||
setTimeout(() => {
|
||||
myChartes.resize()
|
||||
_this.loading = false
|
||||
}, 100)
|
||||
|
||||
_this.$erd.listenTo(_this.$refs.fg, element => {
|
||||
_this.$nextTick(() => {
|
||||
myChartes.resize()
|
||||
})
|
||||
})
|
||||
window.onresize = function () {
|
||||
myChartes.resize()
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
computed: {},
|
||||
|
||||
watch: {}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
@import url('../../../../../styles/comStyle.less');
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
::v-deep .el-table_1_column_1 {
|
||||
.el-tooltip {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
1309
src/views/BusinessAdministrator/transport/components/rmsboxi.vue
Normal file
1309
src/views/BusinessAdministrator/transport/components/rmsboxi.vue
Normal file
File diff suppressed because it is too large
Load Diff
1288
src/views/BusinessAdministrator/transport/components/shushiboxi.vue
Normal file
1288
src/views/BusinessAdministrator/transport/components/shushiboxi.vue
Normal file
File diff suppressed because it is too large
Load Diff
362
src/views/BusinessAdministrator/transport/distribution.vue
Normal file
362
src/views/BusinessAdministrator/transport/distribution.vue
Normal file
@@ -0,0 +1,362 @@
|
||||
<template>
|
||||
<div class="pd10">
|
||||
<div v-show="flg" v-loading="isLoading" element-loading-text="数据加载中">
|
||||
<el-form :inline="true" :model="formData">
|
||||
<el-form-item label="监测点等级:">
|
||||
<el-select v-model="formData.lineGrade" placeholder="监测点等级" style="width: 160px">
|
||||
<el-option
|
||||
v-for="item in terminalClass"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<!-- <el-form-item>
|
||||
<Timeinterval ref="Timeinterval" :interval="2"></Timeinterval>
|
||||
</el-form-item> -->
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit" class="ml10" icon="el-icon-search">查询</el-button>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item>
|
||||
<el-button type="primary" class="ml10" icon="el-icon-upload2"
|
||||
>导出</el-button
|
||||
></el-form-item
|
||||
> -->
|
||||
</el-form>
|
||||
<div class="box">
|
||||
<div class="boxR" style="overflow: hidden" z>
|
||||
<div style="width: 100%; height: 100%" id="electr4"></div>
|
||||
</div>
|
||||
|
||||
<div class="boxL">
|
||||
<el-table
|
||||
stripe
|
||||
header-cell-class-name="table_header"
|
||||
:data="tableData"
|
||||
style="width: 100%"
|
||||
:height="vh + 'px'"
|
||||
highlight-current-row
|
||||
border
|
||||
>
|
||||
<el-table-column :resizable="false" prop="name" label="区域"></el-table-column>
|
||||
<el-table-column :resizable="false" prop="value" label="监测点个数"></el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Timeinterval from '@/views/components/Timeinterval.vue'
|
||||
import { dicData } from '@/assets/commjs/dictypeData'
|
||||
import { getLineDistribution } from '@/api/BusinessAdministrator/distribution'
|
||||
export default {
|
||||
name: 'monitoringdistribution',
|
||||
components: {
|
||||
Timeinterval
|
||||
},
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
flg: true,
|
||||
isLoading: true,
|
||||
zoom: '', //图表焦点校验
|
||||
vh: undefined,
|
||||
formData: {
|
||||
lineGrade: '' //终端等级
|
||||
// searchBeginTime: "", //开始
|
||||
// searchEndTime: "", //结束
|
||||
// timeFlag: "", //区分时间
|
||||
},
|
||||
terminalClass: [], //终端等级
|
||||
tableData: []
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getclassificationData()
|
||||
},
|
||||
mounted() {
|
||||
this.setHeight()
|
||||
window.addEventListener('resize', this.setHeight)
|
||||
|
||||
this.onSubmit()
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.setHeight)
|
||||
},
|
||||
methods: {
|
||||
setHeight() {
|
||||
this.vh = window.sessionStorage.getItem('appheight') - 55
|
||||
},
|
||||
//获取类型
|
||||
getclassificationData() {
|
||||
//监测点等级
|
||||
this.terminalClass = dicData('Dev_Level', [])
|
||||
this.formData.lineGrade = this.terminalClass[0].id
|
||||
},
|
||||
onSubmit() {
|
||||
this.flg = true
|
||||
this.isLoading = true
|
||||
getLineDistribution(this.formData).then(res => {
|
||||
this.tableData = res.data
|
||||
this.chart()
|
||||
this.isLoading = false
|
||||
})
|
||||
},
|
||||
//点击切换
|
||||
details(e) {
|
||||
this.flg = false
|
||||
},
|
||||
chart() {
|
||||
let _this = this
|
||||
let echarts = require('echarts')
|
||||
let domID2 = document.getElementById('electr4')
|
||||
setTimeout(() => {
|
||||
;(domID2.style.width = document.getElementById('app-main-in').offsetWidth - 430 + 'px'),
|
||||
(domID2.style.height = window.sessionStorage.getItem('appheight') - 55 + 'px')
|
||||
}, 0)
|
||||
let myChart2 = echarts.init(domID2)
|
||||
let echartsData = []
|
||||
this.tableData.forEach(item => {
|
||||
echartsData.push(item)
|
||||
})
|
||||
// let maps=await map()
|
||||
let echartsColor = JSON.parse(window.localStorage.echartsColor)
|
||||
// let colors = ["#0ec7aa", "#33CCFF", "#FFCC00", "#FF6600", "#FF3300"];
|
||||
// let title = ["无污染", "轻微污染", "轻度污染", "中度污染", "重度污染"];
|
||||
// jquery.getJSON("/api1/system-boot/map", null, function(data) {
|
||||
_this.$axios.get('./static/mapjson/全国.json').then(data => {
|
||||
echarts.registerMap('china', data.data)
|
||||
let option = {
|
||||
// backgroundColor: '#060303', //地图背景色深蓝
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
showDelay: 0,
|
||||
hideDelay: 0,
|
||||
enterable: true,
|
||||
transitionDuration: 0,
|
||||
//提示框组件
|
||||
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
label: {
|
||||
color: '#fff',
|
||||
fontSize: 16
|
||||
}
|
||||
},
|
||||
textStyle: {
|
||||
color: '#fff',
|
||||
fontStyle: 'normal',
|
||||
opacity: 0.35,
|
||||
fontSize: 14
|
||||
},
|
||||
backgroundColor: 'rgba(0,0,0,0.35)',
|
||||
borderWidth: 0,
|
||||
extraCssText: 'z-index:100',
|
||||
formatter: function (params) {
|
||||
var tips = ''
|
||||
if (params.data == undefined) {
|
||||
;(tips += '区域:' + params.name + '<br/>'), (tips += '监测点个数:' + '暂无数据')
|
||||
} else {
|
||||
;(tips += '区域:' + params.name + '<br/>'),
|
||||
(tips += '监测点个数:' + params.value + '个')
|
||||
}
|
||||
return tips
|
||||
}
|
||||
},
|
||||
geo: {
|
||||
show: true,
|
||||
map: 'china',
|
||||
roam: true,
|
||||
top: 220,
|
||||
left: 300,
|
||||
zoom: 1.5,
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
textStyle: {
|
||||
color: echartsColor.WordColor,
|
||||
fontSize: 12,
|
||||
fontFamily: 'Arial'
|
||||
}
|
||||
}
|
||||
},
|
||||
select: {
|
||||
// 地图选中区域样式
|
||||
label: {
|
||||
// 选中区域的label(文字)样式
|
||||
color: '#fff'
|
||||
},
|
||||
itemStyle: {
|
||||
// 选中区域的默认样式
|
||||
areaColor: '#0075FF'
|
||||
}
|
||||
},
|
||||
// label: {
|
||||
// emphasis: {
|
||||
// show: false
|
||||
// }
|
||||
// },
|
||||
itemStyle: {
|
||||
normal: {
|
||||
borderColor: 'rgba(147, 235, 248, 1)',
|
||||
borderWidth: 1,
|
||||
areaColor: {
|
||||
type: 'radial',
|
||||
x: 0.5,
|
||||
y: 0.5,
|
||||
r: 0.8,
|
||||
colorStops: [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(147, 235, 248, .2)' // 100% 处的颜色
|
||||
}
|
||||
],
|
||||
globalCoord: false // 缺省为 false
|
||||
},
|
||||
shadowColor: 'rgba(128, 217, 248, 1)',
|
||||
// shadowColor: 'rgba(255, 255, 255, 1)',
|
||||
shadowOffsetX: -2,
|
||||
shadowOffsetY: 2,
|
||||
shadowBlur: 10
|
||||
},
|
||||
emphasis: {
|
||||
areaColor: '#389BB7',
|
||||
borderWidth: 0
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
toolbox: {
|
||||
show: true,
|
||||
|
||||
top: '25',
|
||||
// iconStyle: {
|
||||
// borderColor: "crimson",
|
||||
// },
|
||||
feature: {
|
||||
saveAsImage: {}
|
||||
}
|
||||
},
|
||||
|
||||
legend: {
|
||||
//各标记图例
|
||||
orient: 'vertical',
|
||||
// id: 1,
|
||||
top: '40px',
|
||||
right: '40px',
|
||||
itemWidth: 16,
|
||||
itemHeight: 16,
|
||||
itemGap: 28,
|
||||
textStyle: {
|
||||
color: echartsColor.WordColor,
|
||||
rich: {
|
||||
a: {
|
||||
verticalAlign: 'middle'
|
||||
}
|
||||
},
|
||||
padding: [2, 0, 0, 0] //[上、右、下、左]
|
||||
}
|
||||
},
|
||||
title: {
|
||||
text: '',
|
||||
left: 'left',
|
||||
top: '60',
|
||||
textStyle: {
|
||||
color: '#C09611',
|
||||
size: 20
|
||||
}
|
||||
},
|
||||
|
||||
visualMap: {
|
||||
show: true,
|
||||
left: '3%',
|
||||
top: '6%',
|
||||
itemHeight: 15,
|
||||
itemWidth: 15,
|
||||
pieces: [
|
||||
{
|
||||
gte: 0,
|
||||
lt: 30,
|
||||
label: '0-30(个)',
|
||||
color: '#0ec7aa'
|
||||
},
|
||||
{
|
||||
gte: 30,
|
||||
lt: 60,
|
||||
label: '30-60(个)',
|
||||
color: '#33CCFF'
|
||||
},
|
||||
{
|
||||
gte: 60,
|
||||
lt: 80,
|
||||
label: '60-80(个)',
|
||||
color: '#FFCC00'
|
||||
},
|
||||
{
|
||||
gte: 80,
|
||||
lt: 100,
|
||||
label: '80-100(个)',
|
||||
color: '#FF6600'
|
||||
},
|
||||
{
|
||||
gte: 100,
|
||||
label: '>100(个)',
|
||||
color: '#FF3300'
|
||||
}
|
||||
],
|
||||
textStyle: {
|
||||
color: echartsColor.WordColor
|
||||
}
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'map', //图表类型
|
||||
geoIndex: 0,
|
||||
data: echartsData //图表的数据
|
||||
}
|
||||
]
|
||||
}
|
||||
myChart2.clear(option)
|
||||
option && myChart2.setOption(option)
|
||||
window.echartsArr.push(myChart2)
|
||||
setTimeout(function () {
|
||||
myChart2.resize()
|
||||
}, 0)
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
computed: {},
|
||||
|
||||
watch: {}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
@import url('../../../styles/comStyle.less');
|
||||
::v-deep .el-form-item--small .el-form-item__content,
|
||||
.el-form-item--small .el-form-item__label {
|
||||
height: 32px;
|
||||
}
|
||||
.box {
|
||||
display: flex;
|
||||
.boxR {
|
||||
flex: 1;
|
||||
}
|
||||
.boxL {
|
||||
width: 400px;
|
||||
}
|
||||
}
|
||||
::v-deep .el-table .cell {
|
||||
text-align: center;
|
||||
}
|
||||
// ::v-deep .has-gutter{
|
||||
// height: 35px !important;
|
||||
// }
|
||||
</style>
|
||||
613
src/views/BusinessAdministrator/transport/monthreport.vue
Normal file
613
src/views/BusinessAdministrator/transport/monthreport.vue
Normal file
@@ -0,0 +1,613 @@
|
||||
<template>
|
||||
<div class="pd10" v-loading="loading" element-loading-text="数据加载中">
|
||||
<el-form :inline="true" class="demo-form-inline">
|
||||
<el-form-item>
|
||||
<Timeinterval :interval="3" ref="interval"></Timeinterval>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item style="margin-bottom: 10px">
|
||||
<el-button type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
|
||||
|
||||
<el-button type="primary" icon="el-icon-download" @click="exportEvent">导出</el-button>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="text" @click="closeHandle"
|
||||
>条件筛选<i
|
||||
:class="!view ? 'el-icon-arrow-down' : 'el-icon-arrow-right'"
|
||||
></i
|
||||
></el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<div class="container" id="container">
|
||||
<i @click="closeHandle" class="el-icon-circle-close coles"></i>
|
||||
<el-form :inline="true" label-width="110px">
|
||||
<el-form-item label="监测点等级:">
|
||||
<el-select
|
||||
v-model="formData.lineGrade"
|
||||
clearable
|
||||
placeholder="请选择监测点等级"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in devLevel"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="通讯状态:">
|
||||
<el-select v-model="formData.comFlag" clearable placeholder="请选择通讯状态">
|
||||
<el-option
|
||||
v-for="item in options1"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="运行状态:">
|
||||
<el-select v-model="formData.runFlag" clearable placeholder="请选择运行状态">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="筛选数据:" style="margin-bottom: 10px">
|
||||
<el-input
|
||||
v-model.trim="formData.searchValue"
|
||||
clearable
|
||||
placeholder="请输入筛选数据"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<vxe-table class="xiaoshou"
|
||||
stripe
|
||||
header-cell-class-name="table_header"
|
||||
:data="tableData"
|
||||
border
|
||||
ref="monthreport"
|
||||
:row-config="{ isCurrent: true, isHover: true }"
|
||||
highlight-current-row
|
||||
default-expand-all
|
||||
:height="vh"
|
||||
|
||||
>
|
||||
<vxe-table-column title="序号" min-width="70" type="seq" align="center">
|
||||
<template v-slot="row">
|
||||
<span>{{
|
||||
(formData.pageNum - 1) * formData.pageSize + row.seq
|
||||
}}</span>
|
||||
</template>
|
||||
</vxe-table-column>
|
||||
<vxe-table-column
|
||||
align="center"
|
||||
min-width="120px"
|
||||
show-overflow
|
||||
field="areaName"
|
||||
title="省公司"
|
||||
></vxe-table-column>
|
||||
<vxe-table-column
|
||||
align="center"
|
||||
min-width="120px"
|
||||
field="gdName"
|
||||
title="供电公司"
|
||||
show-overflow
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.gdName == null ? '/' : scope.row.gdName }}
|
||||
</template>
|
||||
</vxe-table-column>
|
||||
<vxe-table-column
|
||||
align="center"
|
||||
min-width="120px"
|
||||
show-overflow
|
||||
field="subName"
|
||||
title="所属变电站"
|
||||
>
|
||||
</vxe-table-column>
|
||||
<vxe-table-column
|
||||
align="center"
|
||||
min-width="120px"
|
||||
show-overflow
|
||||
field="lineName"
|
||||
title="监测点名称"
|
||||
>
|
||||
</vxe-table-column>
|
||||
<vxe-table-column
|
||||
align="center"
|
||||
min-width="120px"
|
||||
show-overflow
|
||||
field="lineGrade"
|
||||
:formatter="formFilter"
|
||||
title="重要等级"
|
||||
></vxe-table-column>
|
||||
<vxe-table-column
|
||||
align="center"
|
||||
min-width="120px"
|
||||
show-overflow
|
||||
field="businessType"
|
||||
:formatter="formFilter1"
|
||||
title="行业类型"
|
||||
></vxe-table-column>
|
||||
<vxe-table-column
|
||||
align="center"
|
||||
min-width="120px"
|
||||
show-overflow
|
||||
field="runFlag"
|
||||
title="运行状态"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span type="primary" v-if="scope.row.runFlag === '0'">投运</span>
|
||||
<span type="primary" v-if="scope.row.runFlag === '1'">热备用</span>
|
||||
<span type="primary" v-if="scope.row.runFlag === '2'">停运</span>
|
||||
</template>
|
||||
</vxe-table-column>
|
||||
<vxe-table-column
|
||||
align="center"
|
||||
min-width="160"
|
||||
show-overflow
|
||||
field="comFlag"
|
||||
title="监测点通讯状态"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-tag
|
||||
type="primary"
|
||||
v-if="scope.row.comFlag === '0'"
|
||||
style="color: #fff; background: #cc0000"
|
||||
size="small"
|
||||
>中断</el-tag
|
||||
>
|
||||
<el-tag
|
||||
type="primary"
|
||||
v-if="scope.row.comFlag === '1'"
|
||||
style="color: #fff; background: #2e8b57"
|
||||
size="small"
|
||||
>正常</el-tag
|
||||
>
|
||||
</template>
|
||||
</vxe-table-column>
|
||||
<vxe-table-column
|
||||
align="center"
|
||||
min-width="120px"
|
||||
show-overflow
|
||||
field="loginTime"
|
||||
title="投运时间"
|
||||
>
|
||||
</vxe-table-column>
|
||||
<vxe-table-column
|
||||
align="center"
|
||||
min-width="140"
|
||||
show-overflow
|
||||
field="updateTime"
|
||||
title="数据更新时间"
|
||||
>
|
||||
</vxe-table-column>
|
||||
<vxe-table-column
|
||||
align="center"
|
||||
min-width="120px"
|
||||
show-overflow
|
||||
field="onlineRate"
|
||||
title="在线率(%)"
|
||||
>
|
||||
</vxe-table-column>
|
||||
<vxe-table-column
|
||||
align="center"
|
||||
min-width="120px"
|
||||
show-overflow
|
||||
field="integrityData"
|
||||
title="完整性(%)"
|
||||
>
|
||||
</vxe-table-column>
|
||||
<vxe-table-column
|
||||
align="center"
|
||||
min-width="120px"
|
||||
show-overflow
|
||||
field="devName"
|
||||
title="装置名称"
|
||||
>
|
||||
</vxe-table-column>
|
||||
<vxe-table-column
|
||||
align="center"
|
||||
min-width="120px"
|
||||
show-overflow
|
||||
field="devSeries"
|
||||
:formatter="formFilter2"
|
||||
title="装置系列"
|
||||
>
|
||||
</vxe-table-column>
|
||||
<vxe-table-column
|
||||
align="center"
|
||||
min-width="160"
|
||||
show-overflow
|
||||
field="ip"
|
||||
title="MAC地址"
|
||||
>
|
||||
</vxe-table-column>
|
||||
<vxe-table-column
|
||||
align="center"
|
||||
min-width="120px"
|
||||
show-overflow
|
||||
field="flowMeal"
|
||||
title="总流量(M)"
|
||||
>
|
||||
</vxe-table-column>
|
||||
<vxe-table-column
|
||||
align="center"
|
||||
min-width="140"
|
||||
show-overflow
|
||||
field="statisValue"
|
||||
title="使用流量(M)"
|
||||
>
|
||||
</vxe-table-column>
|
||||
<vxe-table-column
|
||||
align="center"
|
||||
min-width="140"
|
||||
field="residualFlow"
|
||||
title="剩余流量(M)"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
{{ (scope.row.flowMeal) - (scope.row.statisValue) }}
|
||||
</template>
|
||||
</vxe-table-column>
|
||||
<vxe-table-column
|
||||
align="center"
|
||||
min-width="120px"
|
||||
field="usageRate"
|
||||
title="使用率(%)"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
{{ (((scope.row.statisValue) / (scope.row.flowMeal)) * 100).toFixed(2) }}
|
||||
</template>
|
||||
</vxe-table-column>
|
||||
<vxe-table-column
|
||||
align="center"
|
||||
min-width="120px"
|
||||
show-overflow
|
||||
field="sim"
|
||||
title="ICICD"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.sim == null ? '/' : scope.row.sim }}
|
||||
</template>
|
||||
</vxe-table-column>
|
||||
<vxe-table-column
|
||||
align="center"
|
||||
min-width="120px"
|
||||
show-overflow
|
||||
field="remark"
|
||||
title="备注"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
{{ scope.row.remark == null ? '/' : scope.row.remark }}
|
||||
</template>
|
||||
</vxe-table-column>
|
||||
</vxe-table>
|
||||
<el-pagination
|
||||
background
|
||||
align="right"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="formData.pageNum"
|
||||
:page-sizes="[20, 30, 40, 50, 100]"
|
||||
:page-size="formData.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
class="mt10"
|
||||
>
|
||||
</el-pagination>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Timeinterval from "@/views/components/Timeinterval.vue";
|
||||
import api from "@/api/BusinessAdministrator/monthreport/monthreport.js";
|
||||
import { dicData } from "@/assets/commjs/dictypeData";
|
||||
export default {
|
||||
components: { Timeinterval },
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
view: false,
|
||||
loading: false,
|
||||
form: {},
|
||||
options: [
|
||||
{
|
||||
id: 0,
|
||||
name: "投运",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "停运",
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: "热备用",
|
||||
},
|
||||
],
|
||||
options1: [
|
||||
{
|
||||
id: 0,
|
||||
name: "中断",
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: "正常",
|
||||
},
|
||||
],
|
||||
value: "",
|
||||
formData: {
|
||||
lineGrade: "", //终端等级
|
||||
runFlag: "",
|
||||
comFlag: "",
|
||||
searchValue: "",
|
||||
searchBeginTime: "", //开始
|
||||
searchEndTime: "", //结束
|
||||
pageNum: 1,
|
||||
pageSize: 20,
|
||||
},
|
||||
tableData: [],
|
||||
devLevel: [],
|
||||
BusinessType: [],
|
||||
DevSeries: [],
|
||||
total: 0,
|
||||
|
||||
vh: null,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getclassificationData();
|
||||
},
|
||||
mounted() {
|
||||
this.setHeight()
|
||||
window.addEventListener('resize', this.setHeight)
|
||||
this.onSubmit();
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.setHeight)
|
||||
},
|
||||
methods: {
|
||||
setHeight() {
|
||||
this.vh = window.sessionStorage.getItem("appheight") - 95;
|
||||
|
||||
},
|
||||
//获取类型
|
||||
getclassificationData() {
|
||||
//监测点等级
|
||||
this.devLevel = dicData("Dev_Level", []);
|
||||
//行业类型
|
||||
this.BusinessType = dicData("Business_Type", []);
|
||||
//装置系列
|
||||
this.DevSeries = dicData("Dev_Series", []);
|
||||
},
|
||||
|
||||
//查询
|
||||
onSubmit() {
|
||||
this.loading = true;
|
||||
this.formData.pageNum = 1;
|
||||
this.$refs.interval.timeOptions = [
|
||||
// { label: "年份", value: 1 },
|
||||
// { label: "季度", value: 2 },
|
||||
{ label: "月份", value: 3 },
|
||||
// { label: "周", value: 4 },
|
||||
// // { label: "自定义", value: 5 },
|
||||
]
|
||||
this.formData.searchBeginTime = this.$refs.interval.timeValue[0];
|
||||
this.formData.searchEndTime = this.$refs.interval.timeValue[1];
|
||||
api.getHalfReport(this.formData).then((res) => {
|
||||
this.tableData = res.data.records;
|
||||
this.total = res.data.total;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
onSubmit1() {
|
||||
this.loading = true;
|
||||
this.$refs.interval.timeOptions = [
|
||||
// { label: "年份", value: 1 },
|
||||
// { label: "季度", value: 2 },
|
||||
{ label: "月份", value: 3 },
|
||||
// { label: "周", value: 4 },
|
||||
// // { label: "自定义", value: 5 },
|
||||
]
|
||||
this.formData.searchBeginTime = this.$refs.interval.timeValue[0];
|
||||
this.formData.searchEndTime = this.$refs.interval.timeValue[1];
|
||||
api.getHalfReport(this.formData).then((res) => {
|
||||
this.tableData = res.data.records;
|
||||
this.total = res.data.total;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
// 数据过滤
|
||||
formFilter(row, column) {
|
||||
if (row.column.property == "lineGrade") {
|
||||
let title = "";
|
||||
this.devLevel.forEach((item) => {
|
||||
if (item.id == row.row.lineGrade) {
|
||||
title = item.name;
|
||||
}else if(row.row.lineGrade == null || row.row.lineGrade == ''){
|
||||
title = '/';
|
||||
}
|
||||
});
|
||||
return title;
|
||||
} else {
|
||||
return row.row[row.column.property];
|
||||
}
|
||||
},
|
||||
// 数据过滤
|
||||
formFilter1(row, column) {
|
||||
if (row.column.property == "businessType") {
|
||||
let title = "";
|
||||
this.BusinessType.forEach((item) => {
|
||||
if (item.id == row.row.businessType) {
|
||||
title = item.name;
|
||||
}else if(row.row.businessType == null || row.row.businessType == ''){
|
||||
title = '/';
|
||||
}
|
||||
});
|
||||
return title;
|
||||
} else {
|
||||
return row.row[row.column.property];
|
||||
}
|
||||
},
|
||||
// 数据过滤
|
||||
formFilter2(row, column) {
|
||||
if (row.column.property == "devSeries") {
|
||||
let title = "";
|
||||
this.DevSeries.forEach((item) => {
|
||||
if (item.id == row.row.devSeries) {
|
||||
title = item.name;
|
||||
}else if(row.row.devSeries == null || row.row.devSeries == ''){
|
||||
title = '/';
|
||||
}
|
||||
});
|
||||
return title;
|
||||
} else {
|
||||
return row.row[row.column.property];
|
||||
}
|
||||
},
|
||||
//每页条数改变时触发 选择一页显示多少行
|
||||
handleSizeChange(val) {
|
||||
this.formData.pageSize = val;
|
||||
this.onSubmit1();
|
||||
},
|
||||
//当前页改变时触发 跳转其他页
|
||||
handleCurrentChange(val) {
|
||||
this.formData.pageNum = val;
|
||||
this.onSubmit1();
|
||||
},
|
||||
//导出
|
||||
exportEvent() {
|
||||
api
|
||||
.getHalfReport({
|
||||
lineGrade: this.formData.lineGrade,
|
||||
comFlag: this.formData.comFlag,
|
||||
runFlag: this.formData.runFlag,
|
||||
searchBeginTime: this.formData.searchBeginTime,
|
||||
searchEndTime: this.formData.searchEndTime,
|
||||
searchValue: this.formData.searchValue,
|
||||
pageNum: 1,
|
||||
pageSize: this.total,
|
||||
})
|
||||
.then((res) => {
|
||||
res.data.records.forEach(item=>{
|
||||
if(item.gdName == null){
|
||||
item.gdName = '/'
|
||||
}
|
||||
if(item.sim == null){
|
||||
item.sim = '/'
|
||||
}
|
||||
if(item.remark == null){
|
||||
item.remark = '/'
|
||||
}
|
||||
if(item.runFlag == '0'){
|
||||
item.runFlag = '投运'
|
||||
}else if(item.runFlag == '1'){
|
||||
item.runFlag = '热备用'
|
||||
}else if(item.runFlag == '2'){
|
||||
item.runFlag = '停运'
|
||||
}
|
||||
if(item.comFlag == '0'){
|
||||
item.comFlag = '中断'
|
||||
}else if(item.comFlag == '1'){
|
||||
item.comFlag = '正常'
|
||||
}
|
||||
item.residualFlow = (item.flowMeal) - (item.statisValue)
|
||||
item.usageRate = (((item.statisValue) / (item.flowMeal)) * 100).toFixed(2)
|
||||
})
|
||||
this.$refs.monthreport.exportData({
|
||||
filename: "export", // 文件名字
|
||||
sheetName: "Sheet1",
|
||||
type: "xlsx", //导出文件类型 xlsx 和 csv
|
||||
useStyle: true,
|
||||
data: res.data.records, // 数据源 // 过滤那个字段导出
|
||||
columnFilterMethod: function (column, $columnIndex) {
|
||||
return !(column.$columnIndex === 0);
|
||||
},
|
||||
});
|
||||
});
|
||||
},
|
||||
closeHandle() {
|
||||
if (this.view) {
|
||||
this.view = false;
|
||||
} else {
|
||||
this.view = true;
|
||||
}
|
||||
//console.log('关闭和展开');
|
||||
const dom = document.getElementById("container");
|
||||
const closeDom = document.getElementsByClassName("close")[0];
|
||||
if (!dom.className.match(/(?:^|\s)expend(?!\S)/)) {
|
||||
dom.className = "container expend";
|
||||
} else {
|
||||
dom.className = "container close-container";
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
computed: {},
|
||||
|
||||
watch: {},
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
@import url("../../../styles/comStyle.less");
|
||||
.container {
|
||||
/* margin: auto; */
|
||||
top: 0px;
|
||||
right: 0;
|
||||
width: 40%;
|
||||
height: 0px;
|
||||
z-index: 2000;
|
||||
position: absolute;
|
||||
background-color: #e4e7ebb9;
|
||||
overflow: auto;
|
||||
scroll-behavior: smooth;
|
||||
-radius: 20px;
|
||||
}
|
||||
/* 隐藏滚动条 */
|
||||
::-webkit-scrollbar {
|
||||
display: block;
|
||||
}
|
||||
.expend {
|
||||
animation: expend ease 5s forwards;
|
||||
}
|
||||
.close-container {
|
||||
animation: no-expend ease 1s forwards;
|
||||
}
|
||||
@keyframes expend {
|
||||
from {
|
||||
top: 0px;
|
||||
height: auto;
|
||||
}
|
||||
to {
|
||||
height: auto;
|
||||
top: 0px;
|
||||
}
|
||||
}
|
||||
@keyframes no-expend {
|
||||
from {
|
||||
height: 20%;
|
||||
top: 0px;
|
||||
}
|
||||
to {
|
||||
top: 0px;
|
||||
height: 0px;
|
||||
}
|
||||
}
|
||||
.coles {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.xiaoshou{
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,102 @@
|
||||
l
|
||||
<template>
|
||||
<div class="pd10">
|
||||
<el-row>
|
||||
<el-col> </el-col>
|
||||
<el-col>
|
||||
<el-tabs
|
||||
v-model.trim="activeName"
|
||||
@tab-click="handleClick"
|
||||
type="border-card"
|
||||
>
|
||||
<el-tab-pane
|
||||
label="在线率列表"
|
||||
name="first"
|
||||
:style="'height:' + vh + ';'"
|
||||
>
|
||||
<List></List>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane
|
||||
label="在线率图表"
|
||||
name="second"
|
||||
:style="'height:' + vh + ';'"
|
||||
>
|
||||
<chart></chart>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import List from "./list/list.vue";
|
||||
import chart from "./chart/chart.vue";
|
||||
export default {
|
||||
name:'onlineratestatistics',
|
||||
components: { List, chart },
|
||||
data() {
|
||||
return {
|
||||
vh: "",
|
||||
activeName: "first",
|
||||
type: "暂态总体概况",
|
||||
device: "",
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
mounted() {
|
||||
this.setHeight()
|
||||
window.addEventListener('resize', this.setHeight)
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.setHeight)
|
||||
},
|
||||
methods: {
|
||||
setHeight() {
|
||||
this.vh = window.sessionStorage.getItem('appheight') - 80 + "px";
|
||||
|
||||
},
|
||||
handleClick(tab, event) {
|
||||
// console.log(tab, event);
|
||||
},
|
||||
// researchFn() {
|
||||
// this.item = this.$refs.interval.timeValue;
|
||||
// setTimeout(() => {
|
||||
// if(this.type=='暂态总体概况'){
|
||||
// if(this.$refs.child.table==true){
|
||||
// this.$refs.child.region();
|
||||
// this.$refs.child.voltageLevel();
|
||||
// }else if(this.$refs.child.chart==true){
|
||||
// this.$refs.child.$refs.child.getechart1()
|
||||
// this.$refs.child.$refs.child1.getechart2()
|
||||
// this.$refs.child.$refs.child2.getechart3()
|
||||
// this.$refs.child.$refs.child3.getechart4()
|
||||
// }
|
||||
// }else if(this.type=='暂态严重度统计'){
|
||||
// this.$refs.child1.severity();
|
||||
// }else if(this.type=='暂态原因统计'){
|
||||
// this.$refs.child2.isLoading=true
|
||||
// this.$refs.child2.$refs.child.getechart()
|
||||
// }else if(this.type=='详细事件列表'){
|
||||
// this.$refs.child3.eventlist();
|
||||
// }else if(this.type=='暂降次数统计'){
|
||||
// this.$refs.child4.numberOfDips();
|
||||
// }else if(this.type=='暂升次数统计'){
|
||||
// this.$refs.child5.temporaryrise();
|
||||
// }else if(this.type=='短时中断次数统计')
|
||||
// this.$refs.child6.shortinterruption();
|
||||
// }, 100);
|
||||
|
||||
// },
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
@import url("../../../../styles/comStyle.less");
|
||||
::v-deep .el-table .cell {
|
||||
text-align: center;
|
||||
}
|
||||
::v-deep .el-tabs--border-card > .el-tabs__content {
|
||||
padding: 10px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,549 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form :inline="true" class="demo-form-inline">
|
||||
<el-form-item>
|
||||
<el-switch class="tableScopeSwitch" :active-value="2" :inactive-value="1" @change="handleStatusChange"
|
||||
active-text="全网" inactive-text="网公司" inactive-color="#666666" v-model="formData.monitorFlag">
|
||||
</el-switch>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="统计类型:" class="box">
|
||||
<el-select v-model="formData.statisticalType" clearable placeholder="请选择">
|
||||
<el-option v-for="item in statisticalType" :key="item.id" :label="item.name" :value="{
|
||||
label: item.name,
|
||||
value: item.id,
|
||||
code: item.code,
|
||||
name: item.name,
|
||||
id: item.id,
|
||||
sort: item.sort,
|
||||
}">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="终端等级:" class="box">
|
||||
<el-select v-model="formData.algoDescribe" clearable placeholder="请选择">
|
||||
<el-option v-for="item in terminalClass" :key="item.id" :label="item.label" :value="item.id">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<Area @click="handleNodeClick" ref="area" class="box"></Area>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="电压等级:" class="box">
|
||||
<el-select v-model="formData.scale" clearable multiple collapse-tags placeholder="请选择">
|
||||
<el-option v-for="item in voltageLevel" :key="item.id" :label="item.name" :value="{
|
||||
label: item.name,
|
||||
value: item.id,
|
||||
code: item.code,
|
||||
name: item.name,
|
||||
id: item.id,
|
||||
sort: item.sort,
|
||||
}">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="终端厂家:" class="box">
|
||||
<el-select v-model="formData.manufacturer" clearable multiple collapse-tags placeholder="请选择">
|
||||
<el-option v-for="item in terminalManufacturer" :key="item.id" :label="item.name" :value="{
|
||||
label: item.name,
|
||||
value: item.id,
|
||||
code: item.code,
|
||||
name: item.name,
|
||||
id: item.id,
|
||||
sort: item.sort,
|
||||
}">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="干扰源类型:" class="box1">
|
||||
<el-select v-model="formData.loadType" clearable multiple collapse-tags placeholder="请选择">
|
||||
<el-option v-for="item in interferenceType" :key="item.id" :label="item.name" :value="{
|
||||
label: item.name,
|
||||
value: item.id,
|
||||
code: item.code,
|
||||
name: item.name,
|
||||
id: item.id,
|
||||
sort: item.sort,
|
||||
}">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<Timeinterval :interval="3" ref="interval"></Timeinterval>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
|
||||
<el-button type="primary" icon="el-icon-refresh" @click="resetFn">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-row>
|
||||
<el-col :span="24" style="height: 100px">
|
||||
<div ref="fg" v-loading="loadingd" id="dataintegrity" :style="'zoom:' + device"></div>
|
||||
<!-- :style="
|
||||
``
|
||||
" -->
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { dicData } from "@/assets/commjs/dictypeData";
|
||||
import Area from "@/views/components/Area/Area.vue";
|
||||
import Timeinterval from "@/views/components/Timeinterval.vue";
|
||||
import api from "@/api/integraliy/integraliy";
|
||||
import {
|
||||
onLienRate1,
|
||||
onLienRate2,
|
||||
onLienRate3,
|
||||
Integrity1,
|
||||
Integrity2,
|
||||
Integrity3,
|
||||
} from "@/assets/commjs/color";
|
||||
export default {
|
||||
components: {
|
||||
Area,
|
||||
Timeinterval,
|
||||
},
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
zoom: "",
|
||||
vh: undefined,
|
||||
statisticalType: [], //统计类型
|
||||
voltageLevel: [], //电压等级
|
||||
terminalManufacturer: [], //终端厂家
|
||||
interferenceType: [], //干扰源类型
|
||||
terminalClass: [
|
||||
{
|
||||
id: 0,
|
||||
value: "选项1",
|
||||
label: "极重要",
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
value: "选项1",
|
||||
label: "重要",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
value: "选项1",
|
||||
label: "普通",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
value: "选项1",
|
||||
label: "不重要",
|
||||
},
|
||||
], //终端等级
|
||||
formData: {
|
||||
deptIndex: "",
|
||||
monitorFlag: 2,
|
||||
powerFlag: 2,
|
||||
searchBeginTime: "",
|
||||
searchEndTime: "",
|
||||
statisticalType: "",
|
||||
algoDescribe: null,
|
||||
scale: [],
|
||||
manufacturer: [],
|
||||
loadType: [],
|
||||
serverName: "harmonic-boot",
|
||||
},
|
||||
tableData: [],
|
||||
title: "",
|
||||
dydj: true,
|
||||
expandID: [],
|
||||
loadingd: false,
|
||||
title: "",
|
||||
device: 1,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.info();
|
||||
},
|
||||
mounted() {
|
||||
this.setHeight()
|
||||
window.addEventListener('resize', this.setHeight)
|
||||
this.device = window.devicePixelRatio;
|
||||
if (this.device == 1) {
|
||||
this.tableheight = this.tableheight * 2;
|
||||
}
|
||||
if (this.device == 1.25) {
|
||||
this.tableheight = this.tableheight * 1.6;
|
||||
}
|
||||
if (this.device == 1.5) {
|
||||
this.tableheight = this.tableheight * 1.93;
|
||||
}
|
||||
this.zoom = 1 / document.body.style.zoom;
|
||||
window.addEventListener("resize", () => {
|
||||
this.zoom = 1 / document.body.style.zoom;
|
||||
// this.myChartes.resize();
|
||||
});
|
||||
|
||||
|
||||
this.formData.deptIndex = JSON.parse(
|
||||
window.sessionStorage.getItem("Info")
|
||||
).deptId;
|
||||
this.onSubmit();
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.setHeight)
|
||||
},
|
||||
methods: {
|
||||
setHeight() {
|
||||
|
||||
this.vh = window.sessionStorage.getItem("appheight") - 170;
|
||||
},
|
||||
//字典表
|
||||
info() {
|
||||
var code1 = "Statistical_Type";
|
||||
this.statisticalType = dicData(code1, ["Report_Type"]);
|
||||
this.formData.statisticalType = this.statisticalType[0];
|
||||
//电压等级
|
||||
var code3 = "Dev_Voltage";
|
||||
this.voltageLevel = dicData(code3, []);
|
||||
this.formData.scale = this.voltageLevel;
|
||||
//终端厂家
|
||||
var code4 = "Dev_Manufacturers";
|
||||
this.terminalManufacturer = dicData(code4, []);
|
||||
this.formData.manufacturer = this.terminalManufacturer;
|
||||
//干扰源类型
|
||||
var code5 = "Interference_Source";
|
||||
this.interferenceType = dicData(code5, []);
|
||||
this.formData.loadType = this.interferenceType;
|
||||
},
|
||||
// 区域
|
||||
handleNodeClick(data) {
|
||||
// console.log(data);
|
||||
this.formData.deptIndex = data.id;
|
||||
},
|
||||
//开关触发
|
||||
handleStatusChange(val) {
|
||||
this.formData.monitorFlag = val;
|
||||
//this.fiveTreeData()
|
||||
},
|
||||
// 查询
|
||||
onSubmit() {
|
||||
this.loading = true;
|
||||
// console.log("========", this.formData);
|
||||
|
||||
this.formData.searchBeginTime = this.$refs.interval.timeValue[0];
|
||||
this.formData.searchEndTime = this.$refs.interval.timeValue[1];
|
||||
this.title = this.formData.statisticalType.label;
|
||||
|
||||
this.dataintegritys();
|
||||
},
|
||||
// 重置
|
||||
resetFn() {
|
||||
this.formData = {
|
||||
deptIndex: "",
|
||||
monitorFlag: 2,
|
||||
powerFlag: 2,
|
||||
searchBeginTime: "",
|
||||
searchEndTime: "",
|
||||
statisticalType: "",
|
||||
algoDescribe: null,
|
||||
scale: [],
|
||||
manufacturer: [],
|
||||
loadType: [],
|
||||
serverName: "harmonic-boot",
|
||||
};
|
||||
},
|
||||
async dataintegritys() {
|
||||
this.loadingd = true;
|
||||
let xData = [];
|
||||
let yData = [];
|
||||
const data = await api.getOnlineRateData(this.formData);
|
||||
data.data.forEach((item) => {
|
||||
// console.log(item);
|
||||
xData.push(item.name);
|
||||
yData.push(item.onlineRate);
|
||||
});
|
||||
// console.log(xData,yData);
|
||||
// console.log(data);
|
||||
const echarts = require("echarts");
|
||||
let runstatus = document.getElementById("dataintegrity");
|
||||
var myChartes = echarts.init(runstatus);
|
||||
setTimeout(() => {
|
||||
(runstatus.style.width = `100%`),
|
||||
// document.getElementById("app-main-in").offsetWidth - 100 + "px"
|
||||
(runstatus.style.height =
|
||||
window.sessionStorage.getItem("appheight") - 240 + "px");
|
||||
}, 0);
|
||||
myChartes.clear();
|
||||
var option = {
|
||||
title: {
|
||||
text: this.title,
|
||||
left: "center",
|
||||
|
||||
//subtext: '单位(%)'
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
// 坐标轴指示器，坐标轴触发有效
|
||||
type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
|
||||
},
|
||||
formatter: function (params) {
|
||||
var tips = "";
|
||||
tips += params[0].name;
|
||||
for (var i = 0; i < params.length; i++) {
|
||||
if (params[i].value == 3.14159) {
|
||||
tips += params[i].seriesName + ":暂无数据<br/>";
|
||||
} else {
|
||||
tips += params[i].seriesName + ":" + params[i].value + "%<br/>";
|
||||
}
|
||||
}
|
||||
return tips;
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
left: "2%",
|
||||
right: "2%",
|
||||
bottom: "2%",
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
// data: this.xdata,
|
||||
data: xData,
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
axisTick: {
|
||||
alignWithLabel: true,
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
fontFamily: "dinproRegular",
|
||||
color: "#000",
|
||||
},
|
||||
rotate: 39,
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
symbol: ["none", "arrow"],
|
||||
},
|
||||
},
|
||||
],
|
||||
toolbox: {
|
||||
show: true,
|
||||
feature: {
|
||||
saveAsImage: { show: true },
|
||||
// dataZoom: {
|
||||
// yAxisIndex: 'none'
|
||||
// },
|
||||
// //restore: {},
|
||||
// mark : {show: true},
|
||||
//magicType : {show: true, type: ['line', 'bar']}
|
||||
},
|
||||
},
|
||||
yAxis: [
|
||||
{
|
||||
name: "单位(%)",
|
||||
type: "value",
|
||||
min: 0,
|
||||
max: 100,
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: true,
|
||||
symbol: ["none", "arrow"],
|
||||
},
|
||||
splitArea: {
|
||||
show: true,
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "",
|
||||
// name: this.timeValue,
|
||||
barMaxWidth: 45,
|
||||
type: "bar",
|
||||
label: {
|
||||
normal: {
|
||||
show: false,
|
||||
position: "top",
|
||||
},
|
||||
},
|
||||
itemStyle: {
|
||||
normal: {
|
||||
// 随机显示
|
||||
//color:function(d){return "#"+Math.floor(Math.random()*(256*256*256-1)).toString(16);}
|
||||
|
||||
// 定制显示（按顺序）
|
||||
color: function (params) {
|
||||
if (params.value >= 90) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: Integrity1,
|
||||
},
|
||||
],
|
||||
false
|
||||
);
|
||||
} else if (params.value >= 60 && params.value <= 90) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: Integrity2,
|
||||
},
|
||||
],
|
||||
false
|
||||
);
|
||||
} else if (params.value <= 60 && params.value > 5) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: Integrity3,
|
||||
},
|
||||
],
|
||||
false
|
||||
);
|
||||
} else if (params.value > 0 && params.value <= 5) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: "#ccc",
|
||||
},
|
||||
],
|
||||
false
|
||||
);
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
markLine: {
|
||||
silent: false,
|
||||
symbol: "circle",
|
||||
data: [
|
||||
{
|
||||
name: "完整性≥90%",
|
||||
yAxis: 100,
|
||||
lineStyle: {
|
||||
color: Integrity1,
|
||||
},
|
||||
label: {
|
||||
position: "middle",
|
||||
formatter: "{b}",
|
||||
textStyle: {
|
||||
color: Integrity1,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "60%≤完整性<90%",
|
||||
yAxis: 90,
|
||||
lineStyle: {
|
||||
color: Integrity2,
|
||||
},
|
||||
label: {
|
||||
position: "middle",
|
||||
formatter: "{b}",
|
||||
textStyle: {
|
||||
color: Integrity2,
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "完整性<60%",
|
||||
yAxis: 60,
|
||||
lineStyle: {
|
||||
color: Integrity3,
|
||||
},
|
||||
label: {
|
||||
position: "middle",
|
||||
formatter: "{b}",
|
||||
textStyle: {
|
||||
color: Integrity3,
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
// data: this.ydata
|
||||
data: yData,
|
||||
},
|
||||
],
|
||||
};
|
||||
myChartes.setOption(option)
|
||||
window.echartsArr.push(myChartes);
|
||||
setTimeout(() => {
|
||||
myChartes.resize();
|
||||
}, 100);
|
||||
this.loadingd = false;
|
||||
let _this = this;
|
||||
_this.$erd.listenTo(_this.$refs.fg, (element) => {
|
||||
_this.$nextTick(() => {
|
||||
myChartes.resize();
|
||||
});
|
||||
});
|
||||
window.onresize = function () {
|
||||
myChartes.resize();
|
||||
};
|
||||
},
|
||||
},
|
||||
|
||||
computed: {},
|
||||
|
||||
watch: {},
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
@import url("../../../../../styles/comStyle.less");
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
::v-deep .el-table_1_column_1 {
|
||||
.el-tooltip {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-tabs--border-card>.el-tabs__content {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
::v-deep .box {
|
||||
.el-input {
|
||||
width: 160px;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .box1 {
|
||||
.el-input {
|
||||
width: 180px;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-form-item {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,433 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form :inline="true" class="demo-form-inline">
|
||||
<el-form-item>
|
||||
<el-switch class="tableScopeSwitch" :active-value="2" :inactive-value="1" @change="handleStatusChange"
|
||||
active-text="全网" inactive-text="网公司" inactive-color="#666666" v-model="formData.monitorFlag">
|
||||
</el-switch>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="统计类型:" class="box">
|
||||
<el-select v-model="formData.statisticalType" clearable placeholder="请选择">
|
||||
<el-option v-for="item in statisticalType" :key="item.id" :label="item.name" :value="{
|
||||
label: item.name,
|
||||
value: item.id,
|
||||
code: item.code,
|
||||
name: item.name,
|
||||
id: item.id,
|
||||
sort: item.sort,
|
||||
}">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="终端等级:" class="box">
|
||||
<el-select v-model="formData.algoDescribe" clearable placeholder="请选择">
|
||||
<el-option v-for="item in terminalClass" :key="item.id" :label="item.label" :value="item.id">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<Area @click="handleNodeClick" ref="area" class="box"></Area>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="电压等级:" class="box">
|
||||
<el-select v-model="formData.scale" clearable multiple collapse-tags placeholder="请选择">
|
||||
<el-option v-for="item in voltageLevel" :key="item.id" :label="item.name" :value="{
|
||||
label: item.name,
|
||||
value: item.id,
|
||||
code: item.code,
|
||||
name: item.name,
|
||||
id: item.id,
|
||||
sort: item.sort,
|
||||
}">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="终端厂家:" class="box">
|
||||
<el-select v-model="formData.manufacturer" clearable multiple collapse-tags placeholder="请选择">
|
||||
<el-option v-for="item in terminalManufacturer" :key="item.id" :label="item.name" :value="{
|
||||
label: item.name,
|
||||
value: item.id,
|
||||
code: item.code,
|
||||
name: item.name,
|
||||
id: item.id,
|
||||
sort: item.sort,
|
||||
}">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="干扰源类型:" class="box1">
|
||||
<el-select v-model="formData.loadType" clearable multiple collapse-tags placeholder="请选择">
|
||||
<el-option v-for="item in interferenceType" :key="item.id" :label="item.name" :value="{
|
||||
label: item.name,
|
||||
value: item.id,
|
||||
code: item.code,
|
||||
name: item.name,
|
||||
id: item.id,
|
||||
sort: item.sort,
|
||||
}">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<Timeinterval :interval="3" ref="interval"></Timeinterval>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
|
||||
<el-button type="primary" icon="el-icon-refresh" @click="resetFn">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-select v-show="false" v-model="ExpandedNum" @change="handleExpandNumChange" placeholder="选择展开级别" size="mini"
|
||||
style="left: 0; width: 100px">
|
||||
<el-option label="不展开" :value="0"></el-option>
|
||||
<el-option label="展开1" :value="1"></el-option>
|
||||
<el-option label="展开2" :value="2"></el-option>
|
||||
<el-option label="展开3" :value="3"></el-option>
|
||||
</el-select>
|
||||
<el-table stripe :data="tableData" class="xshou" style="width: 100%; margin-bottom: 0" row-key="id"
|
||||
id="rebateSetTable" border :height="height + 'px'" :expand-row-keys="expandID" highlight-current-row
|
||||
:header-cell-style="{
|
||||
//background:'#5E95E8',
|
||||
//color:'#FFFFFF',
|
||||
height: '25px',
|
||||
top: '0px',
|
||||
padding: '0px',
|
||||
}" v-loading="loading" element-loading-text="数据加载中" header-cell-class-name="table_header"
|
||||
:row-style="{ height: '25px' }" :cell-style="{ padding: '0px' }"
|
||||
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
|
||||
<el-table-column min-width="150" prop="name" :label="typedata" sortable :show-overflow-tooltip="true"
|
||||
width="200"></el-table-column>
|
||||
<el-table-column min-width="150" align="center" prop="voltageLevel" v-if="dydj" label="电压等级" sortable>
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.voltageLevel == null" type="primary" size="small">/</span>
|
||||
<span v-if="scope.row.voltageLevel != null" type="primary" size="small">{{ scope.row.voltageLevel
|
||||
}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column min-width="150" align="center" prop="networkParam" label="网络参数" sortable>
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.networkParam == null" type="primary" size="small">/</span>
|
||||
<span v-if="scope.row.networkParam != null" type="primary" size="small">{{ scope.row.networkParam
|
||||
}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column min-width="150" align="center" prop="name" :show-overflow-tooltip="true" label="名称" sortable>
|
||||
</el-table-column>
|
||||
<el-table-column min-width="150" align="center" prop="factoryName" label="厂家" sortable>
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.factoryName == null" type="primary" size="small">/</span>
|
||||
<span v-if="scope.row.factoryName != null" type="primary" size="small">{{ scope.row.factoryName }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column min-width="150" align="center" prop="deviceName" label="终端名称" sortable>
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.deviceName == null" type="primary" size="small">/</span>
|
||||
<span v-if="scope.row.deviceName != null" type="primary" size="small">{{ scope.row.deviceName }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column min-width="150" align="center" prop="state" label="通讯状态" sortable>
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.state == null" type="primary" size="small">/</span>
|
||||
<span v-if="scope.row.state == 0" type="primary" size="small">中断</span>
|
||||
<span v-if="scope.row.state == 1" type="primary" size="small">正常</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column min-width="150" align="center" prop="time" label="最新数据时间" :show-overflow-tooltip="true"
|
||||
sortable>
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.time == null" type="primary" size="small">/</span>
|
||||
<span v-if="scope.row.time != null" type="primary" size="small">{{
|
||||
scope.row.time
|
||||
}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column min-width="150" align="center" prop="onlineRateData" label="在线率(%)">
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.onlineRateData == null" type="primary" size="small">暂无数据</span>
|
||||
<span v-else type="primary" size="small">{{
|
||||
scope.row.onlineRateData.toFixed(2)
|
||||
}}</span>
|
||||
<!-- <span type="primary" size="small" @click="clickFn" style="color:blue;text-decoration:underline">查看</span> -->
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Area from "@/views/components/Area/Area.vue";
|
||||
import Timeinterval from "../../../../components/Timeinterval.vue";
|
||||
import api from "@/api/integraliy/integraliy";
|
||||
import { dicData } from "@/assets/commjs/dictypeData";
|
||||
export default {
|
||||
components: { Area, Timeinterval },
|
||||
data() {
|
||||
return {
|
||||
vh: "",
|
||||
height: null,
|
||||
loading: false,
|
||||
statisticalType: [], //统计类型
|
||||
voltageLevel: [], //电压等级
|
||||
terminalManufacturer: [], //终端厂家
|
||||
interferenceType: [], //干扰源类型
|
||||
terminalClass: [
|
||||
{
|
||||
id: 0,
|
||||
value: "选项1",
|
||||
label: "极重要",
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
value: "选项1",
|
||||
label: "重要",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
value: "选项1",
|
||||
label: "普通",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
value: "选项1",
|
||||
label: "不重要",
|
||||
},
|
||||
], //终端等级
|
||||
formData: {
|
||||
deptIndex: "",
|
||||
monitorFlag: 2,
|
||||
powerFlag: 2,
|
||||
searchBeginTime: "",
|
||||
searchEndTime: "",
|
||||
statisticalType: "",
|
||||
algoDescribe: null,
|
||||
scale: [],
|
||||
manufacturer: [],
|
||||
loadType: [],
|
||||
serverName: "harmonic-boot",
|
||||
},
|
||||
ExpandedNum: 2,
|
||||
expandID: [],
|
||||
tableData: [],
|
||||
typedata: "",
|
||||
dydj: false,
|
||||
device: "",
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getclassificationData();
|
||||
},
|
||||
mounted() {
|
||||
this.setHeight()
|
||||
window.addEventListener('resize', this.setHeight)
|
||||
this.handleExpandNumChange();
|
||||
this.formData.deptIndex = JSON.parse(
|
||||
window.sessionStorage.getItem("Info")
|
||||
).deptId;
|
||||
this.onSubmit();
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.setHeight)
|
||||
},
|
||||
methods: {
|
||||
setHeight() {
|
||||
this.device = window.devicePixelRatio;
|
||||
this.height = window.sessionStorage.getItem("appheight") - 195;
|
||||
|
||||
},
|
||||
clickFn() {
|
||||
alert("111");
|
||||
},
|
||||
//判断需要展开层级
|
||||
handleExpandNumChange() {
|
||||
if (this.ExpandedNum > 0) {
|
||||
this.setExpandKeys(this.tableData);
|
||||
}
|
||||
},
|
||||
//层级展开递归方法
|
||||
setExpandKeys(dataList, n) {
|
||||
if (!n) n = 1;
|
||||
for (let i = 0; i < dataList.length; i++) {
|
||||
if (n <= this.ExpandedNum) {
|
||||
//this.expandID=[]
|
||||
this.expandID.push(`${dataList[i].id}`);
|
||||
if (dataList[i].hasOwnProperty("children")) {
|
||||
const children = dataList[i].children;
|
||||
this.setExpandKeys(children, n + 1);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
guid() {
|
||||
return "xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx".replace(/[xy]/g, function (c) {
|
||||
let r = (Math.random() * 16) | 0,
|
||||
v = c === "x" ? r : (r & 0x3) | 0x8;
|
||||
return v.toString(16);
|
||||
});
|
||||
},
|
||||
//获取类型
|
||||
getclassificationData() {
|
||||
//统计类型
|
||||
var code1 = "Statistical_Type";
|
||||
this.statisticalType = dicData(code1, ["Report_Type"]);
|
||||
this.formData.statisticalType = this.statisticalType[0];
|
||||
//电压等级
|
||||
var code3 = "Dev_Voltage";
|
||||
this.voltageLevel = dicData(code3, []);
|
||||
this.formData.scale = this.voltageLevel;
|
||||
//终端厂家
|
||||
var code4 = "Dev_Manufacturers";
|
||||
this.terminalManufacturer = dicData(code4, []);
|
||||
this.formData.manufacturer = this.terminalManufacturer;
|
||||
//干扰源类型
|
||||
var code5 = "Interference_Source";
|
||||
this.interferenceType = dicData(code5, []);
|
||||
this.formData.loadType = this.interferenceType;
|
||||
},
|
||||
|
||||
//查询
|
||||
onSubmit() {
|
||||
this.loading = true;
|
||||
// console.log("========", this.formData);
|
||||
|
||||
this.formData.searchBeginTime = this.$refs.interval.timeValue[0];
|
||||
this.formData.searchEndTime = this.$refs.interval.timeValue[1];
|
||||
this.typedata = this.formData.statisticalType.label;
|
||||
api.getOnlineRateData(this.formData).then((res) => {
|
||||
if (res.code == "A0000") {
|
||||
// console.log(res.data[0].deviceName === null)
|
||||
if (res.data.length == 0) {
|
||||
this.tableData = [];
|
||||
} else {
|
||||
// this.tableData = res.data
|
||||
res.data.forEach((m) => {
|
||||
m.id = this.guid();
|
||||
m.children.forEach((n) => {
|
||||
n.id = this.guid();
|
||||
n.children.forEach((d) => {
|
||||
d.id = this.guid();
|
||||
|
||||
d.children.forEach((c) => {
|
||||
c.id = this.guid();
|
||||
c.children.forEach((p) => {
|
||||
p.id = this.guid();
|
||||
p.children.forEach((a) => {
|
||||
a.id = this.guid();
|
||||
a.children.forEach((r) => {
|
||||
r.id = this.guid();
|
||||
r.children.forEach((t) => {
|
||||
t.id = this.guid();
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
this.tableData = res.data;
|
||||
this.handleExpandNumChange();
|
||||
this.loading = false;
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 切换选项
|
||||
handleNodeClick(data) {
|
||||
// console.log(data);
|
||||
this.formData.deptIndex = data.id;
|
||||
},
|
||||
//开关触发
|
||||
handleStatusChange(val) {
|
||||
this.formData.monitorFlag = val;
|
||||
//this.fiveTreeData()
|
||||
},
|
||||
//重置
|
||||
resetFn() {
|
||||
(this.formData = {
|
||||
deptIndex: "",
|
||||
monitorFlag: 2,
|
||||
powerFlag: 2,
|
||||
searchBeginTime: "",
|
||||
searchEndTime: "",
|
||||
statisticalType: "",
|
||||
algoDescribe: null,
|
||||
scale: [],
|
||||
manufacturer: [],
|
||||
loadType: [],
|
||||
serverName: "harmonic-boot",
|
||||
}),
|
||||
(this.$refs.area.form.valueTitle = "全国");
|
||||
this.$refs.interval.intervald = 1;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
@import url("../../../../../styles/comStyle.less");
|
||||
|
||||
::v-deep .el-table .cell {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
::v-deep .el-tabs--border-card>.el-tabs__content {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
::v-deep .box {
|
||||
.el-input {
|
||||
width: 160px;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .box1 {
|
||||
.el-input {
|
||||
width: 180px;
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep .el-form-item {
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.tableScopeSwitch .el-switch__label {
|
||||
position: absolute;
|
||||
display: none;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
/* 打开时文字位置设置 */
|
||||
.tableScopeSwitch .el-switch__label--right {
|
||||
z-index: 1;
|
||||
|
||||
/* 不同场景下可能不同，自行调整 */
|
||||
}
|
||||
|
||||
/* 关闭时文字位置设置 */
|
||||
.tableScopeSwitch .el-switch__label--left {
|
||||
left: 80px;
|
||||
/* 不同场景下可能不同，自行调整 */
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* 显示文字 */
|
||||
.tableScopeSwitch .el-switch__label.is-active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.tableScopeSwitch.el-switch .el-switch__core,
|
||||
.el-switch .el-switch__label {
|
||||
width: 200px !important;
|
||||
/* 开关按钮的宽度大小 */
|
||||
}
|
||||
</style>
|
||||
615
src/views/BusinessAdministrator/transport/powerweight.vue
Normal file
615
src/views/BusinessAdministrator/transport/powerweight.vue
Normal file
@@ -0,0 +1,615 @@
|
||||
<template>
|
||||
<div class="pd10" v-loading="loading" element-loading-text="数据加载中">
|
||||
<el-form :inline="true" :model="formData" class="demo-form-inline">
|
||||
<el-form-item label="监测点等级:">
|
||||
<el-select
|
||||
v-model="formData.lineGrade"
|
||||
placeholder="请选择监测点等级"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="item in devLevel"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="装置运行状态:">
|
||||
<el-select
|
||||
v-model="formData.runFlag"
|
||||
placeholder="请选择装置运行状态"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="筛选数据:" style="margin-bottom: 10px">
|
||||
<el-input
|
||||
style="width: 204px"
|
||||
v-model.trim="formData.searchValue"
|
||||
clearable
|
||||
placeholder="请输入筛选数据"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item style="margin-bottom: 10px">
|
||||
<el-button type="primary" icon="el-icon-search" @click="onSubmit"
|
||||
>查询</el-button
|
||||
>
|
||||
|
||||
<el-button type="primary" icon="el-icon-download" @click="exportEvent"
|
||||
>导出</el-button
|
||||
>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-download"
|
||||
@click="TemplateExport"
|
||||
>模版导出</el-button
|
||||
>
|
||||
<el-button type="primary" icon="el-icon-download" @click="batchImport"
|
||||
>批量导出监测点评分权重</el-button
|
||||
>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<vxe-table class="xiaoshou"
|
||||
size="mini"
|
||||
ref="powerweight"
|
||||
:row-config="{ isCurrent: true, isHover: true }"
|
||||
header-cell-class-name="table_header"
|
||||
:data="tableData"
|
||||
border
|
||||
highlight-current-row
|
||||
default-expand-all
|
||||
:height="vh"
|
||||
stripe
|
||||
>
|
||||
<vxe-table-column title="序号" min-width="70" type="seq" align="center">
|
||||
<template v-slot="row">
|
||||
<span>{{
|
||||
(formData.pageNum - 1) * formData.pageSize + row.seq
|
||||
}}</span>
|
||||
</template>
|
||||
</vxe-table-column>
|
||||
<vxe-table-column
|
||||
align="center"
|
||||
min-width="80px"
|
||||
field="areaName"
|
||||
title="省份"
|
||||
></vxe-table-column>
|
||||
<vxe-table-column
|
||||
align="center"
|
||||
min-width="100px"
|
||||
field="gbName"
|
||||
title="供电公司"
|
||||
></vxe-table-column>
|
||||
<vxe-table-column
|
||||
align="center"
|
||||
min-width="120px"
|
||||
field="subName"
|
||||
show-overflow
|
||||
title="所属变电站"
|
||||
></vxe-table-column>
|
||||
<vxe-table-column
|
||||
align="center"
|
||||
min-width="120px"
|
||||
field="devName"
|
||||
title="装置名称"
|
||||
>
|
||||
</vxe-table-column>
|
||||
<vxe-table-column
|
||||
align="center"
|
||||
min-width="120px"
|
||||
show-overflow
|
||||
field="lineName"
|
||||
title="监测点名称"
|
||||
>
|
||||
</vxe-table-column>
|
||||
<vxe-table-column
|
||||
align="center"
|
||||
min-width="100px"
|
||||
field="runFlag"
|
||||
title="装置状态"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.runFlag == 0" style="color: green">投运</span>
|
||||
<span v-if="scope.row.runFlag == 2" style="color: red">停运</span>
|
||||
<span v-if="scope.row.runFlag == 1" style="color: orange"
|
||||
>热备用</span
|
||||
>
|
||||
<span v-if="scope.row.runFlag == null">/</span>
|
||||
</template>
|
||||
</vxe-table-column>
|
||||
<vxe-table-column
|
||||
align="center"
|
||||
min-width="120"
|
||||
field="lineGrade"
|
||||
:formatter="formFilter"
|
||||
title="监测点评级"
|
||||
></vxe-table-column>
|
||||
<vxe-table-column
|
||||
align="center"
|
||||
min-width="140"
|
||||
field="communFeeMark"
|
||||
title="通讯费用评分"
|
||||
></vxe-table-column>
|
||||
<vxe-table-column
|
||||
align="center"
|
||||
min-width="140"
|
||||
field="assetBelong"
|
||||
title="资产归属评分"
|
||||
></vxe-table-column>
|
||||
<vxe-table-column
|
||||
align="center"
|
||||
min-width="140"
|
||||
field="serviceMark"
|
||||
title="服务条款评分"
|
||||
></vxe-table-column>
|
||||
<vxe-table-column
|
||||
align="center"
|
||||
min-width="160"
|
||||
field="agentMark"
|
||||
title="中间户数据需求"
|
||||
>
|
||||
</vxe-table-column>
|
||||
<vxe-table-column
|
||||
align="center"
|
||||
min-width="140"
|
||||
field="companyMark"
|
||||
title="公司数据需求"
|
||||
>
|
||||
</vxe-table-column>
|
||||
<vxe-table-column
|
||||
align="center"
|
||||
min-width="100px"
|
||||
field="userMark"
|
||||
title="用户需求"
|
||||
>
|
||||
</vxe-table-column>
|
||||
<vxe-table-column
|
||||
align="center"
|
||||
min-width="120"
|
||||
field="lineTypeMark"
|
||||
title="坚测点类型"
|
||||
>
|
||||
</vxe-table-column>
|
||||
<vxe-table-column
|
||||
align="center"
|
||||
min-width="120"
|
||||
field="businessMark"
|
||||
title="行业重要度"
|
||||
>
|
||||
</vxe-table-column>
|
||||
<vxe-table-column
|
||||
align="center"
|
||||
min-width="120px"
|
||||
field="flowProportion"
|
||||
title="操作"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
type="primary"
|
||||
size="mini"
|
||||
icon="el-icon-circle-check"
|
||||
@click="score(scope.row)"
|
||||
>评分</el-button
|
||||
>
|
||||
</template>
|
||||
</vxe-table-column>
|
||||
</vxe-table>
|
||||
<el-pagination
|
||||
background
|
||||
align="right"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="formData.pageNum"
|
||||
:page-sizes="[20, 30, 40, 50, 100]"
|
||||
:page-size="formData.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
class="mt10"
|
||||
>
|
||||
</el-pagination>
|
||||
|
||||
<el-dialog title="权重评分" :visible.sync="dialogVisible" width="30%">
|
||||
<el-form ref="form" :model="scoreForm" label-width="120px">
|
||||
<el-form-item label="通讯费用评分:">
|
||||
<el-input
|
||||
v-model.number="scoreForm.communFeeMark"
|
||||
placeholder="0 ～ 100"
|
||||
oninput="if(value > 100) value = 100; if(value < 0 || value == '' || value == null) value = 0;"
|
||||
:maxlength="3"
|
||||
:minlength="1"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="资产归属评分:" class="top">
|
||||
<el-input
|
||||
v-model.number="scoreForm.assetBelong"
|
||||
placeholder="0 ～ 100"
|
||||
oninput="if(value > 100) value = 100; if(value < 0 || value == '' || value == null) value = 0;"
|
||||
:maxlength="3"
|
||||
:minlength="1"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="服务条款评分:" class="top">
|
||||
<el-input
|
||||
v-model.number="scoreForm.serviceMark"
|
||||
placeholder="0 ～ 100"
|
||||
oninput="if(value > 100) value = 100; if(value < 0 || value == '' || value == null) value = 0;"
|
||||
:maxlength="3"
|
||||
:minlength="1"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="中间户数据需求:" class="top">
|
||||
<el-input
|
||||
v-model.number="scoreForm.agentMark"
|
||||
placeholder="0 ～ 100"
|
||||
oninput="if(value > 100) value = 100; if(value < 0 || value == '' || value == null) value = 0;"
|
||||
:maxlength="3"
|
||||
:minlength="1"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="公司数据需求:" class="top">
|
||||
<el-input
|
||||
v-model.number="scoreForm.companyMark"
|
||||
placeholder="0 ～ 100"
|
||||
oninput="if(value > 100) value = 100; if(value < 0 || value == '' || value == null) value = 0;"
|
||||
:maxlength="3"
|
||||
:minlength="1"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="用户需求:" class="top">
|
||||
<el-input
|
||||
v-model.number="scoreForm.userMark"
|
||||
placeholder="0 ～ 100"
|
||||
oninput="if(value > 100) value = 100; if(value < 0 || value == '' || value == null) value = 0;"
|
||||
:maxlength="3"
|
||||
:minlength="1"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="坚测点类型:" class="top">
|
||||
<el-input
|
||||
v-model.number="scoreForm.lineTypeMark"
|
||||
placeholder="0 ～ 100"
|
||||
oninput="if(value > 100) value = 100; if(value < 0 || value == '' || value == null) value = 0;"
|
||||
:maxlength="3"
|
||||
:minlength="1"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="行业重要度:" class="top">
|
||||
<el-input
|
||||
v-model.number="scoreForm.businessMark"
|
||||
placeholder="0 ～ 100"
|
||||
oninput="if(value > 100) value = 100; if(value < 0 || value == '' || value == null) value = 0;"
|
||||
:maxlength="3"
|
||||
:minlength="1"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="queryFn">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
<!-- 上传文件 -->
|
||||
<el-dialog
|
||||
:close-on-click-modal="false"
|
||||
title="批量导入监测点评分权重"
|
||||
:visible.sync="uploadInformation"
|
||||
width="25%"
|
||||
class="dialog"
|
||||
height="210px"
|
||||
>
|
||||
<el-form ref="form" :model="scoreForm" label-width="120px">
|
||||
<el-form-item label="文件上传:">
|
||||
<el-upload
|
||||
ref="upload"
|
||||
class="upload-files"
|
||||
action=""
|
||||
:headers="headers"
|
||||
name="file"
|
||||
multiple
|
||||
:auto-upload="false"
|
||||
:file-list="fileList"
|
||||
:on-change="handleChange"
|
||||
:limit="1"
|
||||
accept=".doc,.docx,.xls,.xlsx,.pdf,.txt"
|
||||
:on-exceed="handleExceed"
|
||||
>
|
||||
<el-button slot="trigger" size="mini" type="primary"
|
||||
>选取文件</el-button
|
||||
>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="uploadInformation = fasle"
|
||||
>取 消</el-button
|
||||
>
|
||||
<el-button type="primary" @click="uploadFn">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Timeinterval from "@/views/components/Timeinterval.vue";
|
||||
import api from "@/api/BusinessAdministrator/powerweight/powerweight.js";
|
||||
import { dicData } from "@/assets/commjs/dictypeData";
|
||||
export default {
|
||||
components: { Timeinterval },
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
view: false,
|
||||
form: {},
|
||||
jcname: "",
|
||||
options: [
|
||||
{
|
||||
id: 0,
|
||||
name: "投运",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "停运",
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
name: "热备用",
|
||||
},
|
||||
],
|
||||
uploadInformation: false,
|
||||
dialogVisible: false,
|
||||
headers: {
|
||||
Authorization: window.sessionStorage.getItem("cntoken"),
|
||||
},
|
||||
fileList: [],
|
||||
value: "",
|
||||
formData: {
|
||||
lineGrade: "", //终端等级
|
||||
comFlag: "",
|
||||
searchValue: "",
|
||||
pageNum: 1,
|
||||
pageSize: 20,
|
||||
},
|
||||
scoreForm: {
|
||||
communFeeMark: "",
|
||||
serviceMark: "",
|
||||
agentMark: "",
|
||||
companyMark: "",
|
||||
userMark: "",
|
||||
lineTypeMark: "",
|
||||
businessMark: "",
|
||||
assetBelong: "",
|
||||
},
|
||||
tableData: [{}],
|
||||
devLevel: [],
|
||||
total: undefined,
|
||||
vh: null,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getclassificationData();
|
||||
},
|
||||
mounted() {
|
||||
this.setHeight()
|
||||
window.addEventListener('resize', this.setHeight)
|
||||
|
||||
this.onSubmit();
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.setHeight)
|
||||
},
|
||||
methods: {
|
||||
setHeight() {
|
||||
this.vh = window.sessionStorage.getItem("appheight") - 95;
|
||||
|
||||
},
|
||||
//获取类型
|
||||
getclassificationData() {
|
||||
//监测点等级
|
||||
this.devLevel = dicData("Dev_Level", []);
|
||||
},
|
||||
//查询
|
||||
onSubmit() {
|
||||
this.loading = true;
|
||||
this.formData.pageNum = 1;
|
||||
api.LineWeightList(this.formData).then((res) => {
|
||||
this.tableData = res.data.records;
|
||||
this.total = res.data.total;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
onSubmit1() {
|
||||
this.loading = true;
|
||||
api.LineWeightList(this.formData).then((res) => {
|
||||
this.tableData = res.data.records;
|
||||
this.total = res.data.total;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
// 数据过滤
|
||||
formFilter(row, column) {
|
||||
if (row.column.property == "lineGrade") {
|
||||
let title = "";
|
||||
this.devLevel.forEach((item) => {
|
||||
if (item.id == row.row.lineGrade) {
|
||||
title = item.name;
|
||||
}
|
||||
});
|
||||
return title;
|
||||
} else {
|
||||
return row.row[row.column.property];
|
||||
}
|
||||
},
|
||||
// 评分
|
||||
score(val) {
|
||||
this.dialogVisible = true;
|
||||
this.scoreForm = val;
|
||||
this.scoreForm.lineIndex = val.lineIndex;
|
||||
},
|
||||
//评分确定
|
||||
queryFn() {
|
||||
this.$confirm("是否确认修改?", "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
})
|
||||
.then(() => {
|
||||
api.addLineWeight(this.scoreForm).then((res) => {
|
||||
if (res.code == "A0000") {
|
||||
this.$message({
|
||||
message: res.message,
|
||||
type: "success",
|
||||
});
|
||||
}
|
||||
this.dialogVisible = false;
|
||||
this.onSubmit();
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
this.$message({
|
||||
type: "info",
|
||||
message: "已取消修改",
|
||||
});
|
||||
});
|
||||
},
|
||||
//批量导出监测点评分权重
|
||||
batchImport() {
|
||||
this.uploadInformation = true;
|
||||
},
|
||||
//导入确定
|
||||
uploadFn() {
|
||||
let fileName = this.fileList[0].name
|
||||
let pos = fileName.lastIndexOf('.')
|
||||
let includes = fileName.substring(pos, fileName.length)
|
||||
console.log(includes)
|
||||
let fileLastArr = [".doc",".docx",".xls",".xlsx",".pdf",".txt"]
|
||||
if (!fileLastArr.includes(includes)) {
|
||||
this.$message.error('当前不支持该格式文件')
|
||||
return false;
|
||||
}
|
||||
|
||||
this.$confirm("是否确认导入?", "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
})
|
||||
.then(() => {
|
||||
const formData = new FormData();
|
||||
this.fileList.forEach((item) => {
|
||||
// console.log(item);
|
||||
if (item.raw == "") {
|
||||
} else {
|
||||
formData.append("file", item.raw);
|
||||
}
|
||||
});
|
||||
api.batchWeight(formData).then((res) => {
|
||||
if (res.code == "A0000") {
|
||||
this.$message({
|
||||
message: res.message,
|
||||
type: "success",
|
||||
});
|
||||
this.uploadInformation = false;
|
||||
this.$refs.upload.clearFiles();
|
||||
this.onSubmit();
|
||||
}
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
this.$message({
|
||||
type: "info",
|
||||
message: "已取消导入",
|
||||
});
|
||||
});
|
||||
},
|
||||
handleChange(file, fileList) {
|
||||
// console.log(file, fileList);
|
||||
this.fileList = fileList;
|
||||
},
|
||||
handleExceed(files, fileList) {
|
||||
this.$message.warning(
|
||||
`当前限制选择 1个文件,本次选择了 ${files.length} 个文件，共选择了 ${
|
||||
files.length + fileList.length
|
||||
} 个文件`
|
||||
);
|
||||
},
|
||||
//每页条数改变时触发 选择一页显示多少行
|
||||
handleSizeChange(val) {
|
||||
this.formData.pageSize = val;
|
||||
this.onSubmit1();
|
||||
},
|
||||
//当前页改变时触发 跳转其他页
|
||||
handleCurrentChange(val) {
|
||||
this.formData.pageNum = val;
|
||||
this.onSubmit1();
|
||||
},
|
||||
//模板导出
|
||||
TemplateExport() {
|
||||
api.export().then((res) => {
|
||||
let blob = new Blob([res], {
|
||||
type: "application/vnd.ms-excel",
|
||||
});
|
||||
const url = window.URL.createObjectURL(blob);
|
||||
const link = document.createElement("a"); // 创建a标签
|
||||
link.href = url; // link.download = "电压暂降事件分析报告"; // 设置下载的文件名
|
||||
link.download = "监测点评分权重模板.csv"; // 设置下载的文件名
|
||||
document.body.appendChild(link);
|
||||
link.click(); //执行下载
|
||||
document.body.removeChild(link);
|
||||
});
|
||||
},
|
||||
//导出
|
||||
exportEvent() {
|
||||
api
|
||||
.LineWeightList({
|
||||
lineGrade: this.formData.lineGrade,
|
||||
comFlag: this.formData.comFlag,
|
||||
searchValue: this.formData.searchValue,
|
||||
pageNum: 1,
|
||||
pageSize: this.total,
|
||||
})
|
||||
.then((res) => {
|
||||
res.data.records.forEach(item=>{
|
||||
if(item.runFlag == '0'){
|
||||
item.runFlag = '投运'
|
||||
}else if(item.runFlag == '1'){
|
||||
item.runFlag = '热备用'
|
||||
}else if(item.runFlag == '2'){
|
||||
item.runFlag = '停运'
|
||||
}
|
||||
})
|
||||
this.$refs.powerweight.exportData({
|
||||
filename: "监测点权重信息", // 文件名字
|
||||
sheetName: "Sheet1",
|
||||
type: "xlsx", //导出文件类型 xlsx 和 csv
|
||||
useStyle: true,
|
||||
data: res.data.records, // 数据源 // 过滤那个字段导出
|
||||
columnFilterMethod: function (column, $columnIndex) {
|
||||
return !(column.$columnIndex === 0 || column.$columnIndex === 16 );
|
||||
},
|
||||
});
|
||||
});
|
||||
},
|
||||
},
|
||||
|
||||
computed: {},
|
||||
|
||||
watch: {},
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
@import url("../../../styles/comStyle.less");
|
||||
.xiaoshou {
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
1306
src/views/BusinessAdministrator/transport/transformerStrategy.vue
Normal file
1306
src/views/BusinessAdministrator/transport/transformerStrategy.vue
Normal file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user