提交
This commit is contained in:
255
src/views/BusinessAdministrator/LogManagement/DropPush.vue
Normal file
255
src/views/BusinessAdministrator/LogManagement/DropPush.vue
Normal file
@@ -0,0 +1,255 @@
|
||||
<template>
|
||||
<div class="pd10" v-loading="loading" element-loading-text="数据加载中">
|
||||
<el-form :inline="true" :model="formInline" class="demo-form-inline">
|
||||
<el-form-item label="推送状态:">
|
||||
<el-select v-model="formInline.result" placeholder="请选择推送状态">
|
||||
<el-option
|
||||
v-for="item in teriminaloption"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="筛选数据:">
|
||||
<el-input
|
||||
v-model="formInline.searchValue"
|
||||
placeholder="请输入要筛选的字段"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<Timeinterval ref="Timeinterval" :interval="2"></Timeinterval
|
||||
></el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="queryData" icon="el-icon-search"
|
||||
>查询</el-button
|
||||
>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row>
|
||||
<el-table
|
||||
stripe
|
||||
header-cell-class-name="table_header"
|
||||
:data="tableData"
|
||||
border
|
||||
style="width: 100%"
|
||||
highlight-current-row
|
||||
:height="vh + 'px'"
|
||||
|
||||
>
|
||||
<!-- <el-table-column
|
||||
align="center"
|
||||
prop="xh"
|
||||
label="序号"
|
||||
width="80"
|
||||
></el-table-column> -->
|
||||
<el-table-column
|
||||
align="center"
|
||||
prop="time"
|
||||
label="暂降时间"
|
||||
width="220"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
prop="powerCompany"
|
||||
label="供电公司"
|
||||
width="220"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
prop="substation"
|
||||
label="变电站名称"
|
||||
width="220"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
prop="line"
|
||||
label="监测点名称"
|
||||
width="220"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
prop="eventValue"
|
||||
label="特征幅值(%)"
|
||||
width="220"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
prop="persistTime"
|
||||
label="持续时间(s)"
|
||||
width="220"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
prop="creatTime"
|
||||
label="首次推送时间"
|
||||
width="220"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
prop="creatTimed"
|
||||
label="推送成功时间"
|
||||
width="220"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
prop="pushFailed"
|
||||
label="推送失败次数"
|
||||
width="220"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
prop="result"
|
||||
label="推送结果"
|
||||
width="220"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
prop="updateTime"
|
||||
label="人工推送时间"
|
||||
width="220"
|
||||
></el-table-column>
|
||||
<el-table-column align="center" fixed="right" label="操作" width="150">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
v-if="scope.row.state !== '成功'"
|
||||
type="primary"
|
||||
size="mini"
|
||||
>推送</el-button
|
||||
>
|
||||
<el-button
|
||||
v-if="scope.row.state == '成功'"
|
||||
type="primary"
|
||||
disabled
|
||||
size="mini"
|
||||
>已推送</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
background
|
||||
class="mt10"
|
||||
align="right"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="formInline.pageNum"
|
||||
:page-sizes="[20, 30, 40, 50, 100]"
|
||||
:page-size="formInline.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
>
|
||||
</el-pagination>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Timeinterval from "@/views/components/TimePicker/index4";
|
||||
import api from "@/api/device/log";
|
||||
export default {
|
||||
name: "suspensionlog",
|
||||
components: {
|
||||
Timeinterval,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: true,
|
||||
teriminaloption: [
|
||||
{
|
||||
name: "全部",
|
||||
id: null,
|
||||
},
|
||||
{
|
||||
name: "成功",
|
||||
id: 1,
|
||||
},
|
||||
{
|
||||
name: "失败",
|
||||
id: 0,
|
||||
},
|
||||
],
|
||||
vh: undefined,
|
||||
formInline: {
|
||||
searchValue: "",
|
||||
result: '',
|
||||
pageNum: 1,
|
||||
pageSize: 20,
|
||||
},
|
||||
total: null,
|
||||
height: "",
|
||||
tableData: [],
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
mounted() {
|
||||
this.queryData();
|
||||
|
||||
this.setHeight()
|
||||
window.addEventListener('resize', this.setHeight)
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.setHeight)
|
||||
},
|
||||
methods: {
|
||||
setHeight() {
|
||||
this.vh = window.sessionStorage.getItem("appheight") - 96;
|
||||
|
||||
},
|
||||
//查询列表
|
||||
queryData() {
|
||||
if(this.formInline.result !== '' || this.formInline.searchValue !== ''){
|
||||
this.formInline.pageNum = 1
|
||||
}
|
||||
this.loading = true;
|
||||
this.formInline.searchBeginTime = this.$refs.Timeinterval.timeValue[0];
|
||||
this.formInline.searchEndTime = this.$refs.Timeinterval.timeValue[1];
|
||||
api.getEventList(this.formInline).then((res) => {
|
||||
if (res.code == "A0000") {
|
||||
this.total = res.data.total;
|
||||
this.tableData = res.data.records;
|
||||
this.loading = false;
|
||||
} else if ((res.data = null)) {
|
||||
this.loading = false;
|
||||
}
|
||||
});
|
||||
},
|
||||
//分页查询用
|
||||
queryData1() {
|
||||
this.loading = true;
|
||||
this.formInline.searchBeginTime = this.$refs.Timeinterval.timeValue[0];
|
||||
this.formInline.searchEndTime = this.$refs.Timeinterval.timeValue[1];
|
||||
api.getEventList(this.formInline).then((res) => {
|
||||
if (res.code == "A0000") {
|
||||
this.total = res.data.total;
|
||||
this.tableData = res.data.records;
|
||||
this.loading = false;
|
||||
} else if ((res.data = null)) {
|
||||
this.loading = false;
|
||||
}
|
||||
});
|
||||
},
|
||||
//每页条数改变时触发 选择一页显示多少行
|
||||
handleSizeChange(val) {
|
||||
this.formInline.pageSize = val;
|
||||
this.queryData1();
|
||||
},
|
||||
//当前页改变时触发 跳转其他页
|
||||
handleCurrentChange(val) {
|
||||
this.formInline.pageNum = val;
|
||||
this.queryData1();
|
||||
},
|
||||
},
|
||||
};
|
||||
</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;
|
||||
}
|
||||
// ::v-deep .table_header {
|
||||
// height: 35px !important;
|
||||
// }
|
||||
</style>
|
||||
206
src/views/BusinessAdministrator/LogManagement/TerminalLog.vue
Normal file
206
src/views/BusinessAdministrator/LogManagement/TerminalLog.vue
Normal file
@@ -0,0 +1,206 @@
|
||||
<template>
|
||||
<div class="pd10" v-loading="loading" element-loading-text="数据加载中">
|
||||
<el-form :inline="true" :model="formInline" class="demo-form-inline">
|
||||
<el-form-item label="日志类型:">
|
||||
<el-select
|
||||
v-model="formInline.type"
|
||||
placeholder="请选择日志类型"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="item in teriminaloption"
|
||||
:key="item.code"
|
||||
:label="item.name"
|
||||
:value="item.code"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="筛选数据:">
|
||||
<el-input
|
||||
v-model="formInline.searchValue"
|
||||
placeholder="请输入筛选描述的字段"
|
||||
clearable
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<Timeinterval ref="Timeinterval" :interval="3"></Timeinterval
|
||||
></el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" @click="queryData"
|
||||
>查询</el-button
|
||||
>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-row>
|
||||
<el-table
|
||||
stripe
|
||||
header-cell-class-name="table_header"
|
||||
:data="tableData"
|
||||
border
|
||||
style="width: 100%"
|
||||
highlight-current-row
|
||||
:height="vh + 'px'"
|
||||
:row-class-name="rowClassName"
|
||||
|
||||
>
|
||||
<el-table-column align="center" prop="number" label="序号" width="80">
|
||||
<template scope="scope">
|
||||
<span>{{
|
||||
(formInline.pageNum - 1) * formInline.pageSize + scope.$index + 1
|
||||
}}</span>
|
||||
</template></el-table-column
|
||||
>
|
||||
<el-table-column
|
||||
align="center"
|
||||
prop="type"
|
||||
label="日志类型"
|
||||
width="180"
|
||||
></el-table-column>
|
||||
<!-- <el-table-column
|
||||
align="center"
|
||||
prop="updateBy"
|
||||
label="更新用户"
|
||||
width="200"
|
||||
></el-table-column> -->
|
||||
<el-table-column
|
||||
align="center"
|
||||
prop="updateTime"
|
||||
label="更新时间"
|
||||
width="180"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span> {{ scope.row.updateTime.replace("T", " ") }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
prop="remark"
|
||||
label="描述"
|
||||
:show-overflow-tooltip="true"
|
||||
></el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
background
|
||||
class="mt10"
|
||||
align="right"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="formInline.pageNum"
|
||||
:page-sizes="[20, 30, 40, 50, 100]"
|
||||
:page-size="formInline.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
>
|
||||
</el-pagination>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Timeinterval from "@/views/components/TimePicker/index4";
|
||||
import { dicData } from "@/assets/commjs/dictypeData";
|
||||
import api from "@/api/device/log";
|
||||
export default {
|
||||
name: "operationlogs",
|
||||
components: {
|
||||
Timeinterval,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: true,
|
||||
teriminaloption: [],
|
||||
vh: undefined,
|
||||
height: "",
|
||||
formInline: {
|
||||
type: "",
|
||||
searchValue: "",
|
||||
searchBeginTime: "",
|
||||
searchEndTime: "",
|
||||
pageNum: 1,
|
||||
pageSize: 20,
|
||||
},
|
||||
total: null,
|
||||
tableData: [],
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
mounted() {
|
||||
this.getDevLog();
|
||||
this.queryData();
|
||||
|
||||
this.setHeight()
|
||||
window.addEventListener('resize', this.setHeight)
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.setHeight)
|
||||
},
|
||||
methods: {
|
||||
setHeight() {
|
||||
this.vh = window.sessionStorage.getItem("appheight") - 96;
|
||||
|
||||
},
|
||||
//获取所有日志类型
|
||||
getDevLog() {
|
||||
let code = "Dev_Ops";
|
||||
this.teriminaloption = dicData(code, []);
|
||||
},
|
||||
//序号
|
||||
rowClassName({ row, rowIndex }) {
|
||||
row.number = rowIndex + 1;
|
||||
},
|
||||
//查询列表
|
||||
queryData() {
|
||||
if(this.formInline.type !== '' || this.formInline.searchValue !== ''){
|
||||
this.formInline.pageNum = 1
|
||||
}
|
||||
this.loading = true;
|
||||
this.formInline.searchBeginTime = this.$refs.Timeinterval.timeValue[0];
|
||||
this.formInline.searchEndTime = this.$refs.Timeinterval.timeValue[1];
|
||||
api.getListData(this.formInline).then((res) => {
|
||||
if (res.code === "A0000") {
|
||||
this.tableData = res.data;
|
||||
this.total = this.tableData.length;
|
||||
this.loading = false;
|
||||
} else if (res.data == null) {
|
||||
this.loading = false;
|
||||
}
|
||||
});
|
||||
},
|
||||
//分页查询用
|
||||
queryData1() {
|
||||
this.loading = true;
|
||||
this.formInline.searchBeginTime = this.$refs.Timeinterval.timeValue[0];
|
||||
this.formInline.searchEndTime = this.$refs.Timeinterval.timeValue[1];
|
||||
api.getListData(this.formInline).then((res) => {
|
||||
if (res.code === "A0000") {
|
||||
this.tableData = res.data;
|
||||
this.total = this.tableData.length;
|
||||
this.loading = false;
|
||||
} else if (res.data == null) {
|
||||
this.loading = false;
|
||||
}
|
||||
});
|
||||
},
|
||||
//每页条数改变时触发 选择一页显示多少行
|
||||
handleSizeChange(val) {
|
||||
this.formInline.pageSize = val;
|
||||
this.queryData1();
|
||||
},
|
||||
//当前页改变时触发 跳转其他页
|
||||
handleCurrentChange(val) {
|
||||
this.formInline.pageNum = val;
|
||||
this.queryData1();
|
||||
},
|
||||
},
|
||||
};
|
||||
</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;
|
||||
}
|
||||
// ::v-deep .table_header {
|
||||
// height: 35px !important;
|
||||
// }
|
||||
</style>
|
||||
@@ -0,0 +1,76 @@
|
||||
l
|
||||
<template>
|
||||
<div class="pd10">
|
||||
<el-tabs v-if="flag" v-model.trim="activeName" @tab-click="handleClick" type="border-card">
|
||||
<el-tab-pane label="报告模板配置" name="first" :style="'height:' + vh + ';'">
|
||||
<MonitoringPoint @send="takeOver" @flag="flag = false" v-if="activeName == 'first'" />
|
||||
</el-tab-pane>
|
||||
<!-- <el-tab-pane
|
||||
label="区域报告"
|
||||
name="second"
|
||||
:style="'height:' + vh + ';'"
|
||||
>
|
||||
<Region @flag="flag=false" v-if="activeName=='second'"/>
|
||||
</el-tab-pane> -->
|
||||
</el-tabs>
|
||||
<Administration v-else @flag="flag = true" :type="type"></Administration>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import MonitoringPoint from '../components/ReportTemplateCild/MonitoringPoint.vue'
|
||||
import Region from '../components/ReportTemplateCild/region.vue'
|
||||
import Administration from '../components/ReportTemplateCild/Administration.vue'
|
||||
export default {
|
||||
name: 'reportingmanager',
|
||||
components: { MonitoringPoint, Region, Administration },
|
||||
data() {
|
||||
return {
|
||||
flag: true,
|
||||
vh: undefined,
|
||||
activeName: 'first',
|
||||
device: '',
|
||||
type: ''
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
mounted() {
|
||||
this.setHeight()
|
||||
window.addEventListener('resize', this.setHeight)
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.setHeight)
|
||||
},
|
||||
methods: {
|
||||
setHeight() {
|
||||
this.device = window.devicePixelRatio
|
||||
this.vh = window.sessionStorage.getItem('appheight') - 70 + 'px'
|
||||
},
|
||||
handleClick(tab, event) {
|
||||
// console.log(tab, event);
|
||||
},
|
||||
takeOver(data) {
|
||||
// console.log(data);
|
||||
this.type = data
|
||||
}
|
||||
}
|
||||
}
|
||||
</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;
|
||||
}
|
||||
.block {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
|
||||
bottom: 10px;
|
||||
}
|
||||
::v-deep ::-webkit-scrollbar {
|
||||
width: 8px !important;
|
||||
height: 14px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,400 @@
|
||||
<template>
|
||||
<div class="pd10">
|
||||
<!-- 前置 -->
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-form :inline="true" :model="formInline" class="demo-form-inline">
|
||||
<el-form-item label="前置等级:">
|
||||
<el-select
|
||||
v-model="formInline.nodeGrade"
|
||||
placeholder="请选择终端型号"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in fontdveoption"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态:">
|
||||
<el-select
|
||||
v-model="formInline.searchState"
|
||||
placeholder="请选择终端状态"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in statusoption"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" @click="query"
|
||||
>查询</el-button
|
||||
>
|
||||
</el-form-item>
|
||||
</el-form></el-col
|
||||
>
|
||||
<el-col :span="12">
|
||||
<!-- <el-button
|
||||
style="float: right; margin-right: 20px;"
|
||||
type="primary"
|
||||
icon="el-icon-check"
|
||||
>导出</el-button
|
||||
> -->
|
||||
<el-button
|
||||
style="float: right; margin-right: 20px"
|
||||
type="primary"
|
||||
size="small"
|
||||
icon="el-icon-plus"
|
||||
@click="add"
|
||||
>新增
|
||||
</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-table
|
||||
stripe
|
||||
:data="tableData"
|
||||
border
|
||||
:row-config="{ isCurrent: true, isHover: true }"
|
||||
highlight-current-row
|
||||
:height="vh + 'px'"
|
||||
style="width: 100%"
|
||||
v-loading="loading"
|
||||
header-cell-class-name="table_header"
|
||||
>
|
||||
<el-table-column
|
||||
align="center"
|
||||
prop="name"
|
||||
label="名称"
|
||||
></el-table-column>
|
||||
<el-table-column align="center" prop="ip" label="IP"></el-table-column>
|
||||
<el-table-column align="center" prop="nodeGrade" label="等级">
|
||||
<template slot-scope="scope">
|
||||
<el-tag type="primary" v-if="scope.row.nodeGrade === 1">普通</el-tag>
|
||||
<el-tag type="primary" v-if="scope.row.nodeGrade === 0"
|
||||
>极重要</el-tag
|
||||
>
|
||||
<el-tag type="primary" v-if="scope.row.nodeGrade === 2">备用</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
prop="nodeDevNum"
|
||||
label="最大监测点数量"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
prop="sort"
|
||||
label="排序"
|
||||
></el-table-column>
|
||||
<el-table-column align="center" prop="state" label="状态">
|
||||
<template slot-scope="scope">
|
||||
<el-tag type="primary" v-if="scope.row.state === 1">启用</el-tag>
|
||||
<el-tag type="primary" v-if="scope.row.state === 0">未启用</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
prop="remark"
|
||||
label="描述"
|
||||
></el-table-column>
|
||||
<el-table-column align="center" label="操作" width="200">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="primary" size="mini" @click="edit(scope.row)" icon="el-icon-edit"
|
||||
>修改</el-button
|
||||
>
|
||||
<el-button type="danger" size="mini" @click="Delete(scope.row)" icon="el-icon-delete"
|
||||
>删除</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
background
|
||||
class="mt10"
|
||||
align="right"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="formInline.pageNum"
|
||||
:page-sizes="[20, 30, 40, 50, 100]"
|
||||
:page-size="formInline.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
>
|
||||
</el-pagination>
|
||||
|
||||
<!--新增-->
|
||||
<el-dialog :close-on-click-modal="false"
|
||||
:title="title"
|
||||
:visible.sync="dialogVisible"
|
||||
width="30%"
|
||||
:before-close="handleClose"
|
||||
|
||||
>
|
||||
<el-form ref="form" :model="formData" :rules="rules" label-width="110px">
|
||||
<el-form-item label="名称:" prop="name">
|
||||
<el-input
|
||||
v-model="formData.name"
|
||||
|
||||
placeholder="请输入名称"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="IP:" prop="ip" class="top">
|
||||
<el-input
|
||||
v-model="formData.ip"
|
||||
|
||||
placeholder="请输入Ip"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="等级:" prop="nodeGrade" class="top">
|
||||
<el-select
|
||||
v-model="formData.nodeGrade"
|
||||
placeholder="请选择等级"
|
||||
style="width: 100%;"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in fontdveoptionForm"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="最大装置数:" prop="nodeDevNum" class="top">
|
||||
<el-input
|
||||
v-model="formData.nodeDevNum"
|
||||
|
||||
onkeyup="value = value.replace(/[^0-9]/g,'')"
|
||||
maxlength="5"
|
||||
placeholder="请输入最大装置数"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="排序:" prop="sort" class="top">
|
||||
<el-input
|
||||
v-model="formData.sort"
|
||||
|
||||
placeholder="请输入排序"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="描述:" prop="remark" class="top">
|
||||
<el-input
|
||||
v-model="formData.remark"
|
||||
|
||||
placeholder="请输入描述"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="handleClose">取 消</el-button>
|
||||
<el-button type="primary" @click="submit">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import node from "@/api/device/node";
|
||||
export default {
|
||||
name: "premage",
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
loading: true,
|
||||
vh: undefined,
|
||||
formInline: {
|
||||
nodeGrade: "",
|
||||
searchState: "",
|
||||
pageNum: 1,
|
||||
pageSize: 20,
|
||||
},
|
||||
title: "",
|
||||
total: 2,
|
||||
fontdve: "",
|
||||
fontdveoption: [
|
||||
{ id: "", name: "全部" },
|
||||
{ id: 0, name: "极重要" },
|
||||
{ id: 1, name: "普通" },
|
||||
{ id: 2, name: "备用" },
|
||||
],
|
||||
fontdveoptionForm: [
|
||||
{ id: 0, name: "极重要" },
|
||||
{ id: 1, name: "普通" },
|
||||
{ id: 2, name: "备用" },
|
||||
],
|
||||
status: "",
|
||||
statusoption: [
|
||||
{ id: "", name: "全部" },
|
||||
{ id: 0, name: "未启用" },
|
||||
{ id: 1, name: "启用" },
|
||||
],
|
||||
// //分页
|
||||
// pageData: {
|
||||
// currentPage: 1,
|
||||
// pagesize: 20,
|
||||
// total: 0,
|
||||
// },
|
||||
operaType: 0, //0新增 1 修改 2 查看
|
||||
formData: {},
|
||||
//列表
|
||||
tableData: [],
|
||||
rules:{
|
||||
name:[{ required: true, message: "名称不可为空", trigger: "blur" }],
|
||||
ip:[{ required: true, message: "ip不可为空", trigger: "blur" }],
|
||||
nodeGrade:[{ required: true, message: "等级不可为空", trigger: "blur" }],
|
||||
nodeDevNum:[{ required: true, message: "最大装置数不可为空", trigger: "blur" }],
|
||||
sort:[{ required: true, message: "排序不可为空", trigger: "blur" }],
|
||||
remark:[{ required: true, message: "描述不可为空", trigger: "blur" }],
|
||||
}
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
mounted() {
|
||||
this.setHeight()
|
||||
window.addEventListener('resize', this.setHeight)
|
||||
this.query();
|
||||
|
||||
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.setHeight)
|
||||
},
|
||||
methods: {
|
||||
setHeight() {
|
||||
this.vh = window.sessionStorage.getItem("appheight") - 96;
|
||||
|
||||
},
|
||||
// 表单重置
|
||||
resetForm() {
|
||||
|
||||
if (this.$refs["form"]) {
|
||||
this.$refs["form"].resetFields();
|
||||
}
|
||||
},
|
||||
//每页条数改变时触发 选择一页显示多少行
|
||||
handleSizeChange(val) {
|
||||
this.formInline.pageSize = val;
|
||||
this.query();
|
||||
},
|
||||
//当前页改变时触发 跳转其他页
|
||||
handleCurrentChange(val) {
|
||||
this.formInline.pageNum = val;
|
||||
this.query();
|
||||
},
|
||||
|
||||
//新增
|
||||
add() {
|
||||
this.formData = {};
|
||||
this.dialogVisible = true;
|
||||
this.operaType = 0;
|
||||
this.title = "新增前置机";
|
||||
},
|
||||
//关闭
|
||||
handleClose() {
|
||||
this.dialogVisible = false;
|
||||
this.resetForm()
|
||||
},
|
||||
//修改
|
||||
edit(row) {
|
||||
this.dialogVisible = true;
|
||||
this.operaType = 1;
|
||||
this.title = row.name + "修改";
|
||||
this.getOne(row.id);
|
||||
},
|
||||
//删除
|
||||
Delete(row) {
|
||||
this.$confirm("是否确认删除?", "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
})
|
||||
.then(() => {
|
||||
node.delete(row.id).then((response) => {
|
||||
if (response.code === "A0000") {
|
||||
this.$message({
|
||||
type: "success",
|
||||
message: "删除成功!",
|
||||
});
|
||||
this.query();
|
||||
}
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
this.$message({
|
||||
type: "info",
|
||||
message: "已取消删除",
|
||||
});
|
||||
});
|
||||
},
|
||||
//获取主界面列表
|
||||
query() {
|
||||
this.loading = true;
|
||||
node.getList(this.formInline).then((response) => {
|
||||
if (response.code === "A0000") {
|
||||
let res = response.data;
|
||||
this.formInline.currentPage = res.current;
|
||||
this.formInline.pagesize = res.size;
|
||||
this.total = res.total;
|
||||
this.tableData = res.records;
|
||||
}
|
||||
});
|
||||
this.loading = false;
|
||||
},
|
||||
//获取单个前置机详情
|
||||
getOne(id) {
|
||||
node.getOne(id).then((response) => {
|
||||
if (response.code === "A0000") {
|
||||
this.formData = response.data;
|
||||
}
|
||||
});
|
||||
},
|
||||
//提交
|
||||
submit() {
|
||||
this.$confirm("是否确认操作?", "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
}).then(() => {
|
||||
if (this.operaType === 0) {
|
||||
node.add(this.formData).then((response) => {
|
||||
if (response.code === "A0000") {
|
||||
this.$message({
|
||||
type: "success",
|
||||
message: "新增成功!",
|
||||
});
|
||||
this.dialogVisible = false;
|
||||
this.query();
|
||||
}
|
||||
});
|
||||
} else {
|
||||
//修改
|
||||
node.update(this.formData).then((response) => {
|
||||
if (response.code === "A0000") {
|
||||
this.$message({
|
||||
type: "success",
|
||||
message: "修改成功!",
|
||||
});
|
||||
this.dialogVisible = false;
|
||||
this.query();
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import url("../../../styles/comStyle.less");
|
||||
// /deep/.el-form-item--small .el-form-item__content,
|
||||
// .el-form-item--small .el-form-item__label {
|
||||
// height: 32px;
|
||||
// }
|
||||
</style>
|
||||
@@ -0,0 +1,673 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-container id="dept" v-show="view1">
|
||||
<el-aside v-show="view" width="300px" id="drag-dept-left">
|
||||
<muentree
|
||||
@eleMenuData="getTreeText"
|
||||
@chushiData="chushiData"
|
||||
:number="number"
|
||||
:tablename="tablename"
|
||||
ref="commonTree"
|
||||
></muentree>
|
||||
</el-aside>
|
||||
<div id="drag-dept">
|
||||
<el-tooltip
|
||||
class="item"
|
||||
effect="dark"
|
||||
:content="view ? '收缩' : '展开'"
|
||||
placement="top-start"
|
||||
>
|
||||
<i
|
||||
:class="view ? 'el-icon-caret-left' : 'el-icon-caret-right'"
|
||||
style="
|
||||
font-size: 18px;
|
||||
z-index: 2000;
|
||||
cursor: pointer;
|
||||
margin-right: 0px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
background: rgba(6, 70, 122, 0);
|
||||
"
|
||||
@click="changeview"
|
||||
></i>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<el-main
|
||||
id="drag-dept-right"
|
||||
class="pd10"
|
||||
v-loading="loading"
|
||||
style="padding-left: 5px"
|
||||
element-loading-text="数据加载中"
|
||||
>
|
||||
<div class="wzhixx" v-show="falg">
|
||||
<div>
|
||||
<div style="float: left; margin-top: -2px">
|
||||
<i
|
||||
style="color: #339966; font-size: 20px"
|
||||
class="el-icon-location-information"
|
||||
></i>
|
||||
<span style="color: #000">当前位置:</span>
|
||||
</div>
|
||||
<div style="height: auto; overflow: hidden">
|
||||
<p class="zt animate h3">
|
||||
<!-- {{ treenode!=undefined?treenode.parent.parent.parent.parent.data.name +`>` +treenode.parent.parent.parent.data.name +`>` +treenode.parent.parent.data.name +`>` +treenode.parent.data.name+`>` +treenode.data.name:wezhiname}} -->
|
||||
{{
|
||||
treenode != undefined
|
||||
? treenode.parent.parent.parent.data.name +
|
||||
`>` +
|
||||
treenode.parent.parent.data.name +
|
||||
`>` +
|
||||
treenode.parent.data.name +
|
||||
`>` +
|
||||
treenode.data.name
|
||||
: wezhiname
|
||||
}}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-tabs
|
||||
v-model="activeName"
|
||||
type="border-card"
|
||||
@tab-click="handleClick"
|
||||
:style="'width: 100%; transform: translateX(0px);height:' + vh"
|
||||
>
|
||||
<el-tab-pane
|
||||
v-for="(item, index) in tabsData"
|
||||
:label="item.label"
|
||||
:key="item.id"
|
||||
:name="item.id"
|
||||
:index="index"
|
||||
:lazy="true"
|
||||
>
|
||||
<el-row v-if="item.id === 'dzgl'">
|
||||
<el-col>
|
||||
<div style="float: right">
|
||||
<el-button type="primary" class="el-icon-edit"
|
||||
>修改定值</el-button
|
||||
>
|
||||
<el-button type="primary" class="el-icon-edit"
|
||||
>下发定值</el-button
|
||||
>
|
||||
<el-button type="primary">获取外部定值描述</el-button>
|
||||
<el-button type="primary">校验外部定值</el-button>
|
||||
<el-button type="primary">获取内部定值描述</el-button>
|
||||
<el-button type="primary">校验内部定值</el-button>
|
||||
</div>
|
||||
<div style="clear: both"></div>
|
||||
<div class="mt10">
|
||||
<el-radio-group v-model="radio1">
|
||||
<el-radio-button label="1">基本定值</el-radio-button>
|
||||
<el-radio-button label="2">谐波电流</el-radio-button>
|
||||
<el-radio-button label="3">谐波电压</el-radio-button>
|
||||
<el-radio-button label="4">间歇波定值</el-radio-button>
|
||||
</el-radio-group>
|
||||
</div>
|
||||
<el-table
|
||||
stripe
|
||||
:data="constantValueData"
|
||||
:height="vh1"
|
||||
border
|
||||
class="mt10 table"
|
||||
style="width: 100%"
|
||||
header-cell-class-name="table_header"
|
||||
:header-cell-style="{
|
||||
height: '25px',
|
||||
padding: '0px',
|
||||
}"
|
||||
:row-style="{ height: '35px' }"
|
||||
:cell-style="{ padding: '0px' }"
|
||||
:row-class-name="rowClassName"
|
||||
>
|
||||
<el-table-column
|
||||
prop="number"
|
||||
align="center"
|
||||
label="序号"
|
||||
min-width="50"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
prop="name"
|
||||
label="定值名称"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
prop="current"
|
||||
label="当前定值"
|
||||
display="none"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-input
|
||||
min="0"
|
||||
size="mini"
|
||||
v-model="scope.row.modify"
|
||||
></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
prop="modify"
|
||||
label="修改定值"
|
||||
display="none"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-input
|
||||
min="0"
|
||||
size="mini"
|
||||
v-model="scope.row.modify"
|
||||
></el-input>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
prop="upDataTime"
|
||||
label="定值范围"
|
||||
></el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row v-if="item.id === 'wjgl'">
|
||||
<el-col>
|
||||
<div class="BOX">
|
||||
<span style="display: inline-block; width: 300px"
|
||||
>前置IP:</span
|
||||
>
|
||||
<span>终端路径:</span>
|
||||
</div>
|
||||
<el-row :gutter="20" class="mt10">
|
||||
<el-col :span="12">
|
||||
<span class="BOX1">服务器目录</span>
|
||||
<el-form ref="form" inline style="float: right">
|
||||
<el-form-item>
|
||||
<el-button
|
||||
size="small"
|
||||
type="primary"
|
||||
icon="el-icon-download"
|
||||
>本地上传</el-button
|
||||
>
|
||||
<el-button
|
||||
size="small"
|
||||
type="primary"
|
||||
icon="el-icon-download"
|
||||
>批量上传终端</el-button
|
||||
>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-table
|
||||
stripe
|
||||
:data="managementData"
|
||||
:height="vh2"
|
||||
border
|
||||
style="width: 100%"
|
||||
header-cell-class-name="table_header"
|
||||
:header-cell-style="{
|
||||
height: '25px',
|
||||
padding: '0px',
|
||||
}"
|
||||
:row-style="{ height: '28px' }"
|
||||
:cell-style="{ padding: '0px' }"
|
||||
@selection-change="handleSelectionChange"
|
||||
>
|
||||
<el-table-column
|
||||
type="selection"
|
||||
align="center"
|
||||
min-width="50"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
prop="userName"
|
||||
label="名称"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
prop="endTime"
|
||||
label="类型"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
prop="upDataTime"
|
||||
label="大小"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
prop="upDataTime"
|
||||
label="操作"
|
||||
></el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<span class="BOX1">终端目录</span>
|
||||
<el-form ref="form" inline style="float: right">
|
||||
<el-form-item>
|
||||
<el-button
|
||||
size="small"
|
||||
type="primary"
|
||||
icon="el-icon-s-home"
|
||||
>返回根路径</el-button
|
||||
>
|
||||
<el-button
|
||||
size="small"
|
||||
type="primary"
|
||||
icon="el-icon-top"
|
||||
>返回上级</el-button
|
||||
>
|
||||
<el-button
|
||||
size="small"
|
||||
type="primary"
|
||||
icon="el-icon-refresh"
|
||||
>刷新</el-button
|
||||
>
|
||||
<el-button
|
||||
size="small"
|
||||
type="primary"
|
||||
icon="el-icon-download"
|
||||
>批量下载</el-button
|
||||
>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-main>
|
||||
</el-container>
|
||||
<el-dialog
|
||||
:close-on-click-modal="false"
|
||||
title="装置型号选择"
|
||||
:visible.sync="Devicemodel"
|
||||
width="20%"
|
||||
>
|
||||
<el-table
|
||||
stripe
|
||||
:data="DevicemodelData"
|
||||
:height="vh3"
|
||||
border
|
||||
style="width: 100%"
|
||||
header-cell-class-name="table_header"
|
||||
:header-cell-style="{
|
||||
height: '25px',
|
||||
padding: '0px',
|
||||
}"
|
||||
:row-style="{ height: '28px' }"
|
||||
:cell-style="{ padding: '0px' }"
|
||||
@selection-change="handleSelectionChange"
|
||||
>
|
||||
<el-table-column
|
||||
type="selection"
|
||||
align="center"
|
||||
min-width="50"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
prop="desc"
|
||||
label="控制字描述"
|
||||
></el-table-column>
|
||||
</el-table>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary">确定</el-button>
|
||||
<el-button type="primary" @click="Devicemodel = false">取 消</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Muentree from "@/views/components/menuTree/el-tree";
|
||||
// import api from "@/api/harmonic/onlineData";
|
||||
export default {
|
||||
name: "nowmonitoring",
|
||||
components: {
|
||||
Muentree,
|
||||
},
|
||||
watch: {
|
||||
treenode(a, b) {
|
||||
if (a) {
|
||||
this.falg = true;
|
||||
this.falg1 = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
boxoList: {},
|
||||
wp: {},
|
||||
Devicemodel: true,
|
||||
view1: true,
|
||||
view2: false,
|
||||
value: 1,
|
||||
loading: false,
|
||||
treenode: undefined,
|
||||
tablename: 1,
|
||||
vh: null,
|
||||
vh1: null,
|
||||
vh2: null,
|
||||
vh3: null,
|
||||
number: undefined,
|
||||
modifyData: "",
|
||||
id: "",
|
||||
radio1: "1",
|
||||
asideheight: undefined,
|
||||
timeValue: undefined,
|
||||
screenWidth: undefined,
|
||||
screenHeight: undefined,
|
||||
activeName: "dzgl",
|
||||
//title:'',
|
||||
falg: true,
|
||||
falg1: true,
|
||||
view: true,
|
||||
dataTree: [],
|
||||
tabsData: [
|
||||
{
|
||||
label: "定值管理",
|
||||
id: "dzgl",
|
||||
},
|
||||
{
|
||||
label: "文件管理",
|
||||
id: "wjgl",
|
||||
},
|
||||
],
|
||||
treenode: undefined,
|
||||
linelist: [],
|
||||
treedata: [],
|
||||
constantValueData: [{ name: "123", modify: "123" }],
|
||||
DevicemodelData: [{ desc: "电压偏差越限功能退出", }],
|
||||
managementData: [],
|
||||
deptIndex: "",
|
||||
wezhiname: null,
|
||||
ptType: 0,
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
mounted() {
|
||||
|
||||
var info = window.sessionStorage.getItem("Info");
|
||||
info = eval("(" + info + ")");
|
||||
this.deptIndex = info.deptId;
|
||||
this.bindResize();
|
||||
this.setHeight()
|
||||
window.addEventListener('resize', this.setHeight)
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.setHeight)
|
||||
},
|
||||
methods: {
|
||||
setHeight() {
|
||||
this.vh = window.sessionStorage.getItem("appheight") - 10 + "px";
|
||||
this.vh1 = window.sessionStorage.getItem("appheight") - 156 + "px";
|
||||
this.vh2 = window.sessionStorage.getItem("appheight") - 150 + "px";
|
||||
this.vh3 = window.sessionStorage.getItem("appheight") - 250 + "px";
|
||||
|
||||
},
|
||||
changeview() {
|
||||
if (this.view) {
|
||||
this.view = false;
|
||||
} else {
|
||||
this.view = true;
|
||||
}
|
||||
},
|
||||
handleClick(tab, event) {
|
||||
this.checkbox = false;
|
||||
//this.falg = false;
|
||||
},
|
||||
//序号
|
||||
rowClassName({ row, rowIndex }) {
|
||||
row.number = rowIndex + 1;
|
||||
},
|
||||
//复选框
|
||||
handleSelectionChange(val) {
|
||||
//console.log(val);
|
||||
this.multipleSelection = val;
|
||||
},
|
||||
/**
|
||||
* 缩放条拖动进而改变左侧div宽度方法
|
||||
*/
|
||||
bindResize() {
|
||||
/**开始坐标 */
|
||||
let startX;
|
||||
/**开始宽度 */
|
||||
let startWidth = getScalableDivWidth();
|
||||
|
||||
document
|
||||
.querySelector("#drag-dept")
|
||||
.addEventListener("mousedown", startDrag);
|
||||
|
||||
function startDrag(e) {
|
||||
startX = e.clientX;
|
||||
startWidth = getScalableDivWidth();
|
||||
|
||||
document.documentElement.addEventListener("mousemove", onDrag);
|
||||
document.documentElement.addEventListener("mouseup", stopDrag);
|
||||
}
|
||||
|
||||
function onDrag(e) {
|
||||
let newWidth = startWidth + e.clientX - startX;
|
||||
document.querySelector("#drag-dept-left").style.width = newWidth + "px";
|
||||
}
|
||||
|
||||
function stopDrag() {
|
||||
document.documentElement.removeEventListener("mousemove", onDrag);
|
||||
document.documentElement.removeEventListener("mouseup", stopDrag);
|
||||
}
|
||||
|
||||
/**获取宽度 */
|
||||
function getScalableDivWidth() {
|
||||
return parseInt(
|
||||
window.getComputedStyle(document.querySelector("#drag-dept-left"))
|
||||
.width,
|
||||
10
|
||||
);
|
||||
}
|
||||
},
|
||||
//初始化树节点默认点击
|
||||
chushiData(id, data) {
|
||||
this.id = id;
|
||||
window.sessionStorage.setItem("nodeid", id);
|
||||
this.linelist.push(id);
|
||||
this.treedata = data;
|
||||
this.wezhiname =
|
||||
data[0].children[0].name +
|
||||
">" +
|
||||
data[0].children[0].children[0].name +
|
||||
">" +
|
||||
data[0].children[0].children[0].children[0].name +
|
||||
">" +
|
||||
data[0].children[0].children[0].children[0].children[0].name;
|
||||
},
|
||||
//二次点击触发点击事件
|
||||
getTreeText(menudata, treenode, nodeCom, id) {
|
||||
// console.log(menudata, treenode, nodeCom, id);
|
||||
if (treenode.data.level == 6) {
|
||||
// console.log('点击',treenode,nodeCom,menudata)
|
||||
// console.log('数据',menudata.ptType)
|
||||
// this.ptType = menudata.ptType;
|
||||
// this.menudata = menudata;
|
||||
this.treenode = treenode;
|
||||
this.id = id;
|
||||
this.linelist = [];
|
||||
this.linelist.push(id);
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
},
|
||||
//获取5层树
|
||||
fiveTreeData() {
|
||||
var data = {
|
||||
deptIndex: this.deptIndex,
|
||||
monitorFlag: 2,
|
||||
powerFlag: 2,
|
||||
loadType: null,
|
||||
manufacturer: null,
|
||||
serverName: "harmonic-boot",
|
||||
statisticalType: "",
|
||||
scale: null,
|
||||
};
|
||||
api.getTerminalTreeForFive(data).then((res) => {
|
||||
if (res.code === "A0000") {
|
||||
res.data.forEach((m) => {
|
||||
m.icon = "el-icon-s-data";
|
||||
m.children.forEach((n) => {
|
||||
n.icon = "el-icon-delete";
|
||||
n.children.forEach((d) => {
|
||||
d.icon = "el-icon-user";
|
||||
d.children.forEach((f) => {
|
||||
f.icon = "el-icon-warning";
|
||||
f.children.forEach((e) => {
|
||||
e.icon = "el-icon-phone-outline";
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
this.treedata = res.data;
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
::v-deep .el-dialog .el-dialog__body {
|
||||
max-height: 100vh;
|
||||
min-height: 150px;
|
||||
padding: 10px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
::v-deep .el-table__header-wrapper .el-checkbox {
|
||||
// display: none;//设置不成功，页面卡顿
|
||||
visibility: hidden;
|
||||
}
|
||||
.BOX {
|
||||
height: 24px;
|
||||
// padding: 0 40px 0 20px;
|
||||
overflow: hidden;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
line-height: 24px;
|
||||
color: #003078;
|
||||
}
|
||||
.BOX1 {
|
||||
height: 24px;
|
||||
// padding: 0 40px 0 20px;
|
||||
overflow: hidden;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
line-height: 42px;
|
||||
color: #003078;
|
||||
}
|
||||
::v-deep.wzhixx {
|
||||
position: fixed;
|
||||
width: 400px;
|
||||
z-index: 1;
|
||||
font-size: 14px;
|
||||
font-weight: 550;
|
||||
margin-top: 10px;
|
||||
right: 15px;
|
||||
}
|
||||
// ::v-deep.boxd {
|
||||
// height: auto;
|
||||
// overflow: hidden;
|
||||
// } //自适应高度
|
||||
::v-deep .table {
|
||||
.el-input {
|
||||
width: 150px;
|
||||
}
|
||||
}
|
||||
::v-deep.animate {
|
||||
padding-left: 20px;
|
||||
font-size: 12px;
|
||||
color: #000;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
animation: 10s wordsLoop linear infinite normal;
|
||||
}
|
||||
::v-deep .el-radio-button--small .el-radio-button__inner {
|
||||
width: 342px;
|
||||
}
|
||||
|
||||
@keyframes wordsLoop {
|
||||
0% {
|
||||
transform: translateX(100%);
|
||||
-webkit-transform: translateX(100%);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(-100%);
|
||||
-webkit-transform: translateX(-100%);
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes wordsLoop {
|
||||
0% {
|
||||
transform: translateX(100%);
|
||||
-webkit-transform: translateX(100%);
|
||||
}
|
||||
100% {
|
||||
transform: translateX(-100%);
|
||||
-webkit-transform: translateX(-100%);
|
||||
}
|
||||
}
|
||||
|
||||
::v-deep.zt {
|
||||
color: $themeColor;
|
||||
}
|
||||
</style>
|
||||
<style lang="less" scoped>
|
||||
@import url("../../../styles/comStyle.less");
|
||||
::v-deep .el-tabs--border-card > .el-tabs__content {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
#drag-dept-left {
|
||||
min-width: 220px;
|
||||
max-width: 35%;
|
||||
}
|
||||
::v-deep .el-aside {
|
||||
overflow: hidden !important;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
-ms-flex-negative: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/**拖拽条样式 */
|
||||
#drag-dept {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
top: 10;
|
||||
right: 0;
|
||||
width: 5px;
|
||||
background: #868788;
|
||||
background-color: #04607c2a;
|
||||
box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.35);
|
||||
cursor: col-resize;
|
||||
}
|
||||
|
||||
#drag-dept i {
|
||||
display: inline-block;
|
||||
height: 14px;
|
||||
width: 5px;
|
||||
background-color: #e9e9e9;
|
||||
margin: 0 1px;
|
||||
}
|
||||
|
||||
::v-deep .el-table--scrollable-x .el-table__body-wrapper {
|
||||
overflow-x: auto;
|
||||
cursor: pointer;
|
||||
}
|
||||
::v-deep .el-tabs__nav {
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
-webkit-transition: -webkit-transform 0.3s;
|
||||
transition: -webkit-transform 0.3s;
|
||||
transition: transform 0.3s;
|
||||
transition: transform 0.3s, -webkit-transform 0.3s;
|
||||
transition: transform 0.3s, -webkit-transform 0.3s;
|
||||
float: left;
|
||||
z-index: 2;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,844 @@
|
||||
<template>
|
||||
<!-- 使用 useVirtual 属性开启虚拟滚动 使用虚拟滚动时，必须要固定表格高度和行高 -->
|
||||
<div class="pd10">
|
||||
<!-- 程序升级管理 -->
|
||||
<el-form :inline="true" :model="formInline" class="demo-form-inline">
|
||||
<el-form-item label="终端型号:">
|
||||
<el-select v-model="formInline.teriminal" placeholder="请选择终端型号">
|
||||
<el-option
|
||||
v-for="item in teriminaloption"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="终端状态:">
|
||||
<el-select
|
||||
v-model="formInline.teriminalstatus"
|
||||
placeholder="请选择终端状态"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in teriminalstatusoption"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="通讯状态:">
|
||||
<el-select v-model="formInline.state" placeholder="请选择通讯状态">
|
||||
<el-option
|
||||
v-for="item in stateoption"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="程序版本:">
|
||||
<el-select v-model="formInline.program" placeholder="请选择程序版本">
|
||||
<el-option
|
||||
v-for="item in programoption"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" @click="getList"
|
||||
>查询</el-button
|
||||
>
|
||||
<el-button type="primary" icon="el-icon-download">导出</el-button>
|
||||
<el-button type="primary" icon="el-icon-check">批量升级</el-button>
|
||||
<!-- <el-button @click="$refs.plTreeTable.setAllTreeExpansion()"
|
||||
>展开全部</el-button
|
||||
> -->
|
||||
<!-- <el-button @click="$refs.plTreeTable.clearTreeExpand()"
|
||||
>关闭所有</el-button
|
||||
> -->
|
||||
</el-form-item>
|
||||
<el-form-item label="筛选:">
|
||||
<el-input v-model="formInline.search" placeholder="输入关键字筛选" />
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<!--我是pl-table大数据树形表格 必须指定 row-key 必须开启use-virtual-->
|
||||
<!-- <div :style="`height:${vh}px; overflow: hidden;`"> -->
|
||||
<!-- <el-input v-model="ssbsearch" @input="filert" clearable @clear="clear" size="" placeholder="根据省级,市区,变电站进线筛选" style="width:30%;margin-left:20px"></el-input> -->
|
||||
<u-table
|
||||
stripe
|
||||
ref="plTreeTable"
|
||||
header-cell-class-name="table_header"
|
||||
highlight-current-row
|
||||
element-loading-text="数据加载中"
|
||||
fixed-columns-roll
|
||||
:data="treeTable"
|
||||
:row-height="rowHeight"
|
||||
:height="vh"
|
||||
:treeConfig="{
|
||||
children: 'children',
|
||||
iconClose: 'el-icon-arrow-right',
|
||||
iconOpen: 'el-icon-arrow-down',
|
||||
expandAll: true,
|
||||
}"
|
||||
v-loading="loading"
|
||||
@toggle-trand="toggleTreeExpand"
|
||||
use-virtual
|
||||
row-id="id"
|
||||
:row-config="{ isCurrent: true, isHover: true }"
|
||||
border
|
||||
>
|
||||
<!-- beautify-table
|
||||
header-drag-style -->
|
||||
<!--u-table大数据表格 你需要在列上指定某个列显示展开收起 treeNode属性-->
|
||||
<u-table-column
|
||||
prop="name"
|
||||
label="电网拓扑"
|
||||
:treeNode="true"
|
||||
min-width="150"
|
||||
:showOverflowTooltip="true"
|
||||
:show-overflow-tooltip="true"
|
||||
></u-table-column>
|
||||
<u-table-column
|
||||
prop="devType"
|
||||
label="终端型号"
|
||||
align="center"
|
||||
:formatter="formFilter"
|
||||
:showOverflowTooltip="true"
|
||||
:show-overflow-tooltip="true"
|
||||
></u-table-column>
|
||||
<u-table-column
|
||||
prop="versionName"
|
||||
label="版本号"
|
||||
align="center"
|
||||
></u-table-column>
|
||||
<u-table-column
|
||||
prop="protocol"
|
||||
label="协议版本"
|
||||
align="center"
|
||||
></u-table-column>
|
||||
<u-table-column
|
||||
prop="versionDate"
|
||||
label="版本日期"
|
||||
align="center"
|
||||
></u-table-column>
|
||||
<u-table-column prop="runFlag" label="终端状态" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-tag
|
||||
type="primary"
|
||||
v-if="scope.row.runFlag === 0"
|
||||
style="color: #fff; background: #0099cc"
|
||||
size="small"
|
||||
>投运</el-tag
|
||||
>
|
||||
<el-tag
|
||||
type="primary"
|
||||
v-if="scope.row.runFlag === 1"
|
||||
style="color: #fff; background: #996600"
|
||||
size="small"
|
||||
>热备用</el-tag
|
||||
>
|
||||
<el-tag
|
||||
type="primary"
|
||||
v-if="scope.row.runFlag === 2"
|
||||
style="color: #fff; background: #cc0000"
|
||||
size="small"
|
||||
>停运</el-tag
|
||||
>
|
||||
</template>
|
||||
</u-table-column>
|
||||
<u-table-column prop="comFlag" label="通讯状态" align="center">
|
||||
<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>
|
||||
</u-table-column>
|
||||
<u-table-column
|
||||
prop="updateUser"
|
||||
label="升级人员"
|
||||
align="center"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<!-- <span>{{ scope.row.updateBy!==null? scope.row.updateBy:'--'}}</span> -->
|
||||
<span v-if="scope.row.updateBy==null">--</span>
|
||||
<span v-if="scope.row.updateBy='/'">--</span>
|
||||
<!-- <span v-if="scope.row.updateBy !==null">{{ scope.row.updateBy }}</span> -->
|
||||
</template>
|
||||
</u-table-column>
|
||||
<u-table-column
|
||||
prop="updateTime"
|
||||
label="最新升级时间"
|
||||
align="center"
|
||||
></u-table-column>
|
||||
<u-table-column align="center" width="220" label="操作">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
v-if="scope.row.level == 4"
|
||||
type="primary"
|
||||
size="mini" icon="el-icon-finished"
|
||||
@click="updateprogram(scope.row)"
|
||||
>升级</el-button
|
||||
>
|
||||
<el-button
|
||||
v-if="scope.row.level == 4"
|
||||
:disabled="scope.row.state == 1 ? true : false"
|
||||
type="primary"
|
||||
size="mini" icon="el-icon-view"
|
||||
@click="queryview(scope.row)"
|
||||
>日志查看</el-button
|
||||
>
|
||||
</template>
|
||||
</u-table-column>
|
||||
<!-- <u-table-column align="center"
|
||||
v-for="item in columns"
|
||||
:key="item.id"
|
||||
:prop="item.prop"
|
||||
:label="item.label"
|
||||
:min-width="item.width"/>-->
|
||||
</u-table>
|
||||
|
||||
<!--升级日志查看-->
|
||||
<el-dialog
|
||||
:close-on-click-modal="false"
|
||||
:title="title + '#终端升级日志查看'"
|
||||
:visible.sync="dialogVisible"
|
||||
width="70%"
|
||||
class="eldialot"
|
||||
:before-close="handleClose"
|
||||
>
|
||||
<el-table
|
||||
stripe
|
||||
:data="logtableData"
|
||||
header-cell-class-name="table_header"
|
||||
border
|
||||
:height="height"
|
||||
style="width: 100%"
|
||||
highlight-current-row
|
||||
>
|
||||
<el-table-column
|
||||
prop="devTypeName"
|
||||
align="center"
|
||||
label="装置序号"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="versionId"
|
||||
align="center"
|
||||
label="版本序号"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="flag"
|
||||
align="center"
|
||||
label="版本状态"
|
||||
width="100"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-tag
|
||||
type="primary"
|
||||
v-if="scope.row.flag == true"
|
||||
style="color: #fff; background: #fc0"
|
||||
>前期版本</el-tag
|
||||
>
|
||||
<el-tag
|
||||
type="primary"
|
||||
v-if="scope.row.flag == false"
|
||||
style="color: #fff; background: #0c0"
|
||||
>当前版本</el-tag
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="result"
|
||||
align="center"
|
||||
label="升级结果"
|
||||
width="100"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-tag
|
||||
type="primary"
|
||||
v-if="scope.row.result == false"
|
||||
style="color: #fff; background: #f30"
|
||||
>升级失败</el-tag
|
||||
>
|
||||
<el-tag
|
||||
type="primary"
|
||||
v-if="scope.row.result == true"
|
||||
style="color: #fff; background: #093"
|
||||
>升级成功</el-tag
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="state" align="center" label="状态" width="100">
|
||||
<template slot-scope="scope">
|
||||
<el-tag
|
||||
type="primary"
|
||||
v-if="scope.row.state == false"
|
||||
style="color: #fff; background: #f30"
|
||||
>删除</el-tag
|
||||
>
|
||||
<el-tag
|
||||
type="primary"
|
||||
v-if="scope.row.state == true"
|
||||
style="color: #fff; background: #093"
|
||||
>正常</el-tag
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="createBy"
|
||||
align="center"
|
||||
label="创建用户"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="createTime"
|
||||
align="center"
|
||||
label="创建时间"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="updateTime"
|
||||
align="center"
|
||||
label="升级时间"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="updateBy"
|
||||
align="center"
|
||||
label="升级人员"
|
||||
>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-dialog>
|
||||
<!--升级弹窗-->
|
||||
<el-dialog
|
||||
:close-on-click-modal="false"
|
||||
:title="protitle + '#终端程序升级'"
|
||||
:visible.sync="prodialogVisible"
|
||||
width="40%"
|
||||
:before-close="handleClose"
|
||||
>
|
||||
<el-col v-for="(item, index) in percentageoption" :key="index">
|
||||
<span style="font-size: 14px; font-weight: bold">{{ item.name }}</span
|
||||
>:
|
||||
<el-progress
|
||||
:text-inside="true"
|
||||
:stroke-width="24"
|
||||
:percentage="item.percentage"
|
||||
:status="item.status"
|
||||
:format="format"
|
||||
></el-progress>
|
||||
</el-col>
|
||||
</el-dialog>
|
||||
</div>
|
||||
<!-- </div> -->
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import version from "@/api/device/version.js";
|
||||
import { dicData } from "@/assets/commjs/dictypeData";
|
||||
// 下面是关于pl-table的树形数据的介绍，希望读完下面的文字
|
||||
|
||||
// （最大数量500）当然你可以更多，那么只会导致你遍历时间多，页面等待时间长，（并非渲染节点时间长）
|
||||
// 另外 就以下的这个层级，总数据量展开后，就是 500 + 500 x 3 + 3 x 1 = 2003 的总数据量
|
||||
// 如果你 第一级是500， 第二级也是500， 第三级是10。 那么你的数据量就是 500 + 500 x 500 + 500 x 10 的总数据量，这是非常吓人的
|
||||
// 所以结合自己情况去给树数据，不要瞎乱给下面的数据，树节点避免不鸟去递归，如果你的数据量很大很大，那么你会死在遍历上。
|
||||
// 注意,注意，注意：并非第一级不能超过500，是想告诉你们嵌套里面子节点层级数据量不要太大。比如你可这样的： 第一级为1000， 第二级为2-5的数据量，
|
||||
// 第三级为2-5的数据量....， 那么这样算下来，就是 1000 + 1000 x 5 + 5 x 5 = 6025的数据量，应该是可以的，但是记住要是太大的嵌套数据。那只会导致
|
||||
// 程序卡在遍历数据上，因为程序需要慢慢去递归遍历。这是没有办法的。
|
||||
|
||||
// 但是传统el-table 或者el-tree他们数据量超过200 就会卡。 所以我们已经很好的优化了这一点。不过看来对于树形数据的要求，应该数据量不会太大。
|
||||
// 你可以在pl-table的基础上去改改样式，就可以变相的去实现el-tree的组件了哦，你隐藏下头部，把行的高度给小一点。然后隐形边框线。是不是就是el-tree了呢？？？
|
||||
|
||||
var shuju = [];
|
||||
export default {
|
||||
name: "home",
|
||||
data() {
|
||||
return {
|
||||
formInline: {},
|
||||
title: "",
|
||||
protitle: "",
|
||||
ssbsearch: "",
|
||||
rowHeight: 20,
|
||||
search: "",
|
||||
expandRow: [],
|
||||
columns: [
|
||||
// {
|
||||
// id:'0',
|
||||
// prop: "name",
|
||||
// label: "电网拓扑",
|
||||
// width: 120,
|
||||
// treeNode: true,
|
||||
// showOverflowTooltip: true,
|
||||
// },
|
||||
{
|
||||
id: "1",
|
||||
prop: "devType",
|
||||
label: "终端型号",
|
||||
width: 100,
|
||||
showOverflowTooltip: true,
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
prop: "versionName",
|
||||
label: "版本号",
|
||||
width: 230,
|
||||
showOverflowTooltip: true,
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
prop: "protocol",
|
||||
label: "协议版本",
|
||||
width: 100,
|
||||
showOverflowTooltip: true,
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
prop: "versionDate",
|
||||
label: "版本日期",
|
||||
width: 100,
|
||||
showOverflowTooltip: true,
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
prop: "runFlag",
|
||||
label: "终端状态",
|
||||
width: 100,
|
||||
showOverflowTooltip: true,
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
prop: "comFlag",
|
||||
label: "通讯状态",
|
||||
width: 100,
|
||||
showOverflowTooltip: true,
|
||||
},
|
||||
{
|
||||
id: "7",
|
||||
prop: "updateUser",
|
||||
label: "升级人员",
|
||||
width: 100,
|
||||
showOverflowTooltip: true,
|
||||
},
|
||||
{
|
||||
id: "8",
|
||||
prop: "updateTime",
|
||||
label: "最新升级时间",
|
||||
width: 100,
|
||||
showOverflowTooltip: true,
|
||||
},
|
||||
],
|
||||
top: 0,
|
||||
height: "",
|
||||
vh: undefined,
|
||||
pageForm: {
|
||||
total: 1000,
|
||||
pageSize: 10,
|
||||
currentPage: 1,
|
||||
},
|
||||
tableData: shuju,
|
||||
//终端型号
|
||||
teriminal: "",
|
||||
teriminaloption: [],
|
||||
//终端状态
|
||||
teriminalstatus: "",
|
||||
teriminalstatusoption: [
|
||||
{ name: "全部", id: "" },
|
||||
{ name: "投运", id: 0 },
|
||||
{ name: "热备用", id: 1 },
|
||||
{ name: "停运", id: 2 },
|
||||
],
|
||||
//通讯状态
|
||||
state: "",
|
||||
stateoption: [
|
||||
{ name: "全部", id: "" },
|
||||
{ name: "正常", id: 1 },
|
||||
{ name: "中断", id: 0 },
|
||||
],
|
||||
//程序版本
|
||||
program: "",
|
||||
programoption: [],
|
||||
//弹窗列表
|
||||
logtableData: [],
|
||||
status: "",
|
||||
//进度条对象
|
||||
percentageoption: [
|
||||
{
|
||||
name: "1号测试终端",
|
||||
status: "exception",
|
||||
percentage: 20,
|
||||
},
|
||||
{
|
||||
name: "2号测试终端",
|
||||
status: "warning",
|
||||
percentage: 50,
|
||||
},
|
||||
{
|
||||
name: "3号测试终端",
|
||||
status: "success",
|
||||
percentage: 90,
|
||||
},
|
||||
],
|
||||
loading: false,
|
||||
dialogVisible: false,
|
||||
prodialogVisible: false,
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
treeTable: function () {
|
||||
var searchValue = this.formInline.search;
|
||||
if (searchValue) {
|
||||
// 一般表格的查询
|
||||
// return this.tableData.filter(function(dataNews){
|
||||
// return Object.keys(dataNews).some(function(key){
|
||||
// return String(dataNews[key]).toLowerCase().indexOf(search) > -1
|
||||
// })
|
||||
// }
|
||||
let treeData = this.tableData;
|
||||
let handleTreeData = this.handleTreeData(treeData, searchValue);
|
||||
this.setExpandRow(handleTreeData);
|
||||
this.expandRow = this.expandRow.join(",").split(",");
|
||||
return handleTreeData;
|
||||
}
|
||||
return this.tableData;
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.getDevType();
|
||||
this.getList();
|
||||
},
|
||||
mounted() {
|
||||
|
||||
// 设置表格数据
|
||||
|
||||
// this.$nextTick(() => {
|
||||
this.setHeight()
|
||||
window.addEventListener('resize', this.setHeight)
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.setHeight)
|
||||
},
|
||||
methods: {
|
||||
setHeight() {
|
||||
this.vh = window.sessionStorage.getItem("appheight") - 55;
|
||||
this.height = window.sessionStorage.getItem("appheight") - 230;
|
||||
|
||||
},
|
||||
formFilter(row, column) {
|
||||
///console.log("++++++++++++++++++++++++=",row)
|
||||
let title = ''
|
||||
dicData("Dev_Type", []).forEach((item) => {
|
||||
if(row.devType != null ){
|
||||
if (item.id == row.devType) {
|
||||
title = item.name;
|
||||
}
|
||||
}else{
|
||||
title = '/';
|
||||
}
|
||||
|
||||
});
|
||||
return title;
|
||||
|
||||
},
|
||||
filterNode(value, data, node) {
|
||||
if (!value) {
|
||||
return true;
|
||||
}
|
||||
let _array = []; //这里使用数组存储 只是为了存储值。
|
||||
this.getReturnNode(node, _array, value);
|
||||
let result = false;
|
||||
_array.forEach((item) => {
|
||||
result = result || item;
|
||||
});
|
||||
return result;
|
||||
},
|
||||
getReturnNode(node, _array, value) {
|
||||
let isPass =
|
||||
node.data && node.data.name && node.data.name.indexOf(value) !== -1;
|
||||
isPass ? _array.push(isPass) : "";
|
||||
this.index++;
|
||||
if (!isPass && node.name != 1 && node.parent) {
|
||||
this.getReturnNode(node.parent, _array, value);
|
||||
}
|
||||
},
|
||||
//获取所有终端型号
|
||||
getDevType() {
|
||||
var code = "Dev_Type";
|
||||
this.teriminaloption = dicData(code, [], 1);
|
||||
},
|
||||
selectAll(val) {
|
||||
// <!-- console.log(val); -->
|
||||
},
|
||||
selectable(row, index) {
|
||||
if (index === 1) {
|
||||
return false;
|
||||
} else {
|
||||
// console.log(row, index);
|
||||
|
||||
return true;
|
||||
}
|
||||
},
|
||||
// 合计
|
||||
summaryMethod({ columns, data }) {
|
||||
// 平均值算法（不需要自己去掉）
|
||||
function cacl(arr, callback) {
|
||||
let ret;
|
||||
for (let i = 0; i < arr.length; i++) {
|
||||
ret = callback(arr[i], ret);
|
||||
}
|
||||
return ret;
|
||||
}
|
||||
// 平均值算法（不需要自己去掉）
|
||||
Array.prototype.sum = function () {
|
||||
return cacl(this, function (item, sum) {
|
||||
if (typeof sum == "undefined") {
|
||||
return item;
|
||||
} else {
|
||||
return (sum += item);
|
||||
}
|
||||
});
|
||||
};
|
||||
// 平均值算法（不需要自己去掉）
|
||||
Array.prototype.avg = function () {
|
||||
if (this.length == 0) {
|
||||
return 0;
|
||||
}
|
||||
return this.sum(this) / this.length;
|
||||
};
|
||||
const means = []; // 合计
|
||||
const fenceSums = []; // 平均值
|
||||
columns.forEach((column, columnIndex) => {
|
||||
if (columnIndex === 0) {
|
||||
means.push("合计");
|
||||
fenceSums.push("平均值");
|
||||
} else {
|
||||
const values = data.map((item) => Number(item[column.property]));
|
||||
// 合计
|
||||
if (!values.every((value) => isNaN(value))) {
|
||||
means[columnIndex] = values.reduce((prev, curr) => {
|
||||
const value = Number(curr);
|
||||
if (!isNaN(value)) {
|
||||
return prev + curr;
|
||||
} else {
|
||||
return prev;
|
||||
}
|
||||
}, 0);
|
||||
// means[columnIndex] += ' 元'
|
||||
// 改变了ele的合计方式，扩展了合计场景
|
||||
// 你以为就只有上面这样玩吗？错啦，你还可以自定义样式哦
|
||||
// means[columnIndex] = '<span style="color: red">' + means[columnIndex] + '元</span>'
|
||||
means[columnIndex] =
|
||||
'<span style="color: red">' +
|
||||
means[columnIndex] +
|
||||
"元</span><br/><span>123</span>";
|
||||
} else {
|
||||
means[columnIndex] = "";
|
||||
}
|
||||
// 平均值
|
||||
const precisions = [];
|
||||
let notNumber = true;
|
||||
values.forEach((value) => {
|
||||
if (!isNaN(value)) {
|
||||
notNumber = false;
|
||||
let decimal = ("" + value).split(".")[1];
|
||||
precisions.push(decimal ? decimal.length : 0);
|
||||
}
|
||||
});
|
||||
if (!notNumber) {
|
||||
fenceSums[columnIndex] = values.avg();
|
||||
} else {
|
||||
fenceSums[columnIndex] = "";
|
||||
}
|
||||
}
|
||||
});
|
||||
// 返回一个二维数组的表尾合计
|
||||
return [means, fenceSums];
|
||||
},
|
||||
setHei(val) {
|
||||
this.height = val;
|
||||
},
|
||||
tableBodyScroll({ scrollTop }) {
|
||||
this.top = scrollTop;
|
||||
},
|
||||
allSelection() {
|
||||
this.$refs.plTable.toggleAllSelection();
|
||||
},
|
||||
clearSelection() {
|
||||
this.$refs.plTable.clearSelection();
|
||||
this.$refs.plTable2.clearSelection();
|
||||
},
|
||||
setData(num) {
|
||||
this.data.tableData = Array.from({ length: num }, (_, idx) => ({
|
||||
id: idx + 1,
|
||||
date: "2016-05-03",
|
||||
name: 1,
|
||||
ab: "欢迎使用pl-table",
|
||||
address: 1 + idx,
|
||||
}));
|
||||
},
|
||||
scrollBottom() {
|
||||
this.$refs.plTable.scrollBottom();
|
||||
},
|
||||
pagingScrollTopLeft(val) {
|
||||
this.$refs.plTable.pagingScrollTopLeft(val, 0);
|
||||
},
|
||||
// 分页事件
|
||||
handlePageSize({ page, size }) {
|
||||
// console.log(page, size);
|
||||
},
|
||||
// 获取已经展开的节点
|
||||
getTreeExpansionEvent() {
|
||||
// console.log(this.$refs.plTreeTable.getTreeExpandRecords());
|
||||
},
|
||||
// 树形表格过滤
|
||||
handleTreeData(treeData, searchValue) {
|
||||
// debugger
|
||||
if (!treeData || treeData.length === 0) {
|
||||
return [];
|
||||
}
|
||||
const array = [];
|
||||
for (let i = 0; i < treeData.length; i += 1) {
|
||||
let match = false;
|
||||
for (let pro in treeData[i]) {
|
||||
if (typeof treeData[i][pro] == "string") {
|
||||
match = treeData[i][pro].includes(searchValue);
|
||||
if (match) break;
|
||||
}
|
||||
}
|
||||
|
||||
if (
|
||||
this.handleTreeData(treeData[i].children, searchValue).length > 0 ||
|
||||
match
|
||||
) {
|
||||
array.push({
|
||||
...treeData[i],
|
||||
children: this.handleTreeData(treeData[i].children, searchValue),
|
||||
});
|
||||
}
|
||||
}
|
||||
return array;
|
||||
},
|
||||
toggleTreeExpand() {},
|
||||
// 将过滤好的树形数据展开
|
||||
setExpandRow(handleTreeData) {
|
||||
if (handleTreeData.length) {
|
||||
for (let i of handleTreeData) {
|
||||
this.expandRow.push(i.id);
|
||||
if (i.children.length) {
|
||||
this.setExpandRow(i.children);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
selected(row, index) {
|
||||
if (row.level !== 4) {
|
||||
return false; //不可勾选
|
||||
} else {
|
||||
return true; //可勾选
|
||||
}
|
||||
},
|
||||
//日志查看
|
||||
queryview(row) {
|
||||
this.title = row.name;
|
||||
this.dialogVisible = true;
|
||||
let data = {
|
||||
id: row.id,
|
||||
};
|
||||
version.getTerminalUpLog(data).then((res) => {
|
||||
this.logtableData = res.data;
|
||||
});
|
||||
},
|
||||
//关闭弹窗
|
||||
handleClose() {
|
||||
this.dialogVisible = false;
|
||||
this.prodialogVisible = false;
|
||||
},
|
||||
//升级操作
|
||||
updateprogram(row) {
|
||||
this.protitle = row.name;
|
||||
this.prodialogVisible = true;
|
||||
},
|
||||
format(percentage) {
|
||||
if (percentage <= 100 && percentage >= 90) {
|
||||
this.status = "success";
|
||||
return percentage === 100 ? "升级成功" : `${percentage}%`;
|
||||
} else if (percentage > 0 && percentage < 50) {
|
||||
this.status = "exception";
|
||||
return percentage <= 20
|
||||
? "升级失败" + percentage + "%"
|
||||
: `${percentage}%`;
|
||||
} else if (percentage > 0 && percentage <= 50) {
|
||||
this.status = "warning";
|
||||
return percentage <= 50 ? "升级中断" : `${percentage}%`;
|
||||
}
|
||||
},
|
||||
//批量操作
|
||||
handleSelectionChange(val) {
|
||||
// console.log(val);
|
||||
},
|
||||
//查看主列表
|
||||
getList() {
|
||||
let a = new Date().getTime();
|
||||
let data = {
|
||||
comFlag: this.formInline.state,
|
||||
runFlag: this.formInline.teriminalstatus,
|
||||
devType: this.formInline.teriminal,
|
||||
version: this.formInline.program,
|
||||
};
|
||||
this.loading = true;
|
||||
version.getList(data).then((response) => {
|
||||
if (response.code === "A0000") {
|
||||
this.filertData = JSON.parse(JSON.stringify(response.data));
|
||||
this.treeData = JSON.parse(JSON.stringify(response.data));
|
||||
this.treeData2 = JSON.parse(JSON.stringify(this.treeData));
|
||||
this.treeData3 = JSON.parse(JSON.stringify(this.treeData));
|
||||
this.treeData4 = JSON.parse(JSON.stringify(this.treeData));
|
||||
var data = response.data;
|
||||
|
||||
this.tableData = data;
|
||||
this.loading = false;
|
||||
// this.$refs.plTreeTable.reloadData(data)
|
||||
}
|
||||
});
|
||||
|
||||
// this.tableData = response.data
|
||||
},
|
||||
},
|
||||
};
|
||||
</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;
|
||||
}
|
||||
::v-deep .el-select {
|
||||
width: 150px;
|
||||
}
|
||||
// ::v-deep .plTableBox .el-table td,
|
||||
// .plTableBox .el-table th.is-leaf {
|
||||
// border: 1px solid #ece9e9;
|
||||
// border-bottom: 1px solid #023630;
|
||||
// }
|
||||
// ::v-deep .plTableBox .el-table--small th {
|
||||
// padding: 8px 0;
|
||||
// border: 1px solid #012920;
|
||||
// }
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,547 @@
|
||||
<template>
|
||||
<div class="pd10">
|
||||
<!-- 评分管理 -->
|
||||
<el-form :inline="true" :model="formInline" class="demo-form-inline">
|
||||
<el-form-item label="监测点:">
|
||||
<el-select
|
||||
v-model="formInline.lineGrade"
|
||||
placeholder="请选择监测点等级"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in lineGradeList"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="通讯状态:">
|
||||
<el-select v-model="formInline.comFlag" placeholder="请选择通讯状态">
|
||||
<el-option
|
||||
v-for="item in statusList"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="数据筛选:">
|
||||
<el-input
|
||||
v-model="formInline.searchValue"
|
||||
placeholder="请选择筛选数据"
|
||||
:clearable="true"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="query" icon="el-icon-search"
|
||||
>查询</el-button
|
||||
>
|
||||
<el-button type="primary" @click="exportCsv" icon="el-icon-download"
|
||||
>导出模板</el-button
|
||||
>
|
||||
|
||||
<el-button type="primary" @click="exportData" icon="el-icon-download"
|
||||
>导出</el-button
|
||||
>
|
||||
<!-- <el-button type="primary" @click="importData"
|
||||
icon="el-icon-top" >批量导入监测点评级</el-button
|
||||
> -->
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-upload
|
||||
class="upload-demo"
|
||||
ref="upload"
|
||||
action="#"
|
||||
:http-request="upload"
|
||||
:on-preview="handlePreview"
|
||||
:on-remove="handleRemove"
|
||||
:before-remove="beforeRemove"
|
||||
:limit="1"
|
||||
accept=".xlsx,.xls"
|
||||
:on-exceed="handleExceed"
|
||||
>
|
||||
<el-button size="small" icon="el-icon-top" type="primary"
|
||||
>批量导入监测点评级</el-button
|
||||
>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-row>
|
||||
<el-table
|
||||
stripe
|
||||
v-loading="loading"
|
||||
:data="tableData"
|
||||
border
|
||||
:height="vh"
|
||||
style="width: 100%"
|
||||
header-cell-class-name="table_header"
|
||||
highlight-current-row
|
||||
>
|
||||
<el-table-column
|
||||
align="center"
|
||||
prop="index"
|
||||
type="index"
|
||||
label="序号"
|
||||
width="70"
|
||||
>
|
||||
<template scope="scope">
|
||||
<span>{{
|
||||
(formInline.pageNum - 1) * formInline.pageSize + scope.$index + 1
|
||||
}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
prop="province"
|
||||
label="省份"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
prop="gdName"
|
||||
label="供电公司"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
prop="subName"
|
||||
label="所属变电站"
|
||||
:show-overflow-tooltip="true"
|
||||
width="350"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
prop="devName"
|
||||
label="装置名称"
|
||||
:show-overflow-tooltip="true"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
:show-overflow-tooltip="true"
|
||||
prop="lineName"
|
||||
label="监测点名称"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
prop="comFlag"
|
||||
label="通讯状态"
|
||||
width="100"
|
||||
>
|
||||
<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="runFlag"
|
||||
label="运行状态"
|
||||
width="100"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-tag
|
||||
type="primary"
|
||||
v-if="scope.row.runFlag === 0"
|
||||
style="color: #fff; background: #0099cc"
|
||||
size="small"
|
||||
>投运</el-tag
|
||||
>
|
||||
<el-tag
|
||||
type="primary"
|
||||
v-if="scope.row.runFlag === 1"
|
||||
style="color: #fff; background: #996600"
|
||||
size="small"
|
||||
>热备用</el-tag
|
||||
>
|
||||
<el-tag
|
||||
type="primary"
|
||||
v-if="scope.row.runFlag === 2"
|
||||
style="color: #fff; background: #cc0000"
|
||||
size="small"
|
||||
>停运</el-tag
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
prop="updateTime"
|
||||
label="数据更新时间"
|
||||
:show-overflow-tooltip="true"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
prop="lineGrade"
|
||||
label="监测点评级"
|
||||
width="120"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="操作" width="180">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="deilallData(scope.row)"
|
||||
size="mini"
|
||||
class="el-icon-edit"
|
||||
>修改评级</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
background
|
||||
class="mt10"
|
||||
align="right"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="formInline.pageNum"
|
||||
:page-sizes="[20, 30, 40, 50, 100]"
|
||||
:page-size="formInline.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
>
|
||||
</el-pagination>
|
||||
|
||||
<el-dialog
|
||||
:close-on-click-modal="false"
|
||||
title="修改评级"
|
||||
:visible.sync="dialogVisible"
|
||||
width="30%"
|
||||
:before-close="handleClose"
|
||||
>
|
||||
<el-form label-width="110px">
|
||||
<el-form-item label="监测点评级:">
|
||||
<el-select
|
||||
v-model="lineGradeChoose"
|
||||
style="width: 100%"
|
||||
placeholder="请选择监测点评级"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in lineGradeListNoOne"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="submit()">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog
|
||||
:close-on-click-modal="false"
|
||||
title="导入文件"
|
||||
:visible.sync="dialogVisibleUpload"
|
||||
width="30%"
|
||||
:before-close="handleClose"
|
||||
>
|
||||
<el-upload
|
||||
class="upload-demo"
|
||||
ref="upload"
|
||||
action="#"
|
||||
:http-request="upload"
|
||||
:on-preview="handlePreview"
|
||||
:on-remove="handleRemove"
|
||||
:before-remove="beforeRemove"
|
||||
:limit="1"
|
||||
accept=".xlsx,.xls"
|
||||
:on-exceed="handleExceed"
|
||||
:file-list="fileList"
|
||||
>
|
||||
<el-button size="small" type="primary">点击上传</el-button>
|
||||
<div slot="tip" class="el-upload__tip">
|
||||
只能上传csv文件，且不超过500kb
|
||||
</div>
|
||||
</el-upload>
|
||||
</el-dialog>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import lineMark from "@/api/device/lineMark.js";
|
||||
import { dicData } from "@/assets/commjs/dictypeData";
|
||||
|
||||
export default {
|
||||
name: "scoringmage",
|
||||
components: {
|
||||
// timepicker
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
formInline: {
|
||||
lineGrade: "",
|
||||
comFlag: "",
|
||||
searchValue: "",
|
||||
pageNum: 1,
|
||||
pageSize: 20,
|
||||
},
|
||||
total: 0,
|
||||
loading: false,
|
||||
searchValue: "", //模糊检索
|
||||
height: "",
|
||||
fileList: [],
|
||||
dialogVisible: false,
|
||||
dialogVisibleUpload: false,
|
||||
lineGradeList: [],
|
||||
lineGradeListNoOne: [],
|
||||
statusList: [
|
||||
{ id: "", name: "全部" },
|
||||
{ id: 1, name: "正常" },
|
||||
{ id: 0, name: "中断" },
|
||||
],
|
||||
tableData: [],
|
||||
lineGrade: "",
|
||||
comFlag: "",
|
||||
lineGradeChoose: "",
|
||||
lineId: "",
|
||||
vh: undefined,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getLineGradeList();
|
||||
this.getList();
|
||||
},
|
||||
mounted() {
|
||||
|
||||
this.setHeight()
|
||||
window.addEventListener('resize', this.setHeight)
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.setHeight)
|
||||
},
|
||||
methods: {
|
||||
setHeight() {
|
||||
this.vh = window.sessionStorage.getItem("appheight") - 95;
|
||||
|
||||
},
|
||||
handleSizeChange(val) {
|
||||
this.formInline.pageSize = val;
|
||||
this.getList1();
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
this.formInline.pageNum = val;
|
||||
this.getList1();
|
||||
},
|
||||
//修改监测点评级
|
||||
deilallData(row) {
|
||||
this.dialogVisible = true;
|
||||
this.lineId = row.lineIndex;
|
||||
this.lineGradeChoose = row.lineGradeId;
|
||||
},
|
||||
//关闭
|
||||
handleClose() {
|
||||
this.dialogVisible = false;
|
||||
this.dialogVisibleUpload = false;
|
||||
},
|
||||
//导入
|
||||
importData() {
|
||||
this.dialogVisibleUpload = true;
|
||||
},
|
||||
//导出监测点台账
|
||||
exportData() {
|
||||
// npm;
|
||||
lineMark
|
||||
.exportLineMark({})
|
||||
.then(function (response) {
|
||||
const blob = new Blob([response]);
|
||||
const fileName = "监测点评分台账.xls";
|
||||
const linkNode = document.createElement("a");
|
||||
|
||||
linkNode.download = fileName; //a标签的download属性规定下载文件的名称
|
||||
linkNode.style.display = "none";
|
||||
linkNode.href = URL.createObjectURL(blob); //生成一个Blob URL
|
||||
document.body.appendChild(linkNode);
|
||||
linkNode.click(); //模拟在按钮上的一次鼠标单击
|
||||
|
||||
URL.revokeObjectURL(linkNode.href); // 释放URL 对象
|
||||
document.body.removeChild(linkNode);
|
||||
})
|
||||
.catch(function (error) {
|
||||
// console.log(error);
|
||||
});
|
||||
},
|
||||
|
||||
handleRemove(file, fileList) {
|
||||
// console.log(file, fileList);
|
||||
},
|
||||
handlePreview(file) {
|
||||
// console.log(file);
|
||||
},
|
||||
handleExceed(files, fileList) {
|
||||
this.$message.warning(
|
||||
`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
|
||||
files.length + fileList.length
|
||||
} 个文件`
|
||||
);
|
||||
},
|
||||
beforeRemove(file, fileList) {
|
||||
return this.$confirm(`确定移除 ${file.name}？`);
|
||||
},
|
||||
|
||||
//主列表
|
||||
getList() {
|
||||
if (
|
||||
this.formInline.lineGrade !== "" ||
|
||||
this.formInline.searchValue !== "" ||
|
||||
this.formInline.comFlag !== ""
|
||||
) {
|
||||
this.formInline.pageNum = 1;
|
||||
}
|
||||
this.loading = true;
|
||||
lineMark.getList(this.formInline).then((response) => {
|
||||
if (response.code === "A0000") {
|
||||
var data = response.data;
|
||||
this.tableData = data.records;
|
||||
this.loading = false;
|
||||
// this.formInline.pageNum = data.current;
|
||||
// this.formInline.pageSize = data.size;
|
||||
this.total = data.total;
|
||||
}
|
||||
});
|
||||
this.loading = false;
|
||||
},
|
||||
//分页查询用
|
||||
getList1() {
|
||||
this.loading = true;
|
||||
lineMark.getList(this.formInline).then((response) => {
|
||||
if (response.code === "A0000") {
|
||||
var data = response.data;
|
||||
this.tableData = data.records;
|
||||
this.loading = false;
|
||||
// this.formInline.pageNum = data.current;
|
||||
// this.formInline.pageSize = data.size;
|
||||
this.fortotal = data.total;
|
||||
}
|
||||
});
|
||||
this.loading = false;
|
||||
},
|
||||
/**
|
||||
* 获取终端等级
|
||||
*/
|
||||
getLineGradeList() {
|
||||
var code = "Dev_Level";
|
||||
this.lineGradeList = dicData(code, [], 1);
|
||||
this.lineGradeListNoOne = dicData(code, []);
|
||||
},
|
||||
|
||||
query() {
|
||||
this.getList();
|
||||
},
|
||||
|
||||
//单个修改监测点评分
|
||||
singleOperate(id, lineGrade) {
|
||||
let data = {
|
||||
id: id,
|
||||
lineGrade: lineGrade,
|
||||
};
|
||||
lineMark.singleOperate(data).then((response) => {
|
||||
if (response.code === "A0000") {
|
||||
this.$message.success("监测点等级成功");
|
||||
this.dialogVisible = false;
|
||||
this.getList();
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
//提交按钮
|
||||
submit() {
|
||||
this.$confirm("是否确认操作?", "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
}).then(() => {
|
||||
this.singleOperate(this.lineId, this.lineGradeChoose);
|
||||
});
|
||||
},
|
||||
|
||||
//导出模板
|
||||
exportCsv() {
|
||||
lineMark
|
||||
.heardExport()
|
||||
.then(function (response) {
|
||||
const blob = new Blob([response]);
|
||||
const fileName = "监测点评分模板.xls";
|
||||
const linkNode = document.createElement("a");
|
||||
|
||||
linkNode.download = fileName; //a标签的download属性规定下载文件的名称
|
||||
linkNode.style.display = "none";
|
||||
linkNode.href = URL.createObjectURL(blob); //生成一个Blob URL
|
||||
document.body.appendChild(linkNode);
|
||||
linkNode.click(); //模拟在按钮上的一次鼠标单击
|
||||
|
||||
URL.revokeObjectURL(linkNode.href); // 释放URL 对象
|
||||
document.body.removeChild(linkNode);
|
||||
})
|
||||
.catch(function (error) {
|
||||
// console.log(error);
|
||||
});
|
||||
},
|
||||
|
||||
//文件上传
|
||||
|
||||
upload(option) {
|
||||
let formData = new FormData();
|
||||
formData.set("file", option.file);
|
||||
lineMark.upload(formData).then((response) => {
|
||||
// console.log(response);
|
||||
if (response.type === "application/json") {
|
||||
const fileReader = new FileReader();
|
||||
fileReader.onloadend = () => {
|
||||
try {
|
||||
const jsonData = JSON.parse(fileReader.result);
|
||||
if (jsonData.code === "A0000") {
|
||||
this.$message.success("批量修改监测点评分成功");
|
||||
this.dialogVisibleUpload = false;
|
||||
this.getList();
|
||||
} else {
|
||||
this.$message.error(jsonData.data);
|
||||
}
|
||||
} catch (err) {
|
||||
// console.log(err);
|
||||
}
|
||||
};
|
||||
fileReader.readAsText(response);
|
||||
} else {
|
||||
const link = document.createElement("a"); // 创建a标签
|
||||
let blob = new Blob([response], {
|
||||
type: "application/vnd.ms-excel;charset=UTF-8",
|
||||
}); // 设置文件类型
|
||||
link.style.display = "none";
|
||||
link.href = URL.createObjectURL(blob); // 创建URL
|
||||
link.setAttribute("download", "监测点评分错误信息.xls");
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
}
|
||||
|
||||
this.$refs.upload.clearFiles();
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
@import url("../../../styles/comStyle.less");
|
||||
|
||||
// ::v-deep .table_header {
|
||||
// height: 35px !important;
|
||||
// }
|
||||
</style>
|
||||
@@ -0,0 +1,593 @@
|
||||
<template>
|
||||
<div class="pd10">
|
||||
<!--查询条件 版本维护-->
|
||||
<el-form :inline="true" :model="formInline" class="demo-form-inline">
|
||||
<el-form-item label="装置系列:">
|
||||
<el-select
|
||||
v-model="formInline.devType"
|
||||
placeholder="请选择终端类型"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="item in teriminaloption"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="筛选数据:">
|
||||
<el-input
|
||||
style=" width: 250px;"
|
||||
v-model="formInline.searchValue"
|
||||
placeholder="请输入版本号,版本协议或描述筛选"
|
||||
clearable
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="primary" class="el-icon-plus" @click="add"
|
||||
>新 增</el-button
|
||||
>
|
||||
<el-button type="primary" class="el-icon-search" @click="queryData"
|
||||
>查 询</el-button
|
||||
>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<!--列表-->
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<el-table
|
||||
:data="tableData"
|
||||
header-cell-class-name="table_header"
|
||||
highlight-current-row
|
||||
border
|
||||
stripe
|
||||
:row-config="{ isCurrent: true, isHover: true }"
|
||||
:row-class-name="rowClassName"
|
||||
:height="vh + 'px'"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-table-column
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
prop="number"
|
||||
label="序号"
|
||||
width="70"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
prop="devType"
|
||||
label="装置系列"
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
prop="name"
|
||||
label="版本号"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
prop="protocol"
|
||||
label="版本协议"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
prop="date"
|
||||
label="版本日期"
|
||||
min-width="100"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
prop="updateBy"
|
||||
label="修改人员"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
min-width="100"
|
||||
prop="updateTime"
|
||||
label="修改时间"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.updateTime.replace("T", " ") }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
prop="remark"
|
||||
label="描述"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
prop="versionType"
|
||||
label="版本类型"
|
||||
width="100"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
prop="fileName"
|
||||
label="文件名称"
|
||||
width="100"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
prop="versionFlag"
|
||||
label="状态"
|
||||
width="180"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-radio-group
|
||||
v-model="scope.row.versionFlag"
|
||||
size="mini"
|
||||
@change="checkbox(scope.row)"
|
||||
>
|
||||
<el-radio-button label="1">启用</el-radio-button>
|
||||
<el-radio-button label="0">未启用</el-radio-button>
|
||||
</el-radio-group>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
show-overflow-tooltip
|
||||
align="center"
|
||||
label="操作"
|
||||
width="200"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
type="primary"
|
||||
size="mini" icon="el-icon-edit"
|
||||
@click="editData(scope.row)"
|
||||
>修改</el-button
|
||||
>
|
||||
<el-button
|
||||
type="danger"
|
||||
size="mini" icon="el-icon-delete"
|
||||
@click="DeleteData(scope.row)"
|
||||
>删除</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
background
|
||||
class="mt10"
|
||||
align="right"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="formInline.pageNum"
|
||||
:page-sizes="[20, 30, 40, 50, 100]"
|
||||
:page-size="formInline.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
>
|
||||
</el-pagination>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!--弹窗框-->
|
||||
<el-dialog :close-on-click-modal="false"
|
||||
:title="title"
|
||||
:visible.sync="dialogVisible"
|
||||
width="30%"
|
||||
:before-close="handleClose"
|
||||
|
||||
>
|
||||
<el-form ref="form" :rules="rules" :model="formData" label-width="100px" >
|
||||
<el-form-item label="版本号:" prop="name">
|
||||
<el-input
|
||||
v-model="formData.name"
|
||||
placeholder="请输入版本号"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="协议版本:" class="top" prop="protocol">
|
||||
<el-input
|
||||
v-model="formData.protocol"
|
||||
placeholder="请输入协议版本"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="版本日期:" class="top" prop="date">
|
||||
<el-date-picker
|
||||
type="date"
|
||||
placeholder="选择日期"
|
||||
v-model="formData.date"
|
||||
value-format="yyyy-MM-dd"
|
||||
style="width: 100%"
|
||||
></el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="装置系列:" class="top" prop="devType">
|
||||
<el-select
|
||||
v-model="formData.devType"
|
||||
placeholder="请选择装置系列"
|
||||
style="width: 100%"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="item in teriminaloption"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="版本类型:" class="top" prop="versionType">
|
||||
<el-input
|
||||
v-model="formData.versionType"
|
||||
placeholder="请输入版本类型"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="描述:" class="top" prop="remark">
|
||||
<el-input
|
||||
type="textarea"
|
||||
v-model="formData.remark"
|
||||
placeholder="请输入描述"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="升级文件:" class="top">
|
||||
<el-upload
|
||||
ref="upload"
|
||||
class="upload-demo"
|
||||
action=""
|
||||
:headers="headers"
|
||||
name="file"
|
||||
multiple
|
||||
:limit="1"
|
||||
accept=".doc,.docx,.xls,.xlsx,.pdf,.txt"
|
||||
:auto-upload="false"
|
||||
:file-list="fileList"
|
||||
:on-change="handleChange"
|
||||
>
|
||||
<div style="display: flex">
|
||||
<el-input style="width:100%"
|
||||
v-model="formData.filename"
|
||||
placeholder="请上传文件"
|
||||
></el-input>
|
||||
<el-button
|
||||
size="small"
|
||||
type="primary"
|
||||
icon="el-icon-upload2"
|
||||
class="ml20"
|
||||
style="display: inline; float: right"
|
||||
>点击上传</el-button
|
||||
>
|
||||
</div>
|
||||
</el-upload>
|
||||
</el-form-item>
|
||||
<el-form-item label="CRC校验:" class="top" prop="crc">
|
||||
<el-input
|
||||
v-model="formData.crc"
|
||||
placeholder="请输入CRC校验"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item>
|
||||
<el-button type="primary" >保存</el-button>
|
||||
<el-button>取消</el-button>
|
||||
</el-form-item> -->
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="handleClose">取 消</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
v-if="this.title == '新增装置'"
|
||||
@click="addData"
|
||||
>保 存</el-button
|
||||
>
|
||||
<el-button type="primary" v-else @click="upData">保 存</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {
|
||||
getProgramVersion,
|
||||
addProgramVersion,
|
||||
updateProgramVersion,
|
||||
delProgramVersion,
|
||||
updateVersionFlag,
|
||||
} from "@/api/BusinessAdministrator/TerminalMaintenance";
|
||||
import { dicData } from "@/assets/commjs/dictypeData";
|
||||
export default {
|
||||
name: "versioningmage",
|
||||
data() {
|
||||
return {
|
||||
vh: undefined,
|
||||
formInline: {
|
||||
devType: "",
|
||||
searchValue: "",
|
||||
pageNum: 1,
|
||||
pageSize: 20,
|
||||
},
|
||||
total: 2,
|
||||
teriminaloption: "",
|
||||
height: "",
|
||||
dialogVisible: false,
|
||||
tableData: [],
|
||||
//表单
|
||||
formData: {
|
||||
id: "",
|
||||
name: "",
|
||||
protocol: "",
|
||||
date: "",
|
||||
devType: "",
|
||||
versionType: "",
|
||||
remark: "",
|
||||
crc: "",
|
||||
file: "",
|
||||
filename: "",
|
||||
},
|
||||
fileList: [
|
||||
// {
|
||||
// name: "food.jpeg",
|
||||
// url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
|
||||
// },
|
||||
// {
|
||||
// name: "food2.jpeg",
|
||||
// url: "https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100",
|
||||
// },
|
||||
],
|
||||
title: "",
|
||||
headers: {
|
||||
Authorization: window.sessionStorage.getItem("cntoken"),
|
||||
},
|
||||
rules: {
|
||||
name: [{ required: true, message: "请输入版本号", trigger: "blur" }],
|
||||
protocol: [{ required: true, message: "请输入协议版本", trigger: "blur" }],
|
||||
devType: [
|
||||
{ required: true, message: "请选择装置系列", trigger: "change" },
|
||||
],
|
||||
date: [{ required: true, message: "请选择日期", trigger: "change" }],
|
||||
crc: [{ required: true, message: "请输入CRC校验", trigger: "blur" }],
|
||||
remark: [{ required: true, message: "请输入描述", trigger: "blur" }],
|
||||
versionType: [
|
||||
{ required: true, message: "请输入版本类型", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getclassificationData();
|
||||
},
|
||||
mounted() {
|
||||
|
||||
this.setHeight()
|
||||
window.addEventListener('resize', this.setHeight)
|
||||
this.queryData();
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.setHeight)
|
||||
},
|
||||
methods: {
|
||||
setHeight() {
|
||||
|
||||
this.vh = window.sessionStorage.getItem("appheight") - 96;
|
||||
},
|
||||
//获取类型
|
||||
getclassificationData() {
|
||||
//监测点等级
|
||||
this.teriminaloption = dicData("Dev_Series", []);
|
||||
},
|
||||
//序号
|
||||
rowClassName({ row, rowIndex }) {
|
||||
row.number = rowIndex + 1;
|
||||
},
|
||||
//查询
|
||||
queryData() {
|
||||
getProgramVersion(this.formInline).then((res) => {
|
||||
this.tableData = res.data.records;
|
||||
this.total = res.data.total;
|
||||
});
|
||||
},
|
||||
handleChange(file, fileList) {
|
||||
// console.log(file, fileList);
|
||||
this.fileList = fileList;
|
||||
this.formData.filename = file.name;
|
||||
//获取上传文件大小
|
||||
let imgSize = Number(file.size / 1024 / 1024);
|
||||
|
||||
if (imgSize > 8) {
|
||||
this.$msgbox({
|
||||
title: "",
|
||||
message: "文件大小不能超过8MB,请重新上传。",
|
||||
type: "warning",
|
||||
});
|
||||
return;
|
||||
}
|
||||
},
|
||||
//每页条数改变时触发 选择一页显示多少行
|
||||
handleSizeChange(val) {
|
||||
this.formInline.pageSize = val;
|
||||
this.queryData();
|
||||
},
|
||||
//当前页改变时触发 跳转其他页
|
||||
handleCurrentChange(val) {
|
||||
this.formInline.pageNum = val;
|
||||
this.queryData();
|
||||
},
|
||||
//切换
|
||||
checkbox(row) {
|
||||
// console.log(row);
|
||||
let data = {
|
||||
id: row.id,
|
||||
versionFlag: row.versionFlag,
|
||||
};
|
||||
updateVersionFlag(data)
|
||||
.then((res) => {
|
||||
if ((res.code == "A0000")) {
|
||||
this.$message({
|
||||
type: "success",
|
||||
message: res.message,
|
||||
});
|
||||
}
|
||||
this.queryData();
|
||||
})
|
||||
.catch(() => {
|
||||
this.$message({
|
||||
type: "error",
|
||||
message: res.message,
|
||||
});
|
||||
});
|
||||
},
|
||||
//删除
|
||||
DeleteData(row) {
|
||||
this.$confirm("是否确认删除?", "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
})
|
||||
.then(() => {
|
||||
let data = {
|
||||
id: row.id,
|
||||
};
|
||||
delProgramVersion(data).then((res) => {
|
||||
if ((res.code == "A0000")) {
|
||||
this.$message({
|
||||
type: "success",
|
||||
message: res.message,
|
||||
});
|
||||
}
|
||||
this.queryData();
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
this.$message({
|
||||
type: "info",
|
||||
message: "已取消删除",
|
||||
});
|
||||
});
|
||||
},
|
||||
// 表单重置
|
||||
resetForm() {
|
||||
|
||||
if (this.$refs["form"]) {
|
||||
this.$refs["form"].resetFields();
|
||||
}
|
||||
},
|
||||
//关闭弹窗
|
||||
handleClose() {
|
||||
this.dialogVisible = false;
|
||||
this.resetForm();
|
||||
// console.log(this.tableData);
|
||||
this.teriminaloption.forEach((item) => {
|
||||
this.tableData.forEach((data) => {
|
||||
if (data.devType == item.id) {
|
||||
data.devType = item.name;
|
||||
}
|
||||
});
|
||||
});
|
||||
},
|
||||
//修改
|
||||
editData(row) {
|
||||
// console.log(row);
|
||||
this.title = row.devType + "装置修改";
|
||||
this.formData = row;
|
||||
this.formData.filename = row.fileName;
|
||||
this.dialogVisible = true;
|
||||
this.teriminaloption.forEach((item) => {
|
||||
if (item.name == row.devType) {
|
||||
this.formData.devType = item.id;
|
||||
}
|
||||
});
|
||||
},
|
||||
//保存提交
|
||||
upData() {
|
||||
this.$refs["form"].validate((valid) => {
|
||||
if (valid) {
|
||||
const form = new FormData();
|
||||
form.append("id", this.formData.id);
|
||||
form.append("name", this.formData.name);
|
||||
form.append("protocol", this.formData.protocol);
|
||||
form.append("date", this.formData.date);
|
||||
form.append("devType", this.formData.devType);
|
||||
form.append("versionType", this.formData.versionType);
|
||||
form.append("remark", this.formData.remark);
|
||||
form.append("crc", this.formData.crc);
|
||||
form.append(
|
||||
"filename",
|
||||
this.formData.filename == undefined ? "/" : this.formData.filename
|
||||
);
|
||||
this.fileList.forEach((item) => {
|
||||
form.append("file", item.raw);
|
||||
});
|
||||
// console.log(form);
|
||||
updateProgramVersion(form)
|
||||
.then((res) => {
|
||||
if ((res.code == "A0000")) {
|
||||
this.$message({
|
||||
type: "success",
|
||||
message: res.message,
|
||||
});
|
||||
}
|
||||
this.dialogVisible = false;
|
||||
this.queryData();
|
||||
})
|
||||
.catch((err) => {
|
||||
//console.log(err);
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
//新增
|
||||
add() {
|
||||
this.title = "新增装置";
|
||||
this.formData = {};
|
||||
this.fileList = [];
|
||||
this.dialogVisible = true;
|
||||
},
|
||||
//保存提交
|
||||
addData() {
|
||||
this.$refs["form"].validate((valid) => {
|
||||
if (valid) {
|
||||
const form = new FormData();
|
||||
form.append("name", this.formData.name);
|
||||
form.append("protocol", this.formData.protocol);
|
||||
form.append("date", this.formData.date);
|
||||
form.append("devType", this.formData.devType);
|
||||
form.append("versionType", this.formData.versionType);
|
||||
form.append("remark", this.formData.remark);
|
||||
form.append("crc", this.formData.crc);
|
||||
form.append(
|
||||
"filename",
|
||||
this.formData.filename == undefined ? "/" : this.formData.filename
|
||||
);
|
||||
this.fileList.forEach((item) => {
|
||||
form.append("file", item.raw);
|
||||
});
|
||||
|
||||
addProgramVersion(form)
|
||||
.then((res) => {
|
||||
if ((res.code == "A0000")) {
|
||||
this.$message({
|
||||
type: "success",
|
||||
message: res.message,
|
||||
});
|
||||
}
|
||||
this.dialogVisible = false;
|
||||
this.queryData();
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log(err);
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</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;
|
||||
// }
|
||||
|
||||
</style>
|
||||
File diff suppressed because it is too large
Load Diff
395
src/views/BusinessAdministrator/TerminalManagement/index.vue
Normal file
395
src/views/BusinessAdministrator/TerminalManagement/index.vue
Normal file
@@ -0,0 +1,395 @@
|
||||
<template>
|
||||
<!-- 使用 useVirtual 属性开启虚拟滚动 使用虚拟滚动时，必须要固定表格高度和行高 -->
|
||||
<div style="height: 100%;width: 100%;padding: 0 30px">
|
||||
<div style="color:red;">pl-table在线预览，更多玩法请看文档哦，欢迎Star</div>
|
||||
<el-button @click="$router.push({ path: '/text' })">去子页面(为了测试缓存组件)</el-button>
|
||||
<div>
|
||||
<el-button @click="allSelection">全选</el-button>
|
||||
<el-button @click="clearSelection">清除选中</el-button>
|
||||
<el-button @click="setData(3)">变化数据为3条</el-button>
|
||||
<el-button @click="setData(200)">变化数据为200条</el-button>
|
||||
<el-button @click="setData(1000)">变化数据为1000条</el-button>
|
||||
<el-button @click="pagingScrollTopLeft(1000)">滚动到1千位置</el-button>
|
||||
<el-button @click="pagingScrollTopLeft(2000)">滚动到2千位置</el-button>
|
||||
<el-button @click="pagingScrollTopLeft(0)">滚动到顶部</el-button>
|
||||
<el-button @click="scrollBottom">滚动到底部位置</el-button>
|
||||
<el-button @click="setHei(400)">设置高度为400</el-button>
|
||||
<el-button @click="setHei(300)">设置高度为300</el-button>
|
||||
</div>
|
||||
|
||||
<!--我是Y轴虚拟-->
|
||||
<div v-if="true">
|
||||
<p style="color: red">我是Y轴虚拟</p>
|
||||
<pl-table ref="plTable"
|
||||
:height="height"
|
||||
:data="data.tableData"
|
||||
selectTrClass="selectTr"
|
||||
header-drag-style
|
||||
:dataChangesScrollTop="false"
|
||||
:summary-method="summaryMethod"
|
||||
@table-body-scroll="tableBodyScroll"
|
||||
fixedColumnsRoll
|
||||
inverse-current-row
|
||||
bigDataCheckbox
|
||||
@select-all="selectAll"
|
||||
show-summary
|
||||
use-virtual
|
||||
:row-height="rowHeight">
|
||||
<template slot="empty">
|
||||
没有查询到符合条件的记录
|
||||
</template>
|
||||
<pl-table-column type="selection" width="55" :selectable="selectable"/>
|
||||
<pl-table-column type="index" width="100" fixed/>
|
||||
<!--show-overflow-tooltip属性代表超出则内容部分给出提示框-->
|
||||
<pl-table-column
|
||||
v-for="item in columns"
|
||||
:key="item.id"
|
||||
:resizable="item.resizable"
|
||||
:show-overflow-tooltip="item.showOverflowTooltip"
|
||||
:prop="item.prop"
|
||||
:label="item.label"
|
||||
:fixed="item.fixed"
|
||||
:width="item.width"/>
|
||||
</pl-table>
|
||||
</div>
|
||||
<!--我是X + Y轴同时虚拟-->
|
||||
<div v-if="false">
|
||||
<p style="color: red">我是X + Y轴同时虚拟</p>
|
||||
<plx-table-grid :data="data.tableData"
|
||||
height="300"
|
||||
:show-summary="true"
|
||||
:summary-method="summaryMethod"
|
||||
ref="plTable2">
|
||||
<plx-table-column type="selection" width="55" fixed="left"/>
|
||||
<plx-table-column type="index" width="100" fixed="left"/>
|
||||
<plx-table-column
|
||||
v-for="item in columns2"
|
||||
:key="item.id"
|
||||
:resizable="item.resizable"
|
||||
:prop="item.prop"
|
||||
:label="item.label"
|
||||
:fixed="item.fixed"/>
|
||||
</plx-table-grid>
|
||||
</div>
|
||||
|
||||
<!--我是加入分页的表格-->
|
||||
<div v-if="false">
|
||||
<p style="color: red">我是加入分页的表格</p>
|
||||
<pl-table :data="data.tableData"
|
||||
big-data-checkbox
|
||||
:max-height="height"
|
||||
header-drag-style
|
||||
fixedColumnsRoll
|
||||
use-virtual
|
||||
:row-height="rowHeight"
|
||||
:pagination-show="true"
|
||||
:total="pageForm.total"
|
||||
:page-size="pageForm.pageSize"
|
||||
:current-page="pageForm.currentPage"
|
||||
@handlePageSize="handlePageSize"
|
||||
>
|
||||
<template slot="empty">
|
||||
没有查询到符合条件的记录
|
||||
</template>
|
||||
<pl-table-column type="selection" width="55"/>
|
||||
<pl-table-column type="index" width="100" fixed/>
|
||||
<!--show-overflow-tooltip属性代表超出则内容部分给出提示框-->
|
||||
<pl-table-column
|
||||
v-for="item in columns"
|
||||
:key="item.id"
|
||||
:resizable="item.resizable"
|
||||
:show-overflow-tooltip="item.showOverflowTooltip"
|
||||
:prop="item.prop"
|
||||
:label="item.label"
|
||||
:fixed="item.fixed"
|
||||
:width="item.width"/>
|
||||
</pl-table>
|
||||
</div>
|
||||
|
||||
<!--我是普通的el-table树形表格，这个数据多了就卡，这就是原本的el-table树表格，必须指定 row-key-->
|
||||
<div v-if="false">
|
||||
<p style="color: red;">我是普通的el-table树形表格，这个数据多了就卡，这就是原本的el-table树表格，必须指定 row-key</p>
|
||||
<pl-table ref="plTable"
|
||||
:height="height"
|
||||
:data="treeData"
|
||||
selectTrClass="selectTr"
|
||||
row-key="id"
|
||||
header-drag-style
|
||||
@table-body-scroll="tableBodyScroll"
|
||||
fixedColumnsRoll
|
||||
inverse-current-row
|
||||
@select-all="selectAll">
|
||||
<template slot="empty">
|
||||
没有查询到符合条件的记录
|
||||
</template>
|
||||
<!--show-overflow-tooltip属性代表超出则内容部分给出提示框-->
|
||||
<pl-table-column
|
||||
v-for="item in columns"
|
||||
:key="item.id"
|
||||
:resizable="item.resizable"
|
||||
:show-overflow-tooltip="item.showOverflowTooltip"
|
||||
:prop="item.prop"
|
||||
:label="item.label"
|
||||
:fixed="item.fixed"
|
||||
:width="item.width"/>
|
||||
</pl-table>
|
||||
</div>
|
||||
|
||||
<!--我是pl-table大数据树形表格 必须指定 row-key 必须开启use-virtual-->
|
||||
<div v-if="true">
|
||||
<p style="color: red;">我是pl-table大数据树形表格 必须指定 row-key 必须开启use-virtual</p>
|
||||
<el-button @click="$refs.plTreeTable.toggleTreeExpansion(treeData[0])">切换第一个</el-button>
|
||||
<el-button @click="$refs.plTreeTable.setTreeExpansion(treeData[2], true)">展开第三个</el-button>
|
||||
<el-button @click="$refs.plTreeTable.setAllTreeExpansion()">展开全部</el-button>
|
||||
<el-button @click="$refs.plTreeTable.clearTreeExpand()">关闭所有</el-button>
|
||||
<el-button @click="getTreeExpansionEvent">获取已展开</el-button>
|
||||
<pl-table ref="plTreeTable"
|
||||
:max-height="height"
|
||||
:data="treeData"
|
||||
selectTrClass="selectTr"
|
||||
row-key="id"
|
||||
bigDataCheckbox
|
||||
:treeConfig="{children: 'children', expandAll: false}"
|
||||
:use-virtual="true"
|
||||
header-drag-style
|
||||
@table-body-scroll="tableBodyScroll"
|
||||
fixedColumnsRoll
|
||||
inverse-current-row
|
||||
@select-all="selectAll">
|
||||
<template slot="empty">
|
||||
没有查询到符合条件的记录
|
||||
</template>
|
||||
<!--pl-table大数据表格 你需要在列上指定某个列显示展开收起 treeNode属性-->
|
||||
<pl-table-column
|
||||
:treeNode="item.treeNode"
|
||||
v-for="item in columns"
|
||||
:key="item.id"
|
||||
:resizable="item.resizable"
|
||||
:show-overflow-tooltip="item.showOverflowTooltip"
|
||||
:prop="item.prop"
|
||||
:label="item.label"
|
||||
:fixed="item.fixed"
|
||||
:width="item.width"/>
|
||||
</pl-table>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// 下面是关于pl-table的树形数据的介绍，希望读完下面的文字
|
||||
|
||||
// （最大数量500）当然你可以更多，那么只会导致你遍历时间多，页面等待时间长，（并非渲染节点时间长）
|
||||
// 另外 就以下的这个层级，总数据量展开后，就是 500 + 500 x 3 + 3 x 1 = 2003 的总数据量
|
||||
// 如果你 第一级是500， 第二级也是500， 第三级是10。 那么你的数据量就是 500 + 500 x 500 + 500 x 10 的总数据量，这是非常吓人的
|
||||
// 所以结合自己情况去给树数据，不要瞎乱给下面的数据，树节点避免不鸟去递归，如果你的数据量很大很大，那么你会死在遍历上。
|
||||
// 注意,注意，注意：并非第一级不能超过500，是想告诉你们嵌套里面子节点层级数据量不要太大。比如你可这样的： 第一级为1000， 第二级为2-5的数据量，
|
||||
// 第三级为2-5的数据量....， 那么这样算下来，就是 1000 + 1000 x 5 + 5 x 5 = 6025的数据量，应该是可以的，但是记住要是太大的嵌套数据。那只会导致
|
||||
// 程序卡在遍历数据上，因为程序需要慢慢去递归遍历。这是没有办法的。
|
||||
|
||||
// 但是传统el-table 或者el-tree他们数据量超过200 就会卡。 所以我们已经很好的优化了这一点。不过看来对于树形数据的要求，应该数据量不会太大。
|
||||
// 你可以在pl-table的基础上去改改样式，就可以变相的去实现el-tree的组件了哦，你隐藏下头部，把行的高度给小一点。然后隐形边框线。是不是就是el-tree了呢？？？
|
||||
|
||||
var dataList = Array.from({ length: 500 }, (_, idx) => ({
|
||||
id: idx + '_' + 1,
|
||||
date: '2016-05-03',
|
||||
name: 1,
|
||||
ab: '欢迎使用pl-table',
|
||||
address: idx,
|
||||
children: Array.from({ length: 3 }, (_, idx2) => ({
|
||||
id: idx + '_' + idx2 + '_' + 1,
|
||||
date: '2016-05-03',
|
||||
name: 1,
|
||||
ab: '欢迎使用pl-table',
|
||||
address: idx + '_' + idx2,
|
||||
children: Array.from({ length: 1 }, (_, idx3) => ({
|
||||
id: idx + '_' + idx2 + '_' + idx3 + '_' + 1,
|
||||
date: '2016-05-03',
|
||||
name: 1,
|
||||
ab: '欢迎使用pl-table',
|
||||
address: idx + '_' + idx2 + '_' + idx3
|
||||
}))
|
||||
}))
|
||||
}));
|
||||
export default {
|
||||
name: 'programmanage',
|
||||
data() {
|
||||
return {
|
||||
rowHeight: 50,
|
||||
columns: [
|
||||
{prop: 'address', label: '日期', width: 120, treeNode: true, showOverflowTooltip: true},
|
||||
{prop: 'address', label: '地址', width: 100, showOverflowTooltip: true},
|
||||
{prop: 'address', label: '噜噜噜', width: 230, showOverflowTooltip: true},
|
||||
{prop: 'address', label: '娃哈哈', width: 100, showOverflowTooltip: true},
|
||||
{prop: 'address', label: '地址', width: 100, showOverflowTooltip: true},
|
||||
{prop: 'address', label: '娃哈哈', width: 100, showOverflowTooltip: true},
|
||||
{prop: 'address', label: '娃哈哈', width: 100, showOverflowTooltip: true},
|
||||
{prop: 'address', label: '地址', width: 100, showOverflowTooltip: true},
|
||||
{prop: 'address', label: '娃哈哈', width: 100, showOverflowTooltip: true},
|
||||
{prop: 'address', label: '娃哈哈', width: 100, showOverflowTooltip: true},
|
||||
{prop: 'address', label: '噜噜噜', showOverflowTooltip: true},
|
||||
{prop: 'address', label: '娃哈哈', width: 100, showOverflowTooltip: true, fixed: 'right'}
|
||||
],
|
||||
columns2: Array.from({ length: 20 }, (_, idx) => ({
|
||||
prop: 'address', label: '地址' + idx, width: 200, showOverflow: true, sortable: true, fixed: ''
|
||||
})),
|
||||
data: {
|
||||
tableData:Array.from({ length: 20 }, (_, idx) => ({
|
||||
id: idx + 1,
|
||||
date: '2016-05-03',
|
||||
name: 1,
|
||||
ab: '欢迎使用pl-table',
|
||||
address: 1 + idx
|
||||
}))
|
||||
},
|
||||
top: 0,
|
||||
height: 500,
|
||||
pageForm: {
|
||||
total: 1000,
|
||||
pageSize: 10,
|
||||
currentPage: 1
|
||||
},
|
||||
treeData: dataList
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
selectAll (val) {
|
||||
// console.log(val)
|
||||
},
|
||||
selectable (row, index) {
|
||||
if (index === 1) {
|
||||
return false
|
||||
} else {
|
||||
return true
|
||||
}
|
||||
},
|
||||
// 合计
|
||||
summaryMethod ({ columns, data }) {
|
||||
// 平均值算法（不需要自己去掉）
|
||||
function cacl(arr, callback) {
|
||||
let ret;
|
||||
for (let i=0; i<arr.length;i++) {
|
||||
ret = callback(arr[i], ret);
|
||||
}
|
||||
return ret;
|
||||
}
|
||||
// 平均值算法（不需要自己去掉）
|
||||
Array.prototype.sum = function () {
|
||||
return cacl(this, function (item, sum) {
|
||||
if (typeof (sum) == 'undefined') {
|
||||
return item;
|
||||
}
|
||||
else {
|
||||
return sum += item;
|
||||
}
|
||||
});
|
||||
};
|
||||
// 平均值算法（不需要自己去掉）
|
||||
Array.prototype.avg = function () {
|
||||
if (this.length == 0) {
|
||||
return 0;
|
||||
}
|
||||
return this.sum(this) / this.length;
|
||||
};
|
||||
const means = [] // 合计
|
||||
const fenceSums = [] // 平均值
|
||||
columns.forEach((column, columnIndex) => {
|
||||
if (columnIndex === 0) {
|
||||
means.push('合计')
|
||||
fenceSums.push('平均值')
|
||||
} else {
|
||||
const values = data.map(item => Number(item[column.property]));
|
||||
// 合计
|
||||
if (!values.every(value => isNaN(value))) {
|
||||
means[columnIndex] = values.reduce((prev, curr) => {
|
||||
const value = Number(curr);
|
||||
if (!isNaN(value)) {
|
||||
return prev + curr;
|
||||
} else {
|
||||
return prev;
|
||||
}
|
||||
}, 0);
|
||||
// means[columnIndex] += ' 元'
|
||||
// 改变了ele的合计方式，扩展了合计场景
|
||||
// 你以为就只有上面这样玩吗？错啦，你还可以自定义样式哦
|
||||
// means[columnIndex] = '<span style="color: red">' + means[columnIndex] + '元</span>'
|
||||
means[columnIndex] = '<span style="color: red">' + means[columnIndex] + '元</span><br/><span>123</span>'
|
||||
} else {
|
||||
means[columnIndex] = '';
|
||||
}
|
||||
// 平均值
|
||||
const precisions = [];
|
||||
let notNumber = true;
|
||||
values.forEach(value => {
|
||||
if (!isNaN(value)) {
|
||||
notNumber = false;
|
||||
let decimal = ('' + value).split('.')[1];
|
||||
precisions.push(decimal ? decimal.length : 0);
|
||||
}
|
||||
});
|
||||
if (!notNumber) {
|
||||
fenceSums[columnIndex] = values.avg()
|
||||
} else {
|
||||
fenceSums[columnIndex] = '';
|
||||
}
|
||||
}
|
||||
})
|
||||
// 返回一个二维数组的表尾合计
|
||||
return [means, fenceSums]
|
||||
},
|
||||
setHei (val) {
|
||||
this.height = val
|
||||
},
|
||||
tableBodyScroll ({ scrollTop }, e) {
|
||||
this.top = scrollTop
|
||||
},
|
||||
allSelection () {
|
||||
this.$refs.plTable.toggleAllSelection()
|
||||
},
|
||||
clearSelection () {
|
||||
this.$refs.plTable.clearSelection()
|
||||
this.$refs.plTable2.clearSelection()
|
||||
},
|
||||
setData (num) {
|
||||
this.data.tableData = Array.from({ length: num }, (_, idx) => ({
|
||||
id: idx + 1,
|
||||
date: '2016-05-03',
|
||||
name: 1,
|
||||
ab: '欢迎使用pl-table',
|
||||
address: 1 + idx
|
||||
}))
|
||||
},
|
||||
scrollBottom () {
|
||||
this.$refs.plTable.scrollBottom()
|
||||
},
|
||||
pagingScrollTopLeft (val) {
|
||||
this.$refs.plTable.pagingScrollTopLeft(val, 0)
|
||||
},
|
||||
// 分页事件
|
||||
handlePageSize ({page, size}) {
|
||||
// console.log(page, size)
|
||||
},
|
||||
// 获取已经展开的节点
|
||||
getTreeExpansionEvent () {
|
||||
// console.log(this.$refs.plTreeTable.getTreeExpandRecords())
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
body, html {
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
body ::-webkit-scrollbar-thumb {
|
||||
-webkit-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
background-color: rgba(144, 147, 153, 0.5);
|
||||
}
|
||||
.selectTr td {
|
||||
background: #ccc !important;
|
||||
color: red !important;
|
||||
}
|
||||
</style>
|
||||
|
||||
13005
src/views/BusinessAdministrator/alarManagement/AlarmCenter.vue
Normal file
13005
src/views/BusinessAdministrator/alarManagement/AlarmCenter.vue
Normal file
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,573 @@
|
||||
<template>
|
||||
<div class="pd10" v-loading="isloading" element-loading-text="数据加载中">
|
||||
<el-form :inline="true" :model="formData" class="demo-form-inline">
|
||||
<el-form-item label="告警等级:" class="level">
|
||||
<el-select
|
||||
v-model="formData.alarmLevel"
|
||||
placeholder="请选择告警等级"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="item in alarmList"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="监测点等级:" class="box">
|
||||
<el-select
|
||||
v-model="formData.lineGrade"
|
||||
placeholder="请选择监测点等级"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="item in lineGradeList"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="是否处理:" class="box">
|
||||
<el-select
|
||||
v-model="formData.flag"
|
||||
placeholder="请选择处理状态"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="item in statusList"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="告警类型:" class="box">
|
||||
<el-select
|
||||
v-model="formData.type"
|
||||
placeholder="请选择告警类型"
|
||||
filterable=""
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="item in alarmTypeList"
|
||||
: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" icon="el-icon-search" @click="onSubmit"
|
||||
>查询</el-button
|
||||
>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-table
|
||||
stripe
|
||||
:data="tableData"
|
||||
border
|
||||
header-cell-class-name="table_header"
|
||||
:height="vh + 'px'"
|
||||
style="width: 100%"
|
||||
highlight-current-row
|
||||
>
|
||||
<el-table-column
|
||||
align="center"
|
||||
prop="type"
|
||||
min-width="160"
|
||||
label="告警类型"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
prop="occurredTime"
|
||||
min-width="180"
|
||||
label="最新发生时间"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
prop="level"
|
||||
min-width="100"
|
||||
label="告警等级"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<!-- <span v-if="scope.row.level === 0" style="color: #0f0">普通</span>
|
||||
<span v-if="scope.row.level === 1" style="color: #f60">中等</span>
|
||||
<span v-if="scope.row.level === 2" style="color: #f00">严重</span> -->
|
||||
<el-tag
|
||||
type="primary"
|
||||
v-if="scope.row.level === 0"
|
||||
style="color: #fff; background: #2e8b57"
|
||||
size="small"
|
||||
>普通</el-tag
|
||||
>
|
||||
<el-tag
|
||||
type="primary"
|
||||
v-if="scope.row.level === 1"
|
||||
style="color: #fff; background: #996600"
|
||||
size="small"
|
||||
>中等</el-tag
|
||||
>
|
||||
<el-tag
|
||||
type="primary"
|
||||
v-if="scope.row.level === 2"
|
||||
style="color: #fff; background: #cc0000"
|
||||
size="small"
|
||||
>严重</el-tag
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
prop="devLineName"
|
||||
min-width="500"
|
||||
label="告警定位(装置/监测点)"
|
||||
:show-overflow-tooltip="true"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
{{
|
||||
"变电站名称" +
|
||||
":" +
|
||||
scope.row.subName +
|
||||
" " +
|
||||
"设备名称" +
|
||||
":" +
|
||||
scope.row.devLineName
|
||||
}}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
prop="remark"
|
||||
label="描述"
|
||||
min-width="200"
|
||||
:show-overflow-tooltip="true"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
prop="flag"
|
||||
min-width="100"
|
||||
label="是否处理"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<!-- <span v-if="scope.row.flag === 0" style="color: #f00">未处理</span>
|
||||
<span v-if="scope.row.flag === 1" style="color: #0f0">已处理</span> -->
|
||||
<el-tag
|
||||
type="primary"
|
||||
v-if="scope.row.flag === 0"
|
||||
style="color: #fff; background: #cc0000"
|
||||
size="small"
|
||||
>未处理</el-tag
|
||||
>
|
||||
<el-tag
|
||||
type="primary"
|
||||
v-if="scope.row.flag === 1"
|
||||
style="color: #fff; background: #2e8b57"
|
||||
size="small"
|
||||
>已处理</el-tag
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
prop="updateBy"
|
||||
label="处理员"
|
||||
min-width="180"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
prop="processTime"
|
||||
min-width="180"
|
||||
label="处理时间"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.processTime == null">/</span>
|
||||
<span v-else>{{ scope.row.processTime }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
prop="lineGrade"
|
||||
min-width="150"
|
||||
label="监测点装置等级"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
label="操作"
|
||||
fixed="right"
|
||||
min-width="240"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="deilallData(scope.row)"
|
||||
size="mini"
|
||||
icon="el-icon-share"
|
||||
>详细信息</el-button
|
||||
>
|
||||
<el-button
|
||||
icon="el-icon-warning"
|
||||
:disabled="scope.row.flag == 0 ? false : true"
|
||||
@click.stop="untreated(scope.row)"
|
||||
type="primary"
|
||||
size="mini"
|
||||
>{{ scope.row.flag == 0 ? "未处理" : "已处理" }}</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
background
|
||||
class="mt10"
|
||||
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"
|
||||
>
|
||||
</el-pagination>
|
||||
|
||||
<el-dialog
|
||||
:close-on-click-modal="false"
|
||||
title="告警详细信息"
|
||||
class="eldialot"
|
||||
:visible.sync="dialogVisible"
|
||||
width="70%"
|
||||
>
|
||||
<el-table
|
||||
stripe
|
||||
:data="tableDataDetail"
|
||||
border
|
||||
header-cell-class-name="table_header"
|
||||
height="60vh"
|
||||
v-loading="loading"
|
||||
style="width: 100%"
|
||||
:header-cell-style="{
|
||||
height: '25px',
|
||||
top: '0px',
|
||||
padding: '0px',
|
||||
}"
|
||||
:row-style="{ height: '25px' }"
|
||||
:cell-style="{ padding: '0px' }"
|
||||
>
|
||||
<el-table-column
|
||||
align="center"
|
||||
prop="type"
|
||||
label="告警类型"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
prop="occurredTime"
|
||||
label="最新发生时间"
|
||||
></el-table-column>
|
||||
<el-table-column align="center" prop="level" label="告警等级">
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.level === 0" style="color: #0f0">普通</span>
|
||||
<span v-if="scope.row.level === 1" style="color: #f60">中等</span>
|
||||
<span v-if="scope.row.level === 2" style="color: #f00">严重</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
prop="remark"
|
||||
label="描述"
|
||||
:show-overflow-tooltip="true"
|
||||
></el-table-column>
|
||||
<el-table-column align="center" prop="flag" label="是否处理">
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.flag === 0" style="color: #f00">未处理</span>
|
||||
<span v-if="scope.row.flag === 1" style="color: #0f0">已处理</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
prop="updateBy"
|
||||
label="处理员"
|
||||
></el-table-column>
|
||||
<el-table-column align="center" prop="processTime" label="处理时间">
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.processTime == null">/</span>
|
||||
<span v-else>{{ scope.row.processTime }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- <el-pagination
|
||||
background
|
||||
class="mt10"
|
||||
align="right"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="formInline.pageNum"
|
||||
:page-sizes="[20, 30, 40, 50, 100]"
|
||||
:page-size="formInline.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
>
|
||||
</el-pagination> -->
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { dicData } from "@/assets/commjs/dictypeData";
|
||||
import {
|
||||
alarmList,
|
||||
alarmDetail,
|
||||
updateAlarmInfo,
|
||||
} from "@/api/BusinessAdministrator/AlarmInformation";
|
||||
import Timeinterval from "@/views/components/TimePicker/index4";
|
||||
|
||||
// import alarm from "@/api/device/alarm";
|
||||
export default {
|
||||
name: "alarminformation",
|
||||
components: { Timeinterval },
|
||||
data() {
|
||||
return {
|
||||
isloading: false,
|
||||
loading: false,
|
||||
dialogVisible: false,
|
||||
vh: undefined,
|
||||
item: ["", ""],
|
||||
formData: {
|
||||
alarmLevel: "",
|
||||
devLineId: "",
|
||||
endTime: "",
|
||||
flag: "",
|
||||
lineGrade: "",
|
||||
pageNum: 1,
|
||||
pageSize: 20,
|
||||
processTime: "",
|
||||
startTime: "",
|
||||
type: "",
|
||||
},
|
||||
total: undefined,
|
||||
lineGradeList: [],
|
||||
lineGrade: "",
|
||||
statusList: [
|
||||
{ id: 0, name: "未处理" },
|
||||
{ id: 1, name: "已处理" },
|
||||
],
|
||||
alarmTypeList: [],
|
||||
alarmType: "",
|
||||
alarmList: [
|
||||
{ id: 0, name: "普通" },
|
||||
{ id: 1, name: "中等" },
|
||||
{ id: 2, name: "严重" },
|
||||
],
|
||||
tableData: [],
|
||||
tableDataDetail: [],
|
||||
};
|
||||
},
|
||||
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") - 97;
|
||||
|
||||
},
|
||||
//查询
|
||||
onSubmit() {
|
||||
if (
|
||||
this.formData.alarmLevel !== "" ||
|
||||
this.formData.lineGrade !== "" ||
|
||||
this.formData.flag !== "" ||
|
||||
this.formData.type !== ""
|
||||
) {
|
||||
this.formData.pageNum = 1;
|
||||
}
|
||||
this.isloading = true;
|
||||
this.item = this.$refs.interval.timeValue;
|
||||
this.formData.startTime = this.item[0];
|
||||
this.formData.endTime = this.item[1];
|
||||
alarmList(this.formData).then((res) => {
|
||||
this.isloading = false;
|
||||
this.tableData = res.data.records;
|
||||
this.total = res.data.total;
|
||||
});
|
||||
},
|
||||
//分页查询用
|
||||
onSubmit1() {
|
||||
this.isloading = true;
|
||||
this.item = this.$refs.interval.timeValue;
|
||||
this.formData.startTime = this.item[0];
|
||||
this.formData.endTime = this.item[1];
|
||||
alarmList(this.formData).then((res) => {
|
||||
this.isloading = false;
|
||||
this.tableData = res.data.records;
|
||||
this.total = res.data.total;
|
||||
});
|
||||
},
|
||||
//每页条数改变时触发 选择一页显示多少行
|
||||
handleSizeChange(val) {
|
||||
this.formData.pageSize = val;
|
||||
this.onSubmit1();
|
||||
},
|
||||
//当前页改变时触发 跳转其他页
|
||||
handleCurrentChange(val) {
|
||||
this.formData.pageNum = val;
|
||||
this.onSubmit1();
|
||||
},
|
||||
//详细信息
|
||||
deilallData(row) {
|
||||
this.dialogVisible = true;
|
||||
let data = {
|
||||
startTime: this.formData.startTime,
|
||||
endTime: this.formData.endTime,
|
||||
alarmLevel: row.level,
|
||||
flag: row.flag,
|
||||
type: row.typeId,
|
||||
devLineId: row.devLineId,
|
||||
processTime: row.processTime,
|
||||
};
|
||||
this.loading = true;
|
||||
alarmDetail(data).then((res) => {
|
||||
if (res.code === "A0000") {
|
||||
this.tableDataDetail = res.data;
|
||||
this.loading = false;
|
||||
}
|
||||
});
|
||||
},
|
||||
// handleClose() {
|
||||
// this.dialogVisible = false;
|
||||
// },
|
||||
//获取类型
|
||||
getclassificationData() {
|
||||
//监测点等级
|
||||
this.lineGradeList = dicData("Dev_Level", []);
|
||||
this.formData.lineGrade = this.lineGradeList[0].id;
|
||||
//告警类型
|
||||
this.alarmTypeList = dicData("alarm_Type", []);
|
||||
},
|
||||
//未处理
|
||||
untreated(row) {
|
||||
if (row.type == "系统对时启动异常") {
|
||||
this.$router.push({
|
||||
path: "/device-boot/deviceter",
|
||||
name: "terminalmage",
|
||||
params: {
|
||||
id: row.devLineId,
|
||||
type: row.type,
|
||||
},
|
||||
});
|
||||
} else if (row.type == "暂降事件推送异常") {
|
||||
this.$router.push("/BusinessAdministrator/LogManagement/DropPush");
|
||||
} else if (row.type == "流量告警") {
|
||||
this.$router.push("/BusinessAdministrator/management/PlanTraffic");
|
||||
} else if (row.type == "时钟出错") {
|
||||
this.$router.push({
|
||||
path: "/device-boot/deviceter",
|
||||
name: "terminalmage",
|
||||
params: {
|
||||
id: row.devLineId,
|
||||
type: row.type,
|
||||
},
|
||||
});
|
||||
} else if (row.type == "统计闻隔时间设置出错") {
|
||||
this.$router.push({
|
||||
path: "/device-boot/deviceter",
|
||||
name: "terminalmage",
|
||||
params: {
|
||||
id: row.devLineId,
|
||||
type: row.type,
|
||||
},
|
||||
});
|
||||
} else if (row.type == "统计间隔不匹配") {
|
||||
this.$router.push({
|
||||
path: "/device-boot/deviceter",
|
||||
name: "terminalmage",
|
||||
params: {
|
||||
id: row.devLineId,
|
||||
type: row.type,
|
||||
},
|
||||
});
|
||||
} else if (row.type == "接线方式不匹配") {
|
||||
this.$router.push({
|
||||
path: "/device-boot/deviceter",
|
||||
name: "terminalmage",
|
||||
params: {
|
||||
id: row.devLineId,
|
||||
type: row.type,
|
||||
},
|
||||
});
|
||||
} else if (row.type == "接线方式设置出错") {
|
||||
this.$router.push({
|
||||
path: "/device-boot/deviceter",
|
||||
name: "terminalmage",
|
||||
params: {
|
||||
id: row.devLineId,
|
||||
type: row.type,
|
||||
},
|
||||
});
|
||||
}
|
||||
let data = {
|
||||
type: row.typeId,
|
||||
devLineId: row.devLineId,
|
||||
};
|
||||
updateAlarmInfo(data).then((res) => {
|
||||
if (res.code === "A0000") {
|
||||
this.$message({
|
||||
message: res.message,
|
||||
type: "success",
|
||||
});
|
||||
this.onSubmit();
|
||||
} else {
|
||||
this.$message({
|
||||
message: res.message,
|
||||
type: "warning",
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</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: 36px;
|
||||
}
|
||||
.el-table__fixed,
|
||||
.el-table__fixed-right {
|
||||
height: calc(100% - 20px) !important;
|
||||
}
|
||||
.el-table__fixed-body-wrapper {
|
||||
height: 100 !important;
|
||||
}
|
||||
.el-table__fixed-body-wrapper .el-table__body {
|
||||
padding-bottom: 20px; // 滚动条高度
|
||||
}
|
||||
::v-deep .box {
|
||||
.el-select {
|
||||
width: 160px;
|
||||
}
|
||||
}
|
||||
::v-deep .level {
|
||||
.el-select {
|
||||
width: 145px;
|
||||
}
|
||||
}
|
||||
// ::v-deep .table_header {
|
||||
// height: 35px !important;
|
||||
// }
|
||||
</style>
|
||||
@@ -0,0 +1,382 @@
|
||||
<template>
|
||||
<div class="pd10">
|
||||
<el-form :inline="true" class="demo-form-inline">
|
||||
<div style="display: flex">
|
||||
<div style="display: flex; justify-content: space-between; flex-grow: 1">
|
||||
<el-form-item>
|
||||
<el-button type="primary" class="el-icon-plus" @click="add">新增</el-button>
|
||||
<!-- <el-button type="primary" @click="info" icon="el-icon-search"
|
||||
>查询</el-button
|
||||
> -->
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="primary" class="el-icon-download" @click="exportEvent">导出</el-button>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
</el-form>
|
||||
|
||||
<vxe-table
|
||||
header-cell-class-name="table_header"
|
||||
:data="tableData"
|
||||
v-loading="loading"
|
||||
border
|
||||
stripe
|
||||
:row-config="{ isCurrent: true, isHover: true }"
|
||||
ref="management"
|
||||
size="mini"
|
||||
:height="vh + 'px'"
|
||||
style="width: 100%"
|
||||
highlight-current-row
|
||||
>
|
||||
<vxe-table-column align="center" field="name" title="等级">
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.name == '不重要'" style="color: green">不重要</span>
|
||||
<span v-if="scope.row.name == '普通'" style="color: #0099ff">普通</span>
|
||||
<span v-if="scope.row.name == '重要'" style="color: #cc9900">重要</span>
|
||||
<span v-if="scope.row.name == '极重要'" style="color: red">极重要</span>
|
||||
</template>
|
||||
</vxe-table-column>
|
||||
<vxe-table-column align="center" field="integrityValue" title="数据完整性" sortable>
|
||||
<template slot-scope="scope">
|
||||
<span
|
||||
v-if="
|
||||
scope.row.integrityValue > 0 &&
|
||||
scope.row.integrityValue <= 60 &&
|
||||
scope.row.integrityValue !== 3.14159
|
||||
"
|
||||
style="color: red"
|
||||
>
|
||||
{{ scope.row.integrityValue }}
|
||||
</span>
|
||||
<span
|
||||
v-if="
|
||||
scope.row.integrityValue > 60 &&
|
||||
scope.row.integrityValue < 90 &&
|
||||
scope.row.integrityValue !== 3.14159
|
||||
"
|
||||
style="color: #cc9900"
|
||||
>
|
||||
{{ scope.row.integrityValue }}
|
||||
</span>
|
||||
<span
|
||||
v-if="scope.row.integrityValue >= 90 && scope.row.integrityValue !== 3.14159"
|
||||
style="color: green"
|
||||
>
|
||||
{{ scope.row.integrityValue }}
|
||||
</span>
|
||||
<span v-if="scope.row.integrityValue == 3.14159">暂无数据</span>
|
||||
</template>
|
||||
</vxe-table-column>
|
||||
<vxe-table-column align="center" field="onlineValue" title="在线率" sortable>
|
||||
<template slot-scope="scope">
|
||||
<span
|
||||
v-if="
|
||||
scope.row.onlineValue > 0 &&
|
||||
scope.row.onlineValue <= 60 &&
|
||||
scope.row.onlineValue !== 3.14159
|
||||
"
|
||||
style="color: red"
|
||||
>
|
||||
{{ scope.row.onlineValue }}
|
||||
</span>
|
||||
<span
|
||||
v-if="
|
||||
scope.row.onlineValue > 60 &&
|
||||
scope.row.onlineValue < 90 &&
|
||||
scope.row.onlineValue !== 3.14159
|
||||
"
|
||||
style="color: #cc9900"
|
||||
>
|
||||
{{ scope.row.onlineValue }}
|
||||
</span>
|
||||
<span v-if="scope.row.onlineValue >= 90 && scope.row.onlineValue !== 3.14159" style="color: green">
|
||||
{{ scope.row.onlineValue }}
|
||||
</span>
|
||||
<span v-if="scope.row.onlineValue == 3.14159">暂无数据</span>
|
||||
</template>
|
||||
</vxe-table-column>
|
||||
<vxe-table-column
|
||||
align="center"
|
||||
field="offTimeValue"
|
||||
title="持续中断时长(s)"
|
||||
:show-overflow-tooltip="true"
|
||||
sortable
|
||||
></vxe-table-column>
|
||||
<vxe-table-column
|
||||
align="center"
|
||||
field="warnValue"
|
||||
title="告警次数"
|
||||
:show-overflow-tooltip="true"
|
||||
sortable
|
||||
></vxe-table-column>
|
||||
<vxe-table-column align="center" field="updateTime" title="更新日期" sortable>
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.updateTime.replace('T', ' ') }}</span>
|
||||
</template>
|
||||
</vxe-table-column>
|
||||
<vxe-table-column align="center" field="updateBy" title="更新用户"></vxe-table-column>
|
||||
<vxe-table-column align="center" title="操作" width="220">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="primary" class="el-icon-edit" size="mini" @click="editData(scope.row)">
|
||||
修改
|
||||
</el-button>
|
||||
<el-button type="danger" class="el-icon-delete" size="mini" @click="deleteData(scope.row)">
|
||||
删除
|
||||
</el-button>
|
||||
<!-- <el-button v-if="scope.row.state==1" disabled type="primary">已处理</el-button> -->
|
||||
</template>
|
||||
</vxe-table-column>
|
||||
</vxe-table>
|
||||
|
||||
<!--编辑弹出框-->
|
||||
<el-dialog
|
||||
:close-on-click-modal="false"
|
||||
:title="title"
|
||||
:visible.sync="dialogVisible"
|
||||
width="30%"
|
||||
:before-close="handleClose"
|
||||
>
|
||||
<el-form ref="form" :model="formInline" :rules="rules" label-width="150px">
|
||||
<el-form-item label="终端等级:" prop="zddjid">
|
||||
<el-select v-model="zddjid" :disabled="falg" style="width: 100%" placeholder="请选择终端等级">
|
||||
<el-option
|
||||
v-for="item in teriminaloption"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="数据完整性标准:" prop="integrityValue" class="top">
|
||||
<el-input v-model="formInline.integrityValue" placeholder="请输入数据完整性标准"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="终端在线率标准:" prop="onlineValue" class="top">
|
||||
<el-input v-model="formInline.onlineValue" placeholder="请输入终端在线率标准"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="持续中断时长:" prop="offTimeValue" class="top">
|
||||
<el-input v-model="formInline.offTimeValue" placeholder="请输入持续中断时长"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="告警次数:" prop="warnValue" class="top">
|
||||
<el-input v-model="formInline.warnValue" placeholder="请输入告警次数"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="handleClose">取 消</el-button>
|
||||
<el-button type="primary" @click="submitData">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import api from '@/api/device/alarm'
|
||||
import { dicData } from '@/assets/commjs/dictypeData'
|
||||
export default {
|
||||
name: 'alarmstrategy',
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
falg: false,
|
||||
loading: true,
|
||||
vh: undefined,
|
||||
title: '',
|
||||
height: '',
|
||||
tableData: [],
|
||||
zddjid: '',
|
||||
//分页
|
||||
formInline: {
|
||||
integrityValue: null,
|
||||
onlineValue: null,
|
||||
offTimeValue: null,
|
||||
warnValue: null,
|
||||
pageNum: 1,
|
||||
pageSize: 20
|
||||
},
|
||||
teriminaloption: [],
|
||||
input: '',
|
||||
Finput: '',
|
||||
total: null,
|
||||
biaozhi: 'add',
|
||||
id: '',
|
||||
rules: {
|
||||
zddjid: [{ required: true, message: '终端等级不可为空', trigger: 'blur' }],
|
||||
integrityValue: [{ required: true, message: '数据完整性标准不可为空', trigger: 'blur' }],
|
||||
onlineValue: [{ required: true, message: '终端在线率标准不可为空', trigger: 'blur' }],
|
||||
offTimeValue: [{ required: true, message: '持续中断时长不可为空', trigger: 'blur' }],
|
||||
warnValue: [{ required: true, message: '告警次数不可为空', trigger: 'blur' }]
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getdicData()
|
||||
this.info()
|
||||
},
|
||||
mounted() {
|
||||
//this.info();
|
||||
this.setHeight()
|
||||
window.addEventListener('resize', this.setHeight)
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.setHeight)
|
||||
},
|
||||
methods: {
|
||||
setHeight() {
|
||||
this.vh = window.sessionStorage.getItem('appheight') - 55
|
||||
},
|
||||
// 表单重置
|
||||
resetForm() {
|
||||
if (this.$refs['form']) {
|
||||
this.$refs['form'].resetFields()
|
||||
}
|
||||
},
|
||||
//获取字典表数据
|
||||
getdicData() {
|
||||
let code = 'Dev_Level'
|
||||
this.teriminaloption = dicData(code, [])
|
||||
this.zddjid = this.teriminaloption[0].id
|
||||
},
|
||||
//获取列表数据
|
||||
info() {
|
||||
this.loading = true
|
||||
api.getAlarmStrategyData().then(res => {
|
||||
if (res.code == 'A0000') {
|
||||
this.Finput = this.input
|
||||
this.tableData = res.data
|
||||
this.total = 4
|
||||
this.loading = false
|
||||
} else if ((res.data = null)) {
|
||||
this.loading = false
|
||||
}
|
||||
})
|
||||
},
|
||||
//新增
|
||||
add() {
|
||||
this.formInline = {}
|
||||
this.biaozhi = 'add'
|
||||
this.falg = false
|
||||
this.dialogVisible = true
|
||||
this.title = '新增告警策略'
|
||||
},
|
||||
//编辑
|
||||
editData(row) {
|
||||
this.zddjid = row.id
|
||||
this.formInline.id = row.name
|
||||
this.formInline.integrityValue = row.integrityValue
|
||||
this.formInline.onlineValue = row.onlineValue
|
||||
this.formInline.offTimeValue = row.offTimeValue
|
||||
this.formInline.warnValue = row.warnValue
|
||||
this.falg = true
|
||||
this.title = '修改告警策略'
|
||||
this.biaozhi = 'edit'
|
||||
this.dialogVisible = true
|
||||
},
|
||||
//提交
|
||||
submitData() {
|
||||
if (this.biaozhi == 'add') {
|
||||
let data = {
|
||||
id: this.zddjid,
|
||||
integrityValue: Number(this.formInline.integrityValue),
|
||||
onlineValue: Number(this.formInline.onlineValue),
|
||||
offTimeValue: Number(this.formInline.offTimeValue),
|
||||
warnValue: Number(this.formInline.warnValue)
|
||||
}
|
||||
api.addAlarmStrategyData(data).then(res => {
|
||||
if (res.code == 'A0000') {
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '新增策略成功!'
|
||||
})
|
||||
this.dialogVisible = false
|
||||
this.info()
|
||||
}
|
||||
})
|
||||
} else if (this.biaozhi == 'edit') {
|
||||
let data = {
|
||||
id: this.zddjid,
|
||||
integrityValue: Number(this.formInline.integrityValue),
|
||||
onlineValue: Number(this.formInline.onlineValue),
|
||||
offTimeValue: Number(this.formInline.offTimeValue),
|
||||
warnValue: Number(this.formInline.warnValue)
|
||||
}
|
||||
api.upAlarmStrategyData(data).then(res => {
|
||||
if (res.code == 'A0000') {
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '修改策略成功!'
|
||||
})
|
||||
this.dialogVisible = false
|
||||
this.info()
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
//删除
|
||||
deleteData(row) {
|
||||
let data = {
|
||||
id: row.id
|
||||
}
|
||||
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
})
|
||||
.then(() => {
|
||||
api.delAlarmStrategyData(data).then(res => {
|
||||
if (res.code == 'A0000') {
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '删除成功!'
|
||||
})
|
||||
this.info()
|
||||
}
|
||||
})
|
||||
})
|
||||
.catch(() => {
|
||||
this.$message({
|
||||
type: 'info',
|
||||
message: '已取消删除'
|
||||
})
|
||||
})
|
||||
},
|
||||
//导出
|
||||
exportEvent() {
|
||||
this.$refs.management.exportData({
|
||||
filename: '告警策略管理', // 文件名字
|
||||
sheetName: '告警策略管理',
|
||||
type: 'xlsx', //导出文件类型 xlsx 和 csv
|
||||
useStyle: true,
|
||||
data: this.tableData, // 数据源 // 过滤那个字段导出 // columnFilterMethod: function(column, $columnIndex) { // return !(column.$columnIndex === 0 ) // // 0是复选框 不导出 // }
|
||||
columnFilterMethod: function (column, $columnIndex) {
|
||||
return !(column.$columnIndex === 7)
|
||||
}
|
||||
})
|
||||
},
|
||||
handleClose() {
|
||||
this.dialogVisible = false
|
||||
this.resetForm()
|
||||
},
|
||||
//每页条数改变时触发 选择一页显示多少行
|
||||
handleSizeChange(val) {
|
||||
this.formInline.pageSize = val
|
||||
this.info()
|
||||
},
|
||||
//当前页改变时触发 跳转其他页
|
||||
handleCurrentChange(val) {
|
||||
this.formInline.pageNum = val
|
||||
this.info()
|
||||
}
|
||||
}
|
||||
}
|
||||
</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;
|
||||
// }
|
||||
// ::v-deep .el-select {
|
||||
// width: 150px;
|
||||
// }
|
||||
</style>
|
||||
@@ -0,0 +1,467 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-tabs v-model.trim="activeName" type="border-card">
|
||||
<el-tab-pane label="报告字典管理" name="first" :style="'height:' + vh + 'px;'" style="position: relative">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="5">
|
||||
<div class="grid-content bg-purple">
|
||||
<el-tree
|
||||
:style="'height:' + (vh - 5) + 'px; overflow-y: auto;'"
|
||||
@node-click="clickNode"
|
||||
:expand-on-click-node="false"
|
||||
:highlight-current="true"
|
||||
:data="TreeData"
|
||||
node-key="id"
|
||||
:default-expanded-keys="treeExpandData"
|
||||
:props="defaultProps"
|
||||
ref="tree"
|
||||
></el-tree>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="19">
|
||||
<!-- <el-button
|
||||
type="primary"
|
||||
icon="el-icon-notebook-2"
|
||||
@click="$emit('flag')"
|
||||
>报告字典管理</el-button
|
||||
> -->
|
||||
<el-form :inline="true" :model="formData">
|
||||
<el-form-item label="筛选数据:">
|
||||
<el-input
|
||||
v-model="formData.searchValue"
|
||||
placeholder="请输入筛选数据"
|
||||
clearable=""
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="el-icon-search" @click="info">查询</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item style="float: right">
|
||||
<el-button type="primary" icon="el-icon-plus" @click="addTemplate">
|
||||
新增配置项
|
||||
</el-button>
|
||||
<!-- <el-button type="primary" icon="el-icon-upload2">导出</el-button> -->
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-table
|
||||
stripe
|
||||
v-loading="loading"
|
||||
:data="tableData.slice((pageNum - 1) * pageSize, pageNum * pageSize)"
|
||||
header-cell-class-name="table_header"
|
||||
highlight-current-row
|
||||
style="width: 100%"
|
||||
border
|
||||
:height="vh - 85 + 'px'"
|
||||
>
|
||||
<el-table-column prop="name" label="配置项名称"></el-table-column>
|
||||
<el-table-column prop="reportDescribe" label="配置项描述"></el-table-column>
|
||||
<el-table-column prop="pidName" label="上级节点">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.pid == '0' ? '无' : scope.row.pidName }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
type="primary"
|
||||
size="mini"
|
||||
icon="el-icon-edit"
|
||||
@click="modify(scope.row)"
|
||||
>
|
||||
修改
|
||||
</el-button>
|
||||
<el-button
|
||||
type="danger"
|
||||
size="mini"
|
||||
icon="el-icon-delete"
|
||||
@click="deletes(scope.row)"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
background
|
||||
align="right"
|
||||
class="mt10"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="pageNum"
|
||||
:page-sizes="[20, 30, 40, 50, 100]"
|
||||
:page-size="pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
></el-pagination>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<svg-icon class="back" icon-class="back" @click="$emit('flag')" />
|
||||
|
||||
<!-- 新增 -->
|
||||
<el-dialog
|
||||
:close-on-click-modal="false"
|
||||
title="新增配置项"
|
||||
:visible.sync="dialogVisible"
|
||||
width="30%"
|
||||
:before-close="closeDialog"
|
||||
>
|
||||
<el-form ref="form" :rules="rules" :model="form" label-width="80px">
|
||||
<el-form-item label="父节点:" prop="pid">
|
||||
<el-select v-model="form.pid" style="width: 100%" placeholder="请选择父节点" clearable>
|
||||
<el-option
|
||||
v-for="item in secondLevelNode"
|
||||
:key="item.id"
|
||||
:label="item.reportDescribe"
|
||||
:value="item.id"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="名称:" prop="name" class="top">
|
||||
<el-input v-model.trim="form.name" placeholder="请输入名称"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="描述:" prop="reportDescribe" class="top">
|
||||
<el-input type="textarea" placeholder="请输入描述" v-model.trim="form.reportDescribe"></el-input>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="一级节点:" style="margin-top: 25px" class="box">
|
||||
<el-select
|
||||
v-model="pid1"
|
||||
placeholder="请选择一级节点"
|
||||
clearable
|
||||
@change="changeFn"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in data"
|
||||
:key="item.id"
|
||||
:label="item.reportDescribe"
|
||||
:value="item.id"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item> -->
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="closeDialog">取 消</el-button>
|
||||
<el-button type="primary" @click="addFn">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
<!-- 修改 -->
|
||||
<el-dialog :close-on-click-modal="false" title="修改配置项信息" :visible.sync="dialogVisible1" width="30%">
|
||||
<el-form ref="form" :rules="rules" :model="form" label-width="80px">
|
||||
<el-form-item label="名称:" prop="name" style="margin-bottom: 20px !important">
|
||||
<el-input v-model.trim="form.name" placeholder="请输入名称"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="描述:" prop="reportDescribe" style="margin-bottom: 20px !important">
|
||||
<el-input
|
||||
type="textarea"
|
||||
:rows="2"
|
||||
placeholder="请输入描述"
|
||||
v-model.trim="form.reportDescribe"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogVisible1 = false">取 消</el-button>
|
||||
<el-button type="primary" @click="updateFn">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {
|
||||
getDictTree,
|
||||
getReportDictList,
|
||||
addDict,
|
||||
updateDict,
|
||||
deleteDict
|
||||
} from '@/api/BusinessAdministrator/ReportTemplate/MonitoringPoint'
|
||||
export default {
|
||||
components: {},
|
||||
props: {
|
||||
type: {
|
||||
type: Number,
|
||||
default: undefined
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
formData: {
|
||||
searchValue: '',
|
||||
id: '0',
|
||||
type: this.type
|
||||
},
|
||||
pageNum: 1,
|
||||
pageSize: 20,
|
||||
total: 10,
|
||||
form: {
|
||||
name: '',
|
||||
reportDescribe: '',
|
||||
pid: '',
|
||||
sort: 0,
|
||||
type: this.type
|
||||
},
|
||||
pid1: '',
|
||||
rules: {
|
||||
name: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
|
||||
reportDescribe: [{ required: true, message: '描述不能为空', trigger: 'blur' }],
|
||||
pid: [{ required: true, message: '请选择父节点', trigger: 'change' }]
|
||||
},
|
||||
activeName: 'first',
|
||||
vh: undefined,
|
||||
treeExpandData: [],
|
||||
TreeData: [],
|
||||
// data: [],
|
||||
firstLevelNode: [],
|
||||
secondLevelNode: [],
|
||||
loading: true,
|
||||
tableData: [],
|
||||
dialogVisible: false,
|
||||
dialogVisible1: false,
|
||||
defaultProps: {
|
||||
children: 'children',
|
||||
label: 'reportDescribe'
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.Onsubmit()
|
||||
},
|
||||
mounted() {
|
||||
this.setHeight()
|
||||
window.addEventListener('resize', this.setHeight)
|
||||
this.$nextTick(() => {
|
||||
this.$refs.tree.setCurrentKey(1)
|
||||
})
|
||||
// console.log(this.type);
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.setHeight)
|
||||
},
|
||||
methods: {
|
||||
setHeight() {
|
||||
this.vh = window.sessionStorage.getItem('appheight') - 70
|
||||
},
|
||||
closeDialog() {
|
||||
this.dialogVisible = false
|
||||
this.resetForm()
|
||||
},
|
||||
// 表单重置
|
||||
resetForm() {
|
||||
if (this.$refs['form']) {
|
||||
this.$refs['form'].resetFields()
|
||||
}
|
||||
},
|
||||
//查询数据
|
||||
info() {
|
||||
this.loading = true
|
||||
getReportDictList(this.formData).then(res => {
|
||||
this.tableData = res.data
|
||||
this.total = this.tableData.length
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
//字典树
|
||||
Onsubmit() {
|
||||
getDictTree(this.formData).then(res => {
|
||||
this.TreeData = res.data
|
||||
// this.data = this.TreeData;
|
||||
this.formData.id = this.TreeData[0].id
|
||||
// this.form.pid = this.data[0].id
|
||||
this.info()
|
||||
this.TreeData.forEach(item => {
|
||||
this.treeExpandData.push(item.id)
|
||||
})
|
||||
})
|
||||
},
|
||||
// changeFn(val) {
|
||||
// console.log(val);
|
||||
// this.secondLevelNode = [];
|
||||
// // val.forEach((item) => {
|
||||
// // this.secondLevelNode.push(item);
|
||||
// // });
|
||||
// this.data.forEach((item) => {
|
||||
// console.log(item);
|
||||
// if (val == item.id) {
|
||||
// this.secondLevelNode = item.children;
|
||||
// }
|
||||
// if(item.children.length == 0){
|
||||
// this.form.pid = item.id
|
||||
// }else{
|
||||
// item.children.forEach((item1) => {
|
||||
// console.log(item1);
|
||||
// if (val == item1.id) {
|
||||
// this.secondLevelNode = item.children;
|
||||
// }
|
||||
// });
|
||||
// }
|
||||
// });
|
||||
// },
|
||||
// 点击属于节点
|
||||
clickNode(data) {
|
||||
// this.secondLevelNode = []
|
||||
//console.log(data);
|
||||
this.secondLevelNode[0] = data
|
||||
this.formData.id = data.id
|
||||
this.info()
|
||||
},
|
||||
// 新增
|
||||
addTemplate() {
|
||||
this.title = '新增模板'
|
||||
this.dialogVisible = true
|
||||
this.pid1 = ''
|
||||
this.form = {
|
||||
name: '',
|
||||
reportDescribe: '',
|
||||
pid: '',
|
||||
sort: 0,
|
||||
type: this.type
|
||||
}
|
||||
},
|
||||
//新增确定
|
||||
addFn() {
|
||||
this.$refs.form.validate(value => {
|
||||
// console.log(value);
|
||||
if (value == true) {
|
||||
this.$confirm('是否确认新增?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
})
|
||||
.then(() => {
|
||||
addDict(this.form).then(res => {
|
||||
if (res.code == 'A0000') {
|
||||
this.$message({
|
||||
message: res.message,
|
||||
type: 'success'
|
||||
})
|
||||
}
|
||||
this.dialogVisible = false
|
||||
this.Onsubmit()
|
||||
})
|
||||
})
|
||||
.catch(() => {
|
||||
this.$message({
|
||||
type: 'info',
|
||||
message: '已取消新增'
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
// 修改
|
||||
modify(row) {
|
||||
this.title = '修改模板'
|
||||
;(this.form = {
|
||||
name: row.name,
|
||||
type: row.type,
|
||||
reportDescribe: row.reportDescribe,
|
||||
id: row.id,
|
||||
pid: row.pid,
|
||||
sort: row.sort
|
||||
}),
|
||||
(this.dialogVisible1 = true)
|
||||
},
|
||||
//修改确定
|
||||
updateFn() {
|
||||
this.$refs.form.validate(value => {
|
||||
// console.log(value);
|
||||
if (value == true) {
|
||||
this.$confirm('是否确认修改?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
})
|
||||
.then(() => {
|
||||
updateDict(this.form).then(res => {
|
||||
if (res.code == 'A0000') {
|
||||
this.$message({
|
||||
message: res.message,
|
||||
type: 'success'
|
||||
})
|
||||
}
|
||||
this.dialogVisible1 = false
|
||||
this.Onsubmit()
|
||||
})
|
||||
})
|
||||
.catch(() => {
|
||||
this.$message({
|
||||
type: 'info',
|
||||
message: '已取消修改'
|
||||
})
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
// 删除
|
||||
deletes(row) {
|
||||
this.$confirm('是否确认删除?', '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
})
|
||||
.then(() => {
|
||||
let data = {
|
||||
id: row.id
|
||||
}
|
||||
deleteDict(data).then(res => {
|
||||
if ((res.code == 'A0000')) {
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: res.message
|
||||
})
|
||||
}
|
||||
this.Onsubmit()
|
||||
})
|
||||
})
|
||||
.catch(() => {
|
||||
this.$message({
|
||||
type: 'info',
|
||||
message: '已取消删除'
|
||||
})
|
||||
})
|
||||
},
|
||||
handleSizeChange(val) {
|
||||
this.pageSize = val
|
||||
this.info()
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
this.pageNum = val
|
||||
this.info()
|
||||
}
|
||||
},
|
||||
|
||||
computed: {},
|
||||
|
||||
watch: {}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
@import url('../../../../styles/comStyle.less');
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
.back {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
right: 15px;
|
||||
margin-right: 10px;
|
||||
margin-left: auto;
|
||||
font-size: 29px;
|
||||
line-height: 32px;
|
||||
color: $themeColor;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
color: $themeColor;
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
::v-deep textarea {
|
||||
resize: none;
|
||||
}
|
||||
::v-deep .box {
|
||||
overflow: inherit;
|
||||
.el-input {
|
||||
width: 283px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,371 @@
|
||||
<template>
|
||||
<!-- 监测点报告 -->
|
||||
<div>
|
||||
<el-form :inline="true" :model="formData">
|
||||
<el-form-item label="模板类型:">
|
||||
<el-select
|
||||
v-model="formData.type"
|
||||
placeholder="请选择模板类型"
|
||||
clearable
|
||||
@change="changeFn"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in templateType"
|
||||
:key="item.id"
|
||||
:label="item.label"
|
||||
:value="item.id"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item style="float: right">
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-notebook-2"
|
||||
@click="$emit('flag')"
|
||||
>报告字典管理</el-button
|
||||
>
|
||||
<el-button type="primary" icon="el-icon-plus" @click="addTemplate"
|
||||
>新增模板</el-button
|
||||
>
|
||||
<!-- <el-button type="primary" icon="el-icon-upload2">导出</el-button> -->
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-table
|
||||
stripe
|
||||
v-loading="loading"
|
||||
:data="tableData"
|
||||
header-cell-class-name="table_header"
|
||||
style="width: 100%"
|
||||
highlight-current-row
|
||||
border
|
||||
:height="vh"
|
||||
>
|
||||
<el-table-column prop="name" label="模板名称"> </el-table-column>
|
||||
<el-table-column prop="code" label="模板描述"> </el-table-column>
|
||||
<el-table-column label="操作">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
type="primary"
|
||||
size="mini"
|
||||
icon="el-icon-edit"
|
||||
@click="modify(scope.row)"
|
||||
>修改</el-button
|
||||
>
|
||||
<el-button
|
||||
type="danger"
|
||||
size="mini"
|
||||
icon="el-icon-delete"
|
||||
@click="deletes(scope.row)"
|
||||
>删除</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
background
|
||||
align="right"
|
||||
class="mt10"
|
||||
@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"
|
||||
>
|
||||
</el-pagination>
|
||||
<!-- <Template v-if="dialogVisible" @close='close' :title="title" :dialogVisible="dialogVisible" :TemplateTree="TemplateTree"/> -->
|
||||
<el-dialog
|
||||
:close-on-click-modal="false"
|
||||
:title="title"
|
||||
:visible.sync="dialogVisible"
|
||||
width="40%"
|
||||
:before-close="closeDialog"
|
||||
>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="11"
|
||||
><div class="grid-content">
|
||||
<el-tree
|
||||
:data="data"
|
||||
show-checkbox
|
||||
node-key="id"
|
||||
:props="defaultProps"
|
||||
:default-checked-keys="treeCheckedData"
|
||||
:default-expanded-keys="treeExpandData"
|
||||
@check-change="handleCheckChange"
|
||||
ref="tree"
|
||||
>
|
||||
</el-tree></div
|
||||
></el-col>
|
||||
<el-col :span="13"
|
||||
><el-form ref="form" :rules="rules" :model="form" label-width="60px">
|
||||
<el-form-item label="名称:" prop="name">
|
||||
<el-input
|
||||
v-model.trim="form.name"
|
||||
placeholder="请输入名称"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="描述:" prop="code" class="top">
|
||||
<el-input
|
||||
type="textarea"
|
||||
:rows="2"
|
||||
placeholder="请输入描述"
|
||||
v-model.trim="form.code"
|
||||
>
|
||||
</el-input>
|
||||
</el-form-item> </el-form
|
||||
></el-col>
|
||||
</el-row>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="closeDialog">取 消</el-button>
|
||||
<el-button
|
||||
v-if="this.title == '新增模板'"
|
||||
type="primary"
|
||||
@click="addDetermine"
|
||||
>确 定</el-button
|
||||
>
|
||||
<el-button
|
||||
v-else-if="this.title == '修改模板'"
|
||||
type="primary"
|
||||
@click="updateDetermine"
|
||||
>确 定</el-button
|
||||
>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {
|
||||
getList,
|
||||
getDictTree,
|
||||
add,
|
||||
update,
|
||||
deleteData,
|
||||
} from "@/api/BusinessAdministrator/ReportConfiguration/MonitoringPoint";
|
||||
export default {
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
loading: true,
|
||||
vh: undefined,
|
||||
formData: {
|
||||
pageNum: 1,
|
||||
pageSize: 20,
|
||||
type: 0,
|
||||
},
|
||||
total: 0,
|
||||
templateType: [
|
||||
{
|
||||
id: 0,
|
||||
label: "监测点报告",
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
label: "区域报告",
|
||||
},
|
||||
],
|
||||
tableData: [],
|
||||
dialogVisible: false,
|
||||
title: "",
|
||||
TemplateTree: [],
|
||||
treeCheckedData: [],
|
||||
treeExpandData: [],
|
||||
form: {
|
||||
name: "",
|
||||
type: 0,
|
||||
code: "",
|
||||
ids: [],
|
||||
},
|
||||
rules: {
|
||||
name: [{ required: true, message: "名称不能为空", trigger: "blur" }],
|
||||
code: [{ required: true, message: "描述不能为空", trigger: "blur" }],
|
||||
},
|
||||
data: [],
|
||||
defaultProps: {
|
||||
children: "children",
|
||||
label: "reportDescribe",
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.info();
|
||||
},
|
||||
mounted() {
|
||||
|
||||
this.setHeight()
|
||||
window.addEventListener('resize', this.setHeight)
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.setHeight)
|
||||
},
|
||||
methods: {
|
||||
setHeight() {
|
||||
this.vh = window.sessionStorage.getItem("appheight") - 155;
|
||||
|
||||
},
|
||||
closeDialog(){
|
||||
this.dialogVisible =false
|
||||
this.resetForm()
|
||||
},
|
||||
// 表单重置
|
||||
resetForm() {
|
||||
if (this.$refs["form"]) {
|
||||
this.$refs["form"].resetFields();
|
||||
}
|
||||
},
|
||||
//查询列表
|
||||
info() {
|
||||
this.loading = true;
|
||||
this.$emit("send", this.formData.type);
|
||||
getList(this.formData).then((res) => {
|
||||
this.tableData = res.data.records;
|
||||
this.total = res.data.total;
|
||||
});
|
||||
this.loading = false;
|
||||
},
|
||||
changeFn(val) {
|
||||
// console.log(val);
|
||||
this.formData.type = val;
|
||||
this.form.type = val;
|
||||
this.info();
|
||||
},
|
||||
//查询字典树
|
||||
searchTree() {
|
||||
getDictTree(this.formData).then((res) => {
|
||||
this.data = res.data;
|
||||
this.data.forEach((item) => {
|
||||
this.treeExpandData.push(item.id);
|
||||
});
|
||||
});
|
||||
},
|
||||
// 新增
|
||||
addTemplate() {
|
||||
this.title = "新增模板";
|
||||
this.form = {};
|
||||
this.treeCheckedData = [];
|
||||
this.searchTree();
|
||||
this.dialogVisible = true;
|
||||
},
|
||||
//新增确定
|
||||
addDetermine() {
|
||||
this.form.type = this.formData.type;
|
||||
add(this.form).then((res) => {
|
||||
if (res.code == "A0000") {
|
||||
this.$message({
|
||||
message: res.message,
|
||||
type: "success",
|
||||
});
|
||||
}
|
||||
this.dialogVisible = false;
|
||||
this.info();
|
||||
});
|
||||
},
|
||||
// 修改
|
||||
modify(row) {
|
||||
// console.log(row);
|
||||
this.title = "修改模板";
|
||||
this.searchTree();
|
||||
(this.form = {
|
||||
name: row.name,
|
||||
type: row.type,
|
||||
code: row.code,
|
||||
id: row.id,
|
||||
ids: row.rdIds,
|
||||
}),
|
||||
(this.treeCheckedData = row.rdIds);
|
||||
this.dialogVisible = true;
|
||||
},
|
||||
//修改确定
|
||||
updateDetermine() {
|
||||
update(this.form).then((res) => {
|
||||
if (res.code == "A0000") {
|
||||
this.$message({
|
||||
message: res.message,
|
||||
type: "success",
|
||||
});
|
||||
}
|
||||
this.dialogVisible = false;
|
||||
this.info();
|
||||
});
|
||||
},
|
||||
// 删除
|
||||
deletes(row) {
|
||||
this.$confirm("是否确认删除?", "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
})
|
||||
.then(() => {
|
||||
let data = [row.id];
|
||||
deleteData(data).then((res) => {
|
||||
if ((res.code == "A0000")) {
|
||||
this.$message({
|
||||
type: "success",
|
||||
message: res.message,
|
||||
});
|
||||
}
|
||||
this.info();
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
this.$message({
|
||||
type: "info",
|
||||
message: "已取消删除",
|
||||
});
|
||||
});
|
||||
},
|
||||
handleSizeChange(val) {
|
||||
this.formData.pageSize = val;
|
||||
this.info();
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
this.formData.pageNum = val;
|
||||
this.info();
|
||||
},
|
||||
|
||||
// 树多选
|
||||
handleCheckChange(data, checked, indeterminate) {
|
||||
// 获取当前选中的所有节点ID
|
||||
// console.log(this.$refs.tree.getCheckedKeys());
|
||||
// console.log(data, checked, indeterminate);
|
||||
this.form.ids = this.$refs.tree.getCheckedKeys();
|
||||
},
|
||||
},
|
||||
|
||||
computed: {},
|
||||
|
||||
watch: {},
|
||||
};
|
||||
</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>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.BOXbutton {
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
|
||||
.el-button + .el-button,
|
||||
.el-checkbox.is-bordered + .el-checkbox.is-bordered {
|
||||
margin-left: 15px;
|
||||
}
|
||||
}
|
||||
::v-deep.el-tree {
|
||||
height: 400px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
::v-deep textarea {
|
||||
resize: none;
|
||||
}
|
||||
::v-deep .el-form-item--small.el-form-item {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,179 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-dialog
|
||||
:close-on-click-modal="false"
|
||||
:title="title"
|
||||
:visible.sync="dialogVisible"
|
||||
width="600px"
|
||||
:before-close="handleClose"
|
||||
>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="11"
|
||||
><div class="grid-content bg-purple">
|
||||
<el-tree
|
||||
:data="data"
|
||||
show-checkbox
|
||||
node-key="id"
|
||||
default-expand-all
|
||||
:props="defaultProps"
|
||||
ref="tree"
|
||||
>
|
||||
</el-tree></div
|
||||
></el-col>
|
||||
<el-col :span="13"
|
||||
><el-form ref="form" :rules="rules" :model="form" label-width="60px">
|
||||
<el-form-item label="名称:" prop="name">
|
||||
<el-input
|
||||
v-model.trim="form.name"
|
||||
placeholder="请输入名称"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="描述:" prop="text">
|
||||
<el-input
|
||||
type="textarea"
|
||||
:rows="2"
|
||||
placeholder="请输入描述"
|
||||
v-model="form.text"
|
||||
>
|
||||
</el-input>
|
||||
</el-form-item> </el-form
|
||||
></el-col>
|
||||
</el-row>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="handleClose">取 消</el-button>
|
||||
<el-button type="primary" @click="determine">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
components: {},
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: undefined,
|
||||
},
|
||||
dialogVisible: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
TemplateTree: {
|
||||
type: [Object, Array],
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
name: "",
|
||||
text: "",
|
||||
},
|
||||
rules: {
|
||||
name: [{ required: true, message: "名称不能为空", trigger: "blur" }],
|
||||
text: [{ required: true, message: "描述不能为空", trigger: "blur" }],
|
||||
},
|
||||
data: [
|
||||
{
|
||||
id: 1,
|
||||
label: "一级 1",
|
||||
children: [
|
||||
{
|
||||
id: 4,
|
||||
label: "二级 1-1",
|
||||
children: [
|
||||
{
|
||||
id: 9,
|
||||
label: "三级 1-1-1",
|
||||
},
|
||||
{
|
||||
id: 10,
|
||||
label: "三级 1-1-2",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
label: "一级 2",
|
||||
children: [
|
||||
{
|
||||
id: 5,
|
||||
label: "二级 2-1",
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
label: "二级 2-2",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
label: "一级 3",
|
||||
children: [
|
||||
{
|
||||
id: 7,
|
||||
label: "二级 3-1",
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
label: "二级 3-2",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
defaultProps: {
|
||||
children: "children",
|
||||
label: "label",
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
|
||||
methods: {
|
||||
// 确定
|
||||
determine() {
|
||||
let list = [];
|
||||
this.$refs.tree.getCheckedNodes().forEach((item) => {
|
||||
if (item.children == undefined) {
|
||||
list.push(item.id);
|
||||
}
|
||||
});
|
||||
// console.log("🚀 ~ file: Template.vue ~ line 137 ~ determine ~ list", list)
|
||||
|
||||
this.$refs["form"].validate((valid) => {
|
||||
if (valid) {
|
||||
this.handleClose();
|
||||
} else {
|
||||
}
|
||||
});
|
||||
},
|
||||
// 关闭
|
||||
handleClose() {
|
||||
this.$emit("close");
|
||||
},
|
||||
// 树多选
|
||||
handleCheckChange(data, checked, indeterminate) {
|
||||
// 获取当前选中的所有节点ID
|
||||
// console.log(this.$refs.tree.getCheckedKeys());
|
||||
},
|
||||
},
|
||||
|
||||
computed: {},
|
||||
|
||||
watch: {},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
::v-deep.el-tree {
|
||||
height: 400px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
::v-deep textarea {
|
||||
resize: none;
|
||||
}
|
||||
::v-deep .el-form-item--small.el-form-item {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,202 @@
|
||||
<template>
|
||||
<!-- 监测点报告 -->
|
||||
<div>
|
||||
<div class="BOXbutton">
|
||||
<el-button type="primary" icon="el-icon-notebook-2" @click="$emit('flag')"
|
||||
>报告字典管理2</el-button
|
||||
>
|
||||
<el-button type="primary" icon="el-icon-plus" @click="addTemplate"
|
||||
>新增模板</el-button
|
||||
>
|
||||
<el-button type="primary" icon="el-icon-upload2">导出</el-button>
|
||||
</div>
|
||||
<el-table
|
||||
stripe
|
||||
v-loading="loading"
|
||||
:data="tableData.slice((pageNum - 1) * pageSize, pageNum * pageSize)"
|
||||
header-cell-class-name="table_header"
|
||||
style="width: 100%; margin: 10px 0"
|
||||
border
|
||||
:height="vh"
|
||||
>
|
||||
<el-table-column type="index" width="50" label="序号">
|
||||
<template scope="scope">
|
||||
<span>{{ (pageNum - 1) * pageSize + scope.$index + 1 }}</span>
|
||||
</template></el-table-column
|
||||
>
|
||||
|
||||
<el-table-column prop="date" label="模板名称"> </el-table-column>
|
||||
<el-table-column prop="name" label="模板描述"> </el-table-column>
|
||||
<el-table-column label="操作">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
type="primary"
|
||||
size="mini"
|
||||
icon="el-icon-edit"
|
||||
@click="modify(scope.row)"
|
||||
>修改</el-button
|
||||
>
|
||||
<el-button
|
||||
type="primary"
|
||||
size="mini"
|
||||
icon="el-icon-delete"
|
||||
@click="deletes(scope.row)"
|
||||
>删除</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
background
|
||||
align="right"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="pageNum"
|
||||
:page-sizes="[20, 30, 40, 50, 100]"
|
||||
:page-size="pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="tableData.length"
|
||||
>
|
||||
</el-pagination>
|
||||
<Template
|
||||
v-if="dialogVisible"
|
||||
@close="close"
|
||||
:title="title"
|
||||
:dialogVisible="dialogVisible"
|
||||
:TemplateTree="TemplateTree"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Template from "./Template.vue";
|
||||
export default {
|
||||
components: { Template },
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
loading: true,
|
||||
vh: undefined,
|
||||
pageNum: 1,
|
||||
pageSize: 20,
|
||||
tableData: [
|
||||
{
|
||||
date: "默认报告模板",
|
||||
name: "默认报告模板",
|
||||
address: "上海市普陀区金沙江路 1518 弄",
|
||||
},
|
||||
{
|
||||
date: "默认报告模板",
|
||||
name: "默认报告模板",
|
||||
address: "上海市普陀区金沙江路 1518 弄",
|
||||
},
|
||||
{
|
||||
date: "默认报告模板",
|
||||
name: "默认报告模板",
|
||||
address: "上海市普陀区金沙江路 1518 弄",
|
||||
},
|
||||
{
|
||||
date: "默认报告模板",
|
||||
name: "默认报告模板",
|
||||
address: "上海市普陀区金沙江路 1518 弄",
|
||||
},
|
||||
{
|
||||
date: "默认报告模板",
|
||||
name: "默认报告模板",
|
||||
address: "上海市普陀区金沙江路 1518 弄",
|
||||
},
|
||||
{
|
||||
date: "默认报告模板",
|
||||
name: "默认报告模板",
|
||||
address: "上海市普陀区金沙江路 1518 弄",
|
||||
},
|
||||
{
|
||||
date: "默认报告模板",
|
||||
name: "默认报告模板",
|
||||
address: "上海市普陀区金沙江路 1518 弄",
|
||||
},
|
||||
{
|
||||
date: "默认报告模板",
|
||||
name: "默认报告模板",
|
||||
address: "上海市普陀区金沙江路 1518 弄",
|
||||
},
|
||||
],
|
||||
dialogVisible: false,
|
||||
title: "",
|
||||
TemplateTree: [],
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.info();
|
||||
},
|
||||
mounted() {
|
||||
|
||||
this.setHeight()
|
||||
window.addEventListener('resize', this.setHeight)
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.setHeight)
|
||||
},
|
||||
methods: {
|
||||
setHeight() {
|
||||
this.vh = window.sessionStorage.getItem("appheight") - 165;
|
||||
|
||||
},
|
||||
info() {
|
||||
this.loading = false;
|
||||
},
|
||||
// 新增
|
||||
addTemplate() {
|
||||
this.title = "新增模板";
|
||||
this.dialogVisible = true;
|
||||
},
|
||||
// 修改
|
||||
modify() {
|
||||
this.title = "修改模板";
|
||||
|
||||
this.dialogVisible = true;
|
||||
},
|
||||
// 关闭弹框
|
||||
close() {
|
||||
this.dialogVisible = false;
|
||||
},
|
||||
// 删除
|
||||
deletes(id) {
|
||||
this.$confirm("是否确认删除?", "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
}).then(() => {
|
||||
this.$message({
|
||||
type: "success",
|
||||
message: "删除成功!",
|
||||
});
|
||||
});
|
||||
},
|
||||
handleSizeChange(val) {
|
||||
this.pageSize = val;
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
this.pageNum = val;
|
||||
},
|
||||
},
|
||||
|
||||
computed: {},
|
||||
|
||||
watch: {},
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
@import url("../../../../styles/comStyle.less");
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.BOXbutton {
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
|
||||
.el-button + .el-button,
|
||||
.el-checkbox.is-bordered + .el-checkbox.is-bordered {
|
||||
margin-left: 15px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
56
src/views/BusinessAdministrator/management/Extension.vue
Normal file
56
src/views/BusinessAdministrator/management/Extension.vue
Normal file
@@ -0,0 +1,56 @@
|
||||
<template>
|
||||
<div class="pd10">
|
||||
<el-row style="overflow-y: hidden">
|
||||
<el-col>
|
||||
<Census></Census>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Census from './Extension/Census.vue'
|
||||
|
||||
export default {
|
||||
components: { Census },
|
||||
data() {
|
||||
return {
|
||||
vh: '',
|
||||
vh1: '',
|
||||
activeName: 'first'
|
||||
}
|
||||
},
|
||||
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'
|
||||
this.vh1 = window.sessionStorage.getItem('appheight') - 20 + 'px'
|
||||
},
|
||||
handleClick(tab, event) {
|
||||
// console.log(tab, event);
|
||||
}
|
||||
}
|
||||
}
|
||||
</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;
|
||||
}
|
||||
.block {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
297
src/views/BusinessAdministrator/management/Extension/Census.vue
Normal file
297
src/views/BusinessAdministrator/management/Extension/Census.vue
Normal file
@@ -0,0 +1,297 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<div class="Top" ref="top">
|
||||
<div class="pd10">
|
||||
<el-form :inline="true" :model="form" class="demo-form-inline">
|
||||
<div style="display: flex">
|
||||
<el-form-item label="筛选">
|
||||
<el-input v-model="i" placeholder="请输入内容"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<div style="display: flex; justify-content: space-between; flex-grow: 1">
|
||||
<el-form-item>
|
||||
<el-button type="primary" class="ml10" icon="el-icon-search" @click="steady">
|
||||
查询
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" class="ml10" @click="add">新增</el-button>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
</el-form>
|
||||
<el-table
|
||||
stripe
|
||||
:data="totalData"
|
||||
:height="height"
|
||||
border
|
||||
v-loading="isLoading"
|
||||
style="width: 100%"
|
||||
header-cell-class-name="table_header"
|
||||
>
|
||||
<el-table-column prop="point" label="套餐名"></el-table-column>
|
||||
<el-table-column prop="point" label="套餐流量(MB)"></el-table-column>
|
||||
<el-table-column prop="point" label="修改人"></el-table-column>
|
||||
<el-table-column prop="point" label="修改时间"></el-table-column>
|
||||
<el-table-column label="类型">
|
||||
<template slot-scope="scope">
|
||||
<el-tag @click="cha(scope.row)">{{ scope.row.point }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="类型">
|
||||
<template slot-scope="scope">
|
||||
<el-tag @click="cha(scope.row)">{{ scope.row.point }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="" label="操作">
|
||||
<template slot-scope="scope">
|
||||
<el-button size="mini" type="primary" @click="handleEdit(scope.$index, scope.row)">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-dialog
|
||||
:close-on-click-modal="false"
|
||||
title="编辑"
|
||||
:visible.sync="dialogVisible"
|
||||
width="20%"
|
||||
:before-close="handleClose"
|
||||
>
|
||||
<el-form ref="form" :model="form" label-width="130px" :inline="true" class="demo-form-inline">
|
||||
<el-form-item label="套餐名称:" style="margin-top: 20px">
|
||||
<el-input v-model="form.name" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="套餐流量:" style="margin-top: 20px">
|
||||
<el-input v-model="form.type" clearable></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="套餐类型:" style="margin-top: 20px">
|
||||
<el-select v-model="value" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="二级类型:" style="margin-top: 20px">
|
||||
<el-select v-model="value" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<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>
|
||||
<el-dialog
|
||||
:close-on-click-modal="false"
|
||||
title="新增"
|
||||
:visible.sync="dialogVisible1"
|
||||
width="20%"
|
||||
:before-close="handleClose"
|
||||
>
|
||||
<el-form ref="form" :model="form" label-width="130px" :inline="true" class="demo-form-inline">
|
||||
<el-form-item label="套餐名称:" style="margin-top: 20px">
|
||||
<el-input v-model="form.name" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="套餐流量:" style="margin-top: 20px">
|
||||
<el-input v-model="form.type" clearable></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="套餐类型:" style="margin-top: 20px">
|
||||
<el-select v-model="value" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="二级类型:" style="margin-top: 20px">
|
||||
<el-select v-model="value" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogVisible1 = false">取 消</el-button>
|
||||
<el-button type="primary" @click="dialogVisible1 = false">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Area from '@/views/components/Area/Area.vue'
|
||||
import { figure, serial, diagram, monthly } from './indicatorClassification.js'
|
||||
import { viewheight } from '@/assets/commjs/common'
|
||||
import { Classification } from './indicatorClassification.js'
|
||||
import Timslot from './Timeslot.vue'
|
||||
export default {
|
||||
components: { Area, Timslot },
|
||||
data() {
|
||||
return {
|
||||
i: '',
|
||||
vh1: '',
|
||||
dialogVisible: false,
|
||||
dialogVisible1: false,
|
||||
options: [
|
||||
{
|
||||
value: '选项1',
|
||||
label: '电铁'
|
||||
},
|
||||
{
|
||||
value: '选项2',
|
||||
label: '换流站'
|
||||
},
|
||||
{
|
||||
value: '选项3',
|
||||
label: '风电'
|
||||
},
|
||||
{
|
||||
value: '选项4',
|
||||
label: '光伏'
|
||||
},
|
||||
{
|
||||
value: '选项5',
|
||||
label: '其他非线性负荷'
|
||||
},
|
||||
{
|
||||
value: '选项6',
|
||||
label: '敏感重要高危用户'
|
||||
},
|
||||
{
|
||||
value: '选项7',
|
||||
label: '变电站'
|
||||
},
|
||||
{
|
||||
value: '选项8',
|
||||
label: '跨省关口'
|
||||
},
|
||||
{
|
||||
value: '选项9',
|
||||
label: '其他'
|
||||
}
|
||||
],
|
||||
value: '',
|
||||
form: {
|
||||
date: ''
|
||||
},
|
||||
height: null,
|
||||
isLoading: false,
|
||||
//稳态指标超标统计
|
||||
|
||||
totalData: [{ point: 1111 }],
|
||||
|
||||
active_active: 'first-first',
|
||||
zoom: undefined, //图表焦点校验
|
||||
vh: '',
|
||||
height: 265,
|
||||
device: '',
|
||||
getHeight: '',
|
||||
tabPosition: 'top',
|
||||
active: 'first',
|
||||
isLoading: false,
|
||||
isLoading2: false,
|
||||
isLoading3: false,
|
||||
isLoading4: false,
|
||||
serialData: []
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.account()
|
||||
this.steady()
|
||||
},
|
||||
mounted() {
|
||||
this.setHeight()
|
||||
window.addEventListener('resize', this.setHeight)
|
||||
setTimeout(() => {
|
||||
this.getHeight = Number(this.$refs.getHeight.offsetHeight - 45)
|
||||
}, 0)
|
||||
//echarts图表调用
|
||||
|
||||
this.zoom = 1 / document.body.style.zoom
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.setHeight)
|
||||
},
|
||||
methods: {
|
||||
setHeight() {
|
||||
this.vh1 = window.sessionStorage.getItem('appheight') - 20 + 'px'
|
||||
this.device = window.devicePixelRatio
|
||||
this.height = window.sessionStorage.getItem('appheight') - 175 + 'px'
|
||||
this.vh = (viewheight() - 90) / 2 + 'px'
|
||||
this.zoom = 1 / document.body.style.zoom
|
||||
},
|
||||
add() {
|
||||
this.dialogVisible1 = true
|
||||
},
|
||||
handleClose() {
|
||||
this.dialogVisible = false
|
||||
this.dialogVisible1 = false
|
||||
},
|
||||
handleEdit(val) {
|
||||
this.dialogVisible = true
|
||||
// console.log(val, "valvalval");
|
||||
},
|
||||
cellStyle(row, column, rowIndex, columnIndex) {
|
||||
// console.log(row);
|
||||
if (row.columnIndex == 2 || row.columnIndex == 3 || row.columnIndex == 4 || row.columnIndex == 5) {
|
||||
return 'font-weight: 600;'
|
||||
}
|
||||
},
|
||||
//监测终端统计echarts图表
|
||||
|
||||
//方法调用台账统计数据接口
|
||||
account() {
|
||||
this.isLoading = true
|
||||
this.isLoading2 = true
|
||||
//监测终端统计单位表格数据
|
||||
Classification().then(res => {
|
||||
this.isLoading = false
|
||||
this.serialData = res.data
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</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;
|
||||
}
|
||||
.prop {
|
||||
font-weight: 600;
|
||||
}
|
||||
::v-deep .el-table__body-wrapper.is-scrolling-none {
|
||||
height: 227px !important;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,787 @@
|
||||
<template>
|
||||
<div style="display: inline-block; width: 100%; margin-bottom: 10px">
|
||||
<span style="font-size: 14px; font-weight: 550">
|
||||
<span class="spanColor">间隔:</span>
|
||||
</span>
|
||||
<el-select
|
||||
style="width: 90px; margin-left: 10px"
|
||||
v-model="intervald"
|
||||
@change="interchange"
|
||||
placeholder="请选择"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in timeOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
<el-date-picker
|
||||
style="width: 230px"
|
||||
:disabled="disabled"
|
||||
:readonly="pickDisabled"
|
||||
:clearable="false"
|
||||
v-model="timeValue"
|
||||
:picker-options="pickerOptions"
|
||||
type="daterange"
|
||||
value-format="yyyy-MM-dd"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
align="right"
|
||||
>
|
||||
</el-date-picker>
|
||||
|
||||
<div style="display: inline" v-if="buttonShow">
|
||||
<el-button
|
||||
:disabled="backDisabled"
|
||||
type="primary"
|
||||
icon="el-icon-d-arrow-left"
|
||||
@click="preClick"
|
||||
style="margin-left: 10px"
|
||||
></el-button>
|
||||
<el-button @click="nowTime" type="primary" style="margin-left: 5px"
|
||||
>当前</el-button
|
||||
>
|
||||
<el-button
|
||||
:disabled="preDisabled"
|
||||
type="primary"
|
||||
icon="el-icon-d-arrow-right"
|
||||
@click="back"
|
||||
style="margin-left: 5px"
|
||||
></el-button>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- <el-button
|
||||
@click="querfromdata"
|
||||
type="primary"
|
||||
icon="el-icon-search"
|
||||
style="margin-left: 10px"
|
||||
>查询</el-button
|
||||
> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "index4",
|
||||
props: {
|
||||
name: {
|
||||
type: String,
|
||||
default: undefined,
|
||||
},
|
||||
path: {
|
||||
type: String,
|
||||
default: undefined,
|
||||
},
|
||||
tablename: {
|
||||
type: String,
|
||||
default: undefined,
|
||||
},
|
||||
interval: {
|
||||
type: Number,
|
||||
default: undefined,
|
||||
},
|
||||
type: {
|
||||
type: Number,
|
||||
default: undefined,
|
||||
},
|
||||
falg: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
query: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
thb: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
intervald(val) {
|
||||
if (val != 5) {
|
||||
let endTime = this.getEndTime();
|
||||
let startTime = this.getStartTime(this.intervald, endTime);
|
||||
this.timeValue = [startTime, endTime];
|
||||
this.pickDisabled = false;
|
||||
this.buttonShow = true;
|
||||
} else {
|
||||
let endTime = this.getEndTime();
|
||||
let startTime = this.getStartTime(this.intervald, endTime);
|
||||
this.timeValue = [startTime, endTime];
|
||||
this.buttonShow = false;
|
||||
this.pickDisabled = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
disabled: true,
|
||||
buttonShow: true, //向前向后按钮显示隐藏控制按钮
|
||||
pickDisabled: false, //时间组件只读控制se,
|
||||
falg1: true,
|
||||
timeOptions: [
|
||||
{ label: "年份", value: 1 },
|
||||
{ label: "季度", value: 2 },
|
||||
{ label: "月份", value: 3 },
|
||||
{ label: "周", value: 4 },
|
||||
// { label: "自定义", value: 5 },
|
||||
],
|
||||
pickerOptions: {
|
||||
shortcuts: [
|
||||
{
|
||||
text: "最近一周",
|
||||
onClick(picker) {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
|
||||
picker.$emit("pick", [start, end]);
|
||||
},
|
||||
},
|
||||
{
|
||||
text: "最近一个月",
|
||||
onClick(picker) {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
|
||||
picker.$emit("pick", [start, end]);
|
||||
},
|
||||
},
|
||||
{
|
||||
text: "最近三个月",
|
||||
onClick(picker) {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
|
||||
picker.$emit("pick", [start, end]);
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
intervald: this.interval,
|
||||
tablenamed: this.tablename,
|
||||
timeValue: [],
|
||||
timehbValue: [],
|
||||
backDisabled: false,
|
||||
preDisabled: true,
|
||||
huanbibiFalg: false,
|
||||
tonbiFalg: false,
|
||||
timeFlag: 0,
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
mounted() {
|
||||
let endTime = this.getEndTime();
|
||||
let startTime = this.getStartTime(this.intervald, endTime);
|
||||
// console.log(endTime,startTime,'endtime','startTime')
|
||||
this.$store.commit("sagServerity/SET_TIMEINTERVAL",[startTime,endTime] )
|
||||
this.timeValue = [startTime, endTime];
|
||||
if (this.type == 2) {
|
||||
this.huangbiyear();
|
||||
} else if (!this.type) {
|
||||
this.querfromdata();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
interchange(val) {
|
||||
if (val == 1 || val == 2) {
|
||||
this.timeFlag = 0;
|
||||
} else {
|
||||
this.timeFlag = 1;
|
||||
}
|
||||
// console.log(this.timeFlag);
|
||||
this.intervald = val;
|
||||
if (val == 5) {
|
||||
this.tablenamed == "tab1";
|
||||
this.disabled = false;
|
||||
} else {
|
||||
this.tablenamed == "tab2";
|
||||
this.disabled = true;
|
||||
}
|
||||
},
|
||||
// 获取当前日期，精确到日
|
||||
getEndTime() {
|
||||
var now = new Date();
|
||||
var sep = "-";
|
||||
var year = now.getFullYear();
|
||||
var month = now.getMonth() + 1;
|
||||
if (month < 10) {
|
||||
month = "0" + month;
|
||||
}
|
||||
var date = now.getDate();
|
||||
if (date < 10) {
|
||||
date = "0" + date;
|
||||
}
|
||||
|
||||
// 拼接当前的日期
|
||||
var endTime = year + sep + month + sep + date;
|
||||
return endTime;
|
||||
},
|
||||
// 获取起始日期
|
||||
getStartTime(interval, endTime) {
|
||||
var sep = "-";
|
||||
var arr = endTime.split("-");
|
||||
var year = arr[0];
|
||||
var month = arr[1];
|
||||
var date = arr[2];
|
||||
// 按月份间隔
|
||||
if (interval == 3) {
|
||||
date = "01";
|
||||
// 按季度间隔
|
||||
} else if (interval == 2) {
|
||||
if ((month > 0) & (month < 4)) {
|
||||
// 第一季度
|
||||
month = "01";
|
||||
date = "01";
|
||||
} else if (month > 3 && month < 7) {
|
||||
// 第二季度
|
||||
month = "04";
|
||||
date = "01";
|
||||
} else if (month > 6 && month < 10) {
|
||||
// 第三季度
|
||||
month = "07";
|
||||
date = "01";
|
||||
} else {
|
||||
// 第四季度
|
||||
month = "10";
|
||||
date = "01";
|
||||
}
|
||||
} else if (interval == 1) {
|
||||
month = "01";
|
||||
date = "01";
|
||||
} else if (interval == "半年") {
|
||||
if (month < 7) {
|
||||
month = "01";
|
||||
date = "01";
|
||||
} else {
|
||||
month = "07";
|
||||
date = "01";
|
||||
}
|
||||
} else if (interval == 4) {
|
||||
//周
|
||||
var start = new Date(year, month - 1, date);
|
||||
var dayOfWeek = start.getDay() == 0 ? 7 : start.getDay(); // 如果为周日，则置为7天
|
||||
start.setDate(start.getDate() - dayOfWeek + 1); // 计算开始时间
|
||||
|
||||
if (this.formatTime(new Date()) != endTime) {
|
||||
// 如果结束时间不是当前时间
|
||||
var end = new Date(start);
|
||||
end.setDate(end.getDate() + 6);
|
||||
// $("#endTime").val(this.formatTime(end));
|
||||
}
|
||||
|
||||
return this.formatTime(start);
|
||||
}
|
||||
|
||||
var startTime = year + sep + month + sep + date;
|
||||
return startTime;
|
||||
},
|
||||
// 时间格式化
|
||||
formatTime(time) {
|
||||
return (
|
||||
time.getFullYear() +
|
||||
"-" +
|
||||
(time.getMonth() + 1 < 10 ? "0" : "") +
|
||||
(time.getMonth() + 1) +
|
||||
"-" +
|
||||
(time.getDate() < 10 ? "0" : "") +
|
||||
time.getDate()
|
||||
);
|
||||
},
|
||||
//向前
|
||||
preClick() {
|
||||
let interval = this.intervald;
|
||||
let startTime = this.timeValue[0];
|
||||
let endTime = this.timeValue[1];
|
||||
let year = parseInt(startTime.substring(0, 4));
|
||||
let month = parseInt(startTime.substring(5, 7));
|
||||
let date = parseInt(startTime.substring(8, 10));
|
||||
//按月
|
||||
if (interval == 3) {
|
||||
// 换年份
|
||||
if (month == 1) {
|
||||
year = year - 1;
|
||||
startTime = year + "-12-01";
|
||||
endTime = year + "-12-31";
|
||||
} else if (month <= 10) {
|
||||
month = month - 1;
|
||||
startTime = year + "-0" + month + "-01";
|
||||
let day = this.getDays(year, month);
|
||||
endTime = year + "-0" + month + "-" + day;
|
||||
} else {
|
||||
month = month - 1;
|
||||
startTime = year + "-" + month + "-01";
|
||||
let day = this.getDays(year, month);
|
||||
endTime = year + "-" + month + "-" + day;
|
||||
}
|
||||
//按周
|
||||
} else if (interval == 4) {
|
||||
//根据开始时间推
|
||||
let start = new Date(year, month - 1, date);
|
||||
start.setDate(start.getDate() - 7);
|
||||
startTime = this.formatTime(start);
|
||||
var end = new Date(start);
|
||||
end.setDate(start.getDate() + 6);
|
||||
endTime = this.formatTime(end);
|
||||
//按季度
|
||||
} else if (interval == 2) {
|
||||
// 换年份
|
||||
if (month == 1) {
|
||||
year = year - 1;
|
||||
startTime = year + "-10-01";
|
||||
endTime = year + "-12-31";
|
||||
} else {
|
||||
// 还是本年
|
||||
month = month - 3;
|
||||
startTime = year + "-0" + month + "-01";
|
||||
month = month + 2;
|
||||
var day = this.getDays(year, month);
|
||||
endTime = year + "-0" + month + "-" + day;
|
||||
}
|
||||
//自定义
|
||||
} else if (interval == 5) {
|
||||
//按年
|
||||
} else if (interval == 1) {
|
||||
year = year - 1;
|
||||
startTime = year + "-01-01";
|
||||
endTime = year + "-12-31";
|
||||
} else if (interval == 6) {
|
||||
if (month <= 6) {
|
||||
year = year - 1;
|
||||
startTime = year + "-07-01";
|
||||
endTime = year + "-12-31";
|
||||
} else {
|
||||
startTime = year + "-01-01";
|
||||
endTime = year + "-06-30";
|
||||
}
|
||||
}
|
||||
this.timeValue = [startTime, endTime];
|
||||
|
||||
// 判断向后键的状态
|
||||
var temp = this.getEndTime();
|
||||
this.timeStatus(temp, endTime);
|
||||
},
|
||||
//向后
|
||||
back() {
|
||||
let interval = this.intervald;
|
||||
let startTime = this.timeValue[0];
|
||||
let endTime = this.timeValue[1];
|
||||
let year = parseInt(startTime.substring(0, 4));
|
||||
let month = parseInt(startTime.substring(5, 7));
|
||||
let date = parseInt(startTime.substring(8, 10));
|
||||
var now = new Date();
|
||||
// 获取当前年份
|
||||
var presentY = now.getFullYear();
|
||||
// 获取当前月份
|
||||
var presentM = now.getMonth() + 1;
|
||||
// 获取当前日期
|
||||
var presentD = now.getDate();
|
||||
if (interval == 3) {
|
||||
if (month == 12) {
|
||||
year = year + 1;
|
||||
// 年份进位后，大于当前的年份，是不科学的
|
||||
if (presentY < year) {
|
||||
startTime = presentY + "-12-01";
|
||||
if (presentD < 10) {
|
||||
endTime = presentY + "-12" + "-0" + presentD;
|
||||
} else {
|
||||
endTime = presentY + "-12" + "-" + presentD;
|
||||
}
|
||||
// 年份进位后，等于当前的年份
|
||||
} else if (presentY == year) {
|
||||
startTime = year + "-01-01";
|
||||
if (presentM > 1) {
|
||||
endTime = year + "-01-31";
|
||||
} else {
|
||||
if (presentD < 10) {
|
||||
endTime = year + "-01" + "-0" + presentD;
|
||||
} else {
|
||||
endTime = year + "-01" + "-" + presentD;
|
||||
}
|
||||
}
|
||||
// 年份进位后，依旧小于当前的年份
|
||||
} else {
|
||||
startTime = year + "-01-01";
|
||||
endTime = year + "-01-31";
|
||||
}
|
||||
} else {
|
||||
month = month + 1;
|
||||
// 年份等于当前年份
|
||||
if (presentY == year) {
|
||||
// 月份超过当前月份，是不科学的
|
||||
if (month >= presentM) {
|
||||
if (presentM < 10) {
|
||||
startTime = year + "-0" + presentM + "-01";
|
||||
if (presentD < 10) {
|
||||
endTime = year + "-0" + presentM + "-0" + presentD;
|
||||
} else {
|
||||
endTime = year + "-0" + presentM + "-" + presentD;
|
||||
}
|
||||
} else {
|
||||
startTime = year + "-" + presentM + "-01";
|
||||
if (presentD < 10) {
|
||||
endTime = year + "-" + presentM + "-0" + presentD;
|
||||
} else {
|
||||
endTime = year + "-" + presentM + "-" + presentD;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if (month < 10) {
|
||||
startTime = year + "-0" + month + "-01";
|
||||
var day = this.getDays(year, month);
|
||||
endTime = year + "-0" + month + "-" + day;
|
||||
} else {
|
||||
startTime = year + "-" + month + "-01";
|
||||
var day = this.getDays(year, month);
|
||||
endTime = year + "-" + month + "-" + day;
|
||||
}
|
||||
}
|
||||
// 年份小于当前的年份
|
||||
} else {
|
||||
if (month < 10) {
|
||||
startTime = year + "-0" + month + "-01";
|
||||
var day = this.getDays(year, month);
|
||||
endTime = year + "-0" + month + "-" + day;
|
||||
} else {
|
||||
startTime = year + "-" + month + "-01";
|
||||
var day = this.getDays(year, month);
|
||||
endTime = year + "-" + month + "-" + day;
|
||||
}
|
||||
}
|
||||
}
|
||||
} else if (interval == 2) {
|
||||
// 前进需要年份进位
|
||||
if (month == 10) {
|
||||
year = year + 1;
|
||||
// 年份进位后大于当前年份是不科学的
|
||||
if (year > presentY) {
|
||||
startTime = presentY + "-10-01";
|
||||
if (presentD < 10) {
|
||||
endTime = year + "-" + presentM + "-0" + presentD;
|
||||
} else {
|
||||
endTime = year + "-" + presentM + "-" + presentD;
|
||||
}
|
||||
} else if (year == presentY) {
|
||||
startTime = year + "-01-01";
|
||||
// 当前月份大约3月份
|
||||
if (presentM > 3) {
|
||||
endTime = year + "-03-31";
|
||||
} else {
|
||||
// 当前月份也在第一季度里
|
||||
if (presentD < 10) {
|
||||
endTime = year + "-0" + presentM + "-0" + presentD;
|
||||
} else {
|
||||
endTime = year + "-0" + presentM + "-" + presentD;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
startTime = year + "-01-01";
|
||||
endTime = year + "-03-31";
|
||||
}
|
||||
} else {
|
||||
month = month + 3;
|
||||
// 季度进位后，超过当前月份是不科学的
|
||||
if (year == presentY) {
|
||||
if (month >= presentM) {
|
||||
// 当季度进位后大于当前月，以当前月的时间显示季度
|
||||
if (presentM > 0 && presentM < 4) {
|
||||
// 第一季度
|
||||
startTime = year + "-01-01";
|
||||
if (presentD < 10) {
|
||||
endTime = year + "-0" + presentM + "-0" + presentD;
|
||||
} else {
|
||||
endTime = year + "-0" + presentM + "-" + presentD;
|
||||
}
|
||||
} else if (presentM > 3 && presentM < 7) {
|
||||
// 第二季度
|
||||
startTime = year + "-04-01";
|
||||
if (presentD < 10) {
|
||||
endTime = year + "-0" + presentM + "-0" + presentD;
|
||||
} else {
|
||||
endTime = year + "-0" + presentM + "-" + presentD;
|
||||
}
|
||||
} else if (presentM > 6 && presentM < 10) {
|
||||
// 第三季度
|
||||
startTime = year + "-07-01";
|
||||
if (presentD < 10) {
|
||||
endTime = year + "-0" + presentM + "-0" + presentD;
|
||||
} else {
|
||||
endTime = year + "-0" + presentM + "-" + presentD;
|
||||
}
|
||||
} else {
|
||||
// 第四季度
|
||||
startTime = year + "-10-01";
|
||||
if (presentD < 10) {
|
||||
endTime = year + "-" + presentM + "-0" + presentD;
|
||||
} else {
|
||||
endTime = year + "-" + presentM + "-" + presentD;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if (month == 10) {
|
||||
startTime = year + "-" + month + "-01";
|
||||
} else {
|
||||
startTime = year + "-0" + month + "-01";
|
||||
}
|
||||
month = month + 2;
|
||||
if (month >= presentM) {
|
||||
endTime = this.getEndTime();
|
||||
} else {
|
||||
var day = this.getDays(year, month);
|
||||
endTime = year + "-" + month + "-" + day;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if (month == 10) {
|
||||
startTime = year + "-" + month + "-01";
|
||||
month = month + 2;
|
||||
var day = this.getDays(year, month);
|
||||
endTime = year + "-" + month + "-" + day;
|
||||
} else {
|
||||
startTime = year + "-0" + month + "-01";
|
||||
month = month + 2;
|
||||
var day = this.getDays(year, month);
|
||||
endTime = year + "-0" + month + "-" + day;
|
||||
}
|
||||
}
|
||||
}
|
||||
} else if (interval == 5) {
|
||||
} else if (interval == 4) {
|
||||
//根据开始时间推
|
||||
var start = new Date(year, month - 1, date);
|
||||
start.setDate(start.getDate() + 7);
|
||||
startTime = this.formatTime(start);
|
||||
var end = new Date(start);
|
||||
end.setDate(start.getDate() + 6);
|
||||
endTime = this.formatTime(end);
|
||||
|
||||
if (parseInt((end - new Date()) / 1000 / 60) > 24) {
|
||||
//相差小时大于24小时，即超过当天，置为当天日期
|
||||
endTime = this.formatTime(new Date());
|
||||
}
|
||||
} else {
|
||||
year = year + 1;
|
||||
// 年份进位后大于当前年份，是不科学的
|
||||
if (year >= presentY) {
|
||||
startTime = presentY + "-01-01";
|
||||
if (presentM < 10) {
|
||||
if (presentD < 10) {
|
||||
endTime = presentY + "-0" + presentM + "-0" + presentD;
|
||||
} else {
|
||||
endTime = presentY + "-0" + presentM + "-" + presentD;
|
||||
}
|
||||
} else {
|
||||
endTime = presentY + "-" + presentM + "-" + presentD;
|
||||
}
|
||||
} else {
|
||||
startTime = year + "-01-01";
|
||||
endTime = year + "-12-31";
|
||||
}
|
||||
}
|
||||
|
||||
this.timeValue = [startTime, endTime];
|
||||
|
||||
// 判断向后键的状态
|
||||
var temp = this.getEndTime();
|
||||
this.timeStatus(temp, endTime);
|
||||
},
|
||||
//当前按钮点击事件
|
||||
nowTime() {
|
||||
let interval = this.intervald;
|
||||
let endTime = this.getEndTime();
|
||||
let startTime = this.getStartTime(interval, endTime);
|
||||
this.timeValue = [startTime, endTime];
|
||||
// 判断向后键的状态
|
||||
let temp = this.getEndTime();
|
||||
this.timeStatus(temp, endTime);
|
||||
},
|
||||
//判断向后按钮
|
||||
timeStatus(temp, endTime) {
|
||||
// 判断next按钮的状态
|
||||
if (temp == endTime) {
|
||||
this.preDisabled = true;
|
||||
} else {
|
||||
this.preDisabled = false;
|
||||
}
|
||||
},
|
||||
// 获取月份的天数
|
||||
getDays(year, month) {
|
||||
let max = new Date(year, month, 0).getDate();
|
||||
return max;
|
||||
},
|
||||
querfromdata() {
|
||||
//type用于区分是按钮触发还是钩子函数触发 1按钮触发 underfind 钩子触发
|
||||
if (!this.type) {
|
||||
var data = this.timeValue;
|
||||
var timehbValue = "";
|
||||
this.$emit("querfromdata", data, timehbValue, this.intervald);
|
||||
} else if (this.type == 2) {
|
||||
this.huangbiyear();
|
||||
}
|
||||
},
|
||||
goto() {
|
||||
this.$router.push({
|
||||
path: "/harmonic-boot/algorithm",
|
||||
query: { name: this.name, path: this.path },
|
||||
});
|
||||
},
|
||||
//环比
|
||||
huangbiyear() {
|
||||
this.huanbibiFalg = true;
|
||||
let interval = this.intervald;
|
||||
let startTime = this.timeValue[0];
|
||||
let endTime = this.timeValue[1];
|
||||
let year = parseInt(startTime.substring(0, 4));
|
||||
let month = parseInt(startTime.substring(5, 7));
|
||||
let date = parseInt(startTime.substring(8, 10));
|
||||
//按月
|
||||
if (interval == 3) {
|
||||
// 换年份
|
||||
if (month == 1) {
|
||||
year = year - 1;
|
||||
startTime = year + "-12-01";
|
||||
endTime = year + "-12-31";
|
||||
} else if (month <= 10) {
|
||||
month = month - 1;
|
||||
startTime = year + "-0" + month + "-01";
|
||||
let day = this.getDays(year, month);
|
||||
endTime = year + "-0" + month + "-" + day;
|
||||
} else {
|
||||
month = month - 1;
|
||||
startTime = year + "-" + month + "-01";
|
||||
let day = this.getDays(year, month);
|
||||
endTime = year + "-" + month + "-" + day;
|
||||
}
|
||||
//按周
|
||||
} else if (interval == 4) {
|
||||
//根据开始时间推
|
||||
let start = new Date(year, month - 1, date);
|
||||
start.setDate(start.getDate() - 7);
|
||||
startTime = this.formatTime(start);
|
||||
var end = new Date(start);
|
||||
end.setDate(start.getDate() + 6);
|
||||
endTime = this.formatTime(end);
|
||||
//按季度
|
||||
} else if (interval == 2) {
|
||||
// 换年份
|
||||
if (month == 1) {
|
||||
year = year - 1;
|
||||
startTime = year + "-10-01";
|
||||
endTime = year + "-12-31";
|
||||
} else {
|
||||
// 还是本年
|
||||
month = month - 3;
|
||||
startTime = year + "-0" + month + "-01";
|
||||
month = month + 2;
|
||||
var day = this.getDays(year, month);
|
||||
endTime = year + "-0" + month + "-" + day;
|
||||
}
|
||||
//自定义
|
||||
} else if (interval == 5) {
|
||||
//按年
|
||||
} else if (interval == 1) {
|
||||
year = year - 1;
|
||||
startTime = year + "-01-01";
|
||||
endTime = year + "-12-31";
|
||||
} else if (interval == 6) {
|
||||
if (month <= 6) {
|
||||
year = year - 1;
|
||||
startTime = year + "-07-01";
|
||||
endTime = year + "-12-31";
|
||||
} else {
|
||||
startTime = year + "-01-01";
|
||||
endTime = year + "-06-30";
|
||||
}
|
||||
}
|
||||
this.timehbValue = [startTime, endTime];
|
||||
var data = this.timeValue;
|
||||
var timehbValue = this.timehbValue;
|
||||
// debugger
|
||||
this.$emit("querfromdata", data, timehbValue, interval);
|
||||
// 判断向后键的状态
|
||||
// var temp = this.getEndTime();
|
||||
//this.timeStatus(temp, endTime);
|
||||
},
|
||||
//同比
|
||||
tongbiyear() {
|
||||
this.tonbiFalg = true;
|
||||
let interval = this.intervald;
|
||||
let startTime = this.timeValue[0];
|
||||
let endTime = this.timeValue[1];
|
||||
let year = parseInt(startTime.substring(0, 4));
|
||||
let month = parseInt(startTime.substring(5, 7));
|
||||
let date = parseInt(startTime.substring(8, 10));
|
||||
//按月
|
||||
if (interval == 3) {
|
||||
year = year - 1;
|
||||
if (month <= 10) {
|
||||
startTime = year + "-0" + month + "-01";
|
||||
let day = this.getDays(year, month);
|
||||
endTime = year + "-0" + month + "-" + day;
|
||||
} else {
|
||||
startTime = year + "-" + month + "-01";
|
||||
let day = this.getDays(year, month);
|
||||
endTime = year + "-" + month + "-" + day;
|
||||
}
|
||||
//按周
|
||||
} else if (interval == 4) {
|
||||
//根据开始时间推
|
||||
let start = new Date(year - 1, month, date);
|
||||
start.setDate(start.getDate() - 7);
|
||||
startTime = this.formatTime(start);
|
||||
var end = new Date(start);
|
||||
end.setDate(start.getDate() + 6);
|
||||
endTime = this.formatTime(end);
|
||||
//按季度
|
||||
} else if (interval == 2) {
|
||||
year = year - 1;
|
||||
if (month < 10) {
|
||||
startTime = year + "-0" + month + "-01";
|
||||
} else {
|
||||
startTime = year + "-" + month + "-01";
|
||||
}
|
||||
month = month + 2;
|
||||
if (month <= 10) {
|
||||
var day = this.getDays(year, month);
|
||||
endTime = year + "-0" + month + "-" + day;
|
||||
} else {
|
||||
var day = this.getDays(year, month);
|
||||
endTime = year + "-" + month + "-" + day;
|
||||
}
|
||||
//自定义
|
||||
} else if (interval == 5) {
|
||||
//按年
|
||||
} else if (interval == 1) {
|
||||
year = year - 1;
|
||||
startTime = year + "-01-01";
|
||||
endTime = year + "-12-31";
|
||||
} else if (interval == 6) {
|
||||
if (month <= 6) {
|
||||
year = year - 1;
|
||||
startTime = year + "-07-01";
|
||||
endTime = year + "-12-31";
|
||||
} else {
|
||||
startTime = year + "-01-01";
|
||||
endTime = year + "-06-30";
|
||||
}
|
||||
}
|
||||
this.timehbValue = [startTime, endTime];
|
||||
var data = this.timeValue;
|
||||
var timehbValue = this.timehbValue;
|
||||
this.$emit("querfromdata", data, timehbValue, interval);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.spanColor {
|
||||
color: $themeColor;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,19 @@
|
||||
//台账统计
|
||||
import request from "@/utils/request";
|
||||
|
||||
//监测终端统计单位图表
|
||||
export function Classification() {
|
||||
return request({
|
||||
url: "/api1/Indicator/Classification",
|
||||
method: "post"
|
||||
|
||||
});
|
||||
}
|
||||
export function figure() {
|
||||
return request({
|
||||
url: "/api1/system-boot/census/getFigure",
|
||||
method: "get"
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
60
src/views/BusinessAdministrator/management/PlanTraffic.vue
Normal file
60
src/views/BusinessAdministrator/management/PlanTraffic.vue
Normal file
@@ -0,0 +1,60 @@
|
||||
<template>
|
||||
<div class="pd10">
|
||||
<el-row style="overflow-y: hidden">
|
||||
<el-col>
|
||||
<Census></Census>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Census from './PlanTraffic/Census.vue'
|
||||
|
||||
export default {
|
||||
components: { Census },
|
||||
data() {
|
||||
return {
|
||||
vh: '',
|
||||
vh1: '',
|
||||
activeName: 'first',
|
||||
device: ''
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
mounted() {
|
||||
this.setHeight()
|
||||
window.addEventListener('resize', this.setHeight)
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.setHeight)
|
||||
},
|
||||
computed: {
|
||||
//计算表格高度
|
||||
},
|
||||
methods: {
|
||||
setHeight() {
|
||||
this.vh = window.sessionStorage.getItem('appheight') - 80 + 'px'
|
||||
this.vh1 = window.sessionStorage.getItem('appheight') - 20 + 'px'
|
||||
},
|
||||
handleClick(tab, event) {
|
||||
// console.log(tab, event);
|
||||
}
|
||||
}
|
||||
}
|
||||
</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;
|
||||
}
|
||||
.block {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,481 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<div class="Top" ref="top">
|
||||
<el-tabs
|
||||
:tab-position="tabPosition"
|
||||
v-model="active"
|
||||
type="border-card"
|
||||
:style="'height:' + vh1 + ';'"
|
||||
>
|
||||
<el-tab-pane label="基础套餐" name="first">
|
||||
<div class="pd10">
|
||||
<el-form :inline="true" class="demo-form-inline">
|
||||
<div style="display: flex">
|
||||
<el-form-item label="筛选">
|
||||
<el-input v-model="i" placeholder="请输入内容"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<div style="display: flex; justify-content: space-between; flex-grow: 1">
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="primary"
|
||||
class="ml10"
|
||||
icon="el-icon-search"
|
||||
@click="steady"
|
||||
>
|
||||
查询
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" class="ml10" @click="add">新增</el-button>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
</el-form>
|
||||
<el-table
|
||||
stripe
|
||||
:data="tableData"
|
||||
header-cell-class-name="table_header"
|
||||
border
|
||||
:height="height"
|
||||
v-loading="isLoading"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-table-column align="center" prop="name" label="套餐名"></el-table-column>
|
||||
<el-table-column align="center" prop="flow" label="套餐流量(MB)"></el-table-column>
|
||||
<el-table-column align="center" prop="updateBy" label="修改人"></el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
prop="updateTime"
|
||||
label="修改时间"
|
||||
></el-table-column>
|
||||
<el-table-column align="center" prop="type" label="类型">
|
||||
<template slot-scope="scope">
|
||||
<el-tag type="primary" v-if="scope.row.type === 0">基础套餐</el-tag>
|
||||
<el-tag type="primary" v-if="scope.row.type === 1">扩展套餐</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" prop="flag" label="类型">
|
||||
<template slot-scope="scope">
|
||||
<el-tag type="primary" v-if="scope.row.flag === 0">其他</el-tag>
|
||||
<el-tag type="primary" v-if="scope.row.flag === 1">默认</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" width="180">
|
||||
<template slot-scope="scope">
|
||||
<el-button @click="edit(scope.row)" type="primary" size="mini">
|
||||
修改
|
||||
</el-button>
|
||||
<el-button type="primary" size="mini" @click="deleteData(scope.row)">
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- <el-table stripe
|
||||
:data="totalData"
|
||||
:height="height"
|
||||
border
|
||||
v-loading="isLoading"
|
||||
style="width: 100%"
|
||||
header-cell-class-name="table_header"
|
||||
>
|
||||
<el-table-column prop="point" label="套餐名">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="point"
|
||||
label="套餐流量(MB)"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="point"
|
||||
label="修改人"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="point"
|
||||
label="修改时间"
|
||||
></el-table-column>
|
||||
<el-table-column label="类型">
|
||||
<template slot-scope="scope">
|
||||
<el-tag @click="cha(scope.row)">{{
|
||||
scope.row.point
|
||||
}}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="类型">
|
||||
<template slot-scope="scope">
|
||||
<el-tag @click="cha(scope.row)">{{
|
||||
scope.row.point
|
||||
}}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="" label="操作">
|
||||
<template slot-scope="scope">
|
||||
<el-button size="mini" type="primary" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
|
||||
<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table> -->
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="扩展套餐" name="second">
|
||||
<div class="pd10">
|
||||
<el-form :inline="true" class="demo-form-inline">
|
||||
<div style="display: flex">
|
||||
<el-form-item label="筛选">
|
||||
<el-input v-model="i" placeholder="请输入内容"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<div style="display: flex; justify-content: space-between; flex-grow: 1">
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="primary"
|
||||
class="ml10"
|
||||
icon="el-icon-search"
|
||||
@click="steady"
|
||||
>
|
||||
查询
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" class="ml10" @click="add">新增</el-button>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
</el-form>
|
||||
<el-table
|
||||
stripe
|
||||
:data="tableData1"
|
||||
header-cell-class-name="table_header"
|
||||
border
|
||||
:height="height"
|
||||
style="width: 100%"
|
||||
>
|
||||
<el-table-column align="center" prop="name" label="套餐名"></el-table-column>
|
||||
<el-table-column align="center" prop="flow" label="套餐流量(MB)"></el-table-column>
|
||||
<el-table-column align="center" prop="updateBy" label="修改人"></el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
prop="updateTime"
|
||||
label="修改时间"
|
||||
></el-table-column>
|
||||
<el-table-column align="center" prop="type" label="类型">
|
||||
<template slot-scope="scope">
|
||||
<el-tag type="primary" v-if="scope.row.type === 0">基础套餐</el-tag>
|
||||
<el-tag type="primary" v-if="scope.row.type === 1">扩展套餐</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="类型">
|
||||
<template slot-scope="scope">
|
||||
<el-tag type="primary" v-if="scope.row.flag === 0">当月生效</el-tag>
|
||||
<el-tag type="primary" v-if="scope.row.flag === 1">连续生效</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" align="center" width="180">
|
||||
<template slot-scope="scope">
|
||||
<el-button @click="edit(scope.row)" type="primary" size="mini">
|
||||
修改
|
||||
</el-button>
|
||||
<el-button type="primary" size="mini" @click="deleteData(scope.row)">
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<!-- <el-table stripe
|
||||
:data="totalData1"
|
||||
:height="height"
|
||||
border
|
||||
v-loading="isLoading"
|
||||
style="width: 100%"
|
||||
header-cell-class-name="table_header"
|
||||
>
|
||||
<el-table-column prop="point" label="套餐名">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="point"
|
||||
label="套餐流量(MB)"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="point"
|
||||
label="修改人"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="point"
|
||||
label="修改时间"
|
||||
></el-table-column>
|
||||
<el-table-column label="类型">
|
||||
<template slot-scope="scope">
|
||||
<el-tag @click="cha(scope.row)">{{
|
||||
scope.row.point
|
||||
}}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="类型">
|
||||
<template slot-scope="scope">
|
||||
<el-tag @click="cha(scope.row)">{{
|
||||
scope.row.point
|
||||
}}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="" label="操作">
|
||||
<template slot-scope="scope">
|
||||
<el-button size="mini" type="primary" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
|
||||
<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table> -->
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-dialog
|
||||
:close-on-click-modal="false"
|
||||
title="编辑"
|
||||
:visible.sync="dialogVisible"
|
||||
width="20%"
|
||||
:before-close="handleClose"
|
||||
>
|
||||
<el-form ref="form" :model="form" label-width="130px" :inline="true" class="demo-form-inline">
|
||||
<el-form-item label="套餐名称:" style="margin-top: 20px">
|
||||
<el-input v-model="form.name" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="套餐流量:" style="margin-top: 20px">
|
||||
<el-input v-model="form.type" clearable></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="套餐类型:" style="margin-top: 20px">
|
||||
<el-select v-model="value" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="二级类型:" style="margin-top: 20px">
|
||||
<el-select v-model="value" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<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>
|
||||
<el-dialog
|
||||
:close-on-click-modal="false"
|
||||
title="新增"
|
||||
:visible.sync="dialogVisible1"
|
||||
width="20%"
|
||||
:before-close="handleClose"
|
||||
>
|
||||
<el-form ref="form" :model="form" label-width="130px" :inline="true" class="demo-form-inline">
|
||||
<el-form-item label="套餐名称:" style="margin-top: 20px">
|
||||
<el-input v-model="form.name" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="套餐流量:" style="margin-top: 20px">
|
||||
<el-input v-model="form.type" clearable></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="套餐类型:" style="margin-top: 20px">
|
||||
<el-select v-model="value" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="二级类型:" style="margin-top: 20px">
|
||||
<el-select v-model="value" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogVisible1 = false">取 消</el-button>
|
||||
<el-button type="primary" @click="dialogVisible1 = false">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Area from '@/views/components/Area/Area.vue'
|
||||
import flow from '@/api/device/flow'
|
||||
import { viewheight } from '@/assets/commjs/common'
|
||||
import Timslot from './Timeslot.vue'
|
||||
export default {
|
||||
components: { Area, Timslot },
|
||||
data() {
|
||||
return {
|
||||
i: '',
|
||||
vh1: '',
|
||||
dialogVisible: false,
|
||||
dialogVisible1: false,
|
||||
options: [
|
||||
{
|
||||
value: '选项1',
|
||||
label: '电铁'
|
||||
},
|
||||
{
|
||||
value: '选项2',
|
||||
label: '换流站'
|
||||
},
|
||||
{
|
||||
value: '选项3',
|
||||
label: '风电'
|
||||
},
|
||||
{
|
||||
value: '选项4',
|
||||
label: '光伏'
|
||||
},
|
||||
{
|
||||
value: '选项5',
|
||||
label: '其他非线性负荷'
|
||||
},
|
||||
{
|
||||
value: '选项6',
|
||||
label: '敏感重要高危用户'
|
||||
},
|
||||
{
|
||||
value: '选项7',
|
||||
label: '变电站'
|
||||
},
|
||||
{
|
||||
value: '选项8',
|
||||
label: '跨省关口'
|
||||
},
|
||||
{
|
||||
value: '选项9',
|
||||
label: '其他'
|
||||
}
|
||||
],
|
||||
value: '',
|
||||
form: {
|
||||
date: '',
|
||||
name: '',
|
||||
value: ''
|
||||
},
|
||||
height: null,
|
||||
isLoading: false,
|
||||
//稳态指标超标统计
|
||||
|
||||
totalData: [],
|
||||
totalData1: [],
|
||||
active_active: 'first-first',
|
||||
zoom: undefined, //图表焦点校验
|
||||
vh: '',
|
||||
height: 265,
|
||||
device: '',
|
||||
getHeight: '',
|
||||
tabPosition: 'top',
|
||||
active: 'first',
|
||||
isLoading: false,
|
||||
isLoading2: false,
|
||||
isLoading3: false,
|
||||
isLoading4: false,
|
||||
serialData: []
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
mounted() {
|
||||
this.setHeight()
|
||||
window.addEventListener('resize', this.setHeight)
|
||||
|
||||
setTimeout(() => {
|
||||
this.getHeight = Number(this.$refs.getHeight.offsetHeight - 45)
|
||||
}, 0)
|
||||
//echarts图表调用
|
||||
|
||||
this.zoom = 1 / document.body.style.zoom
|
||||
|
||||
this.getList()
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.setHeight)
|
||||
},
|
||||
methods: {
|
||||
setHeight() {
|
||||
this.vh1 = window.sessionStorage.getItem('appheight') - 20 + 'px'
|
||||
this.device = window.devicePixelRatio
|
||||
this.height = window.sessionStorage.getItem('appheight') - 175 + 'px'
|
||||
this.vh = (viewheight() - 90) / 2 + 'px'
|
||||
this.zoom = 1 / document.body.style.zoom
|
||||
},
|
||||
add() {
|
||||
this.dialogVisible1 = true
|
||||
},
|
||||
handleClose() {
|
||||
this.dialogVisible = false
|
||||
this.dialogVisible1 = false
|
||||
},
|
||||
handleEdit(val) {
|
||||
this.dialogVisible = true
|
||||
// console.log(val, "valvalval");
|
||||
},
|
||||
cellStyle(row, column, rowIndex, columnIndex) {
|
||||
// console.log(row);
|
||||
if (row.columnIndex == 2 || row.columnIndex == 3 || row.columnIndex == 4 || row.columnIndex == 5) {
|
||||
return 'font-weight: 600;'
|
||||
}
|
||||
},
|
||||
//监测终端统计echarts图表
|
||||
|
||||
//获取主界面列表
|
||||
getList() {
|
||||
flow.getList().then(response => {
|
||||
if (response.code === 'A0000') {
|
||||
this.tableData = response.data.filter(item => {
|
||||
if (item.type === 0) {
|
||||
return item
|
||||
}
|
||||
})
|
||||
|
||||
this.totalData1 = response.data.filter(item => {
|
||||
if (item.type === 1) {
|
||||
return item
|
||||
}
|
||||
})
|
||||
|
||||
// this.stashList = this.tableData //暂存数组 当搜索为空时候 数组展示所有数据
|
||||
// this.stashListExtend = this.tableDataExtend
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</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;
|
||||
}
|
||||
.prop {
|
||||
font-weight: 600;
|
||||
}
|
||||
::v-deep .el-table__body-wrapper.is-scrolling-none {
|
||||
height: 227px !important;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,787 @@
|
||||
<template>
|
||||
<div style="display: inline-block; width: 100%; margin-bottom: 10px">
|
||||
<span style="font-size: 14px; font-weight: 550">
|
||||
<span class="spanColor">间隔:</span>
|
||||
</span>
|
||||
<el-select
|
||||
style="width: 90px; margin-left: 10px"
|
||||
v-model="intervald"
|
||||
@change="interchange"
|
||||
placeholder="请选择"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in timeOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
<el-date-picker
|
||||
style="width: 230px"
|
||||
:disabled="disabled"
|
||||
:readonly="pickDisabled"
|
||||
:clearable="false"
|
||||
v-model="timeValue"
|
||||
:picker-options="pickerOptions"
|
||||
type="daterange"
|
||||
value-format="yyyy-MM-dd"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
align="right"
|
||||
>
|
||||
</el-date-picker>
|
||||
|
||||
<div style="display: inline" v-if="buttonShow">
|
||||
<el-button
|
||||
:disabled="backDisabled"
|
||||
type="primary"
|
||||
icon="el-icon-d-arrow-left"
|
||||
@click="preClick"
|
||||
style="margin-left: 10px"
|
||||
></el-button>
|
||||
<el-button @click="nowTime" type="primary" style="margin-left: 5px"
|
||||
>当前</el-button
|
||||
>
|
||||
<el-button
|
||||
:disabled="preDisabled"
|
||||
type="primary"
|
||||
icon="el-icon-d-arrow-right"
|
||||
@click="back"
|
||||
style="margin-left: 5px"
|
||||
></el-button>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- <el-button
|
||||
@click="querfromdata"
|
||||
type="primary"
|
||||
icon="el-icon-search"
|
||||
style="margin-left: 10px"
|
||||
>查询</el-button
|
||||
> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "index4",
|
||||
props: {
|
||||
name: {
|
||||
type: String,
|
||||
default: undefined,
|
||||
},
|
||||
path: {
|
||||
type: String,
|
||||
default: undefined,
|
||||
},
|
||||
tablename: {
|
||||
type: String,
|
||||
default: undefined,
|
||||
},
|
||||
interval: {
|
||||
type: Number,
|
||||
default: undefined,
|
||||
},
|
||||
type: {
|
||||
type: Number,
|
||||
default: undefined,
|
||||
},
|
||||
falg: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
query: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
thb: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
intervald(val) {
|
||||
if (val != 5) {
|
||||
let endTime = this.getEndTime();
|
||||
let startTime = this.getStartTime(this.intervald, endTime);
|
||||
this.timeValue = [startTime, endTime];
|
||||
this.pickDisabled = false;
|
||||
this.buttonShow = true;
|
||||
} else {
|
||||
let endTime = this.getEndTime();
|
||||
let startTime = this.getStartTime(this.intervald, endTime);
|
||||
this.timeValue = [startTime, endTime];
|
||||
this.buttonShow = false;
|
||||
this.pickDisabled = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
disabled: true,
|
||||
buttonShow: true, //向前向后按钮显示隐藏控制按钮
|
||||
pickDisabled: false, //时间组件只读控制se,
|
||||
falg1: true,
|
||||
timeOptions: [
|
||||
{ label: "年份", value: 1 },
|
||||
{ label: "季度", value: 2 },
|
||||
{ label: "月份", value: 3 },
|
||||
{ label: "周", value: 4 },
|
||||
// { label: "自定义", value: 5 },
|
||||
],
|
||||
pickerOptions: {
|
||||
shortcuts: [
|
||||
{
|
||||
text: "最近一周",
|
||||
onClick(picker) {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
|
||||
picker.$emit("pick", [start, end]);
|
||||
},
|
||||
},
|
||||
{
|
||||
text: "最近一个月",
|
||||
onClick(picker) {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
|
||||
picker.$emit("pick", [start, end]);
|
||||
},
|
||||
},
|
||||
{
|
||||
text: "最近三个月",
|
||||
onClick(picker) {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
|
||||
picker.$emit("pick", [start, end]);
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
intervald: this.interval,
|
||||
tablenamed: this.tablename,
|
||||
timeValue: [],
|
||||
timehbValue: [],
|
||||
backDisabled: false,
|
||||
preDisabled: true,
|
||||
huanbibiFalg: false,
|
||||
tonbiFalg: false,
|
||||
timeFlag: 0,
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
mounted() {
|
||||
let endTime = this.getEndTime();
|
||||
let startTime = this.getStartTime(this.intervald, endTime);
|
||||
// console.log(endTime,startTime,'endtime','startTime')
|
||||
this.$store.commit("sagServerity/SET_TIMEINTERVAL",[startTime,endTime] )
|
||||
this.timeValue = [startTime, endTime];
|
||||
if (this.type == 2) {
|
||||
this.huangbiyear();
|
||||
} else if (!this.type) {
|
||||
this.querfromdata();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
interchange(val) {
|
||||
if (val == 1 || val == 2) {
|
||||
this.timeFlag = 0;
|
||||
} else {
|
||||
this.timeFlag = 1;
|
||||
}
|
||||
// console.log(this.timeFlag);
|
||||
this.intervald = val;
|
||||
if (val == 5) {
|
||||
this.tablenamed == "tab1";
|
||||
this.disabled = false;
|
||||
} else {
|
||||
this.tablenamed == "tab2";
|
||||
this.disabled = true;
|
||||
}
|
||||
},
|
||||
// 获取当前日期，精确到日
|
||||
getEndTime() {
|
||||
var now = new Date();
|
||||
var sep = "-";
|
||||
var year = now.getFullYear();
|
||||
var month = now.getMonth() + 1;
|
||||
if (month < 10) {
|
||||
month = "0" + month;
|
||||
}
|
||||
var date = now.getDate();
|
||||
if (date < 10) {
|
||||
date = "0" + date;
|
||||
}
|
||||
|
||||
// 拼接当前的日期
|
||||
var endTime = year + sep + month + sep + date;
|
||||
return endTime;
|
||||
},
|
||||
// 获取起始日期
|
||||
getStartTime(interval, endTime) {
|
||||
var sep = "-";
|
||||
var arr = endTime.split("-");
|
||||
var year = arr[0];
|
||||
var month = arr[1];
|
||||
var date = arr[2];
|
||||
// 按月份间隔
|
||||
if (interval == 3) {
|
||||
date = "01";
|
||||
// 按季度间隔
|
||||
} else if (interval == 2) {
|
||||
if ((month > 0) & (month < 4)) {
|
||||
// 第一季度
|
||||
month = "01";
|
||||
date = "01";
|
||||
} else if (month > 3 && month < 7) {
|
||||
// 第二季度
|
||||
month = "04";
|
||||
date = "01";
|
||||
} else if (month > 6 && month < 10) {
|
||||
// 第三季度
|
||||
month = "07";
|
||||
date = "01";
|
||||
} else {
|
||||
// 第四季度
|
||||
month = "10";
|
||||
date = "01";
|
||||
}
|
||||
} else if (interval == 1) {
|
||||
month = "01";
|
||||
date = "01";
|
||||
} else if (interval == "半年") {
|
||||
if (month < 7) {
|
||||
month = "01";
|
||||
date = "01";
|
||||
} else {
|
||||
month = "07";
|
||||
date = "01";
|
||||
}
|
||||
} else if (interval == 4) {
|
||||
//周
|
||||
var start = new Date(year, month - 1, date);
|
||||
var dayOfWeek = start.getDay() == 0 ? 7 : start.getDay(); // 如果为周日，则置为7天
|
||||
start.setDate(start.getDate() - dayOfWeek + 1); // 计算开始时间
|
||||
|
||||
if (this.formatTime(new Date()) != endTime) {
|
||||
// 如果结束时间不是当前时间
|
||||
var end = new Date(start);
|
||||
end.setDate(end.getDate() + 6);
|
||||
// $("#endTime").val(this.formatTime(end));
|
||||
}
|
||||
|
||||
return this.formatTime(start);
|
||||
}
|
||||
|
||||
var startTime = year + sep + month + sep + date;
|
||||
return startTime;
|
||||
},
|
||||
// 时间格式化
|
||||
formatTime(time) {
|
||||
return (
|
||||
time.getFullYear() +
|
||||
"-" +
|
||||
(time.getMonth() + 1 < 10 ? "0" : "") +
|
||||
(time.getMonth() + 1) +
|
||||
"-" +
|
||||
(time.getDate() < 10 ? "0" : "") +
|
||||
time.getDate()
|
||||
);
|
||||
},
|
||||
//向前
|
||||
preClick() {
|
||||
let interval = this.intervald;
|
||||
let startTime = this.timeValue[0];
|
||||
let endTime = this.timeValue[1];
|
||||
let year = parseInt(startTime.substring(0, 4));
|
||||
let month = parseInt(startTime.substring(5, 7));
|
||||
let date = parseInt(startTime.substring(8, 10));
|
||||
//按月
|
||||
if (interval == 3) {
|
||||
// 换年份
|
||||
if (month == 1) {
|
||||
year = year - 1;
|
||||
startTime = year + "-12-01";
|
||||
endTime = year + "-12-31";
|
||||
} else if (month <= 10) {
|
||||
month = month - 1;
|
||||
startTime = year + "-0" + month + "-01";
|
||||
let day = this.getDays(year, month);
|
||||
endTime = year + "-0" + month + "-" + day;
|
||||
} else {
|
||||
month = month - 1;
|
||||
startTime = year + "-" + month + "-01";
|
||||
let day = this.getDays(year, month);
|
||||
endTime = year + "-" + month + "-" + day;
|
||||
}
|
||||
//按周
|
||||
} else if (interval == 4) {
|
||||
//根据开始时间推
|
||||
let start = new Date(year, month - 1, date);
|
||||
start.setDate(start.getDate() - 7);
|
||||
startTime = this.formatTime(start);
|
||||
var end = new Date(start);
|
||||
end.setDate(start.getDate() + 6);
|
||||
endTime = this.formatTime(end);
|
||||
//按季度
|
||||
} else if (interval == 2) {
|
||||
// 换年份
|
||||
if (month == 1) {
|
||||
year = year - 1;
|
||||
startTime = year + "-10-01";
|
||||
endTime = year + "-12-31";
|
||||
} else {
|
||||
// 还是本年
|
||||
month = month - 3;
|
||||
startTime = year + "-0" + month + "-01";
|
||||
month = month + 2;
|
||||
var day = this.getDays(year, month);
|
||||
endTime = year + "-0" + month + "-" + day;
|
||||
}
|
||||
//自定义
|
||||
} else if (interval == 5) {
|
||||
//按年
|
||||
} else if (interval == 1) {
|
||||
year = year - 1;
|
||||
startTime = year + "-01-01";
|
||||
endTime = year + "-12-31";
|
||||
} else if (interval == 6) {
|
||||
if (month <= 6) {
|
||||
year = year - 1;
|
||||
startTime = year + "-07-01";
|
||||
endTime = year + "-12-31";
|
||||
} else {
|
||||
startTime = year + "-01-01";
|
||||
endTime = year + "-06-30";
|
||||
}
|
||||
}
|
||||
this.timeValue = [startTime, endTime];
|
||||
|
||||
// 判断向后键的状态
|
||||
var temp = this.getEndTime();
|
||||
this.timeStatus(temp, endTime);
|
||||
},
|
||||
//向后
|
||||
back() {
|
||||
let interval = this.intervald;
|
||||
let startTime = this.timeValue[0];
|
||||
let endTime = this.timeValue[1];
|
||||
let year = parseInt(startTime.substring(0, 4));
|
||||
let month = parseInt(startTime.substring(5, 7));
|
||||
let date = parseInt(startTime.substring(8, 10));
|
||||
var now = new Date();
|
||||
// 获取当前年份
|
||||
var presentY = now.getFullYear();
|
||||
// 获取当前月份
|
||||
var presentM = now.getMonth() + 1;
|
||||
// 获取当前日期
|
||||
var presentD = now.getDate();
|
||||
if (interval == 3) {
|
||||
if (month == 12) {
|
||||
year = year + 1;
|
||||
// 年份进位后，大于当前的年份，是不科学的
|
||||
if (presentY < year) {
|
||||
startTime = presentY + "-12-01";
|
||||
if (presentD < 10) {
|
||||
endTime = presentY + "-12" + "-0" + presentD;
|
||||
} else {
|
||||
endTime = presentY + "-12" + "-" + presentD;
|
||||
}
|
||||
// 年份进位后，等于当前的年份
|
||||
} else if (presentY == year) {
|
||||
startTime = year + "-01-01";
|
||||
if (presentM > 1) {
|
||||
endTime = year + "-01-31";
|
||||
} else {
|
||||
if (presentD < 10) {
|
||||
endTime = year + "-01" + "-0" + presentD;
|
||||
} else {
|
||||
endTime = year + "-01" + "-" + presentD;
|
||||
}
|
||||
}
|
||||
// 年份进位后，依旧小于当前的年份
|
||||
} else {
|
||||
startTime = year + "-01-01";
|
||||
endTime = year + "-01-31";
|
||||
}
|
||||
} else {
|
||||
month = month + 1;
|
||||
// 年份等于当前年份
|
||||
if (presentY == year) {
|
||||
// 月份超过当前月份，是不科学的
|
||||
if (month >= presentM) {
|
||||
if (presentM < 10) {
|
||||
startTime = year + "-0" + presentM + "-01";
|
||||
if (presentD < 10) {
|
||||
endTime = year + "-0" + presentM + "-0" + presentD;
|
||||
} else {
|
||||
endTime = year + "-0" + presentM + "-" + presentD;
|
||||
}
|
||||
} else {
|
||||
startTime = year + "-" + presentM + "-01";
|
||||
if (presentD < 10) {
|
||||
endTime = year + "-" + presentM + "-0" + presentD;
|
||||
} else {
|
||||
endTime = year + "-" + presentM + "-" + presentD;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if (month < 10) {
|
||||
startTime = year + "-0" + month + "-01";
|
||||
var day = this.getDays(year, month);
|
||||
endTime = year + "-0" + month + "-" + day;
|
||||
} else {
|
||||
startTime = year + "-" + month + "-01";
|
||||
var day = this.getDays(year, month);
|
||||
endTime = year + "-" + month + "-" + day;
|
||||
}
|
||||
}
|
||||
// 年份小于当前的年份
|
||||
} else {
|
||||
if (month < 10) {
|
||||
startTime = year + "-0" + month + "-01";
|
||||
var day = this.getDays(year, month);
|
||||
endTime = year + "-0" + month + "-" + day;
|
||||
} else {
|
||||
startTime = year + "-" + month + "-01";
|
||||
var day = this.getDays(year, month);
|
||||
endTime = year + "-" + month + "-" + day;
|
||||
}
|
||||
}
|
||||
}
|
||||
} else if (interval == 2) {
|
||||
// 前进需要年份进位
|
||||
if (month == 10) {
|
||||
year = year + 1;
|
||||
// 年份进位后大于当前年份是不科学的
|
||||
if (year > presentY) {
|
||||
startTime = presentY + "-10-01";
|
||||
if (presentD < 10) {
|
||||
endTime = year + "-" + presentM + "-0" + presentD;
|
||||
} else {
|
||||
endTime = year + "-" + presentM + "-" + presentD;
|
||||
}
|
||||
} else if (year == presentY) {
|
||||
startTime = year + "-01-01";
|
||||
// 当前月份大约3月份
|
||||
if (presentM > 3) {
|
||||
endTime = year + "-03-31";
|
||||
} else {
|
||||
// 当前月份也在第一季度里
|
||||
if (presentD < 10) {
|
||||
endTime = year + "-0" + presentM + "-0" + presentD;
|
||||
} else {
|
||||
endTime = year + "-0" + presentM + "-" + presentD;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
startTime = year + "-01-01";
|
||||
endTime = year + "-03-31";
|
||||
}
|
||||
} else {
|
||||
month = month + 3;
|
||||
// 季度进位后，超过当前月份是不科学的
|
||||
if (year == presentY) {
|
||||
if (month >= presentM) {
|
||||
// 当季度进位后大于当前月，以当前月的时间显示季度
|
||||
if (presentM > 0 && presentM < 4) {
|
||||
// 第一季度
|
||||
startTime = year + "-01-01";
|
||||
if (presentD < 10) {
|
||||
endTime = year + "-0" + presentM + "-0" + presentD;
|
||||
} else {
|
||||
endTime = year + "-0" + presentM + "-" + presentD;
|
||||
}
|
||||
} else if (presentM > 3 && presentM < 7) {
|
||||
// 第二季度
|
||||
startTime = year + "-04-01";
|
||||
if (presentD < 10) {
|
||||
endTime = year + "-0" + presentM + "-0" + presentD;
|
||||
} else {
|
||||
endTime = year + "-0" + presentM + "-" + presentD;
|
||||
}
|
||||
} else if (presentM > 6 && presentM < 10) {
|
||||
// 第三季度
|
||||
startTime = year + "-07-01";
|
||||
if (presentD < 10) {
|
||||
endTime = year + "-0" + presentM + "-0" + presentD;
|
||||
} else {
|
||||
endTime = year + "-0" + presentM + "-" + presentD;
|
||||
}
|
||||
} else {
|
||||
// 第四季度
|
||||
startTime = year + "-10-01";
|
||||
if (presentD < 10) {
|
||||
endTime = year + "-" + presentM + "-0" + presentD;
|
||||
} else {
|
||||
endTime = year + "-" + presentM + "-" + presentD;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if (month == 10) {
|
||||
startTime = year + "-" + month + "-01";
|
||||
} else {
|
||||
startTime = year + "-0" + month + "-01";
|
||||
}
|
||||
month = month + 2;
|
||||
if (month >= presentM) {
|
||||
endTime = this.getEndTime();
|
||||
} else {
|
||||
var day = this.getDays(year, month);
|
||||
endTime = year + "-" + month + "-" + day;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if (month == 10) {
|
||||
startTime = year + "-" + month + "-01";
|
||||
month = month + 2;
|
||||
var day = this.getDays(year, month);
|
||||
endTime = year + "-" + month + "-" + day;
|
||||
} else {
|
||||
startTime = year + "-0" + month + "-01";
|
||||
month = month + 2;
|
||||
var day = this.getDays(year, month);
|
||||
endTime = year + "-0" + month + "-" + day;
|
||||
}
|
||||
}
|
||||
}
|
||||
} else if (interval == 5) {
|
||||
} else if (interval == 4) {
|
||||
//根据开始时间推
|
||||
var start = new Date(year, month - 1, date);
|
||||
start.setDate(start.getDate() + 7);
|
||||
startTime = this.formatTime(start);
|
||||
var end = new Date(start);
|
||||
end.setDate(start.getDate() + 6);
|
||||
endTime = this.formatTime(end);
|
||||
|
||||
if (parseInt((end - new Date()) / 1000 / 60) > 24) {
|
||||
//相差小时大于24小时，即超过当天，置为当天日期
|
||||
endTime = this.formatTime(new Date());
|
||||
}
|
||||
} else {
|
||||
year = year + 1;
|
||||
// 年份进位后大于当前年份，是不科学的
|
||||
if (year >= presentY) {
|
||||
startTime = presentY + "-01-01";
|
||||
if (presentM < 10) {
|
||||
if (presentD < 10) {
|
||||
endTime = presentY + "-0" + presentM + "-0" + presentD;
|
||||
} else {
|
||||
endTime = presentY + "-0" + presentM + "-" + presentD;
|
||||
}
|
||||
} else {
|
||||
endTime = presentY + "-" + presentM + "-" + presentD;
|
||||
}
|
||||
} else {
|
||||
startTime = year + "-01-01";
|
||||
endTime = year + "-12-31";
|
||||
}
|
||||
}
|
||||
|
||||
this.timeValue = [startTime, endTime];
|
||||
|
||||
// 判断向后键的状态
|
||||
var temp = this.getEndTime();
|
||||
this.timeStatus(temp, endTime);
|
||||
},
|
||||
//当前按钮点击事件
|
||||
nowTime() {
|
||||
let interval = this.intervald;
|
||||
let endTime = this.getEndTime();
|
||||
let startTime = this.getStartTime(interval, endTime);
|
||||
this.timeValue = [startTime, endTime];
|
||||
// 判断向后键的状态
|
||||
let temp = this.getEndTime();
|
||||
this.timeStatus(temp, endTime);
|
||||
},
|
||||
//判断向后按钮
|
||||
timeStatus(temp, endTime) {
|
||||
// 判断next按钮的状态
|
||||
if (temp == endTime) {
|
||||
this.preDisabled = true;
|
||||
} else {
|
||||
this.preDisabled = false;
|
||||
}
|
||||
},
|
||||
// 获取月份的天数
|
||||
getDays(year, month) {
|
||||
let max = new Date(year, month, 0).getDate();
|
||||
return max;
|
||||
},
|
||||
querfromdata() {
|
||||
//type用于区分是按钮触发还是钩子函数触发 1按钮触发 underfind 钩子触发
|
||||
if (!this.type) {
|
||||
var data = this.timeValue;
|
||||
var timehbValue = "";
|
||||
this.$emit("querfromdata", data, timehbValue, this.intervald);
|
||||
} else if (this.type == 2) {
|
||||
this.huangbiyear();
|
||||
}
|
||||
},
|
||||
goto() {
|
||||
this.$router.push({
|
||||
path: "/harmonic-boot/algorithm",
|
||||
query: { name: this.name, path: this.path },
|
||||
});
|
||||
},
|
||||
//环比
|
||||
huangbiyear() {
|
||||
this.huanbibiFalg = true;
|
||||
let interval = this.intervald;
|
||||
let startTime = this.timeValue[0];
|
||||
let endTime = this.timeValue[1];
|
||||
let year = parseInt(startTime.substring(0, 4));
|
||||
let month = parseInt(startTime.substring(5, 7));
|
||||
let date = parseInt(startTime.substring(8, 10));
|
||||
//按月
|
||||
if (interval == 3) {
|
||||
// 换年份
|
||||
if (month == 1) {
|
||||
year = year - 1;
|
||||
startTime = year + "-12-01";
|
||||
endTime = year + "-12-31";
|
||||
} else if (month <= 10) {
|
||||
month = month - 1;
|
||||
startTime = year + "-0" + month + "-01";
|
||||
let day = this.getDays(year, month);
|
||||
endTime = year + "-0" + month + "-" + day;
|
||||
} else {
|
||||
month = month - 1;
|
||||
startTime = year + "-" + month + "-01";
|
||||
let day = this.getDays(year, month);
|
||||
endTime = year + "-" + month + "-" + day;
|
||||
}
|
||||
//按周
|
||||
} else if (interval == 4) {
|
||||
//根据开始时间推
|
||||
let start = new Date(year, month - 1, date);
|
||||
start.setDate(start.getDate() - 7);
|
||||
startTime = this.formatTime(start);
|
||||
var end = new Date(start);
|
||||
end.setDate(start.getDate() + 6);
|
||||
endTime = this.formatTime(end);
|
||||
//按季度
|
||||
} else if (interval == 2) {
|
||||
// 换年份
|
||||
if (month == 1) {
|
||||
year = year - 1;
|
||||
startTime = year + "-10-01";
|
||||
endTime = year + "-12-31";
|
||||
} else {
|
||||
// 还是本年
|
||||
month = month - 3;
|
||||
startTime = year + "-0" + month + "-01";
|
||||
month = month + 2;
|
||||
var day = this.getDays(year, month);
|
||||
endTime = year + "-0" + month + "-" + day;
|
||||
}
|
||||
//自定义
|
||||
} else if (interval == 5) {
|
||||
//按年
|
||||
} else if (interval == 1) {
|
||||
year = year - 1;
|
||||
startTime = year + "-01-01";
|
||||
endTime = year + "-12-31";
|
||||
} else if (interval == 6) {
|
||||
if (month <= 6) {
|
||||
year = year - 1;
|
||||
startTime = year + "-07-01";
|
||||
endTime = year + "-12-31";
|
||||
} else {
|
||||
startTime = year + "-01-01";
|
||||
endTime = year + "-06-30";
|
||||
}
|
||||
}
|
||||
this.timehbValue = [startTime, endTime];
|
||||
var data = this.timeValue;
|
||||
var timehbValue = this.timehbValue;
|
||||
// debugger
|
||||
this.$emit("querfromdata", data, timehbValue, interval);
|
||||
// 判断向后键的状态
|
||||
// var temp = this.getEndTime();
|
||||
//this.timeStatus(temp, endTime);
|
||||
},
|
||||
//同比
|
||||
tongbiyear() {
|
||||
this.tonbiFalg = true;
|
||||
let interval = this.intervald;
|
||||
let startTime = this.timeValue[0];
|
||||
let endTime = this.timeValue[1];
|
||||
let year = parseInt(startTime.substring(0, 4));
|
||||
let month = parseInt(startTime.substring(5, 7));
|
||||
let date = parseInt(startTime.substring(8, 10));
|
||||
//按月
|
||||
if (interval == 3) {
|
||||
year = year - 1;
|
||||
if (month <= 10) {
|
||||
startTime = year + "-0" + month + "-01";
|
||||
let day = this.getDays(year, month);
|
||||
endTime = year + "-0" + month + "-" + day;
|
||||
} else {
|
||||
startTime = year + "-" + month + "-01";
|
||||
let day = this.getDays(year, month);
|
||||
endTime = year + "-" + month + "-" + day;
|
||||
}
|
||||
//按周
|
||||
} else if (interval == 4) {
|
||||
//根据开始时间推
|
||||
let start = new Date(year - 1, month, date);
|
||||
start.setDate(start.getDate() - 7);
|
||||
startTime = this.formatTime(start);
|
||||
var end = new Date(start);
|
||||
end.setDate(start.getDate() + 6);
|
||||
endTime = this.formatTime(end);
|
||||
//按季度
|
||||
} else if (interval == 2) {
|
||||
year = year - 1;
|
||||
if (month < 10) {
|
||||
startTime = year + "-0" + month + "-01";
|
||||
} else {
|
||||
startTime = year + "-" + month + "-01";
|
||||
}
|
||||
month = month + 2;
|
||||
if (month <= 10) {
|
||||
var day = this.getDays(year, month);
|
||||
endTime = year + "-0" + month + "-" + day;
|
||||
} else {
|
||||
var day = this.getDays(year, month);
|
||||
endTime = year + "-" + month + "-" + day;
|
||||
}
|
||||
//自定义
|
||||
} else if (interval == 5) {
|
||||
//按年
|
||||
} else if (interval == 1) {
|
||||
year = year - 1;
|
||||
startTime = year + "-01-01";
|
||||
endTime = year + "-12-31";
|
||||
} else if (interval == 6) {
|
||||
if (month <= 6) {
|
||||
year = year - 1;
|
||||
startTime = year + "-07-01";
|
||||
endTime = year + "-12-31";
|
||||
} else {
|
||||
startTime = year + "-01-01";
|
||||
endTime = year + "-06-30";
|
||||
}
|
||||
}
|
||||
this.timehbValue = [startTime, endTime];
|
||||
var data = this.timeValue;
|
||||
var timehbValue = this.timehbValue;
|
||||
this.$emit("querfromdata", data, timehbValue, interval);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.spanColor {
|
||||
color: $themeColor;
|
||||
}
|
||||
</style>
|
||||
|
||||
56
src/views/BusinessAdministrator/management/Policy.vue
Normal file
56
src/views/BusinessAdministrator/management/Policy.vue
Normal file
@@ -0,0 +1,56 @@
|
||||
<template>
|
||||
<div class="pd10">
|
||||
<el-row style="overflow-y: hidden">
|
||||
<el-col>
|
||||
<Census></Census>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Census from './Policy/Census.vue'
|
||||
|
||||
export default {
|
||||
components: { Census },
|
||||
data() {
|
||||
return {
|
||||
vh: '',
|
||||
vh1: '',
|
||||
activeName: 'first'
|
||||
}
|
||||
},
|
||||
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'
|
||||
this.vh1 = window.sessionStorage.getItem('appheight') - 20 + 'px'
|
||||
},
|
||||
handleClick(tab, event) {
|
||||
// console.log(tab, event);
|
||||
}
|
||||
}
|
||||
}
|
||||
</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;
|
||||
}
|
||||
.block {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
bottom: 10px;
|
||||
}
|
||||
</style>
|
||||
296
src/views/BusinessAdministrator/management/Policy/Census.vue
Normal file
296
src/views/BusinessAdministrator/management/Policy/Census.vue
Normal file
@@ -0,0 +1,296 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-row>
|
||||
<el-col :span="24">
|
||||
<div class="Top" ref="top">
|
||||
<div class="pd10">
|
||||
<el-form :inline="true" :model="form" class="demo-form-inline">
|
||||
<div style="display: flex">
|
||||
<el-form-item label="筛选">
|
||||
<el-input v-model="i" placeholder="请输入内容"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<div style="display: flex; justify-content: space-between; flex-grow: 1">
|
||||
<el-form-item>
|
||||
<el-button type="primary" class="ml10" icon="el-icon-search" @click="steady">
|
||||
查询
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" class="ml10" @click="add">新增</el-button>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</div>
|
||||
</el-form>
|
||||
<el-table
|
||||
stripe
|
||||
:data="totalData"
|
||||
:height="height"
|
||||
border
|
||||
v-loading="isLoading"
|
||||
style="width: 100%"
|
||||
header-cell-class-name="table_header"
|
||||
>
|
||||
<el-table-column prop="point" label="套餐名"></el-table-column>
|
||||
<el-table-column prop="point" label="套餐流量(MB)"></el-table-column>
|
||||
<el-table-column prop="point" label="修改人"></el-table-column>
|
||||
<el-table-column prop="point" label="修改时间"></el-table-column>
|
||||
<el-table-column label="类型">
|
||||
<template slot-scope="scope">
|
||||
<el-tag @click="cha(scope.row)">{{ scope.row.point }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="类型">
|
||||
<template slot-scope="scope">
|
||||
<el-tag @click="cha(scope.row)">{{ scope.row.point }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="" label="操作">
|
||||
<template slot-scope="scope">
|
||||
<el-button size="mini" type="primary" @click="handleEdit(scope.$index, scope.row)">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)">
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-dialog
|
||||
:close-on-click-modal="false"
|
||||
title="编辑"
|
||||
:visible.sync="dialogVisible"
|
||||
width="20%"
|
||||
:before-close="handleClose"
|
||||
>
|
||||
<el-form ref="form" :model="form" label-width="130px" :inline="true" class="demo-form-inline">
|
||||
<el-form-item label="套餐名称:" style="margin-top: 20px">
|
||||
<el-input v-model="form.name" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="套餐流量:" style="margin-top: 20px">
|
||||
<el-input v-model="form.type" clearable></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="套餐类型:" style="margin-top: 20px">
|
||||
<el-select v-model="value" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="二级类型:" style="margin-top: 20px">
|
||||
<el-select v-model="value" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<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>
|
||||
<el-dialog
|
||||
:close-on-click-modal="false"
|
||||
title="新增"
|
||||
:visible.sync="dialogVisible1"
|
||||
width="20%"
|
||||
:before-close="handleClose"
|
||||
>
|
||||
<el-form ref="form" :model="form" label-width="130px" :inline="true" class="demo-form-inline">
|
||||
<el-form-item label="套餐名称:" style="margin-top: 20px">
|
||||
<el-input v-model="form.name" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="套餐流量:" style="margin-top: 20px">
|
||||
<el-input v-model="form.type" clearable></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="套餐类型:" style="margin-top: 20px">
|
||||
<el-select v-model="value" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="二级类型:" style="margin-top: 20px">
|
||||
<el-select v-model="value" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogVisible1 = false">取 消</el-button>
|
||||
<el-button type="primary" @click="dialogVisible1 = false">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Area from '@/views/components/Area/Area.vue'
|
||||
import { figure, serial, diagram, monthly } from './indicatorClassification.js'
|
||||
import { viewheight } from '@/assets/commjs/common'
|
||||
import { Classification } from './indicatorClassification.js'
|
||||
import Timslot from './Timeslot.vue'
|
||||
export default {
|
||||
components: { Area, Timslot },
|
||||
data() {
|
||||
return {
|
||||
i: '',
|
||||
vh1: '',
|
||||
dialogVisible: false,
|
||||
dialogVisible1: false,
|
||||
options: [
|
||||
{
|
||||
value: '选项1',
|
||||
label: '电铁'
|
||||
},
|
||||
{
|
||||
value: '选项2',
|
||||
label: '换流站'
|
||||
},
|
||||
{
|
||||
value: '选项3',
|
||||
label: '风电'
|
||||
},
|
||||
{
|
||||
value: '选项4',
|
||||
label: '光伏'
|
||||
},
|
||||
{
|
||||
value: '选项5',
|
||||
label: '其他非线性负荷'
|
||||
},
|
||||
{
|
||||
value: '选项6',
|
||||
label: '敏感重要高危用户'
|
||||
},
|
||||
{
|
||||
value: '选项7',
|
||||
label: '变电站'
|
||||
},
|
||||
{
|
||||
value: '选项8',
|
||||
label: '跨省关口'
|
||||
},
|
||||
{
|
||||
value: '选项9',
|
||||
label: '其他'
|
||||
}
|
||||
],
|
||||
value: '',
|
||||
form: {
|
||||
date: ''
|
||||
},
|
||||
height: null,
|
||||
isLoading: false,
|
||||
//稳态指标超标统计
|
||||
|
||||
totalData: [],
|
||||
|
||||
active_active: 'first-first',
|
||||
zoom: undefined, //图表焦点校验
|
||||
vh: '',
|
||||
height: 265,
|
||||
device: '',
|
||||
getHeight: '',
|
||||
tabPosition: 'top',
|
||||
active: 'first',
|
||||
isLoading: false,
|
||||
isLoading2: false,
|
||||
isLoading3: false,
|
||||
isLoading4: false,
|
||||
serialData: []
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.account()
|
||||
this.steady()
|
||||
},
|
||||
mounted() {
|
||||
this.setHeight()
|
||||
window.addEventListener('resize', this.setHeight)
|
||||
setTimeout(() => {
|
||||
this.getHeight = Number(this.$refs.getHeight.offsetHeight - 45)
|
||||
}, 0)
|
||||
//echarts图表调用
|
||||
|
||||
this.zoom = 1 / document.body.style.zoom
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.setHeight)
|
||||
},
|
||||
methods: {
|
||||
setHeight() {
|
||||
this.vh1 = window.sessionStorage.getItem('appheight') - 20 + 'px'
|
||||
this.device = window.devicePixelRatio
|
||||
this.height = window.sessionStorage.getItem('appheight') - 175 + 'px'
|
||||
this.vh = (viewheight() - 90) / 2 + 'px'
|
||||
this.zoom = 1 / document.body.style.zoom
|
||||
},
|
||||
add() {
|
||||
this.dialogVisible1 = true
|
||||
},
|
||||
handleClose() {
|
||||
this.dialogVisible = false
|
||||
this.dialogVisible1 = false
|
||||
},
|
||||
handleEdit(val) {
|
||||
this.dialogVisible = true
|
||||
// console.log(val, "valvalval");
|
||||
},
|
||||
cellStyle(row, column, rowIndex, columnIndex) {
|
||||
// console.log(row);
|
||||
if (row.columnIndex == 2 || row.columnIndex == 3 || row.columnIndex == 4 || row.columnIndex == 5) {
|
||||
return 'font-weight: 600;'
|
||||
}
|
||||
},
|
||||
//监测终端统计echarts图表
|
||||
|
||||
//方法调用台账统计数据接口
|
||||
account() {
|
||||
this.isLoading = true
|
||||
this.isLoading2 = true
|
||||
Classification().then(res => {
|
||||
this.isLoading = false
|
||||
this.serialData = res.data
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</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;
|
||||
}
|
||||
.prop {
|
||||
font-weight: 600;
|
||||
}
|
||||
::v-deep .el-table__body-wrapper.is-scrolling-none {
|
||||
height: 227px !important;
|
||||
}
|
||||
</style>
|
||||
787
src/views/BusinessAdministrator/management/Policy/Timeslot.vue
Normal file
787
src/views/BusinessAdministrator/management/Policy/Timeslot.vue
Normal file
@@ -0,0 +1,787 @@
|
||||
<template>
|
||||
<div style="display: inline-block; width: 100%; margin-bottom: 10px">
|
||||
<span style="font-size: 14px; font-weight: 550">
|
||||
<span class="spanColor">间隔:</span>
|
||||
</span>
|
||||
<el-select
|
||||
style="width: 90px; margin-left: 10px"
|
||||
v-model="intervald"
|
||||
@change="interchange"
|
||||
placeholder="请选择"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in timeOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
<el-date-picker
|
||||
style="width: 230px"
|
||||
:disabled="disabled"
|
||||
:readonly="pickDisabled"
|
||||
:clearable="false"
|
||||
v-model="timeValue"
|
||||
:picker-options="pickerOptions"
|
||||
type="daterange"
|
||||
value-format="yyyy-MM-dd"
|
||||
range-separator="至"
|
||||
start-placeholder="开始日期"
|
||||
end-placeholder="结束日期"
|
||||
align="right"
|
||||
>
|
||||
</el-date-picker>
|
||||
|
||||
<div style="display: inline" v-if="buttonShow">
|
||||
<el-button
|
||||
:disabled="backDisabled"
|
||||
type="primary"
|
||||
icon="el-icon-d-arrow-left"
|
||||
@click="preClick"
|
||||
style="margin-left: 10px"
|
||||
></el-button>
|
||||
<el-button @click="nowTime" type="primary" style="margin-left: 5px"
|
||||
>当前</el-button
|
||||
>
|
||||
<el-button
|
||||
:disabled="preDisabled"
|
||||
type="primary"
|
||||
icon="el-icon-d-arrow-right"
|
||||
@click="back"
|
||||
style="margin-left: 5px"
|
||||
></el-button>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<!-- <el-button
|
||||
@click="querfromdata"
|
||||
type="primary"
|
||||
icon="el-icon-search"
|
||||
style="margin-left: 10px"
|
||||
>查询</el-button
|
||||
> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "index4",
|
||||
props: {
|
||||
name: {
|
||||
type: String,
|
||||
default: undefined,
|
||||
},
|
||||
path: {
|
||||
type: String,
|
||||
default: undefined,
|
||||
},
|
||||
tablename: {
|
||||
type: String,
|
||||
default: undefined,
|
||||
},
|
||||
interval: {
|
||||
type: Number,
|
||||
default: undefined,
|
||||
},
|
||||
type: {
|
||||
type: Number,
|
||||
default: undefined,
|
||||
},
|
||||
falg: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
query: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
thb: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
intervald(val) {
|
||||
if (val != 5) {
|
||||
let endTime = this.getEndTime();
|
||||
let startTime = this.getStartTime(this.intervald, endTime);
|
||||
this.timeValue = [startTime, endTime];
|
||||
this.pickDisabled = false;
|
||||
this.buttonShow = true;
|
||||
} else {
|
||||
let endTime = this.getEndTime();
|
||||
let startTime = this.getStartTime(this.intervald, endTime);
|
||||
this.timeValue = [startTime, endTime];
|
||||
this.buttonShow = false;
|
||||
this.pickDisabled = false;
|
||||
}
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
disabled: true,
|
||||
buttonShow: true, //向前向后按钮显示隐藏控制按钮
|
||||
pickDisabled: false, //时间组件只读控制se,
|
||||
falg1: true,
|
||||
timeOptions: [
|
||||
{ label: "年份", value: 1 },
|
||||
{ label: "季度", value: 2 },
|
||||
{ label: "月份", value: 3 },
|
||||
{ label: "周", value: 4 },
|
||||
// { label: "自定义", value: 5 },
|
||||
],
|
||||
pickerOptions: {
|
||||
shortcuts: [
|
||||
{
|
||||
text: "最近一周",
|
||||
onClick(picker) {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
|
||||
picker.$emit("pick", [start, end]);
|
||||
},
|
||||
},
|
||||
{
|
||||
text: "最近一个月",
|
||||
onClick(picker) {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
|
||||
picker.$emit("pick", [start, end]);
|
||||
},
|
||||
},
|
||||
{
|
||||
text: "最近三个月",
|
||||
onClick(picker) {
|
||||
const end = new Date();
|
||||
const start = new Date();
|
||||
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
|
||||
picker.$emit("pick", [start, end]);
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
intervald: this.interval,
|
||||
tablenamed: this.tablename,
|
||||
timeValue: [],
|
||||
timehbValue: [],
|
||||
backDisabled: false,
|
||||
preDisabled: true,
|
||||
huanbibiFalg: false,
|
||||
tonbiFalg: false,
|
||||
timeFlag: 0,
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
mounted() {
|
||||
let endTime = this.getEndTime();
|
||||
let startTime = this.getStartTime(this.intervald, endTime);
|
||||
// console.log(endTime,startTime,'endtime','startTime')
|
||||
this.$store.commit("sagServerity/SET_TIMEINTERVAL",[startTime,endTime] )
|
||||
this.timeValue = [startTime, endTime];
|
||||
if (this.type == 2) {
|
||||
this.huangbiyear();
|
||||
} else if (!this.type) {
|
||||
this.querfromdata();
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
interchange(val) {
|
||||
if (val == 1 || val == 2) {
|
||||
this.timeFlag = 0;
|
||||
} else {
|
||||
this.timeFlag = 1;
|
||||
}
|
||||
// console.log(this.timeFlag);
|
||||
this.intervald = val;
|
||||
if (val == 5) {
|
||||
this.tablenamed == "tab1";
|
||||
this.disabled = false;
|
||||
} else {
|
||||
this.tablenamed == "tab2";
|
||||
this.disabled = true;
|
||||
}
|
||||
},
|
||||
// 获取当前日期，精确到日
|
||||
getEndTime() {
|
||||
var now = new Date();
|
||||
var sep = "-";
|
||||
var year = now.getFullYear();
|
||||
var month = now.getMonth() + 1;
|
||||
if (month < 10) {
|
||||
month = "0" + month;
|
||||
}
|
||||
var date = now.getDate();
|
||||
if (date < 10) {
|
||||
date = "0" + date;
|
||||
}
|
||||
|
||||
// 拼接当前的日期
|
||||
var endTime = year + sep + month + sep + date;
|
||||
return endTime;
|
||||
},
|
||||
// 获取起始日期
|
||||
getStartTime(interval, endTime) {
|
||||
var sep = "-";
|
||||
var arr = endTime.split("-");
|
||||
var year = arr[0];
|
||||
var month = arr[1];
|
||||
var date = arr[2];
|
||||
// 按月份间隔
|
||||
if (interval == 3) {
|
||||
date = "01";
|
||||
// 按季度间隔
|
||||
} else if (interval == 2) {
|
||||
if ((month > 0) & (month < 4)) {
|
||||
// 第一季度
|
||||
month = "01";
|
||||
date = "01";
|
||||
} else if (month > 3 && month < 7) {
|
||||
// 第二季度
|
||||
month = "04";
|
||||
date = "01";
|
||||
} else if (month > 6 && month < 10) {
|
||||
// 第三季度
|
||||
month = "07";
|
||||
date = "01";
|
||||
} else {
|
||||
// 第四季度
|
||||
month = "10";
|
||||
date = "01";
|
||||
}
|
||||
} else if (interval == 1) {
|
||||
month = "01";
|
||||
date = "01";
|
||||
} else if (interval == "半年") {
|
||||
if (month < 7) {
|
||||
month = "01";
|
||||
date = "01";
|
||||
} else {
|
||||
month = "07";
|
||||
date = "01";
|
||||
}
|
||||
} else if (interval == 4) {
|
||||
//周
|
||||
var start = new Date(year, month - 1, date);
|
||||
var dayOfWeek = start.getDay() == 0 ? 7 : start.getDay(); // 如果为周日，则置为7天
|
||||
start.setDate(start.getDate() - dayOfWeek + 1); // 计算开始时间
|
||||
|
||||
if (this.formatTime(new Date()) != endTime) {
|
||||
// 如果结束时间不是当前时间
|
||||
var end = new Date(start);
|
||||
end.setDate(end.getDate() + 6);
|
||||
// $("#endTime").val(this.formatTime(end));
|
||||
}
|
||||
|
||||
return this.formatTime(start);
|
||||
}
|
||||
|
||||
var startTime = year + sep + month + sep + date;
|
||||
return startTime;
|
||||
},
|
||||
// 时间格式化
|
||||
formatTime(time) {
|
||||
return (
|
||||
time.getFullYear() +
|
||||
"-" +
|
||||
(time.getMonth() + 1 < 10 ? "0" : "") +
|
||||
(time.getMonth() + 1) +
|
||||
"-" +
|
||||
(time.getDate() < 10 ? "0" : "") +
|
||||
time.getDate()
|
||||
);
|
||||
},
|
||||
//向前
|
||||
preClick() {
|
||||
let interval = this.intervald;
|
||||
let startTime = this.timeValue[0];
|
||||
let endTime = this.timeValue[1];
|
||||
let year = parseInt(startTime.substring(0, 4));
|
||||
let month = parseInt(startTime.substring(5, 7));
|
||||
let date = parseInt(startTime.substring(8, 10));
|
||||
//按月
|
||||
if (interval == 3) {
|
||||
// 换年份
|
||||
if (month == 1) {
|
||||
year = year - 1;
|
||||
startTime = year + "-12-01";
|
||||
endTime = year + "-12-31";
|
||||
} else if (month <= 10) {
|
||||
month = month - 1;
|
||||
startTime = year + "-0" + month + "-01";
|
||||
let day = this.getDays(year, month);
|
||||
endTime = year + "-0" + month + "-" + day;
|
||||
} else {
|
||||
month = month - 1;
|
||||
startTime = year + "-" + month + "-01";
|
||||
let day = this.getDays(year, month);
|
||||
endTime = year + "-" + month + "-" + day;
|
||||
}
|
||||
//按周
|
||||
} else if (interval == 4) {
|
||||
//根据开始时间推
|
||||
let start = new Date(year, month - 1, date);
|
||||
start.setDate(start.getDate() - 7);
|
||||
startTime = this.formatTime(start);
|
||||
var end = new Date(start);
|
||||
end.setDate(start.getDate() + 6);
|
||||
endTime = this.formatTime(end);
|
||||
//按季度
|
||||
} else if (interval == 2) {
|
||||
// 换年份
|
||||
if (month == 1) {
|
||||
year = year - 1;
|
||||
startTime = year + "-10-01";
|
||||
endTime = year + "-12-31";
|
||||
} else {
|
||||
// 还是本年
|
||||
month = month - 3;
|
||||
startTime = year + "-0" + month + "-01";
|
||||
month = month + 2;
|
||||
var day = this.getDays(year, month);
|
||||
endTime = year + "-0" + month + "-" + day;
|
||||
}
|
||||
//自定义
|
||||
} else if (interval == 5) {
|
||||
//按年
|
||||
} else if (interval == 1) {
|
||||
year = year - 1;
|
||||
startTime = year + "-01-01";
|
||||
endTime = year + "-12-31";
|
||||
} else if (interval == 6) {
|
||||
if (month <= 6) {
|
||||
year = year - 1;
|
||||
startTime = year + "-07-01";
|
||||
endTime = year + "-12-31";
|
||||
} else {
|
||||
startTime = year + "-01-01";
|
||||
endTime = year + "-06-30";
|
||||
}
|
||||
}
|
||||
this.timeValue = [startTime, endTime];
|
||||
|
||||
// 判断向后键的状态
|
||||
var temp = this.getEndTime();
|
||||
this.timeStatus(temp, endTime);
|
||||
},
|
||||
//向后
|
||||
back() {
|
||||
let interval = this.intervald;
|
||||
let startTime = this.timeValue[0];
|
||||
let endTime = this.timeValue[1];
|
||||
let year = parseInt(startTime.substring(0, 4));
|
||||
let month = parseInt(startTime.substring(5, 7));
|
||||
let date = parseInt(startTime.substring(8, 10));
|
||||
var now = new Date();
|
||||
// 获取当前年份
|
||||
var presentY = now.getFullYear();
|
||||
// 获取当前月份
|
||||
var presentM = now.getMonth() + 1;
|
||||
// 获取当前日期
|
||||
var presentD = now.getDate();
|
||||
if (interval == 3) {
|
||||
if (month == 12) {
|
||||
year = year + 1;
|
||||
// 年份进位后，大于当前的年份，是不科学的
|
||||
if (presentY < year) {
|
||||
startTime = presentY + "-12-01";
|
||||
if (presentD < 10) {
|
||||
endTime = presentY + "-12" + "-0" + presentD;
|
||||
} else {
|
||||
endTime = presentY + "-12" + "-" + presentD;
|
||||
}
|
||||
// 年份进位后，等于当前的年份
|
||||
} else if (presentY == year) {
|
||||
startTime = year + "-01-01";
|
||||
if (presentM > 1) {
|
||||
endTime = year + "-01-31";
|
||||
} else {
|
||||
if (presentD < 10) {
|
||||
endTime = year + "-01" + "-0" + presentD;
|
||||
} else {
|
||||
endTime = year + "-01" + "-" + presentD;
|
||||
}
|
||||
}
|
||||
// 年份进位后，依旧小于当前的年份
|
||||
} else {
|
||||
startTime = year + "-01-01";
|
||||
endTime = year + "-01-31";
|
||||
}
|
||||
} else {
|
||||
month = month + 1;
|
||||
// 年份等于当前年份
|
||||
if (presentY == year) {
|
||||
// 月份超过当前月份，是不科学的
|
||||
if (month >= presentM) {
|
||||
if (presentM < 10) {
|
||||
startTime = year + "-0" + presentM + "-01";
|
||||
if (presentD < 10) {
|
||||
endTime = year + "-0" + presentM + "-0" + presentD;
|
||||
} else {
|
||||
endTime = year + "-0" + presentM + "-" + presentD;
|
||||
}
|
||||
} else {
|
||||
startTime = year + "-" + presentM + "-01";
|
||||
if (presentD < 10) {
|
||||
endTime = year + "-" + presentM + "-0" + presentD;
|
||||
} else {
|
||||
endTime = year + "-" + presentM + "-" + presentD;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if (month < 10) {
|
||||
startTime = year + "-0" + month + "-01";
|
||||
var day = this.getDays(year, month);
|
||||
endTime = year + "-0" + month + "-" + day;
|
||||
} else {
|
||||
startTime = year + "-" + month + "-01";
|
||||
var day = this.getDays(year, month);
|
||||
endTime = year + "-" + month + "-" + day;
|
||||
}
|
||||
}
|
||||
// 年份小于当前的年份
|
||||
} else {
|
||||
if (month < 10) {
|
||||
startTime = year + "-0" + month + "-01";
|
||||
var day = this.getDays(year, month);
|
||||
endTime = year + "-0" + month + "-" + day;
|
||||
} else {
|
||||
startTime = year + "-" + month + "-01";
|
||||
var day = this.getDays(year, month);
|
||||
endTime = year + "-" + month + "-" + day;
|
||||
}
|
||||
}
|
||||
}
|
||||
} else if (interval == 2) {
|
||||
// 前进需要年份进位
|
||||
if (month == 10) {
|
||||
year = year + 1;
|
||||
// 年份进位后大于当前年份是不科学的
|
||||
if (year > presentY) {
|
||||
startTime = presentY + "-10-01";
|
||||
if (presentD < 10) {
|
||||
endTime = year + "-" + presentM + "-0" + presentD;
|
||||
} else {
|
||||
endTime = year + "-" + presentM + "-" + presentD;
|
||||
}
|
||||
} else if (year == presentY) {
|
||||
startTime = year + "-01-01";
|
||||
// 当前月份大约3月份
|
||||
if (presentM > 3) {
|
||||
endTime = year + "-03-31";
|
||||
} else {
|
||||
// 当前月份也在第一季度里
|
||||
if (presentD < 10) {
|
||||
endTime = year + "-0" + presentM + "-0" + presentD;
|
||||
} else {
|
||||
endTime = year + "-0" + presentM + "-" + presentD;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
startTime = year + "-01-01";
|
||||
endTime = year + "-03-31";
|
||||
}
|
||||
} else {
|
||||
month = month + 3;
|
||||
// 季度进位后，超过当前月份是不科学的
|
||||
if (year == presentY) {
|
||||
if (month >= presentM) {
|
||||
// 当季度进位后大于当前月，以当前月的时间显示季度
|
||||
if (presentM > 0 && presentM < 4) {
|
||||
// 第一季度
|
||||
startTime = year + "-01-01";
|
||||
if (presentD < 10) {
|
||||
endTime = year + "-0" + presentM + "-0" + presentD;
|
||||
} else {
|
||||
endTime = year + "-0" + presentM + "-" + presentD;
|
||||
}
|
||||
} else if (presentM > 3 && presentM < 7) {
|
||||
// 第二季度
|
||||
startTime = year + "-04-01";
|
||||
if (presentD < 10) {
|
||||
endTime = year + "-0" + presentM + "-0" + presentD;
|
||||
} else {
|
||||
endTime = year + "-0" + presentM + "-" + presentD;
|
||||
}
|
||||
} else if (presentM > 6 && presentM < 10) {
|
||||
// 第三季度
|
||||
startTime = year + "-07-01";
|
||||
if (presentD < 10) {
|
||||
endTime = year + "-0" + presentM + "-0" + presentD;
|
||||
} else {
|
||||
endTime = year + "-0" + presentM + "-" + presentD;
|
||||
}
|
||||
} else {
|
||||
// 第四季度
|
||||
startTime = year + "-10-01";
|
||||
if (presentD < 10) {
|
||||
endTime = year + "-" + presentM + "-0" + presentD;
|
||||
} else {
|
||||
endTime = year + "-" + presentM + "-" + presentD;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if (month == 10) {
|
||||
startTime = year + "-" + month + "-01";
|
||||
} else {
|
||||
startTime = year + "-0" + month + "-01";
|
||||
}
|
||||
month = month + 2;
|
||||
if (month >= presentM) {
|
||||
endTime = this.getEndTime();
|
||||
} else {
|
||||
var day = this.getDays(year, month);
|
||||
endTime = year + "-" + month + "-" + day;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if (month == 10) {
|
||||
startTime = year + "-" + month + "-01";
|
||||
month = month + 2;
|
||||
var day = this.getDays(year, month);
|
||||
endTime = year + "-" + month + "-" + day;
|
||||
} else {
|
||||
startTime = year + "-0" + month + "-01";
|
||||
month = month + 2;
|
||||
var day = this.getDays(year, month);
|
||||
endTime = year + "-0" + month + "-" + day;
|
||||
}
|
||||
}
|
||||
}
|
||||
} else if (interval == 5) {
|
||||
} else if (interval == 4) {
|
||||
//根据开始时间推
|
||||
var start = new Date(year, month - 1, date);
|
||||
start.setDate(start.getDate() + 7);
|
||||
startTime = this.formatTime(start);
|
||||
var end = new Date(start);
|
||||
end.setDate(start.getDate() + 6);
|
||||
endTime = this.formatTime(end);
|
||||
|
||||
if (parseInt((end - new Date()) / 1000 / 60) > 24) {
|
||||
//相差小时大于24小时，即超过当天，置为当天日期
|
||||
endTime = this.formatTime(new Date());
|
||||
}
|
||||
} else {
|
||||
year = year + 1;
|
||||
// 年份进位后大于当前年份，是不科学的
|
||||
if (year >= presentY) {
|
||||
startTime = presentY + "-01-01";
|
||||
if (presentM < 10) {
|
||||
if (presentD < 10) {
|
||||
endTime = presentY + "-0" + presentM + "-0" + presentD;
|
||||
} else {
|
||||
endTime = presentY + "-0" + presentM + "-" + presentD;
|
||||
}
|
||||
} else {
|
||||
endTime = presentY + "-" + presentM + "-" + presentD;
|
||||
}
|
||||
} else {
|
||||
startTime = year + "-01-01";
|
||||
endTime = year + "-12-31";
|
||||
}
|
||||
}
|
||||
|
||||
this.timeValue = [startTime, endTime];
|
||||
|
||||
// 判断向后键的状态
|
||||
var temp = this.getEndTime();
|
||||
this.timeStatus(temp, endTime);
|
||||
},
|
||||
//当前按钮点击事件
|
||||
nowTime() {
|
||||
let interval = this.intervald;
|
||||
let endTime = this.getEndTime();
|
||||
let startTime = this.getStartTime(interval, endTime);
|
||||
this.timeValue = [startTime, endTime];
|
||||
// 判断向后键的状态
|
||||
let temp = this.getEndTime();
|
||||
this.timeStatus(temp, endTime);
|
||||
},
|
||||
//判断向后按钮
|
||||
timeStatus(temp, endTime) {
|
||||
// 判断next按钮的状态
|
||||
if (temp == endTime) {
|
||||
this.preDisabled = true;
|
||||
} else {
|
||||
this.preDisabled = false;
|
||||
}
|
||||
},
|
||||
// 获取月份的天数
|
||||
getDays(year, month) {
|
||||
let max = new Date(year, month, 0).getDate();
|
||||
return max;
|
||||
},
|
||||
querfromdata() {
|
||||
//type用于区分是按钮触发还是钩子函数触发 1按钮触发 underfind 钩子触发
|
||||
if (!this.type) {
|
||||
var data = this.timeValue;
|
||||
var timehbValue = "";
|
||||
this.$emit("querfromdata", data, timehbValue, this.intervald);
|
||||
} else if (this.type == 2) {
|
||||
this.huangbiyear();
|
||||
}
|
||||
},
|
||||
goto() {
|
||||
this.$router.push({
|
||||
path: "/harmonic-boot/algorithm",
|
||||
query: { name: this.name, path: this.path },
|
||||
});
|
||||
},
|
||||
//环比
|
||||
huangbiyear() {
|
||||
this.huanbibiFalg = true;
|
||||
let interval = this.intervald;
|
||||
let startTime = this.timeValue[0];
|
||||
let endTime = this.timeValue[1];
|
||||
let year = parseInt(startTime.substring(0, 4));
|
||||
let month = parseInt(startTime.substring(5, 7));
|
||||
let date = parseInt(startTime.substring(8, 10));
|
||||
//按月
|
||||
if (interval == 3) {
|
||||
// 换年份
|
||||
if (month == 1) {
|
||||
year = year - 1;
|
||||
startTime = year + "-12-01";
|
||||
endTime = year + "-12-31";
|
||||
} else if (month <= 10) {
|
||||
month = month - 1;
|
||||
startTime = year + "-0" + month + "-01";
|
||||
let day = this.getDays(year, month);
|
||||
endTime = year + "-0" + month + "-" + day;
|
||||
} else {
|
||||
month = month - 1;
|
||||
startTime = year + "-" + month + "-01";
|
||||
let day = this.getDays(year, month);
|
||||
endTime = year + "-" + month + "-" + day;
|
||||
}
|
||||
//按周
|
||||
} else if (interval == 4) {
|
||||
//根据开始时间推
|
||||
let start = new Date(year, month - 1, date);
|
||||
start.setDate(start.getDate() - 7);
|
||||
startTime = this.formatTime(start);
|
||||
var end = new Date(start);
|
||||
end.setDate(start.getDate() + 6);
|
||||
endTime = this.formatTime(end);
|
||||
//按季度
|
||||
} else if (interval == 2) {
|
||||
// 换年份
|
||||
if (month == 1) {
|
||||
year = year - 1;
|
||||
startTime = year + "-10-01";
|
||||
endTime = year + "-12-31";
|
||||
} else {
|
||||
// 还是本年
|
||||
month = month - 3;
|
||||
startTime = year + "-0" + month + "-01";
|
||||
month = month + 2;
|
||||
var day = this.getDays(year, month);
|
||||
endTime = year + "-0" + month + "-" + day;
|
||||
}
|
||||
//自定义
|
||||
} else if (interval == 5) {
|
||||
//按年
|
||||
} else if (interval == 1) {
|
||||
year = year - 1;
|
||||
startTime = year + "-01-01";
|
||||
endTime = year + "-12-31";
|
||||
} else if (interval == 6) {
|
||||
if (month <= 6) {
|
||||
year = year - 1;
|
||||
startTime = year + "-07-01";
|
||||
endTime = year + "-12-31";
|
||||
} else {
|
||||
startTime = year + "-01-01";
|
||||
endTime = year + "-06-30";
|
||||
}
|
||||
}
|
||||
this.timehbValue = [startTime, endTime];
|
||||
var data = this.timeValue;
|
||||
var timehbValue = this.timehbValue;
|
||||
// debugger
|
||||
this.$emit("querfromdata", data, timehbValue, interval);
|
||||
// 判断向后键的状态
|
||||
// var temp = this.getEndTime();
|
||||
//this.timeStatus(temp, endTime);
|
||||
},
|
||||
//同比
|
||||
tongbiyear() {
|
||||
this.tonbiFalg = true;
|
||||
let interval = this.intervald;
|
||||
let startTime = this.timeValue[0];
|
||||
let endTime = this.timeValue[1];
|
||||
let year = parseInt(startTime.substring(0, 4));
|
||||
let month = parseInt(startTime.substring(5, 7));
|
||||
let date = parseInt(startTime.substring(8, 10));
|
||||
//按月
|
||||
if (interval == 3) {
|
||||
year = year - 1;
|
||||
if (month <= 10) {
|
||||
startTime = year + "-0" + month + "-01";
|
||||
let day = this.getDays(year, month);
|
||||
endTime = year + "-0" + month + "-" + day;
|
||||
} else {
|
||||
startTime = year + "-" + month + "-01";
|
||||
let day = this.getDays(year, month);
|
||||
endTime = year + "-" + month + "-" + day;
|
||||
}
|
||||
//按周
|
||||
} else if (interval == 4) {
|
||||
//根据开始时间推
|
||||
let start = new Date(year - 1, month, date);
|
||||
start.setDate(start.getDate() - 7);
|
||||
startTime = this.formatTime(start);
|
||||
var end = new Date(start);
|
||||
end.setDate(start.getDate() + 6);
|
||||
endTime = this.formatTime(end);
|
||||
//按季度
|
||||
} else if (interval == 2) {
|
||||
year = year - 1;
|
||||
if (month < 10) {
|
||||
startTime = year + "-0" + month + "-01";
|
||||
} else {
|
||||
startTime = year + "-" + month + "-01";
|
||||
}
|
||||
month = month + 2;
|
||||
if (month <= 10) {
|
||||
var day = this.getDays(year, month);
|
||||
endTime = year + "-0" + month + "-" + day;
|
||||
} else {
|
||||
var day = this.getDays(year, month);
|
||||
endTime = year + "-" + month + "-" + day;
|
||||
}
|
||||
//自定义
|
||||
} else if (interval == 5) {
|
||||
//按年
|
||||
} else if (interval == 1) {
|
||||
year = year - 1;
|
||||
startTime = year + "-01-01";
|
||||
endTime = year + "-12-31";
|
||||
} else if (interval == 6) {
|
||||
if (month <= 6) {
|
||||
year = year - 1;
|
||||
startTime = year + "-07-01";
|
||||
endTime = year + "-12-31";
|
||||
} else {
|
||||
startTime = year + "-01-01";
|
||||
endTime = year + "-06-30";
|
||||
}
|
||||
}
|
||||
this.timehbValue = [startTime, endTime];
|
||||
var data = this.timeValue;
|
||||
var timehbValue = this.timehbValue;
|
||||
this.$emit("querfromdata", data, timehbValue, interval);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.spanColor {
|
||||
color: $themeColor;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,18 @@
|
||||
//台账统计
|
||||
import request from "@/utils/request";
|
||||
|
||||
//监测终端统计单位图表
|
||||
export function Classification() {
|
||||
return request({
|
||||
url: "/device-boot/rateOfFlow/getRateOfFlowStrategy",
|
||||
method: "post",
|
||||
data: data
|
||||
|
||||
});
|
||||
}
|
||||
export function figure() {
|
||||
return request({
|
||||
url: "/api1/system-boot/census/getFigure",
|
||||
method: "get"
|
||||
});
|
||||
}
|
||||
597
src/views/BusinessAdministrator/setup/management.vue
Normal file
597
src/views/BusinessAdministrator/setup/management.vue
Normal file
@@ -0,0 +1,597 @@
|
||||
<template>
|
||||
<div class="pd10">
|
||||
<div v-show="flg" v-loading="loading" element-loading-text="数据加载中">
|
||||
<el-form :inline="true" :model="formData" class="demo-form-inline">
|
||||
<el-form-item>
|
||||
<Timeinterval ref="interval" :interval="3"></Timeinterval>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit" icon="el-icon-search">查询</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item style="float: right">
|
||||
<el-button type="primary" icon="el-icon-download" @click="exportEvent">导出</el-button>
|
||||
<el-button type="primary" @click="backups">文件备份</el-button>
|
||||
<!-- <el-button type="primary" @click="restore">文件恢复</el-button> -->
|
||||
<el-button type="primary" @click="details">统计</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" :model="formData" label-width="90px" class="">
|
||||
<el-form-item label="用户名:">
|
||||
<el-select v-model="formData.loginName" placeholder="用户名" clearable filterable>
|
||||
<el-option
|
||||
v-for="item in userName"
|
||||
:key="item.id"
|
||||
:label="item.loginName"
|
||||
:value="item.loginName"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="事件类型:">
|
||||
<el-select v-model="formData.type" placeholder="事件类型" clearable>
|
||||
<el-option
|
||||
v-for="item in eventType"
|
||||
: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.operateType" placeholder="操作类型" clearable>
|
||||
<el-option
|
||||
v-for="item in operationType"
|
||||
:key="item.value"
|
||||
:label="item.value"
|
||||
:value="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="操作结果:">
|
||||
<el-select v-model="formData.result" placeholder="操作结果" clearable>
|
||||
<el-option
|
||||
v-for="item in resultList"
|
||||
:key="item.id"
|
||||
:label="item.label"
|
||||
:value="item.id"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<vxe-table
|
||||
size="mini"
|
||||
stripe
|
||||
:row-config="{ isCurrent: true, isHover: true }"
|
||||
border
|
||||
ref="management"
|
||||
@sort-change="sortChangeEvent"
|
||||
header-cell-class-name="table_header"
|
||||
show-overflow="tooltip"
|
||||
:data="datamock"
|
||||
style="width: 100%"
|
||||
:height="vh + 'px'"
|
||||
>
|
||||
<vxe-table-column
|
||||
field="time"
|
||||
title="操作时间"
|
||||
align="center"
|
||||
sortable
|
||||
width="160"
|
||||
show-overflow
|
||||
></vxe-table-column>
|
||||
<vxe-table-column field="userName" title="操作人员" align="center" width="120"></vxe-table-column>
|
||||
<vxe-table-column
|
||||
field="operate"
|
||||
title="操作类型"
|
||||
align="center"
|
||||
sortable
|
||||
width="220"
|
||||
></vxe-table-column>
|
||||
<vxe-table-column field="describe" title="事件描述" align="center"></vxe-table-column>
|
||||
<vxe-table-column field="type" title="事件类型" align="center" sortable width="120"></vxe-table-column>
|
||||
<vxe-table-column
|
||||
field="result"
|
||||
title="操作结果"
|
||||
align="center"
|
||||
sortable
|
||||
width="120"
|
||||
></vxe-table-column>
|
||||
<vxe-table-column field="ip" title="操作IP" width="150" align="center"></vxe-table-column>
|
||||
<vxe-table-column field="level" title="事件等级" align="center" sortable width="120"></vxe-table-column>
|
||||
</vxe-table>
|
||||
<el-pagination
|
||||
background
|
||||
align="right"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="formData.pageNum"
|
||||
:page-sizes="[100, 200, 300, 500, 1000]"
|
||||
:page-size="formData.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
class="mt10"
|
||||
></el-pagination>
|
||||
</div>
|
||||
|
||||
<div v-if="!flg" v-loading="loading1" element-loading-text="数据加载中">
|
||||
<el-form :inline="true" :model="formLine" class="demo-form-inline">
|
||||
<el-form-item>
|
||||
<Time ref="intervaltime" :interval="3"></Time>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="OnSubmit" icon="el-icon-search">查询</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item style="position: absolute; right: 10px; float: right">
|
||||
<el-button type="primary" icon="el-icon-download" @click="exportEventstatistics">导出</el-button>
|
||||
<el-button type="primary" @click="back">返回</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="text" @click="closeHandle1">
|
||||
条件筛选
|
||||
<i :class="!view1 ? 'el-icon-arrow-down' : 'el-icon-arrow-right'"></i>
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div class="container" id="container1">
|
||||
<i @click="closeHandle1" class="el-icon-circle-close coles"></i>
|
||||
<el-form :inline="true" :model="formData" label-width="90px" class="">
|
||||
<el-form-item label="用户名:">
|
||||
<el-select v-model="formLine.loginName" placeholder="用户名" clearable filterable>
|
||||
<el-option
|
||||
v-for="item in userName"
|
||||
:key="item.id"
|
||||
:label="item.loginName"
|
||||
:value="item.loginName"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="事件类型:">
|
||||
<el-select v-model="formLine.type" placeholder="用户名" clearable>
|
||||
<el-option
|
||||
v-for="item in eventType"
|
||||
:key="item.id"
|
||||
:label="item.label"
|
||||
:value="item.id"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="操作类型:">
|
||||
<el-select v-model="formLine.operateType" placeholder="用户名" clearable>
|
||||
<el-option
|
||||
v-for="item in operationType"
|
||||
:key="item.value"
|
||||
:label="item.value"
|
||||
:value="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<vxe-table
|
||||
size="mini"
|
||||
:row-config="{ isCurrent: true, isHover: true }"
|
||||
border
|
||||
ref="management1"
|
||||
header-cell-class-name="table_header"
|
||||
:data="statisticsData"
|
||||
style="width: 100%"
|
||||
:height="vh + 'px'"
|
||||
>
|
||||
<vxe-table-column field="loginName" title="操作人员" align="center"></vxe-table-column>
|
||||
<vxe-table-column field="operateType" title="事件类型" align="center"></vxe-table-column>
|
||||
<vxe-table-column field="count" title="事件总数" align="center"></vxe-table-column>
|
||||
</vxe-table>
|
||||
<el-pagination
|
||||
background
|
||||
align="right"
|
||||
@size-change="handleSizeChange1"
|
||||
@current-change="handleCurrentChange1"
|
||||
:current-page="formLine.pageNum"
|
||||
:page-sizes="[20, 30, 40, 50, 100]"
|
||||
:page-size="formLine.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="statisticsTotal"
|
||||
class="mt10"
|
||||
></el-pagination>
|
||||
|
||||
</div>
|
||||
<MqttWs v-if="showMqtt" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Timeinterval from '@/views/components/Timeinterval.vue'
|
||||
import Time from '@/views/components/Time.vue'
|
||||
import {
|
||||
getAllUserList,
|
||||
getAuditLog,
|
||||
censusAuditLog,
|
||||
logFileWriter,
|
||||
recoverLogFile,
|
||||
getMemoInfo,
|
||||
getSysConfig
|
||||
} from '@/api/AuditManagement/AuditManagement'
|
||||
import MqttWs from '@/components/Mqtt/mqttWs.vue'
|
||||
export default {
|
||||
components: {
|
||||
Timeinterval,
|
||||
Time,
|
||||
MqttWs
|
||||
},
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
loading1: false,
|
||||
view: false,
|
||||
view1: false,
|
||||
flg: true,
|
||||
showMqtt:false,
|
||||
zoom: '', //图表焦点校验
|
||||
vh: undefined,
|
||||
formData: {
|
||||
loginName: '', //用户名
|
||||
type: '', //事件类型
|
||||
operateType: '', //操作类型
|
||||
result: null,
|
||||
searchBeginTime: '', //开始
|
||||
searchEndTime: '', //结束
|
||||
sortBy: '',
|
||||
sortName: '',
|
||||
orderBy: '',
|
||||
pageNum: 1,
|
||||
pageSize: 100
|
||||
},
|
||||
formLine: {
|
||||
loginName: '', //用户名
|
||||
type: '', //事件类型
|
||||
operateType: '', //操作类型
|
||||
searchBeginTime: '', //开始
|
||||
searchEndTime: '', //结束
|
||||
sortBy: '',
|
||||
sortName: '',
|
||||
orderBy: '',
|
||||
pageNum: 1,
|
||||
pageSize: 20
|
||||
},
|
||||
item: ['', ''],
|
||||
item1: ['', ''],
|
||||
userName: [], //
|
||||
resultList: [
|
||||
{ id: 1, label: '成功' },
|
||||
{ id: 0, label: '失败' }
|
||||
],
|
||||
datamock: [],
|
||||
statisticsData: [],
|
||||
eventType: [
|
||||
{
|
||||
id: 0,
|
||||
label: '业务事件类型'
|
||||
},
|
||||
{
|
||||
id: 1,
|
||||
label: '系统事件类型'
|
||||
}
|
||||
], //事件类型
|
||||
operationType: [
|
||||
{ id: 1, value: '查询' },
|
||||
{ id: 2, value: '新增' },
|
||||
{ id: 3, value: '更新' },
|
||||
{ id: 4, value: '删除' },
|
||||
{ id: 5, value: '认证' },
|
||||
{ id: 6, value: '注销' },
|
||||
{ id: 7, value: '上传' },
|
||||
{ id: 8, value: '下载' },
|
||||
{ id: 9, value: '越权访问' }
|
||||
], //操作类型
|
||||
timeFlag: '',
|
||||
total: undefined,
|
||||
statisticsTotal: undefined
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.search()
|
||||
},
|
||||
mounted() {
|
||||
this.zoom = 1 / document.body.style.zoom
|
||||
window.addEventListener('resize', () => {
|
||||
this.zoom = 1 / document.body.style.zoom
|
||||
})
|
||||
if(process.env.VUE_APP_HB == 'hbqr'){
|
||||
this.showMqtt = JSON.parse(window.sessionStorage.getItem('Info')).roleCode.includes('audit_manager')
|
||||
}
|
||||
|
||||
this.setHeight()
|
||||
window.addEventListener('resize', this.setHeight)
|
||||
this.onSubmit()
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.setHeight)
|
||||
},
|
||||
methods: {
|
||||
setHeight() {
|
||||
this.vh = window.sessionStorage.getItem('appheight') - 95
|
||||
},
|
||||
//条件筛选
|
||||
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'
|
||||
}
|
||||
},
|
||||
closeHandle1() {
|
||||
if (this.view1) {
|
||||
this.view1 = false
|
||||
} else {
|
||||
this.view1 = true
|
||||
}
|
||||
//console.log('关闭和展开');
|
||||
const dom = document.getElementById('container1')
|
||||
const closeDom = document.getElementsByClassName('close')[0]
|
||||
if (!dom.className.match(/(?:^|\s)expend(?!\S)/)) {
|
||||
dom.className = 'container expend'
|
||||
} else {
|
||||
dom.className = 'container close-container'
|
||||
}
|
||||
},
|
||||
//统计
|
||||
details() {
|
||||
this.flg = false
|
||||
setTimeout(() => {
|
||||
this.OnSubmit()
|
||||
}, 0)
|
||||
},
|
||||
OnSubmit() {
|
||||
this.loading1 = true
|
||||
this.item1 = this.$refs.intervaltime.timeValue
|
||||
this.formLine.searchBeginTime = this.item1[0]
|
||||
this.formLine.searchEndTime = this.item1[1]
|
||||
censusAuditLog(this.formLine).then(res => {
|
||||
this.statisticsData = res.data.records
|
||||
this.statisticsTotal = res.data.total
|
||||
this.loading1 = false
|
||||
})
|
||||
},
|
||||
// 排序
|
||||
sortChangeEvent({ column, field, order }) {
|
||||
this.formData.sortName = column.title
|
||||
this.formLine.sortName = column.title
|
||||
this.formData.sortBy = field == 'operate' ? 'operate_type' : field == 'time' ? 'create_time' : field
|
||||
this.formLine.sortBy = field == 'operate' ? 'operate_type' : field == 'time' ? 'create_time' : field
|
||||
this.formData.orderBy = order
|
||||
this.formLine.orderBy = order
|
||||
this.onSubmit()
|
||||
},
|
||||
//下拉框查询
|
||||
search() {
|
||||
getAllUserList().then(res => {
|
||||
this.userName = res.data
|
||||
})
|
||||
},
|
||||
//返回
|
||||
back() {
|
||||
this.flg = true
|
||||
this.onSubmit()
|
||||
},
|
||||
//查询
|
||||
onSubmit() {
|
||||
this.loading = true
|
||||
this.item = this.$refs.interval.timeValue
|
||||
this.formData.searchBeginTime = this.item[0]
|
||||
this.formData.searchEndTime = this.item[1]
|
||||
getAuditLog(this.formData).then(res => {
|
||||
this.datamock = res.data.records
|
||||
this.total = res.data.total
|
||||
this.loading = false
|
||||
this.getLogSize()
|
||||
})
|
||||
},
|
||||
|
||||
//查询日志大小
|
||||
getLogSize(){
|
||||
getMemoInfo().then(res => {
|
||||
getSysConfig().then(re=>{
|
||||
if (res.data>re.data.logSize) {
|
||||
this.$message({
|
||||
showClose: true,
|
||||
duration: 0,
|
||||
message: '日志表存储空间已超过'+re.data.logSize+'(M)请及时备份清理!',
|
||||
type: 'warning'
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
})
|
||||
},
|
||||
|
||||
//备份
|
||||
backups() {
|
||||
this.loading = true
|
||||
logFileWriter().then(res => {})
|
||||
setTimeout(() => {
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '文件备份成功'
|
||||
})
|
||||
this.loading = false
|
||||
}, 50000)
|
||||
},
|
||||
//恢复
|
||||
restore() {
|
||||
this.loading = true
|
||||
recoverLogFile().then(res => {})
|
||||
setTimeout(() => {
|
||||
this.$message({
|
||||
type: 'success',
|
||||
message: '文件恢复成功'
|
||||
})
|
||||
this.loading = false
|
||||
}, 50000)
|
||||
},
|
||||
//每页条数改变时触发 选择一页显示多少行
|
||||
handleSizeChange(val) {
|
||||
this.formData.pageSize = val
|
||||
this.onSubmit()
|
||||
},
|
||||
//当前页改变时触发 跳转其他页
|
||||
handleCurrentChange(val) {
|
||||
this.formData.pageNum = val
|
||||
this.onSubmit()
|
||||
},
|
||||
//每页条数改变时触发 选择一页显示多少行
|
||||
handleSizeChange1(val) {
|
||||
this.formLine.pageSize = val
|
||||
this.OnSubmit()
|
||||
},
|
||||
//当前页改变时触发 跳转其他页
|
||||
handleCurrentChange1(val) {
|
||||
this.formLine.pageNum = val
|
||||
this.OnSubmit()
|
||||
},
|
||||
//导出
|
||||
exportEvent() {
|
||||
getAuditLog({
|
||||
loginName: this.formData.loginName,
|
||||
type: this.formData.type,
|
||||
operateType: this.formData.operateType,
|
||||
searchBeginTime: this.formData.searchBeginTime,
|
||||
searchEndTime: this.formData.searchEndTime,
|
||||
sortBy: this.formData.sortBy,
|
||||
sortName: this.formData.sortName,
|
||||
orderBy: this.formData.orderBy,
|
||||
export:true,
|
||||
pageNum: 1,
|
||||
pageSize: this.total
|
||||
}).then(res => {
|
||||
this.$refs.management.exportData({
|
||||
filename: 'export', // 文件名字
|
||||
sheetName: 'Sheet1',
|
||||
type: 'xlsx', //导出文件类型 xlsx 和 csv
|
||||
useStyle: true,
|
||||
data: res.data.records // 数据源 // 过滤那个字段导出
|
||||
// columnFilterMethod: function (column, $columnIndex) {
|
||||
// return !(column.$columnIndex === 0);
|
||||
// },
|
||||
})
|
||||
})
|
||||
},
|
||||
exportEventstatistics() {
|
||||
censusAuditLog({
|
||||
loginName: this.formLine.loginName,
|
||||
type: this.formLine.type,
|
||||
operateType: this.formLine.operateType,
|
||||
searchBeginTime: this.formLine.searchBeginTime,
|
||||
searchEndTime: this.formLine.searchEndTime,
|
||||
pageNum: 1,
|
||||
export:true,
|
||||
pageSize: this.statisticsTotal
|
||||
}).then(res => {
|
||||
this.$refs.management1.exportData({
|
||||
filename: 'export', // 文件名字
|
||||
sheetName: 'Sheet1',
|
||||
type: 'xlsx', //导出文件类型 xlsx 和 csv
|
||||
useStyle: true,
|
||||
data: res.data.records // 数据源 // 过滤那个字段导出
|
||||
// columnFilterMethod: function (column, $columnIndex) {
|
||||
// return !(column.$columnIndex === 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;
|
||||
}
|
||||
::v-deep .vxe-table .cell {
|
||||
text-align: center;
|
||||
}
|
||||
.svgIcon {
|
||||
display: flex;
|
||||
justify-content: end;
|
||||
}
|
||||
.back {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
float: right;
|
||||
}
|
||||
.container {
|
||||
position: absolute;
|
||||
|
||||
/* margin: auto; */
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 2000;
|
||||
width: 50%;
|
||||
height: 0;
|
||||
overflow: auto;
|
||||
background-color: #e4e7ebb9;
|
||||
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: 0;
|
||||
height: auto;
|
||||
}
|
||||
to {
|
||||
top: 0;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes no-expend {
|
||||
from {
|
||||
top: 0;
|
||||
height: 20%;
|
||||
}
|
||||
to {
|
||||
top: 0;
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
.coles {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
115
src/views/BusinessAdministrator/setup/onlineUsers.vue
Normal file
115
src/views/BusinessAdministrator/setup/onlineUsers.vue
Normal file
@@ -0,0 +1,115 @@
|
||||
<template>
|
||||
<div class="pd10" v-loading="loading" element-loading-text="数据加载中">
|
||||
<el-form :inline="true" :model="formData" class="demo-form-inline">
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit" icon="el-icon-search">查询</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-table
|
||||
stripe
|
||||
size="mini"
|
||||
:row-config="{ isCurrent: true, isHover: true }"
|
||||
border
|
||||
highlight-current-row
|
||||
header-cell-class-name="table_header"
|
||||
:data="datamock"
|
||||
style="width: 100%"
|
||||
:height="vh + 'px'"
|
||||
>
|
||||
<el-table-column prop="name" label="昵称" align="center"></el-table-column>
|
||||
<el-table-column prop="loginName" label="登录名" align="center"></el-table-column>
|
||||
<el-table-column prop="phone" label="手机号" align="center">
|
||||
<template slot-scope="scope">
|
||||
<span>{{ scope.row.phone == '' ? '/' : scope.row.phone }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="time" label="登录过期时间" align="center"></el-table-column>
|
||||
<el-table-column prop="result" label="状态" align="center">
|
||||
<template>
|
||||
<span>在线</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
background
|
||||
align="right"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="formData.pageNum"
|
||||
:page-sizes="[100, 200, 300, 500, 1000]"
|
||||
:page-size="formData.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="total"
|
||||
class="mt10"
|
||||
></el-pagination>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { getOnlineUsers } from '@/api/AuditManagement/AuditManagement'
|
||||
export default {
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
zoom: '', //图表焦点校验
|
||||
vh: undefined,
|
||||
formData: {
|
||||
pageNum: 1,
|
||||
pageSize: 100
|
||||
},
|
||||
datamock: [],
|
||||
total: undefined
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
mounted() {
|
||||
this.setHeight()
|
||||
window.addEventListener('resize', this.setHeight)
|
||||
this.zoom = 1 / document.body.style.zoom
|
||||
|
||||
this.onSubmit()
|
||||
},
|
||||
beforeDestroy() {
|
||||
window.removeEventListener('resize', this.setHeight)
|
||||
},
|
||||
methods: {
|
||||
setHeight() {
|
||||
this.vh = window.sessionStorage.getItem('appheight') - 95
|
||||
this.zoom = 1 / document.body.style.zoom
|
||||
},
|
||||
//查询
|
||||
onSubmit() {
|
||||
this.loading = true
|
||||
getOnlineUsers().then(res => {
|
||||
this.datamock = res.data
|
||||
this.total = this.datamock.length
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
//每页条数改变时触发 选择一页显示多少行
|
||||
handleSizeChange(val) {
|
||||
this.formData.pageSize = val
|
||||
this.onSubmit()
|
||||
},
|
||||
//当前页改变时触发 跳转其他页
|
||||
handleCurrentChange(val) {
|
||||
this.formData.pageNum = val
|
||||
this.onSubmit()
|
||||
}
|
||||
},
|
||||
|
||||
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;
|
||||
// }
|
||||
// ::v-deep .el-table .cell {
|
||||
// text-align: center;
|
||||
// }
|
||||
</style>
|
||||
120
src/views/BusinessAdministrator/setup/userLoginInformation.vue
Normal file
120
src/views/BusinessAdministrator/setup/userLoginInformation.vue
Normal file
@@ -0,0 +1,120 @@
|
||||
<template>
|
||||
<div class="pd10">
|
||||
<el-form :inline="true" :model="formData" class="demo-form-inline">
|
||||
<el-form-item>
|
||||
<Timeinterval ref="interval" :interval="3"></Timeinterval>
|
||||
</el-form-item>
|
||||
<el-form-item label="筛选数据:">
|
||||
<el-input v-model.trim="formData.loginName" placeholder="请输入筛选数据" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="onSubmit" icon="el-icon-search">查询</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-table
|
||||
stripe
|
||||
size="mini"
|
||||
:row-config="{ isCurrent: true, isHover: true }"
|
||||
border
|
||||
highlight-current-row
|
||||
v-loading="loading"
|
||||
element-loading-text="数据加载中"
|
||||
header-cell-class-name="table_header"
|
||||
:data="datamock"
|
||||
style="width: 100%"
|
||||
:height="vh + 'px'"
|
||||
>
|
||||
<el-table-column prop="userName" label="登录用户" align="center"></el-table-column>
|
||||
<el-table-column prop="ip" label="登录ip" align="center"></el-table-column>
|
||||
<el-table-column prop="time" label="登录时间" align="center"></el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
background
|
||||
align="right"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="formData.pageNum"
|
||||
:page-sizes="[20, 30, 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 { getAuditLog } from '@/api/AuditManagement/AuditManagement'
|
||||
export default {
|
||||
components: {
|
||||
Timeinterval
|
||||
},
|
||||
props: {},
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
zoom: '', //图表焦点校验
|
||||
vh: undefined,
|
||||
formData: {
|
||||
operateType: '认证',
|
||||
loginName: '',
|
||||
pageNum: 1,
|
||||
pageSize: 20
|
||||
},
|
||||
datamock: [],
|
||||
total: undefined
|
||||
}
|
||||
},
|
||||
created() {},
|
||||
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
|
||||
},
|
||||
//查询
|
||||
onSubmit() {
|
||||
this.loading = true
|
||||
this.item = this.$refs.interval.timeValue
|
||||
this.formData.searchBeginTime = this.item[0]
|
||||
this.formData.searchEndTime = this.item[1]
|
||||
getAuditLog(this.formData).then(res => {
|
||||
this.datamock = res.data.records
|
||||
this.total = res.data.total
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
//每页条数改变时触发 选择一页显示多少行
|
||||
handleSizeChange(val) {
|
||||
this.formData.pageSize = val
|
||||
this.onSubmit()
|
||||
},
|
||||
//当前页改变时触发 跳转其他页
|
||||
handleCurrentChange(val) {
|
||||
this.formData.pageNum = val
|
||||
this.onSubmit()
|
||||
}
|
||||
},
|
||||
|
||||
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;
|
||||
}
|
||||
::v-deep .el-table .cell {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
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