Web/hb_pqs_web
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

提交

Browse Source
This commit is contained in:
GGJ
2025-01-09 19:02:44 +08:00
commit 92e7a7a5eb
2943 changed files with 1152283 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

302
src/views/device-boot/alarm/alarammage.vue Normal file
View File

@@ -0,0 +1,302 @@
<template>
<div style="padding: 0.2% 0.5%">
<el-row>
<el-col :span="24">
<el-button type="primary" class="el-icon-plus" size="mini" @click="add"
>新增</el-button
>
<span style="font-weight: ; font-size: 14px">数据筛选:</span>
<el-input
v-model="input"
placeholder="请选择筛选数据"
style="width: 10%"
></el-input>
<el-button
type="primary"
style="float: right"
class="el-icon-download"
size="mini"
>导出</el-button
>
</el-col>
<el-col :span="24" style="margin-top: 0.2%">
<el-table
stripe
:data="tableData"
border
:height="height"
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="dj" label="等级">
<template slot-scope="scope">
<span v-if="scope.row.dj == 1" style="color: green">不重要</span>
<span v-if="scope.row.dj == 2" style="color: #0099ff">普通</span>
<span v-if="scope.row.dj == 3" style="color: #cc9900">重要</span>
<span v-if="scope.row.dj == 4" style="color: red">极重要</span>
</template>
</el-table-column>
<el-table-column align="center" prop="sjwzx" label="数据完整性">
<template slot-scope="scope">
<span
v-if="
scope.row.sjwzx > 0 &&
scope.row.sjwzx <= 60 &&
scope.row.sjwzx !== 3.14159
"
style="color: red"
>{{ scope.row.sjwzx }}</span
>
<span
v-if="
scope.row.sjwzx > 60 &&
scope.row.sjwzx < 90 &&
scope.row.sjwzx !== 3.14159
"
style="color: #cc9900"
>{{ scope.row.sjwzx }}</span
>
<span
v-if="scope.row.sjwzx >= 90 && scope.row.sjwzx !== 3.14159"
style="color: green"
>{{ scope.row.sjwzx }}</span
>
<span v-if="scope.row.sjwzx == 3.14159">暂无数据</span>
</template>
</el-table-column>
<el-table-column align="center" prop="zxl" label="在线率">
<template slot-scope="scope">
<span
v-if="
scope.row.zxl > 0 &&
scope.row.zxl <= 60 &&
scope.row.zxl !== 3.14159
"
style="color: red"
>{{ scope.row.zxl }}</span
>
<span
v-if="
scope.row.zxl > 60 &&
scope.row.zxl < 90 &&
scope.row.zxl !== 3.14159
"
style="color: #cc9900"
>{{ scope.row.zxl }}</span
>
<span
v-if="scope.row.zxl >= 90 && scope.row.zxl !== 3.14159"
style="color: green"
>{{ scope.row.zxl }}</span
>
<span v-if="scope.row.zxl == 3.14159">暂无数据</span>
</template>
</el-table-column>
<el-table-column
align="center"
prop="cxzdsc"
label="持续中断时长(s)"
:show-overflow-tooltip="true"
></el-table-column>
<el-table-column
align="center"
prop="gjcs"
label="告警次数"
:show-overflow-tooltip="true"
></el-table-column>
<el-table-column
align="center"
prop="gxrq"
label="更新日期"
></el-table-column>
<el-table-column align="center" prop="gxyh" label="更新用户">
</el-table-column>
<el-table-column
align="center"
label="操作"
fixed="right"
width="220"
>
<template slot-scope="scope">
<el-button
type="primary"
class="el-icon-edit"
size="mini"
@click="editData"
>修改</el-button
>
<el-button
type="primary"
class="el-icon-delete"
size="mini"
@click="deleteData"
>删除</el-button
>
<!-- <el-button v-if="scope.row.state==1" disabled type="primary">已处理</el-button> -->
</template>
</el-table-column>
</el-table>
<el-pagination
style="float: right"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pageData.currentPage"
:page-sizes="[100, 200, 300, 400]"
:page-size="pageData.pagesize"
layout="total, sizes, prev, pager, next, jumper"
:total="pageData.total"
>
</el-pagination>
<el-dialog
:close-on-click-modal="false"
:title="title"
:visible.sync="dialogVisible"
width="20%"
:before-close="handleClose"
>
<el-form ref="form" :model="form" label-width="120px">
<el-form-item label="监测点等级">
<el-input v-model="form.jcddj" style="width: 89%"></el-input>
</el-form-item>
<el-form-item label="数据完整性标准">
<el-select v-model="form.bz" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="终端在线率标准">
<el-select v-model="form.zdbz" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="中断持续时长">
<el-select v-model="form.cxsc" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="告警次数">
<el-select v-model="form.gjcs" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></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-col>
</el-row>
</div>
</template>
<script>
import { tableheight } from "@/assets/commjs/common";
export default {
data() {
return {
dialogVisible: false,
title: "",
height: "",
tableData: [
{
dj: 1,
sjwzx: 30,
zxl: 90,
cxzdsc: 12,
gjcs: 15,
gxrq: "2022-03-25 11:25:56",
gxyh: "业务管理员",
},
{
dj: 2,
sjwzx: 70,
zxl: 40,
cxzdsc: 12,
gjcs: 15,
gxrq: "2022-03-25 11:25:56",
gxyh: "业务管理员",
},
{
dj: 3,
sjwzx: 95,
zxl: 70,
cxzdsc: 12,
gjcs: 15,
gxrq: "2022-03-25 11:25:56",
gxyh: "业务管理员",
},
{
dj: 4,
sjwzx: 30,
zxl: 40,
cxzdsc: 12,
gjcs: 15,
gxrq: "2022-03-25 11:25:56",
gxyh: "业务管理员",
},
],
form: {
jcddj: "",
bz: "",
zdbz: "",
cxsc: "",
gjcs: "",
},
//分页
pageData: {
currentPage: 1,
pagesize: 100,
total: 200,
},
};
},
created() {},
mounted() {
this.height = tableheight() + "px";
},
methods: {
add() {
this.dialogVisible = true;
this.title = "新增告警策略";
},
editData(row) {
this.title = "修改告警策略";
this.dialogVisible = true;
},
deleteData() {
this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
this.$message({
type: "success",
message: "删除成功!",
});
})
.catch(() => {
this.$message({
type: "info",
message: "已取消删除",
});
});
},
handleClose() {
this.dialogVisible = false;
},
},
};
</script>

374
src/views/device-boot/alarm/alarmmessage.vue Normal file
View File

@@ -0,0 +1,374 @@
<template>
<div style="padding: 0.2% 0.5%">
<el-row>
<el-col :span="12">
<span style="ont-size: 14px">告警等级:</span>
<el-select
v-model="alarmLevel"
placeholder="请选择告警等级"
style="width: 15%"
>
<el-option
v-for="item in alarmList"
:key="item.id"
:label="item.name"
:value="item.id"
>
</el-option>
</el-select>
<span style="font-size: 14px">装置/监测点等级:</span>
<el-select
v-model="lineGrade"
placeholder="请选择装置/监测点等级"
style="width: 15%"
>
<el-option
v-for="item in lineGradeList"
:key="item.id"
:label="item.name"
:value="item.id"
>
</el-option>
</el-select>
<span style="font-size: 14px">处理状态:</span>
<el-select
v-model="status"
placeholder="请选择处理状态"
style="width: 15%"
>
<el-option
v-for="item in statusList"
:key="item.id"
:label="item.name"
:value="item.id"
>
</el-option>
</el-select>
<span style="font-size: 14px">告警类型:</span>
<el-select
v-model="alarmType"
placeholder="请选择告警类型"
style="width: 15%"
>
<el-option
v-for="item in alarmTypeList"
:key="item.id"
:label="item.name"
:value="item.id"
>
</el-option>
</el-select>
</el-col>
<el-col :span="12">
<timepicker
@querfromdata="querfromdata"
:interval="interval"
></timepicker>
</el-col>
</el-row>
<el-row style="margin-top: 0.2%">
<el-table
stripe
stripe
:data="tableData"
border
:height="height"
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: #ff6600"
>普通</span
>
<span v-if="scope.row.level === 1" style="color: #009966"
>中等</span
>
<span v-if="scope.row.level === 2" style="color: #009966"
>严重</span
>
</template>
</el-table-column>
<el-table-column
align="center"
prop="devLineName"
label="告警定位(装置/监测点)"
:show-overflow-tooltip="true"
></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: #ff6600"
>未处理</span
>
<span v-if="scope.row.flag === 1" style="color: #009966"
>已处理</span
>
</template>
</el-table-column>
<el-table-column
align="center"
prop="updateBy"
label="处理员"
></el-table-column>
<el-table-column
align="center"
prop="processTime"
label="处理时间"
></el-table-column>
<el-table-column
align="center"
prop="lineGrade"
label="监测点装置等级"
></el-table-column>
<el-table-column align="center" label="操作" fixed="right" width="220">
<template slot-scope="scope">
<el-button type="primary" @click="deilallData(scope.row)"
>详细信息</el-button
>
<el-button v-if="scope.row.flag === 1" disabled type="primary"
>已处理</el-button
>
<el-button v-if="scope.row.flag === 0" type="primary"
>未处理</el-button
>
</template>
</el-table-column>
</el-table>
<el-pagination
style="float: right"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pageData.currentPage"
:page-sizes="[100, 200, 300, 400]"
:page-size="pageData.pagesize"
layout="total, sizes, prev, pager, next, jumper"
:total="pageData.total"
>
</el-pagination>
<el-dialog
:close-on-click-modal="false"
title="告警详细信息"
:visible.sync="dialogVisible"
width="70%"
:before-close="handleClose"
>
<el-table
stripe
:data="tableDataDetail"
border
height="60vh"
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="告警等级"
></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: #ff6600"
>未处理</span
>
<span v-if="scope.row.flag === 1" style="color: #009966"
>已处理</span
>
</template>
</el-table-column>
<el-table-column
align="center"
prop="updateBy"
label="处理员"
></el-table-column>
<el-table-column
align="center"
prop="processTime"
label="处理时间"
></el-table-column>
</el-table>
<el-pagination
style="float: right"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pageData.currentPage"
:page-sizes="[50, 100, 150, 200]"
:page-size="pageData.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="pageData.total"
>
</el-pagination>
</el-dialog>
</el-row>
</div>
</template>
<script>
import { tableheight } from "@/assets/commjs/common";
import timepicker from "../../components/TimePicker/index4";
import { dicData } from "@/assets/commjs/dictypeData";
import alarm from "@/api/device/alarm";
export default {
components: {
timepicker,
},
data() {
return {
interval: 3,
height: "",
dialogVisible: false,
lineGradeList: [],
lineGrade: "",
startTime: "",
endTime: "",
statusList: [
{ id: "", name: "全部" },
{ id: 0, name: "未处理" },
{ id: 1, name: "已处理" },
],
status: "",
loading: false,
searchValue: "",
alarmTypeList: [],
alarmType: "",
alarmLevel: "",
alarmList: [
{ id: "", name: "全部" },
{ id: 0, name: "普通" },
{ id: 1, name: "中等" },
{ id: 2, name: "严重" },
],
tableData: [],
tableDataDetail: [],
//分页
pageData: {
currentPage: 1,
pageSize: 50,
total: 0,
},
};
},
created() {
this.getAlarmGradeList();
this.getLineGradeList();
},
mounted() {
this.height = tableheight() + "px";
},
methods: {
querfromdata(data) {
this.startTime = data[0];
this.endTime = data[1];
this.getList();
},
handleSizeChange() {},
handleCurrentChange() {},
deilallData(row) {
this.dialogVisible = true;
this.getListDetail(row);
},
handleClose() {
this.dialogVisible = false;
},
//获取所有告警类型
getAlarmGradeList() {
var code = "alarm_Type";
this.alarmTypeList = dicData(code, [], 1);
},
//获取所有监测点等级
getLineGradeList() {
var code = "Dev_Level";
this.lineGradeList = dicData(code, [], 1);
},
//获取主列表
getList() {
let data = {
startTime: this.startTime,
endTime: this.endTime,
lineGrade: this.lineGrade,
alarmLevel: this.alarmLevel,
flag: this.status,
type: this.alarmType,
pageNum: this.pageData.currentPage,
pageSize: this.pageData.pageSize,
searchValue: this.searchValue,
};
this.loading = true;
alarm.getList(data).then((response) => {
if (response.code === "A0000") {
let data = response.data;
this.tableData = data.records;
this.loading = false;
this.pageData.currentPage = data.current;
this.pageData.pageSize = data.size;
this.pageData.total = data.total;
}
});
},
//获取详情列表
getListDetail(row) {
let data = {
startTime: this.startTime,
endTime: this.endTime,
alarmLevel: row.level,
flag: row.flag,
type: row.typeId,
devLineId: row.devLineId,
processTime: row.processTime,
};
this.loading = true;
alarm.getListDetail(data).then((response) => {
if (response.code === "A0000") {
this.tableDataDetail = response.data;
this.loading = false;
}
});
},
},
};
</script>

385
src/views/device-boot/contorller/terminalcontor.vue Normal file
View File

@@ -0,0 +1,385 @@
<template>
<div class="app-container">
<el-input v-model="search" placeholder="Filter keyword" style="margin-bottom:30px;"/>
<el-table
ref="menuTree"
:data="treeTable"
style="width: 100%;margin-bottom: 20px;"
row-key="id"
border
height="60vh"
default-expand-all
:tree-props="{children: 'children', hasChildren: 'hasChildren'}">
<el-table-column
prop="title"
label="名称"
sortable
width="350">
</el-table-column>
<el-table-column
label="操作">
<template slot-scope="scope">
<!-- v-if="node.level == 1 || node.level == 2" v-if="node.level == 3" v-if="node.level == 4"-->
<el-button
v-if="(scope.row.level == 1 || scope.row.level == 2) "
type="text"
size="mini"
@click="() => {dialogFormVisible = true, menu.pid = scope.row.id}">添加菜单
</el-button>
<el-button
v-if="scope.row.level == 3"
type="text"
size="mini"
@click="() => {dialogPermissionVisible = true, permission.pid = scope.row.id}">添加功能
</el-button>
<el-button
v-if="scope.row.level == 4 "
type="text"
size="mini"
@click="() => updateFunction(scope.row)">修改功能
</el-button>
<el-button
v-if="scope.row.level != 4 "
type="text"
size="mini"
@click="() => getById(scope.row)">修改
</el-button>
<el-button
type="text"
size="mini"
@click="() => remove(scope.row)">删除
</el-button>
</template>
</el-table-column>
</el-table>
<el-dialog :visible.sync="dialogFormVisible" :title="dialogFormValue">
<el-form ref="menu" :model="menu" :rules="menuValidateRules" label-width="120px">
<el-form-item label="菜单名称" prop="name">
<el-input v-model="menu.name"/>
</el-form-item>
<el-form-item label="访问路径" prop="path">
<el-input v-model="menu.path"/>
</el-form-item>
<el-form-item label="组件路径" prop="component">
<el-input v-model="menu.component"/>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="restData()">取 消</el-button>
<el-button type="primary" @click="append()">确 定</el-button>
</div>
</el-dialog>
<!-- 添加功能的窗口 -->
<el-dialog :visible.sync="dialogPermissionVisible" title="添加功能">
<el-form ref="permission" :model="permission" :rules="permissionValidateRules" label-width="120px">
<el-form-item label="功能名称" prop="name">
<el-input v-model="permission.name"/>
</el-form-item>
<el-form-item label="访问路径">
<el-input v-model="permission.path"/>
</el-form-item>
<el-form-item label="组件路径">
<el-input v-model="permission.component"/>
</el-form-item>
<el-form-item label="功能权限值" prop="permissionValue">
<el-input v-model="permission.permissionValue"/>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="restData()">取 消</el-button>
<el-button type="primary" @click="appendPermission()">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { add, list, update, listmesg, deleteMenu } from "@/api/admin/menu";
const menuForm = {
name: '',
pid: 0,
path: '',
component: '',
type: '1'
}
const perForm = {
permissionValue: '',
type: '2',
name: '',
path: '',
component: '',
pid: 0
}
export default {
data() {
return {
flag : -1,
expandRow: [],
search: '',
tableData: [],
defaultProps: {
children: 'children',
label: 'name'
},
dialogFormValue: '添加菜单',
dialogFormVisible: false,
dialogPermissionVisible: false,
menu: menuForm,
permission: perForm,
menuValidateRules: {
name: [{required: true, trigger: 'blur', message: '菜单名必须输入'}],
path: [{required: true, trigger: 'blur', message: '菜单路径必须输入'}],
component: [{required: true, trigger: 'blur', message: '组件名称必须输入'}]
},
permissionValidateRules: {
name: [{required: true, trigger: 'blur', message: '功能名称必须输入'}],
permissionValue: [{required: true, trigger: 'blur', message: '功能权限值必须输入'}]
}
}
},
created() {
this.fetchNodeList()
},
computed: {
treeTable: function () {
var searchValue = this.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
}
},
methods: {
// 将过滤好的树形数据展开
setExpandRow(handleTreeData) {
this.flag =-1
if (handleTreeData.length) {
for (let i of handleTreeData) {
this.expandRow.push(i.id)
if (i.children.length) {
this.setExpandRow(i.children)
}
}
}
},
// 树形表格过滤
handleTreeData(treeData, searchValue) {
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) {
if (treeData[i].type ==0 && match){
this.flag =0
searchValue = ''
array.push({
...treeData[i],
children: this.handleTreeData(treeData[i].children, searchValue),
});
}else if(treeData[i].type ==1 && match){
if (this.flag == 0){
this.flag = 1
}
searchValue =''
array.push({
...treeData[i],
children: this.handleTreeData(treeData[i].children, searchValue),
});
if (this.flag != 1){
searchValue =this.search
}
}else {
array.push({
...treeData[i],
children: this.handleTreeData(treeData[i].children, searchValue),
});
}
}
}
return array;
},
fetchNodeList() {
list().then((response) => {
this.tableData= response.data;
})
},
// remove(data) {
// console.log(data)
// this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
// confirmButtonText: '确定',
// cancelButtonText: '取消',
// type: 'warning'
// }).then(() => {
// return menu.removeById(data.id)
// }).then(() => {
// this.fetchNodeList()// 刷新列表
// this.$message({
// type: 'success',
// message: '删除成功!'
// })
// }).catch((response) => { // 失败
// if (response === 'cancel') {
// this.$message({
// type: 'info',
// message: '已取消删除'
// })
// } else {
// this.$message({
// type: 'error',
// message: '删除失败'
// })
// }
// })
// },
// appendPermission() {
// this.$refs.permission.validate(valid => {
// if (valid) {
// if (this.permission.id) {
// this.update(this.permission)
// } else {
// menu.saveLevelOne(this.permission).then(response => {
// this.dialogPermissionVisible = false
// this.$message({
// type: 'success',
// message: '添加功能成功'
// })
// // 刷新页面
// this.fetchNodeList()
// this.menu = {...menuForm}
// this.permission = {...perForm}
// })
// }
// }
// })
// },
// appendLevelOne() {
// menu.saveLevelOne(this.menu)
// .then(response => {
// this.dialogFormVisible = false
// this.$message({
// type: 'success',
// message: '添加一级菜单成功'
// })
// // 刷新页面
// this.fetchNodeList()
// this.menu = {...menuForm}
// this.permission = {...perForm}
// })
// .catch(response => {
// // 你们写：判断点击取消清空一下
// this.dialogFormVisible = false
// this.$message({
// type: 'error',
// message: '添加一级菜单失败'
// })
// this.menu = {...menuForm}
// this.permission = {...perForm}
// })
// },
// append() {
// this.$refs.menu.validate(valid => {
// if (valid) {
// if (!this.menu.id) { // 添加
// if (this.menu.pid == 0) {
// this.appendLevelOne() // 一级分类的添加
// } else {
// this.appendLevelTwo() // 二级分类的添加
// }
// } else { // 修改
// this.update(this.menu)
// }
// }
// })
// },
// update(obj) {
// debugger
// menu.update(obj).then(response => {
// this.dialogFormVisible = false
// this.$message({
// type: 'success',
// message: '修改成功'
// })
// // 刷新页面
// this.fetchNodeList()
// this.restData()
// })
// },
// appendLevelTwo() {
// menu.saveLevelOne(this.menu)
// .then(response => {
// // 1、把文本框关
// this.dialogFormVisible = false
// // 2、提示成功
// this.$message({
// type: 'success',
// message: "添加二级分类成功"
// })
// // 3、刷新页面
// this.fetchNodeList()
// // 4、把menu清空
// this.menu = {...menuForm}
// this.permission = {...perForm}
// })
// .catch(response => {
// // 1、把文本框关
// this.dialogFormVisible = false
// // 2、提示成功
// this.$message({
// type: 'error',
// message: "添加二级分类失败"
// })
// // 3、把menu清空
// this.menu = {...menuForm}
// this.permission = {...perForm}
// })
// },
// getById(data) {
// this.dialogFormVisible = true
// this.menu = data
// },
// updateFunction(data) {
// this.dialogPermissionVisible = true
// this.permission = data
// },
// restData() {
// this.dialogPermissionVisible = false
// this.dialogFormVisible = false
// this.menu = {...menuForm}
// this.permission = {...perForm}
// }
}
}
</script>

841
src/views/device-boot/device/dataunitmange.vue Normal file
View File

@@ -0,0 +1,841 @@
<template>
<div class="pd10" v-loading="isLoading" element-loading-text="数据加载中">
<el-form ref="form" inline :model="formData">
<el-form-item label="装置状态:">
<el-select
v-model="formData.status"
clearable
placeholder="请选择装置状态"
>
<el-option
v-for="item in device"
:key="item.id"
:label="item.name"
:value="item.id"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="筛选数据:">
<el-input
v-model="formData.searchValue"
clearable
placeholder="请输入筛选数据"
></el-input>
</el-form-item>
<el-form-item>
<el-button size="small" type="primary" icon="el-icon-search" @click="onsubmit"
>查询</el-button
>
<!-- <el-button size="small" type="primary" icon="el-icon-download"
>导出</el-button
> -->
</el-form-item>
</el-form>
<vxe-table
size="mini"
class="xiaoshou"
:data="treeTable"
ref="plan"
highlight-current-row
border
:height="vh"
:row-config="{keyField: 'id', isCurrent: true, isHover: true }"
:scroll-y="{enabled: true, gt: 20}"
:tree-config="{ children: 'children',}"
row-id="id"
:expand-row-id="expandID"
:filter-node-method="filterNode"
header-cell-class-name="table_header"
>
<!-- <vxe-table-column title="序号" width="50" type="seq" align="center"></vxe-table-column> -->
<vxe-table-column field="name" show-overflow align="left" tree-node title="区域/变电站/装置" min-width="300"></vxe-table-column>
<!-- <vxe-table-column field="name" show-overflow align="center" title="所属变电站" min-width="180"></vxe-table-column>
<vxe-table-column field="name" show-overflow align="center" title="装置名称" min-width="100"></vxe-table-column> -->
<vxe-table-column field="devFlag" show-overflow align="center" title="装置状态" min-width="100">
<template slot-scope="scope">
<span v-if="scope.row.devFlag == 0" style="color:green">投运</span>
<span v-if="scope.row.devFlag == 2" style="color:red">停运</span>
<span v-if="scope.row.devFlag == 1" style="color:orange">热备用</span>
<span v-if="scope.row.devFlag == null" >/</span>
</template>
</vxe-table-column>
<vxe-table-column field="unitFrequency" show-overflow align="center" title="频率" min-width="100">
<template slot-scope="scope">
{{ scope.row.unitFrequency == null ? '--' : scope.row.unitFrequency }}
</template>
</vxe-table-column>
<vxe-table-column field="unitFrequencyDev" show-overflow align="center" title="频率偏差" min-width="100">
<template slot-scope="scope">
{{ scope.row.unitFrequencyDev == null ? '--' : scope.row.unitFrequencyDev }}
</template>
</vxe-table-column>
<vxe-table-column field="phaseVoltage" show-overflow align="center" title="相电压有效值" min-width="130">
<template slot-scope="scope">
{{ scope.row.phaseVoltage == null ? '--' : scope.row.phaseVoltage }}
</template>
</vxe-table-column>
<vxe-table-column field="lineVoltage" show-overflow align="center" title="线电压有效值" min-width="130">
<template slot-scope="scope">
{{ scope.row.lineVoltage == null ? '--' : scope.row.lineVoltage }}
</template>
</vxe-table-column>
<vxe-table-column field="voltageDev" show-overflow align="center" title="电压上偏差" min-width="130">
<template slot-scope="scope">
{{ scope.row.voltageDev == null ? '--' : scope.row.voltageDev }}
</template>
</vxe-table-column>
<vxe-table-column field="uvoltageDev" show-overflow align="center" title="电压下偏差" min-width="130">
<template slot-scope="scope">
{{ scope.row.uvoltageDev == null ? '--' : scope.row.uvoltageDev }}
</template>
</vxe-table-column>
<vxe-table-column field="ieffective" show-overflow align="center" title="电流有效值" min-width="130">
<template slot-scope="scope">
{{ scope.row.ieffective == null ? '--' : scope.row.ieffective }}
</template>
</vxe-table-column>
<vxe-table-column field="singleP" show-overflow align="center" title="单相有功功率" min-width="140">
<template slot-scope="scope">
{{ scope.row.singleP == null ? '--' : scope.row.singleP }}
</template>
</vxe-table-column>
<vxe-table-column field="singleViewP" show-overflow align="center" title="单相视在功率" min-width="140">
<template slot-scope="scope">
{{ scope.row.singleViewP == null ? '--' : scope.row.singleViewP }}
</template>
</vxe-table-column>
<vxe-table-column field="singleNoP" show-overflow align="center" title="单相无功功率" min-width="140">
<template slot-scope="scope">
{{ scope.row.singleNoP == null ? '--' : scope.row.singleNoP }}
</template>
</vxe-table-column>
<vxe-table-column field="totalActiveP" show-overflow align="center" title="总有功功率" min-width="140">
<template slot-scope="scope">
{{ scope.row.totalActiveP == null ? '--' : scope.row.totalActiveP }}
</template>
</vxe-table-column>
<vxe-table-column field="totalViewP" show-overflow align="center" title="总视在功率" min-width="140">
<template slot-scope="scope">
{{ scope.row.totalViewP == null ? '--' : scope.row.totalViewP }}
</template>
</vxe-table-column>
<vxe-table-column field="totalNoP" show-overflow align="center" title="总无功功率" min-width="140">
<template slot-scope="scope">
{{ scope.row.totalNoP == null ? '--' : scope.row.totalNoP }}
</template>
</vxe-table-column>
<vxe-table-column field="vfundEffective" show-overflow align="center" title="相(线)电压基波有效值" min-width="200">
<template slot-scope="scope">
{{ scope.row.vfundEffective == null ? '--' : scope.row.vfundEffective }}
</template>
</vxe-table-column>
<vxe-table-column field="ifund" show-overflow align="center" title="基波电流" min-width="140">
<template slot-scope="scope">
{{ scope.row.ifund == null ? '--' : scope.row.ifund }}
</template>
</vxe-table-column>
<vxe-table-column field="fundActiveP" show-overflow align="center" title="基波有功功率" min-width="140">
<template slot-scope="scope">
{{ scope.row.fundActiveP == null ? '--' : scope.row.fundActiveP }}
</template>
</vxe-table-column>
<vxe-table-column field="fundNoP" show-overflow align="center" title="基波无功功率" min-width="140">
<template slot-scope="scope">
{{ scope.row.fundNoP == null ? '--' : scope.row.fundNoP }}
</template>
</vxe-table-column>
<vxe-table-column field="vdistortion" show-overflow align="center" title="电压总谐波畸变率" min-width="200">
<template slot-scope="scope">
{{ scope.row.vdistortion == null ? '--' : scope.row.vdistortion }}
</template>
</vxe-table-column>
<vxe-table-column field="vharmonicRate" show-overflow align="center" title="2~50次谐波电压含有率" min-width="200">
<template slot-scope="scope">
{{ scope.row.vharmonicRate == null ? '--' : scope.row.vharmonicRate }}
</template>
</vxe-table-column>
<vxe-table-column field="iharmonic" show-overflow align="center" title="2~50次谐波电流有效值" min-width="200">
<template slot-scope="scope">
{{ scope.row.iharmonic == null ? '--' : scope.row.iharmonic }}
</template>
</vxe-table-column>
<vxe-table-column field="pharmonic" show-overflow align="center" title="2~50次谐波有功功率" min-width="200">
<template slot-scope="scope">
{{ scope.row.pharmonic == null ? '--' : scope.row.pharmonic }}
</template>
</vxe-table-column>
<vxe-table-column field="iiharmonic" show-overflow align="center" title="0.5~49.5次间谐波电流有效值" min-width="260">
<template slot-scope="scope">
{{ scope.row.iiharmonic == null ? '--' : scope.row.iiharmonic }}
</template>
</vxe-table-column>
<vxe-table-column field="positiveV" show-overflow align="center" title="正序电压" min-width="100">
<template slot-scope="scope">
{{ scope.row.positiveV == null ? '--' : scope.row.positiveV }}
</template>
</vxe-table-column>
<vxe-table-column field="noPositiveV" show-overflow align="center" title="零序负序电压" min-width="140">
<template slot-scope="scope">
{{ scope.row.noPositiveV == null ? '--' : scope.row.noPositiveV }}
</template>
</vxe-table-column>
<vxe-table-column field="" show-overflow align="center" title="操作" fixed="right" min-width="120">
<template slot-scope="scope">
<el-button v-if="scope.row.unitFrequency == null" style="color: #000; !important" disabled type="primary" size="mini" icon="el-icon-edit">修改</el-button>
<el-button v-else type="primary" size="mini" @click="modify(scope.row)" icon="el-icon-edit">修改</el-button>
</template>
</vxe-table-column>
</vxe-table>
<!-- 新增/修改 -->
<el-dialog
:close-on-click-modal="false"
title="单位修改"
:visible.sync="unitModification"
width="50%"
height="90%"
>
<el-form
:model="form"
label-width="210px"
class="form"
>
<el-row>
<el-col :span="12">
<el-form-item label="频率:">
<el-select
v-model="form.unitFrequency"
clearable
placeholder="请选择频率"
>
<el-option
v-for="item in frequency"
:key="item.name"
:label="item.name"
:value="item.name"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="频率偏差:" class="top">
<el-select
v-model="form.unitFrequencyDev"
clearable
placeholder="请选择频率偏差"
>
<el-option
v-for="item in frequency"
:key="item.name"
:label="item.name"
:value="item.name"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="相电压有效值:" class="top">
<el-select
v-model="form.phaseVoltage"
clearable
placeholder="请选择相电压有效值"
>
<el-option
v-for="item in validValue"
:key="item.name"
:label="item.name"
:value="item.name"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="线电压有效值:" class="top">
<el-select
v-model="form.lineVoltage"
clearable
placeholder="请选择线电压有效值"
>
<el-option
v-for="item in validValue"
:key="item.name"
:label="item.name"
:value="item.name"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="电压上偏差:" class="top">
<el-select
v-model="form.voltageDev"
clearable
placeholder="请选择电压上偏差"
>
<el-option
v-for="item in deviation"
:key="item.name"
:label="item.name"
:value="item.name"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="电压下偏差:" class="top">
<el-select
v-model="form.uvoltageDev"
clearable
placeholder="请选择电压下偏差"
>
<el-option
v-for="item in deviation"
:key="item.name"
:label="item.name"
:value="item.name"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="电流有效值:" class="top">
<el-select
v-model="form.ieffective"
clearable
placeholder="请选择电流有效值"
>
<el-option
v-for="item in RMS"
:key="item.name"
:label="item.name"
:value="item.name"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="单相有功功率:" class="top">
<el-select
v-model="form.singleP"
clearable
placeholder="请选择单相有功功率"
>
<el-option
v-for="item in meritorious"
:key="item.name"
:label="item.name"
:value="item.name"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="单相视在功率:" class="top">
<el-select
v-model="form.singleViewP"
clearable
placeholder="请选择单相视在功率"
>
<el-option
v-for="item in apparent"
:key="item.name"
:label="item.name"
:value="item.name"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="单相无功功率:" class="top">
<el-select
v-model="form.singleNoP"
clearable
placeholder="请选择单相无功功率"
>
<el-option
v-for="item in reactivePower"
:key="item.name"
:label="item.name"
:value="item.name"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="总有功功率:" class="top">
<el-select
v-model="form.totalActiveP"
clearable
placeholder="请选择总有功功率"
>
<el-option
v-for="item in meritorious"
:key="item.name"
:label="item.name"
:value="item.name"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="总视在功率:" class="top">
<el-select
v-model="form.totalViewP"
clearable
placeholder="请选择总视在功率"
>
<el-option
v-for="item in apparent"
:key="item.name"
:label="item.name"
:value="item.name"
>
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="总无功功率:" >
<el-select
v-model="form.totalNoP"
clearable
placeholder="请选择总无功功率"
>
<el-option
v-for="item in reactivePower"
:key="item.name"
:label="item.name"
:value="item.name"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="相(线)电压基波有效值:" class="top">
<el-select
v-model="form.vfundEffective"
clearable
placeholder="请选择相(线)电压基波有效值"
>
<el-option
v-for="item in validValue"
:key="item.name"
:label="item.name"
:value="item.name"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="基波电流:" class="top">
<el-select
v-model="form.ifund"
clearable
placeholder="请选择基波电流"
>
<el-option
v-for="item in RMS"
:key="item.name"
:label="item.name"
:value="item.name"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="基波有功功率:" class="top">
<el-select
v-model="form.fundActiveP"
clearable
placeholder="请选择基波有功功率"
>
<el-option
v-for="item in meritorious"
:key="item.name"
:label="item.name"
:value="item.name"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="基波无功功率:" class="top">
<el-select
v-model="form.fundNoP"
clearable
placeholder="请选择基波无功功率"
>
<el-option
v-for="item in reactivePower"
:key="item.name"
:label="item.name"
:value="item.name"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="电压总谐波畸变率:" class="top">
<el-select
v-model="form.vdistortion"
clearable
placeholder="请选择电压总谐波畸变率"
>
<el-option
v-for="item in deviation"
:key="item.name"
:label="item.name"
:value="item.name"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="2~50次谐波电压含有率:" class="top">
<el-select
v-model="form.vharmonicRate"
clearable
placeholder="请选择2~50次谐波电压含有率"
>
<el-option
v-for="item in RMS"
:key="item.name"
:label="item.name"
:value="item.name"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="2~50次谐波有功功率:" class="top" >
<el-select
v-model="form.pharmonic"
clearable
placeholder="请选择2~50次谐波有功功率"
>
<el-option
v-for="item in meritorious"
:key="item.name"
:label="item.name"
:value="item.name"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="0.5~49.5次间谐波电流有效值:" class="top">
<el-select
v-model="form.iiharmonic"
clearable
placeholder="请选择0.5~49.5次间谐波电流有效值"
>
<el-option
v-for="item in RMS"
:key="item.name"
:label="item.name"
:value="item.name"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="正序电压:" class="top">
<el-select
v-model="form.positiveV"
clearable
placeholder="请选择正序电压"
>
<el-option
v-for="item in validValue"
:key="item.name"
:label="item.name"
:value="item.name"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="零序负序电压:" class="top">
<el-select
v-model="form.noPositiveV"
clearable
placeholder="请选择零序负序电压"
>
<el-option
v-for="item in validValue"
:key="item.name"
:label="item.name"
:value="item.name"
>
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button type="" @click="unitModification = false">取 消</el-button>
<el-button v-if="modify" type="primary" @click="modifyDetermine"
>确 定</el-button
>
</span>
</el-dialog>
</div>
</template>
<script>
import api from "@/api/device/device.js";
export default {
name:'nuitmange',
data() {
return {
isLoading: false,
unitModification: false,
formData: {
status: 0,
searchValue: "",
},
form:{
devIndex:'',
unitFrequency:'',
unitFrequencyDev:'',
phaseVoltage:'',
lineVoltage:'',
voltageDev:'',
uvoltageDev:'',
ieffective:'',
singleP:'',
singleViewP:'',
singleNoP:'',
totalActiveP:'',
totalViewP:'',
totalNoP:'',
vfundEffective:'',
ifund:'',
fundActiveP:'',
fundNoP:'',
vdistortion:'',
vharmonicRate:'',
iharmonic:'',
pharmonic:'',
iiharmonic:'',
positiveV:'',
noPositiveV:'',
},
expandID:[],
device: [
{
id: 0,
name: "投运",
},
{
id: 2,
name: "停运",
},
{
id: 1,
name: "热备用",
},
],
frequency: [
{
id: 0,
name: "Hz",
},
{
id: 2,
name: "kHz",
},
],
validValue: [
{
id: 0,
name: "kV",
},
{
id: 2,
name: "V",
},
],
deviation: [
{
id: 0,
name: "%",
},
],
RMS: [
{
id: 0,
name: 'A'
},
],
meritorious: [
{
id: 0,
name: "kW",
},
{
id: 2,
name: "W",
},
],
apparent: [
{
id: 0,
name: "kVA",
},
{
id: 2,
name: "VA",
},
],
reactivePower: [
{
id: 0,
name: "kVar",
},
{
id: 2,
name: "Var",
},
],
vh:undefined,
tableData:[],
};
},
computed: {
treeTable: function () {
var searchValue = this.formData.searchValue;
if (searchValue) {
// 一般表格的查询
// return this.tableData.filter(function(dataNews){
// return Object.keys(dataNews).some(function(key){
// return String(dataNews[key]).toLowerCase().indexOf(search) > -1
// })
// }
//console.log(this.tableData);
let treeData = this.tableData;
let handleTreeData = this.handleTreeData(treeData, searchValue);
this.setExpandRow(handleTreeData);
this.expandID = this.expandID.join(",").split(",");
// console.log(this.expandID);
return handleTreeData;
}
return this.tableData;
},
},
created() {
this.onsubmit()
},
mounted() {
this.setHeight()
window.addEventListener('resize', this.setHeight)
},
beforeDestroy() {
window.removeEventListener('resize', this.setHeight)
},
methods: {
setHeight() {
this.vh = window.sessionStorage.getItem("appheight") - 55;
},
filterNode() {},
// 树形表格过滤
handleTreeData(treeData, searchValue) {
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;
},
// 将过滤好的树形数据展开
setExpandRow(handleTreeData) {
if (handleTreeData.length) {
for (let i of handleTreeData) {
this.expandID.push(i.id);
if (i.children.length) {
this.setExpandRow(i.children);
}
}
}
},
//查询
onsubmit() {
this.isLoading = true
let data = {
devFlag: this.formData.status,
};
api.nodeTree(data).then((res) => {
this.tableData = res.data
let hierarchy =2
this.expandByHierarchy(hierarchy)
this.isLoading = false
});
},
//修改
modify(val){
//console.log(val);
this.unitModification = true
this.form = val
this.form.devIndex = val.id
},
//修改确定
modifyDetermine() {
this.$confirm("是否确认修改?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
api.saveDeviceUnit(this.form).then((res) => {
if (res.code == "A0000") {
this.$message({
message: res.message,
type: "success",
});
}
this.unitModification = false;
// this.onsubmit();
});
})
.catch(() => {
this.$message({
type: "info",
message: "已取消修改",
});
});
},
getNodeByHierarchy(list, hierarchy, nodeName = 'children') {
// console.log(list, hierarchy);
if (list && list.length) {
if (hierarchy > 1) {
const allRow = []
list.forEach(item => {
allRow.push(item)
if (item[nodeName]) {
allRow.push(...this.getNodeByHierarchy(item[nodeName], hierarchy - 1, nodeName))
}
})
return allRow
} else if (hierarchy === 1) {
return list
} else return []
} else return []
},
expandByHierarchy(hierarchy) {
this.$refs.plan.setAllTreeExpand(false)
const rows = this.getNodeByHierarchy(this.tableData, hierarchy)
this.$refs.plan.setTreeExpand(rows, true)
},
},
};
</script>
<style lang="less" scoped>
@import url("../../../styles/comStyle.less");
.xiaoshou {
cursor: pointer;
}
</style>

3219
src/views/device-boot/device/diviceindex.vue Normal file
View File

File diff suppressed because it is too large Load Diff

342
src/views/device-boot/device/frontmange.vue Normal file
View File

@@ -0,0 +1,342 @@
<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.fontdve"
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.status" 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" @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"
icon="el-icon-upload2"
@click="add"
>新增
</el-button>
</el-col>
</el-row>
<el-row style="margin-top: 0.2%">
<el-table
stripe
:data="tableData"
border
highlight-current-row
:height="height"
style="width: 100%"
>
<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" fixed="right" label="操作" width="200">
<template slot-scope="scope">
<el-button type="primary" size="mini" @click="edit(scope.row)"
>修改</el-button
>
<el-button type="primary" size="mini" @click="Delete(scope.row)"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
<el-pagination
style="float: right"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pageData.currentPage"
:page-sizes="[10, 20, 30, 40]"
:page-size="pageData.pagesize"
layout="total, sizes, prev, pager, next, jumper"
:total="pageData.total"
>
</el-pagination>
</el-row>
<!--新增-->
<el-dialog
:close-on-click-modal="false"
:title="title"
:visible.sync="dialogVisible"
width="30%"
:before-close="handleClose"
>
<el-form ref="form" :model="formData" label-width="120px">
<el-form-item label="名称">
<el-input v-model="formData.name" style="width: 80%"></el-input>
</el-form-item>
<el-form-item label="IP">
<el-input v-model="formData.ip" style="width: 80%"></el-input>
</el-form-item>
<el-form-item label="等级">
<el-select
v-model="formData.nodeGrade"
placeholder="请选择等级"
style="width: 80%"
>
<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="最大装置数">
<el-input v-model="formData.nodeDevNum" style="width: 80%"></el-input>
</el-form-item>
<el-form-item label="排序">
<el-input v-model="formData.sort" style="width: 80%"></el-input>
</el-form-item>
<el-form-item label="描述">
<el-input v-model="formData.remark" style="width: 80%"></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="submit">提 交</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import { tableheight } from "@/assets/commjs/common";
import node from "@/api/device/node.js";
export default {
name: "premage",
data() {
return {
dialogVisible: false,
height: "",
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: [],
};
},
created() {
this.getList();
},
mounted() {
this.height = tableheight() + "px";
},
methods: {
//分页
handleSizeChange(val) {
// console.log(`每页 ${val} 条`);
},
handleCurrentChange(val) {
//console.log(`当前页: ${val}`);
},
//查询按钮
query() {
this.getList();
},
//新增
add() {
this.dialogVisible = true;
this.operaType = 0;
this.title = "新增前置机";
},
//关闭
handleClose() {
this.dialogVisible = false;
},
//修改
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.getList();
}
});
})
.catch(() => {
this.$message({
type: "info",
message: "已取消删除",
});
});
},
//获取主界面列表
getList() {
let data = {
pageNum: this.pageData.currentPage,
pageSize: this.pageData.pagesize,
nodeGrade: this.fontdve,
searchState: this.status,
};
node.getList(data).then((response) => {
if (response.code === "A0000") {
let res = response.data;
this.pageData.currentPage = res.current;
this.pageData.pagesize = res.size;
this.pageData.total = res.total;
this.tableData = res.records;
}
});
},
//获取单个前置机详情
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.getList();
}
});
} else {
//修改
node.update(this.formData).then((response) => {
if (response.code === "A0000") {
this.$message({
type: "success",
message: "修改成功!",
});
this.dialogVisible = false;
this.getList();
}
});
}
});
},
},
};
</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>

739
src/views/device-boot/device/hbdataunitmange.vue Normal file
View File

@@ -0,0 +1,739 @@
<template>
<div class="pd10" v-loading="isLoading" element-loading-text="数据加载中">
<el-form ref="form" inline :model="formData">
<el-form-item label="装置状态:">
<el-select v-model="formData.status" clearable placeholder="请选择装置状态">
<el-option v-for="item in device" :key="item.id" :label="item.name" :value="item.id"></el-option>
</el-select>
</el-form-item>
<el-form-item label="筛选数据:">
<el-input v-model="formData.searchValue" clearable placeholder="请输入筛选数据"></el-input>
</el-form-item>
<el-form-item>
<el-button size="small" type="primary" icon="el-icon-search" @click="onsubmit">查询</el-button>
<!-- <el-button size="small" type="primary" icon="el-icon-download"
>导出</el-button
> -->
</el-form-item>
</el-form>
<vxe-table
size="mini"
class="xiaoshou"
:data="treeTable"
ref="plan"
highlight-current-row
border
:height="vh"
:row-config="{ keyField: 'id', isCurrent: true, isHover: true }"
:scroll-y="{ enabled: true, gt: 20 }"
:tree-config="{ children: 'children' }"
row-id="id"
:expand-row-id="expandID"
:filter-node-method="filterNode"
header-cell-class-name="table_header"
>
<!-- <vxe-table-column title="序号" width="50" type="seq" align="center"></vxe-table-column> -->
<vxe-table-column
field="name"
show-overflow
align="left"
tree-node
title="区域/变电站/装置"
min-width="300"
></vxe-table-column>
<vxe-table-column field="devFlag" show-overflow align="center" title="装置状态" min-width="100">
<template slot-scope="scope">
<span v-if="scope.row.devFlag" :style="getDeviceColor(scope.row.devFlag)">
{{ device.filter(item => item.id == scope.row.devFlag)[0].name }}
</span>
<span v-else>/</span>
<!-- <span v-if="scope.row.devFlag == 0" style="color:green">投运</span>
<span v-if="scope.row.devFlag == 2" style="color:red">停运</span>
<span v-if="scope.row.devFlag == 1" style="color:orange">热备用</span>
<span v-if="scope.row.devFlag == null" >/</span> -->
</template>
</vxe-table-column>
<vxe-table-column field="unitFrequency" show-overflow align="center" title="频率" min-width="100">
<template slot-scope="scope">
{{ scope.row.unitFrequency == null ? '--' : scope.row.unitFrequency }}
</template>
</vxe-table-column>
<vxe-table-column field="unitFrequencyDev" show-overflow align="center" title="频率偏差" min-width="100">
<template slot-scope="scope">
{{ scope.row.unitFrequencyDev == null ? '--' : scope.row.unitFrequencyDev }}
</template>
</vxe-table-column>
<vxe-table-column field="phaseVoltage" show-overflow align="center" title="相电压有效值" min-width="130">
<template slot-scope="scope">
{{ scope.row.phaseVoltage == null ? '--' : scope.row.phaseVoltage }}
</template>
</vxe-table-column>
<vxe-table-column field="lineVoltage" show-overflow align="center" title="线电压有效值" min-width="130">
<template slot-scope="scope">
{{ scope.row.lineVoltage == null ? '--' : scope.row.lineVoltage }}
</template>
</vxe-table-column>
<vxe-table-column field="voltageDev" show-overflow align="center" title="电压上偏差" min-width="130">
<template slot-scope="scope">
{{ scope.row.voltageDev == null ? '--' : scope.row.voltageDev }}
</template>
</vxe-table-column>
<vxe-table-column field="uvoltageDev" show-overflow align="center" title="电压下偏差" min-width="130">
<template slot-scope="scope">
{{ scope.row.uvoltageDev == null ? '--' : scope.row.uvoltageDev }}
</template>
</vxe-table-column>
<vxe-table-column field="ieffective" show-overflow align="center" title="电流有效值" min-width="130">
<template slot-scope="scope">
{{ scope.row.ieffective == null ? '--' : scope.row.ieffective }}
</template>
</vxe-table-column>
<vxe-table-column field="singleP" show-overflow align="center" title="单相有功功率" min-width="140">
<template slot-scope="scope">
{{ scope.row.singleP == null ? '--' : scope.row.singleP }}
</template>
</vxe-table-column>
<vxe-table-column field="singleViewP" show-overflow align="center" title="单相视在功率" min-width="140">
<template slot-scope="scope">
{{ scope.row.singleViewP == null ? '--' : scope.row.singleViewP }}
</template>
</vxe-table-column>
<vxe-table-column field="singleNoP" show-overflow align="center" title="单相无功功率" min-width="140">
<template slot-scope="scope">
{{ scope.row.singleNoP == null ? '--' : scope.row.singleNoP }}
</template>
</vxe-table-column>
<vxe-table-column field="totalActiveP" show-overflow align="center" title="总有功功率" min-width="140">
<template slot-scope="scope">
{{ scope.row.totalActiveP == null ? '--' : scope.row.totalActiveP }}
</template>
</vxe-table-column>
<vxe-table-column field="totalViewP" show-overflow align="center" title="总视在功率" min-width="140">
<template slot-scope="scope">
{{ scope.row.totalViewP == null ? '--' : scope.row.totalViewP }}
</template>
</vxe-table-column>
<vxe-table-column field="totalNoP" show-overflow align="center" title="总无功功率" min-width="140">
<template slot-scope="scope">
{{ scope.row.totalNoP == null ? '--' : scope.row.totalNoP }}
</template>
</vxe-table-column>
<vxe-table-column
field="vfundEffective"
show-overflow
align="center"
title="相(线)电压基波有效值"
min-width="200"
>
<template slot-scope="scope">
{{ scope.row.vfundEffective == null ? '--' : scope.row.vfundEffective }}
</template>
</vxe-table-column>
<vxe-table-column field="ifund" show-overflow align="center" title="基波电流" min-width="140">
<template slot-scope="scope">
{{ scope.row.ifund == null ? '--' : scope.row.ifund }}
</template>
</vxe-table-column>
<vxe-table-column field="fundActiveP" show-overflow align="center" title="基波有功功率" min-width="140">
<template slot-scope="scope">
{{ scope.row.fundActiveP == null ? '--' : scope.row.fundActiveP }}
</template>
</vxe-table-column>
<vxe-table-column field="fundNoP" show-overflow align="center" title="基波无功功率" min-width="140">
<template slot-scope="scope">
{{ scope.row.fundNoP == null ? '--' : scope.row.fundNoP }}
</template>
</vxe-table-column>
<vxe-table-column field="vdistortion" show-overflow align="center" title="电压总谐波畸变率" min-width="200">
<template slot-scope="scope">
{{ scope.row.vdistortion == null ? '--' : scope.row.vdistortion }}
</template>
</vxe-table-column>
<vxe-table-column
field="vharmonicRate"
show-overflow
align="center"
title="2~50次谐波电压含有率"
min-width="200"
>
<template slot-scope="scope">
{{ scope.row.vharmonicRate == null ? '--' : scope.row.vharmonicRate }}
</template>
</vxe-table-column>
<vxe-table-column
field="iharmonic"
show-overflow
align="center"
title="2~50次谐波电流有效值"
min-width="200"
>
<template slot-scope="scope">
{{ scope.row.iharmonic == null ? '--' : scope.row.iharmonic }}
</template>
</vxe-table-column>
<vxe-table-column field="pharmonic" show-overflow align="center" title="2~50次谐波有功功率" min-width="200">
<template slot-scope="scope">
{{ scope.row.pharmonic == null ? '--' : scope.row.pharmonic }}
</template>
</vxe-table-column>
<vxe-table-column
field="iiharmonic"
show-overflow
align="center"
title="0.5~49.5次间谐波电流有效值"
min-width="260"
>
<template slot-scope="scope">
{{ scope.row.iiharmonic == null ? '--' : scope.row.iiharmonic }}
</template>
</vxe-table-column>
<vxe-table-column field="positiveV" show-overflow align="center" title="正序电压" min-width="100">
<template slot-scope="scope">
{{ scope.row.positiveV == null ? '--' : scope.row.positiveV }}
</template>
</vxe-table-column>
<vxe-table-column field="noPositiveV" show-overflow align="center" title="零序负序电压" min-width="140">
<template slot-scope="scope">
{{ scope.row.noPositiveV == null ? '--' : scope.row.noPositiveV }}
</template>
</vxe-table-column>
<vxe-table-column field="" show-overflow align="center" title="操作" fixed="right" min-width="120">
<template slot-scope="scope">
<el-button
v-if="scope.row.unitFrequency == null"
style="color: #000; !important"
disabled
type="primary"
size="mini"
icon="el-icon-edit"
>
修改
</el-button>
<el-button v-else type="primary" size="mini" @click="modify(scope.row)" icon="el-icon-edit">
修改
</el-button>
</template>
</vxe-table-column>
</vxe-table>
<!-- 新增/修改 -->
<el-dialog
:close-on-click-modal="false"
title="单位修改"
:visible.sync="unitModification"
width="50%"
height="90%"
>
<el-form :model="form" label-width="210px" class="form">
<el-row>
<el-col :span="12">
<el-form-item label="频率:">
<el-select v-model="form.unitFrequency" clearable placeholder="请选择频率">
<el-option
v-for="item in frequency"
:key="item.name"
:label="item.name"
:value="item.name"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="频率偏差:" class="top">
<el-select v-model="form.unitFrequencyDev" clearable placeholder="请选择频率偏差">
<el-option
v-for="item in frequency"
:key="item.name"
:label="item.name"
:value="item.name"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="相电压有效值:" class="top">
<el-select v-model="form.phaseVoltage" clearable placeholder="请选择相电压有效值">
<el-option
v-for="item in validValue"
:key="item.name"
:label="item.name"
:value="item.name"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="线电压有效值:" class="top">
<el-select v-model="form.lineVoltage" clearable placeholder="请选择线电压有效值">
<el-option
v-for="item in validValue"
:key="item.name"
:label="item.name"
:value="item.name"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="电压上偏差:" class="top">
<el-select v-model="form.voltageDev" clearable placeholder="请选择电压上偏差">
<el-option
v-for="item in deviation"
:key="item.name"
:label="item.name"
:value="item.name"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="电压下偏差:" class="top">
<el-select v-model="form.uvoltageDev" clearable placeholder="请选择电压下偏差">
<el-option
v-for="item in deviation"
:key="item.name"
:label="item.name"
:value="item.name"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="电流有效值:" class="top">
<el-select v-model="form.ieffective" clearable placeholder="请选择电流有效值">
<el-option
v-for="item in RMS"
:key="item.name"
:label="item.name"
:value="item.name"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="单相有功功率:" class="top">
<el-select v-model="form.singleP" clearable placeholder="请选择单相有功功率">
<el-option
v-for="item in meritorious"
:key="item.name"
:label="item.name"
:value="item.name"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="单相视在功率:" class="top">
<el-select v-model="form.singleViewP" clearable placeholder="请选择单相视在功率">
<el-option
v-for="item in apparent"
:key="item.name"
:label="item.name"
:value="item.name"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="单相无功功率:" class="top">
<el-select v-model="form.singleNoP" clearable placeholder="请选择单相无功功率">
<el-option
v-for="item in reactivePower"
:key="item.name"
:label="item.name"
:value="item.name"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="总有功功率:" class="top">
<el-select v-model="form.totalActiveP" clearable placeholder="请选择总有功功率">
<el-option
v-for="item in meritorious"
:key="item.name"
:label="item.name"
:value="item.name"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="总视在功率:" class="top">
<el-select v-model="form.totalViewP" clearable placeholder="请选择总视在功率">
<el-option
v-for="item in apparent"
:key="item.name"
:label="item.name"
:value="item.name"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="总无功功率:">
<el-select v-model="form.totalNoP" clearable placeholder="请选择总无功功率">
<el-option
v-for="item in reactivePower"
:key="item.name"
:label="item.name"
:value="item.name"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="相(线)电压基波有效值:" class="top">
<el-select v-model="form.vfundEffective" clearable placeholder="请选择相(线)电压基波有效值">
<el-option
v-for="item in validValue"
:key="item.name"
:label="item.name"
:value="item.name"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="基波电流:" class="top">
<el-select v-model="form.ifund" clearable placeholder="请选择基波电流">
<el-option
v-for="item in RMS"
:key="item.name"
:label="item.name"
:value="item.name"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="基波有功功率:" class="top">
<el-select v-model="form.fundActiveP" clearable placeholder="请选择基波有功功率">
<el-option
v-for="item in meritorious"
:key="item.name"
:label="item.name"
:value="item.name"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="基波无功功率:" class="top">
<el-select v-model="form.fundNoP" clearable placeholder="请选择基波无功功率">
<el-option
v-for="item in reactivePower"
:key="item.name"
:label="item.name"
:value="item.name"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="电压总谐波畸变率:" class="top">
<el-select v-model="form.vdistortion" clearable placeholder="请选择电压总谐波畸变率">
<el-option
v-for="item in deviation"
:key="item.name"
:label="item.name"
:value="item.name"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="2~50次谐波电压含有率:" class="top">
<el-select v-model="form.vharmonicRate" clearable placeholder="请选择2~50次谐波电压含有率">
<el-option
v-for="item in RMS"
:key="item.name"
:label="item.name"
:value="item.name"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="2~50次谐波有功功率:" class="top">
<el-select v-model="form.pharmonic" clearable placeholder="请选择2~50次谐波有功功率">
<el-option
v-for="item in meritorious"
:key="item.name"
:label="item.name"
:value="item.name"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="0.5~49.5次间谐波电流有效值:" class="top">
<el-select
v-model="form.iiharmonic"
clearable
placeholder="请选择0.5~49.5次间谐波电流有效值"
>
<el-option
v-for="item in RMS"
:key="item.name"
:label="item.name"
:value="item.name"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="正序电压:" class="top">
<el-select v-model="form.positiveV" clearable placeholder="请选择正序电压">
<el-option
v-for="item in validValue"
:key="item.name"
:label="item.name"
:value="item.name"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="零序负序电压:" class="top">
<el-select v-model="form.noPositiveV" clearable placeholder="请选择零序负序电压">
<el-option
v-for="item in validValue"
:key="item.name"
:label="item.name"
:value="item.name"
></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button type="" @click="unitModification = false">取 消</el-button>
<el-button v-if="modify" type="primary" @click="modifyDetermine">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import api from '@/api/device/device.js'
import { dicData } from '@/assets/commjs/dictypeData'
export default {
name: 'nuitmange',
data() {
return {
isLoading: false,
unitModification: false,
formData: {
status: '',
searchValue: ''
},
form: {
devIndex: '',
unitFrequency: '',
unitFrequencyDev: '',
phaseVoltage: '',
lineVoltage: '',
voltageDev: '',
uvoltageDev: '',
ieffective: '',
singleP: '',
singleViewP: '',
singleNoP: '',
totalActiveP: '',
totalViewP: '',
totalNoP: '',
vfundEffective: '',
ifund: '',
fundActiveP: '',
fundNoP: '',
vdistortion: '',
vharmonicRate: '',
iharmonic: '',
pharmonic: '',
iiharmonic: '',
positiveV: '',
noPositiveV: ''
},
expandID: [],
device: [],
frequency: [
{
id: 0,
name: 'Hz'
},
{
id: 2,
name: 'kHz'
}
],
validValue: [
{
id: 0,
name: 'kV'
},
{
id: 2,
name: 'V'
}
],
deviation: [
{
id: 0,
name: '%'
}
],
RMS: [
{
id: 0,
name: 'A'
}
],
meritorious: [
{
id: 0,
name: 'kW'
},
{
id: 2,
name: 'W'
}
],
apparent: [
{
id: 0,
name: 'kVA'
},
{
id: 2,
name: 'VA'
}
],
reactivePower: [
{
id: 0,
name: 'kVar'
},
{
id: 2,
name: 'Var'
}
],
equipmentStatusData: [],
vh: undefined,
tableData: []
}
},
computed: {
treeTable: function () {
var searchValue = this.formData.searchValue
if (searchValue) {
// 一般表格的查询
// return this.tableData.filter(function(dataNews){
// return Object.keys(dataNews).some(function(key){
// return String(dataNews[key]).toLowerCase().indexOf(search) > -1
// })
// }
//console.log(this.tableData);
let treeData = this.tableData
let handleTreeData = this.handleTreeData(treeData, searchValue)
this.setExpandRow(handleTreeData)
this.expandID = this.expandID.join(',').split(',')
// console.log(this.expandID);
return handleTreeData
}
return this.tableData
}
},
created() {
this.onsubmit()
},
mounted() {
this.device = dicData('Dev_Status', [])
this.setHeight()
window.addEventListener('resize', this.setHeight)
},
beforeDestroy() {
window.removeEventListener('resize', this.setHeight)
},
methods: {
setHeight() {
this.vh = window.sessionStorage.getItem('appheight') - 55
},
getDeviceColor(devFlag) {
const matchedDevice = this.device.filter(item => item.id === devFlag)[0].name
return {
color: matchedDevice === '在运' ? 'green' : matchedDevice === '停运' ? 'red' : ''
}
},
filterNode() {},
// 树形表格过滤
handleTreeData(treeData, searchValue) {
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
},
// 将过滤好的树形数据展开
setExpandRow(handleTreeData) {
if (handleTreeData.length) {
for (let i of handleTreeData) {
this.expandID.push(i.id)
if (i.children.length) {
this.setExpandRow(i.children)
}
}
}
},
//查询
onsubmit() {
this.isLoading = true
let data = {
devFlag: this.formData.status
}
api.nodeTree(data).then(res => {
this.tableData = res.data
let hierarchy = 2
this.expandByHierarchy(hierarchy)
this.isLoading = false
})
},
//修改
modify(val) {
//console.log(val);
this.unitModification = true
this.form = val
this.form.devIndex = val.id
},
//修改确定
modifyDetermine() {
this.$confirm('是否确认修改?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
api.saveDeviceUnit(this.form).then(res => {
if (res.code == 'A0000') {
this.$message({
message: res.message,
type: 'success'
})
}
this.unitModification = false
// this.onsubmit();
})
})
.catch(() => {
this.$message({
type: 'info',
message: '已取消修改'
})
})
},
getNodeByHierarchy(list, hierarchy, nodeName = 'children') {
// console.log(list, hierarchy);
if (list && list.length) {
if (hierarchy > 1) {
const allRow = []
list.forEach(item => {
allRow.push(item)
if (item[nodeName]) {
allRow.push(...this.getNodeByHierarchy(item[nodeName], hierarchy - 1, nodeName))
}
})
return allRow
} else if (hierarchy === 1) {
return list
} else return []
} else return []
},
expandByHierarchy(hierarchy) {
this.$refs.plan.setAllTreeExpand(false)
const rows = this.getNodeByHierarchy(this.tableData, hierarchy)
this.$refs.plan.setTreeExpand(rows, true)
}
}
}
</script>
<style lang="less" scoped>
@import url('../../../styles/comStyle.less');
.xiaoshou {
cursor: pointer;
}
</style>

456
src/views/device-boot/device/linepingfen.vue Normal file
View File

@@ -0,0 +1,456 @@
<template>
<div style="padding: 0.5% 0.5%">
<el-row>
<el-col :span="24">
<span style="font-weight: ; font-size: 14px">监测点等级:</span>
<el-select
v-model="lineGrade"
placeholder="请选择监测点等级"
style="width: 12%"
>
<el-option
v-for="item in lineGradeList"
:key="item.id"
:label="item.name"
:value="item.id"
>
</el-option>
</el-select>
<span style="font-weight: ; font-size: 14px">通讯状态:</span>
<el-select
v-model="comFlag"
placeholder="请选择通讯状态"
style="width: 12%"
>
<el-option
v-for="item in statusList"
:key="item.id"
:label="item.name"
:value="item.id"
>
</el-option>
</el-select>
<span style="font-weight: ; font-size: 14px">数据筛选:</span>
<el-input
v-model="searchValue"
placeholder="请选择筛选数据"
style="width: 10%"
:clearable="true"
></el-input>
<el-button type="primary" @click="query">查询</el-button>
<el-button type="primary" style="margin-left: 25px" @click="exportCsv"
>导出模板</el-button
>
<el-button type="primary" @click="exportData" style="float: right"
>导出</el-button
>
<el-button type="primary" @click="importData" style="margin-light: 30px"
>批量导入监测点评级</el-button
>
</el-col>
</el-row>
<el-row style="margin-top: 0.5%">
<el-table
stripe
v-loading="loading"
:data="tableData"
border
:height="height"
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="index"
type="index"
label="序号"
width="70"
></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"
prop="lineName"
label="监测点名称"
></el-table-column>
<el-table-column
align="center"
prop="comFlag"
label="通讯状态"
width="100"
>
<template slot-scope="scope">
<span v-if="scope.row.comFlag === 0" style="color: red">中断</span>
<span v-if="scope.row.comFlag === 1" style="color: green"
>正常</span
>
</template>
</el-table-column>
<el-table-column
align="center"
prop="runFlag"
label="运行状态"
width="100"
>
<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: #cc9900"
>热备用</span
>
</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="100"
>
</el-table-column>
<el-table-column align="center" label="操作" fixed="right" width="180">
<template slot-scope="scope">
<el-button type="primary" @click="deilallData(scope.row)"
>修改评级</el-button
>
</template>
</el-table-column>
</el-table>
<el-pagination
style="float: right"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pageData.currentPage"
:page-sizes="[20, 50, 100, 200]"
:page-size="pageData.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="pageData.total"
>
</el-pagination>
<el-dialog
:close-on-click-modal="false"
title="修改评级"
:visible.sync="dialogVisible"
width="18%"
:before-close="handleClose"
>
<span style="font-size: 14px">监测点评级:</span>
<el-select v-model="lineGradeChoose" placeholder="请选择监测点评级">
<el-option
v-for="item in lineGradeListNoOne"
:key="item.id"
:label="item.name"
:value="item.id"
>
</el-option>
</el-select>
<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 { tableheight } from "@/assets/commjs/common";
import lineMark from "@/api/device/lineMark.js";
import { dicData } from "../../../assets/commjs/dictypeData";
import node from "@/api/device/node";
export default {
components: {
// timepicker
},
data() {
return {
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: "",
//分页
pageData: {
currentPage: 1,
pageSize: 20,
total: 0,
},
};
},
created() {
this.getLineGradeList();
this.getList();
},
mounted() {
this.height = tableheight() + "px";
},
methods: {
handleSizeChange(val) {
this.pageData.pageSize = val;
this.getList();
},
handleCurrentChange(val) {
this.pageData.currentPage = val;
this.getList();
},
//修改监测点评级
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() {
let data = {
comFlag: this.comFlag,
lineGrade: this.lineGrade,
pageNum: this.pageData.currentPage,
pageSize: this.pageData.pageSize,
searchValue: this.searchValue,
};
this.loading = true;
lineMark.getList(data).then((response) => {
if (response.code === "A0000") {
var data = response.data;
this.tableData = data.records;
this.loading = false;
this.pageData.currentPage = data.current;
this.pageData.pageSize = data.size;
this.pageData.total = data.total;
}
});
},
/**
* 获取终端等级
*/
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>

701
src/views/device-boot/device/programmange.vue Normal file
View File

@@ -0,0 +1,701 @@
<template>
<!-- 使用 useVirtual 属性开启虚拟滚动 使用虚拟滚动时，必须要固定表格高度和行高 -->
<div class="pd10">
<el-form :inline="true" class="demo-form-inline">
<el-form-item label="终端型号">
<el-select v-model="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="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="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="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-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-upload2">导出</el-button>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-check">批量升级</el-button>
</el-form-item>
<el-form-item>
<el-button @click="$refs.plTreeTable.clearTreeExpand()"
>关闭所有</el-button
>
</el-form-item>
<el-form-item>
<el-input v-model="search" placeholder="输入关键字筛选" />
</el-form-item>
</el-form>
<!--我是pl-table大数据树形表格 必须指定 row-key 必须开启use-virtual-->
<!-- <el-input v-model="ssbsearch" @input="filert" clearable @clear="clear" size="" placeholder="根据省级,市区,变电站进线筛选" style="width:30%;margin-left:20px"></el-input> -->
<pl-table
v-if="true"
highlight-current-row
:header-cell-style="{
height: '25px',
top: '0px',
padding: '0px',
color: '#333333',
background: '#e5e7f2',
}"
header-cell-class-name="table_header"
v-loading="loading"
:row-style="{ height: '20px' }"
:cell-style="{ padding: '0px' }"
ref="plTreeTable"
:height="height"
:data="treeTable"
selectTrClass="selectTr"
:row-height="rowHeight"
row-key="id"
@selection-change="handleSelectionChange"
:expand-row-keys="expandRow"
:filter-node-method="filterNode"
bigDataCheckbox
:treeConfig="{ children: 'children', expandAll: true }"
: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 align="center"
: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"
:min-width="item.width"
/> -->
<pl-table-column
:selectable="selected"
type="selection"
width="55"
></pl-table-column>
<pl-table-column
prop="name"
label="电网拓扑"
:show-overflow-tooltip="true"
sortable
align="center"
:treeNode="true"
></pl-table-column>
<pl-table-column
prop="devType"
label="终端型号"
align="center"
:showOverflowTooltip="true"
:show-overflow-tooltip="true"
></pl-table-column>
<pl-table-column
prop="versionName"
label="版本号"
align="center"
></pl-table-column>
<pl-table-column
prop="protocol"
label="协议版本"
align="center"
></pl-table-column>
<pl-table-column
prop="versionDate"
label="版本日期"
align="center"
></pl-table-column>
<pl-table-column prop="runFlag" label="终端状态" align="center">
<template slot-scope="scope">
<el-tag
type="primary"
v-if="scope.row.runFlag === 0"
style="background-color: green; color: #fff"
>投运</el-tag
>
<el-tag
type="primary"
v-if="scope.row.runFlag === 1"
style="background-color: chocolate; color: #fff"
>热备用</el-tag
>
<el-tag
type="primary"
v-if="scope.row.runFlag === 2"
style="background-color: darkgrey; color: #fff"
>停运</el-tag
>
</template>
</pl-table-column>
<pl-table-column prop="comFlag" label="通讯状态" align="center">
<template slot-scope="scope">
<el-tag
type="primary"
v-if="scope.row.comFlag === 0"
style="background-color: brown; color: #fff"
>中断</el-tag
>
<el-tag
type="primary"
v-if="scope.row.comFlag === 1"
style="background-color: forestgreen; color: #fff"
>正常</el-tag
>
</template>
</pl-table-column>
<pl-table-column
prop="updateUser"
label="升级人员"
align="center"
></pl-table-column>
<pl-table-column
prop="updateTime"
label="最新升级时间"
align="center"
></pl-table-column>
<pl-table-column align="center" width="200" label="操作">
<template slot-scope="scope">
<el-button
v-if="scope.row.level == 4"
type="primary"
size="mini"
@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"
@click="queryview(scope.row)"
>日志查看</el-button
>
</template>
</pl-table-column>
</pl-table>
<!--升级日志查看-->
<el-dialog
:close-on-click-modal="false"
:title="title + '#终端升级日志查看'"
:visible.sync="dialogVisible"
width="70%"
:before-close="handleClose"
>
<el-table
stripe
:data="logtableData"
border
style="width: 100%"
highlight-current-row
header-cell-class-name="table_header"
>
<el-table-column
prop="date"
align="center"
label="序号"
width="88"
></el-table-column>
<el-table-column
prop="date"
align="center"
label="目标版本"
></el-table-column>
<el-table-column
prop="date"
align="center"
label="升级结果"
></el-table-column>
<el-table-column
prop="date"
align="center"
label="升级时间"
></el-table-column>
<el-table-column
prop="date"
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-weight: bold; font-size: 14px">{{ 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>
</template>
<script>
import { getheight } from "@/assets/commjs/common";
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 {
ssbsearch: "",
rowHeight: 20,
search: "",
expandRow: [],
columns: [
{
prop: "name",
label: "电网拓扑",
// width: 120,
treeNode: true,
showOverflowTooltip: true,
},
{
prop: "devType",
label: "终端型号",
// width: 100,
showOverflowTooltip: true,
},
{
prop: "versionName",
label: "版本号",
// width: 230,
showOverflowTooltip: true,
},
{
prop: "protocol",
label: "协议版本",
// width: 100,
showOverflowTooltip: true,
},
{
prop: "versionDate",
label: "版本日期",
// width: 100,
showOverflowTooltip: true,
},
{
prop: "runFlag",
label: "终端状态",
// width: 100,
showOverflowTooltip: true,
},
{
prop: "comFlag",
label: "通讯状态",
// width: 100,
showOverflowTooltip: true,
},
{
prop: "updateUser",
label: "升级人员",
// width: 100,
showOverflowTooltip: true,
},
{
prop: "updateTime",
label: "最新升级时间",
// width: 100,
showOverflowTooltip: true,
},
],
top: 0,
height: 800,
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.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() {},
methods: {
//获取所有终端型号
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) {
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;
},
// 将过滤好的树形数据展开
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;
},
//关闭弹窗
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.state,
runFlag: this.teriminalstatus,
devType: this.teriminal,
version: this.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.tableData = response.data
},
},
};
</script>
<style lang="less" scoped>
@import url("../../../styles/comStyle.less");
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>

529
src/views/device-boot/device/programmange2.vue Normal file
View File

@@ -0,0 +1,529 @@
<template>
<div style="padding: 0.5% 0.5%">
<el-row>
<el-col :span="24">
<!--终端型号-->
<span style="font-weight: ; font-size: 14px">终端型号:</span>
<el-select v-model="teriminal" placeholder="请选择终端型号">
<el-option
v-for="item in teriminaloption"
:key="item.id"
:label="item.name"
:value="item.id"
>
</el-option>
</el-select>
<!--终端状态-->
<span style="font-weight: ; font-size: 14px">终端状态:</span>
<el-select v-model="teriminalstatus" placeholder="请选择终端状态">
<el-option
v-for="item in teriminalstatusoption"
:key="item.id"
:label="item.name"
:value="item.id"
>
</el-option>
</el-select>
<!--通讯状态-->
<span style="font-weight: ; font-size: 14px">通讯状态:</span>
<el-select v-model="state" placeholder="请选择通讯状态">
<el-option
v-for="item in stateoption"
:key="item.id"
:label="item.name"
:value="item.id"
>
</el-option>
</el-select>
<!--程序版本-->
<span style="font-weight: ; font-size: 14px">程序版本:</span>
<el-select v-model="program" placeholder="请选择程序版本">
<el-option
v-for="item in programoption"
:key="item.id"
:label="item.name"
:value="item.id"
>
</el-option>
</el-select>
<el-button type="primary" icon="el-icon-search">查询</el-button>
<el-button type="primary" icon="el-icon-upload2">导出</el-button>
<el-button type="primary" icon="el-icon-check">批量升级</el-button>
<span style="font-weight: ; font-size: 14px">数据筛选:</span>
<el-input
v-model="search"
placeholder="输入关键字筛选"
@input="filert"
clearable
@clear="clear"
style="width: 10%"
/>
</el-col>
</el-row>
<el-row :gutter="10" style="margin-top: 0.5%">
<el-table
stripe
:data="tableData"
style="width: 100%; margin-bottom: 20px"
row-key="id"
border
v-loading="loading"
highlight-current-row
:load="load"
lazy
:expand-row-keys="expandRow"
@selection-change="handleSelectionChange"
:height="tableheight + 'px'"
:header-cell-style="{
height: '25px',
top: '0px',
padding: '0px',
}"
:row-style="{ height: '25px' }"
:cell-style="{ padding: '0px' }"
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
>
<el-table-column
:selectable="selected"
type="selection"
width="55"
></el-table-column>
<el-table-column
min-width="150"
prop="name"
label="电网拓扑"
:show-overflow-tooltip="true"
width="200"
></el-table-column>
<el-table-column
min-width="150"
prop="devType"
label="终端型号"
align="center"
></el-table-column>
<el-table-column
min-width="150"
prop="versionName"
label="版本号"
align="center"
></el-table-column>
<el-table-column
min-width="150"
prop="protocol"
label="协议版本"
align="center"
></el-table-column>
<el-table-column
min-width="150"
prop="versionDate"
label="版本日期"
:show-overflow-tooltip="true"
align="center"
></el-table-column>
<el-table-column
min-width="150"
prop="runFlag"
label="终端状态"
align="center"
>
<template slot-scope="scope">
<el-tag type="primary" v-if="scope.row.runFlag === 0">投运</el-tag>
<el-tag type="primary" v-if="scope.row.runFlag === 1"
>热备用</el-tag
>
<el-tag type="primary" v-if="scope.row.runFlag === 2">停运</el-tag>
</template>
</el-table-column>
<el-table-column
min-width="150"
prop="comFlag"
label="通讯状态"
align="center"
>
<template slot-scope="scope">
<el-tag type="primary" v-if="scope.row.comFlag === 0">中断</el-tag>
<el-tag type="primary" v-if="scope.row.comFlag === 1">正常</el-tag>
</template>
</el-table-column>
<el-table-column
min-width="150"
prop="updateUser"
label="升级人员"
align="center"
></el-table-column>
<el-table-column
min-width="150"
prop="updateTime"
label="最新升级时间"
:show-overflow-tooltip="true"
align="center"
></el-table-column>
<el-table-column
min-width="150"
width="260"
label="操作"
align="center"
fixed="right"
>
<template slot-scope="scope">
<el-button
v-if="scope.row.level == 4"
type="primary"
size="mini"
@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"
@click="queryview(scope.row)"
>日志查看</el-button
>
</template>
</el-table-column>
</el-table>
<!--升级日志查看-->
<el-dialog
:close-on-click-modal="false"
:title="title + '#终端升级日志查看'"
:visible.sync="dialogVisible"
width="70%"
:before-close="handleClose"
>
<el-table
stripe
:data="logtableData"
border
style="width: 100%"
highlight-current-row
>
<el-table-column
prop="date"
align="center"
label="序号"
width="88"
></el-table-column>
<el-table-column
prop="date"
align="center"
label="目标版本"
></el-table-column>
<el-table-column
prop="date"
align="center"
label="升级结果"
></el-table-column>
<el-table-column
prop="date"
align="center"
label="升级时间"
></el-table-column>
<el-table-column
prop="date"
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-weight: bold; font-size: 14px">{{ 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>
</el-row>
</div>
</template>
<script>
import { getheight } from "@/assets/commjs/common";
import version from "@/api/device/version.js";
import { dicData } from "@/assets/commjs/dictypeData";
export default {
data() {
return {
search: "",
loading: false,
dialogVisible: false,
prodialogVisible: false,
expandRow: [],
filertData: {},
treeData: {},
treeData2: {},
treeData3: {},
treeData4: {},
title: "",
protitle: "",
tableheight: "",
device: 1,
//终端型号
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: [],
//列表
tableData: [],
//弹窗列表
logtableData: [],
status: "",
//进度条对象
percentageoption: [
{
name: "1号测试终端",
status: "exception",
percentage: 20,
},
{
name: "2号测试终端",
status: "warning",
percentage: 50,
},
{
name: "3号测试终端",
status: "success",
percentage: 90,
},
],
};
},
created() {
this.getDevType();
},
mounted() {
this.device = window.devicePixelRatio;
if (this.device == 1) {
this.tableheight = getheight() * 2.18;
}
if (this.device == 1.25) {
this.tableheight = getheight() * 1.72;
}
if (this.device == 1.5) {
this.tableheight = getheight() * 1.93;
}
this.getList();
},
methods: {
selected(row, index) {
if (row.level !== 4) {
return false; //不可勾选
} else {
return true; //可勾选
}
},
//日志查看
queryview(row) {
this.title = row.name;
this.dialogVisible = true;
},
//关闭弹窗
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);
},
//获取所有终端型号
getDevType() {
var code = "Dev_Type";
this.teriminaloption = dicData(code, [], 1);
},
//查看主列表
getList() {
let a = new Date().getTime();
let data = {
comFlag: this.state,
runFlag: this.teriminalstatus,
devType: this.teriminal,
version: this.program,
};
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;
data.forEach((m) => {
delete m.children;
m.hasChildren = true;
});
this.tableData = data;
}
});
// this.tableData = response.data
},
load(tree, treeNode, resolve) {
//console.log(tree)
// console.log(treeNode)
if (tree.level == 1) {
var childrenData = [];
for (var i = 0; i < this.treeData.length; i++) {
if (tree.id == this.treeData[i].id) {
childrenData = this.treeData[i].children;
childrenData.forEach((n) => {
delete n.children;
n.hasChildren = true;
});
setTimeout(() => {
resolve(childrenData);
}, 30);
}
}
} else if (tree.level == 2) {
var childrenData = [];
for (var i = 0; i < this.treeData2.length; i++) {
for (var j = 0; j < this.treeData2[i].children.length; j++) {
if (tree.id == this.treeData2[i].children[j].id) {
childrenData = this.treeData2[i].children[j].children;
childrenData.forEach((n) => {
delete n.children;
n.hasChildren = true;
});
setTimeout(() => {
resolve(childrenData);
}, 30);
}
}
}
} else if (tree.level == 3) {
var childrenData = [];
for (var i = 0; i < this.treeData3.length; i++) {
for (var j = 0; j < this.treeData3[i].children.length; j++) {
for (
var k = 0;
k < this.treeData3[i].children[j].children.length;
k++
) {
if (tree.id == this.treeData3[i].children[j].children[k].id) {
childrenData =
this.treeData3[i].children[j].children[k].children;
childrenData.forEach((n) => {
delete n.children;
n.hasChildren = false;
});
setTimeout(() => {
resolve(childrenData);
}, 30);
}
}
}
}
}
},
//input输入事件
filert(value) {
this.tableData = [];
let handleTreeData = this.handleTreeData(this.filertData, value);
this.setExpandRow(handleTreeData);
this.expandRow = this.expandRow.join(",").split(",");
this.tableData = handleTreeData;
},
//清除
clear() {
this.getList();
},
// 树形表格过滤
handleTreeData(treeData, searchValue) {
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;
},
// 将过滤好的树形数据展开
setExpandRow(handleTreeData) {
if (handleTreeData.length) {
for (let i of handleTreeData) {
this.expandRow.push(i.id);
if (i.children.length) {
this.setExpandRow(i.children);
}
}
}
},
},
};
</script>
<style lang="scss" scoped>
::v-deep .el-table.el-table--enable-row-hover .el-table__body tr:hover > td {
//background: $themeColor;
background: rgb(105, 114, 122);
color: aliceblue;
}
</style> >

1533
src/views/device-boot/device/terminalaccount.vue Normal file
View File

File diff suppressed because it is too large Load Diff

263
src/views/device-boot/device/terminalbbwh.vue Normal file
View File

@@ -0,0 +1,263 @@
<template>
<div style="padding: 0.5% 0.5%">
<!--查询条件-->
<el-row>
<el-col :span="24">
<span style="font-weight: ; font-size: 14px">装置系列:</span>
<el-select v-model="teriminal" style="width: 250px; margin: 0 10px 10px" placeholder="请选择装置系列">
<el-option
v-for="item in teriminaloption"
:key="item.id"
:label="item.name"
:value="item.id"
></el-option>
</el-select>
<el-button type="primary" class="el-icon-plus" @click="addData">新 增</el-button>
<el-button type="primary" class="el-icon-search">查 询</el-button>
</el-col>
</el-row>
<!--列表-->
<el-row style="margin-top: 0.2%">
<el-col :span="24">
<el-table stripe :data="tableData" border :height="height" style="width: 100%">
<el-table-column align="center" prop="xh" label="序号" width="88"></el-table-column>
<el-table-column align="center" prop="zzxl" label="装置系列"></el-table-column>
<el-table-column align="center" prop="bbh" label="版本号"></el-table-column>
<el-table-column align="center" prop="bbxy" label="版本协议"></el-table-column>
<el-table-column align="center" prop="bbrq" label="版本日期"></el-table-column>
<el-table-column align="center" prop="xgry" label="修改人员"></el-table-column>
<el-table-column align="center" prop="xgsj" label="修改时间"></el-table-column>
<el-table-column align="center" prop="ms" label="描述"></el-table-column>
<el-table-column align="center" prop="bblx" label="版本类型"></el-table-column>
<el-table-column align="center" prop="zt" label="状态">
<template slot-scope="scope">
<el-radio-group v-model="scope.row.zt" size="small" @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 align="center" fixed="right" label="操作" width="200">
<template slot-scope="scope">
<el-button type="primary" size="small" @click="editData(scope.row)">修改</el-button>
<el-button type="primary" size="small" @click="DeleteData(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
style="float: right"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pageData.currentPage"
:page-sizes="[100, 200, 300, 400]"
:page-size="pageData.pagesize"
layout="total, sizes, prev, pager, next, jumper"
:total="pageData.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" :model="formData" label-width="80px">
<el-form-item label="版本号:">
<el-input v-model="formData.bbh"></el-input>
</el-form-item>
<el-form-item label="协议版本:">
<el-input v-model="formData.xybb"></el-input>
</el-form-item>
<el-form-item label="版本日期:">
<el-date-picker
type="date"
placeholder="选择日期"
v-model="formData.bbrq"
style="width: 100%"
></el-date-picker>
</el-form-item>
<el-form-item label="装置系列:">
<el-select v-model="formData.zzxl" placeholder="请选择活动区域" style="width: 100%">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item label="版本类型:">
<el-input v-model="formData.bblx"></el-input>
</el-form-item>
<el-form-item label="描述:">
<el-input type="textarea" v-model="formData.ms"></el-input>
</el-form-item>
<el-form-item label="升级文件:">
<el-upload
class="upload-demo"
action="https://jsonplaceholder.typicode.com/posts/"
:on-preview="handlePreview"
:on-remove="handleRemove"
:before-remove="beforeRemove"
multiple
:limit="3"
:on-exceed="handleExceed"
:file-list="fileList"
>
<el-button size="small" type="primary">点击上传</el-button>
<div slot="tip" class="el-upload__tip" style="color: red">
只能上传后缀为.bin的文件/无后缀文件，且不超过30M
</div>
</el-upload>
</el-form-item>
<el-form-item label="CRC校验:">
<el-input v-model="formData.crc"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">保存</el-button>
<el-button>取消</el-button>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<!-- <el-button @click="dialogVisible = false">取 消</el-button> -->
<el-button type="primary" @click="submintData">保 存</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import { tableheight } from '@/assets/commjs/common'
export default {
data() {
return {
teriminal: '',
height: '',
dialogVisible: false,
tableData: [
{
id: '0',
xh: 1,
zzxl: 'NPQS-572',
bbh: 'V2.31',
bbxy: 'V1.6.0',
bbrq: '2021-09-20',
xgry: '测试员1',
xgsj: '2022-04-26 11:17:28',
ms: '此为前置机自动录入',
bblx: '通用',
zt: 1
},
{
id: '1',
xh: 2,
zzxl: 'NPQS-573',
bbh: 'V2.31',
bbxy: 'V1.6.0',
bbrq: '2021-09-21',
xgry: '测试员1',
xgsj: '2022-04-26 11:17:38',
ms: '此为前置机自动录入',
bblx: '通用',
zt: 0
}
],
//表单
formData: {
bbh: '',
xybb: '',
bbrq: '',
zzxl: '',
bblx: '',
ms: '',
crc: ''
},
title: '',
//分页
pageData: {
currentPage: 1,
pagesize: 100,
total: 200
},
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'
}
]
}
},
beforeCreate() {},
created() {},
beforeMount() {},
mounted() {
this.height = tableheight() + 'px'
},
methods: {
//分页
handleSizeChange() {},
handleCurrentChange() {},
//切换
checkbox(row, val) {
alert('该行id:' + row.id + '========该行控制状态:' + row.zt)
},
//删除
DeleteData(row) {
this.$confirm('此操作将永久删除, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
this.$message({
type: 'success',
message: '删除成功!'
})
})
.catch(() => {
this.$message({
type: 'info',
message: '已取删除'
})
})
},
//关闭弹窗
handleClose() {
this.dialogVisible = false
},
//修改
editData(row) {
this.title = row.zzxl + '装置修改'
this.dialogVisible = true
},
//新增
addData() {
this.title = '新增装置'
this.dialogVisible = true
},
//保存提交
submintData() {
this.dialogVisible = false
},
handleRemove(file, fileList) {
//console.log(file, fileList);
},
handlePreview(file) {
//console.log(file);
},
handleExceed(files, fileList) {
this.$message.warning(
`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
files.length + fileList.length
} 个文件`
)
},
beforeRemove(file, fileList) {
return this.$confirm(`确定移除 ${file.name}？`)
}
}
}
</script>

207
src/views/device-boot/journalmange/eventlogs.vue Normal file
View File

@@ -0,0 +1,207 @@
<template>
<div style="padding: 0.2% 0.5%">
<el-row>
<el-col :span="8">
<span style="font-weight: ; font-size: 14px">推送状态:</span>
<el-select v-model="teriminal" placeholder="请选择推送状态">
<el-option
v-for="item in teriminaloption"
:key="item.id"
:label="item.name"
:value="item.id"
>
</el-option>
</el-select>
<span style="font-weight: ; font-size: 14px">筛选数据:</span>
<el-input
v-model="input"
style="width: 40%"
placeholder="请输入要筛选的字段"
></el-input>
</el-col>
<el-col :span="16">
<timepicker
@querfromdata="querfromdata"
:interval="interval"
:falg="falg"
></timepicker>
</el-col>
</el-row>
<el-row>
<el-table
stripe
stripe
:data="tableData"
border
style="width: 100%"
highlight-current-row
:height="height"
:header-cell-style="{
height: '25px',
top: '0px',
padding: '0px',
}"
:row-style="{ height: '25px' }"
:cell-style="{ padding: '0px' }"
>
<el-table-column
align="center"
prop="xh"
label="序号"
></el-table-column>
<el-table-column
align="center"
prop="zjsj"
label="暂降时间"
width="220"
></el-table-column>
<el-table-column
align="center"
prop="gdgs"
label="供电公司"
width="220"
></el-table-column>
<el-table-column
align="center"
prop="bdzmc"
label="变电站名称"
width="220"
></el-table-column>
<el-table-column
align="center"
prop="jcdmc"
label="监测点名称"
width="220"
></el-table-column>
<el-table-column
align="center"
prop="tzfz"
label="特征幅值(%)"
width="220"
></el-table-column>
<el-table-column
align="center"
prop="cssj"
label="持续时间(s)"
width="220"
></el-table-column>
<el-table-column
align="center"
prop="sctssj"
label="首次推送时间"
width="220"
></el-table-column>
<el-table-column
align="center"
prop="tscgsj"
label="推送成功时间"
width="220"
></el-table-column>
<el-table-column
align="center"
prop="tssbcs"
label="推送失败次数"
width="220"
></el-table-column>
<el-table-column
align="center"
prop="tsjg"
label="推送结果"
width="220"
></el-table-column>
<el-table-column
align="center"
prop="rgtssj"
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.tsjg !== '成功'"
type="primary"
size="mini"
>推送</el-button
>
<el-button
v-if="scope.row.tsjg == '成功'"
type="primary"
disabled
size="mini"
>已推送</el-button
>
</template>
</el-table-column>
</el-table>
<el-pagination
style="float: right"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pageData.currentPage"
:page-sizes="[100, 200, 300, 400]"
:page-size="pageData.pagesize"
layout="total, sizes, prev, pager, next, jumper"
:total="pageData.total"
>
</el-pagination>
</el-row>
</div>
</template>
<script>
import { tableheight } from "@/assets/commjs/common";
import timepicker from "../../components/TimePicker/index4";
export default {
components: {
timepicker,
},
data() {
return {
height: "",
tableData: [
{
xh: "1",
zjsj: "2022-05-13 12:27:35",
gdgs: "常熟市",
bdzmc: "常熟民丰电镀_660... ",
jcdmc: "118任南线",
tzfz: "88",
cssj: "0.427",
sctssj: "2022-05-13 12:42:05",
tscgsj: "2022-05-13 12:42:05",
tssbcs: "/",
tsjg: "成功",
rgtssj: "/",
},
{
xh: "2",
zjsj: "2022-05-13 12:27:35",
gdgs: "常熟市",
bdzmc: "常熟民丰电镀_660... ",
jcdmc: "118任南线",
tzfz: "89",
cssj: "0.78",
sctssj: "2022-05-13 12:42:05",
tscgsj: "2022-05-13 12:42:05",
tssbcs: "/",
tsjg: "不成功",
rgtssj: "/",
},
],
//分页
pageData: {
currentPage: 1,
pagesize: 100,
total: 200,
},
};
},
created() {},
mounted() {
this.height = tableheight() + "px";
},
methods: {
handleCurrentChange() {},
handleCurrentChange() {},
},
};
</script>

143
src/views/device-boot/journalmange/terminaljourna.vue Normal file
View File

@@ -0,0 +1,143 @@
<template>
<div style="padding: 0.5% 0.5%">
<el-row>
<el-col :span="8">
<span style="font-weight: ; font-size: 14px">日志类型:</span>
<el-select v-model="teriminal" placeholder="请选择日志类型">
<el-option
v-for="item in teriminaloption"
:key="item.id"
:label="item.name"
:value="item.id"
>
</el-option>
</el-select>
<span style="font-weight: ; font-size: 14px">筛选数据:</span>
<el-input
v-model="input"
style="width: 40%"
placeholder="请输入要筛选的字段"
></el-input>
</el-col>
<el-col :span="16">
<timepicker
@querfromdata="querfromdata"
:interval="interval"
:falg="falg"
></timepicker>
</el-col>
</el-row>
<el-row>
<el-table
stripe
stripe
:data="tableData"
border
style="width: 100%"
highlight-current-row
:height="height"
:header-cell-style="{
height: '25px',
top: '0px',
padding: '0px',
}"
:row-style="{ height: '25px' }"
:cell-style="{ padding: '0px' }"
>
<el-table-column
align="center"
prop="xh"
label="序号"
width="180"
></el-table-column>
<el-table-column
align="center"
prop="name"
label="名称"
width="220"
></el-table-column>
<el-table-column
align="center"
prop="rzlx"
label="日志类型"
width="180"
></el-table-column>
<el-table-column
align="center"
prop="xgry"
label="更改人员"
width="200"
></el-table-column>
<el-table-column
align="center"
prop="ggsj"
label="更改时间"
width="180"
></el-table-column>
<el-table-column
align="center"
prop="ms"
label="描述"
:show-overflow-tooltip="true"
></el-table-column>
</el-table>
<el-pagination
style="float: right"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pageData.currentPage"
:page-sizes="[100, 200, 300, 400]"
:page-size="pageData.pagesize"
layout="total, sizes, prev, pager, next, jumper"
:total="pageData.total"
>
</el-pagination>
</el-row>
</div>
</template>
<script>
import { tableheight } from "@/assets/commjs/common";
import timepicker from "../../components/TimePicker/index4";
export default {
components: {
timepicker,
},
data() {
return {
height: "",
tableData: [
{
xh: "1",
name: "pqs_882b2_4",
rzlx: "终端状态日志",
xgry: "njcnsers",
ggsj: "2022-05-09 14:03:26",
ms: "审核专用将常熟市常熟长春化工_6600106544下的pqs_882b2_4(00-B7-8D-00-AE-1C)由投运状态更改到...",
},
{
xh: "2",
name: "pqs_882b2_45",
rzlx: "终端状态日志",
xgry: "njcnsers",
ggsj: "2022-05-09 14:03:26",
ms: "审核专用将常熟市常熟长春化工_6600106544下的pqs_882b2_4(00-B7-8D-00-AE-1C)由投运状态更改到...",
},
],
//分页
pageData: {
currentPage: 1,
pagesize: 100,
total: 200,
},
};
},
created() {},
mounted() {
this.height = tableheight() + "px";
},
methods: {
handleCurrentChange() {},
handleCurrentChange() {},
},
};
</script>

0
src/views/device-boot/operationcenter/alarmcenter.vue Normal file
View File

640
src/views/device-boot/operationcenter/datawzxtj.vue Normal file
View File

@@ -0,0 +1,640 @@
<template>
<div class="pd10" v-loading="loading" element-loading-text="数据加载中" >
<el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item v-if="this.quyunames != undefined">
<el-switch
class="tableScopeSwitch"
:active-value="0"
:inactive-value="2"
@change="handleStatusChange"
:active-text="quyuname"
:inactive-text="quyunames"
inactive-color="#007878"
active-color="#666666"
v-model="this.formData.monitorFlag"
>
</el-switch>
</el-form-item>
<el-form-item>
<timepicker
:id="id"
:interval="interval"
:treenode="treenode"
:tablename="tablename"
:name="name"
ref="timepicker"
:path="path"
:dataTree="dataTree"
></timepicker>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="querfromdata" icon="el-icon-search" >查询</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>
<Area @click="handleNodeClick" ref="area"></Area>
</el-form-item>
<el-form-item label="统计类型:">
<el-select
v-model="formData.statisticalType"
@change="changeclasss"
placeholder="请选择统计类型"
>
<el-option
v-for="item in classificationData"
: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.lineGrade" placeholder="请选择终端等级">
<el-option
v-for="item in dejioption"
: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.scale"
multiple
collapse-tags
placeholder="请选择电压等级"
>
<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="请选择终端厂家"
>
<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="请选择干扰源类型"
>
<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>
</div>
<el-row :gutter="20">
<el-col :span="24">
<el-tabs
type="border-card"
v-model="activeName"
@tab-click="handleClick"
>
<el-tab-pane label="完整性列表" name="tab1">
<bdataintegrity
:classvalue="classt"
:tableData="tableData"
></bdataintegrity>
</el-tab-pane>
<el-tab-pane label="完整性图表" name="tab2">
<!-- <span
style="
font-weight: bold;
color: #333;
position: absolute;
right: 10px;
"
>
<span style="color: orange">注意:</span>&nbsp&nbsp&nbsp<span
style="color: #cc0000"
>数据完整性<60%</span
>
&nbsp&nbsp&nbsp<span style="color: #cc0000">红色</span
>&nbsp&nbsp&nbsp<span style="color: #ffcc00"
>60%≤数据完整性<90%</span
>
&nbsp&nbsp&nbsp<span style="color: #ffcc00">黄色</span
>&nbsp&nbsp&nbsp<span style="color: #00cc33">数据完整性≥90%</span>
&nbsp&nbsp&nbsp<span style="color: #00cc33">绿色</span></span
> -->
<dataintegrityechart
v-show=" activeName == 'tab2'"
:classvalue="classt"
:xdata="xdata"
:ydata="ydata"
:ydata1="ydata1"
ref="childs"
></dataintegrityechart>
</el-tab-pane>
</el-tabs>
</el-col>
</el-row>
</div>
</template>
<script>
import { getappheight, getheight } from "../../../assets/commjs/common";
import { dicData } from "../../../assets/commjs/dictypeData";
import api from "../../../api/integraliy/integraliy";
import apiIntegraliy from "../../../api/device/integraliy";
import timepicker from "../../components/TimePicker/index4";
import Area from "@/views/components/Area/Area.vue";
import treeselect from "../../components/elselect/treeselect";
import bdataintegrity from "../../components/bdataintegrity";
import dataintegrityechart from "../../components/dataintegrityechart";
import TreeSelect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
name: "integritystatistics",
components: {
TreeSelect,
treeselect,
timepicker,
bdataintegrity,
dataintegrityechart,
Area,
},
watch: {},
computed: {},
data() {
return {
quyuname: undefined,
quyunames: undefined,
formInline: {},
deji: "",
dejioption: [],
classt: "",
classname: "Power_Network",
tablename: "tab1",
eacjartflag: true,
loading: false,
view: false,
quyuname: undefined,
quyunames: undefined,
interval: 3,
treeData: [],
idArr: [],
defaultProps: {
children: "children",
label: "name",
},
deptName: "全国",
deptIndex: "",
name: "sjwzx",
path: "/harmonic-boot/harmonic/getIntegrityData",
asideheight: undefined,
id: 1,
title: "区域",
xdata: [],
ydata: [],
ydata1: [],
classvalue: 0,
activeName: "tab1",
treenode: "",
dataTree: "",
voltageleve1: "",
//电压等级
voltageleveloption: [],
terminal: "",
terminaloption: [],
interfere: "",
interfereoption: [],
classificationData: [],
dictypeData: undefined,
deptIndex: "",
formData: {
//后面需要修改
deptIndex: JSON.parse(window.sessionStorage.getItem("Info")).deptId,
lineGrade: "",
monitorFlag: 2,
powerFlag: 2,
loadType: [],
manufacturer: [],
searchBeginTime: "",
searchEndTime: "",
statisticalType: "",
scale: [],
},
periodBeginTime: "",
periodEndTime: "",
timehuanbiValue: [],
tableData: [],
ping: "",
time: "",
};
},
created() {
let data = window.sessionStorage.getItem("sysData");
let yudata = eval("(" + data + ")");
//debugger
let str = yudata.dataReport.split("，");
this.quyuname = str[0];
this.quyunames = str[1];
this.getAreaDept();
this.getclassificationData();
this.getVoltage();
this.getManufacturer();
this.getLoadType();
this.getLineGrade();
},
mounted() {
this.asideheight = getappheight();
let data = window.sessionStorage.getItem("sysData");
let yudata = eval("(" + data + ")");
//debugger
let str = yudata.dataReport.split("，");
this.quyuname = str[0];
this.quyunames = str[1];
this.querfromdata()
},
methods: {
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";
}
},
//切换统计类型
changeclasss(val) {
this.classname = val.code;
//console.log(val);
},
//时间格式转化
dateFormat(dateData1, dateData2) {
var timearr = [];
var date = new Date(dateData1);
var y = date.getFullYear();
var m = date.getMonth() + 1;
m = m < 10 ? "0" + m : m;
var d = date.getDate();
d = d < 10 ? "0" + d : d;
var h = date.getHours();
h = h < 10 ? "0" + h : h;
var f = date.getMinutes();
f = f < 10 ? "0" + f : f;
var s = date.getSeconds();
s = s < 10 ? "0" + s : s;
this.formData.searchBeginTime = y + "-" + m + "-" + d;
timearr.push(this.formData.startTime);
var date = new Date(dateData2);
var y = date.getFullYear();
var m = date.getMonth() + 1;
m = m < 10 ? "0" + m : m;
var d = date.getDate();
d = d < 10 ? "0" + d : d;
var h = date.getHours();
h = h < 10 ? "0" + h : h;
var f = date.getMinutes();
f = f < 10 ? "0" + f : f;
var s = date.getSeconds();
s = s < 10 ? "0" + s : s;
this.formData.searchEndTime = y + "-" + m + "-" + d;
timearr.push(this.formData.endTime);
return timearr;
},
//监测点等级
getLineGrade() {
let code = "Dev_Level";
this.dejioption = dicData(code, []);
this.formData.lineGrade = this.dejioption[0].id;
},
//部门绑定区域触发区域树节点
handleNodeClick(data, node) {
this.formData.deptIndex = data.id;
this.deptName = data.name;
this.deptId = data.id;
this.formData.deptIndex = data.id;
},
formatDate(date) {
// console.log(date);
// date = new Date();
date = new Date(Date.parse(date.replace(/-/g, "/"))); //转换成Data();
// console.log(date);
var y = date.getFullYear();
//console.log(y);
var m = date.getMonth() + 1;
m = m < 10 ? "0" + m : m;
var d = date.getDate();
d = d < 10 ? "0" + d : d;
return y + "-" + m + "-" + d;
},
//2次组件触发事件
querfromdata() {
this.loading = true;
// alert(data)
// var a = new Date('2020-01-01 00:00:00');
// var b = new Date('2020-04-01 00:00:00');
// console.log(a)
// var d = [new Date(a-(b-a)-1).toLocaleDateString(),new Date(b-(b-a)-1).toLocaleDateString()]
//console.log(this.formatDate(d[0]),this.formatDate(d[1]))
this.classt = this.classname;
this.timeValue = this.$refs.timepicker.timeValue;
this.timehuanbiValue = this.$refs.timepicker.timehbValue;
this.periodBeginTime = this.timehuanbiValue[0];
this.periodEndTime = this.timehuanbiValue[1];
this.ping = this.periodBeginTime + "至" + this.periodEndTime;
this.dateFormat(this.timeValue[0], this.timeValue[1]);
this.time =
this.formData.searchBeginTime + "至" + this.formData.searchEndTime;
apiIntegraliy.getLineIntegrityData(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();
});
});
});
this.tableData = res.data;
}
}
});
var data = {
deptIndex: this.formData.deptIndex,
loadType: this.formData.loadType,
monitorFlag: this.formData.monitorFlag,
manufacturer: this.formData.manufacturer,
searchBeginTime: this.formData.searchBeginTime,
searchEndTime: this.formData.searchEndTime,
statisticalType: this.formData.statisticalType,
scale: this.formData.scale,
lineGrade: this.formData.lineGrade,
powerFlag: 2,
periodBeginTime: this.periodBeginTime,
periodEndTime: this.periodEndTime,
};
this.ydata = [];
this.ydata1 = [];
api.IntegrityIcon(data).then((res) => {
this.eacjartflag = true;
this.xdata = [];
this.ydata = [];
if (res.code == "A0000") {
let data = res.data;
var single = [];
for (var i = 0; i < data.length; i++) {
this.xdata.push(data[i].type);
if (data[i].single == 3.14159) {
data[i].single = 5;
}
single.push(data[i].single.toFixed(2));
}
this.ydata = single;
this.$nextTick(() => {
this.$refs.childs.dataintegrityecharts();
});
}
});
setTimeout(() => {
this.loading = false;
}, 1500);
},
//标签切换
handleClick(tab, event) {
this.tablename = tab.name;
this.activeName = tab.name;
if (tab.name == "tab1") {
this.eacjartflag = false;
this.$nextTick(() => {
this.$refs.childs.dataintegrityecharts();
});
} else if (tab.name == "tab2") {
// console.log(tab.name);
this.$nextTick(() => {
this.$refs.childs.dataintegrityecharts();
});
}
},
//开关触发
handleStatusChange(val) {
this.formData.monitorFlag = val;
//this.fiveTreeData()
},
//获取区域
getAreaDept() {
api.getAreaDept().then((res) => {
if (res.code == "A0000") {
var data = res.data;
data.forEach((element) => {
this.idArr.push(element.id);
});
this.treeData = data;
}
});
},
//字典获取数据电压等级
getVoltage() {
var code = "Dev_Voltage_Stand";
this.voltageleveloption = dicData(code, []);
this.formData.scale = this.voltageleveloption;
},
//字典获取数据终端厂家
getManufacturer() {
var code = "Dev_Manufacturers";
this.terminaloption = dicData(code, []);
this.formData.manufacturer = this.terminaloption;
},
//字典获取数据干扰源类型
getLoadType() {
var code = "Interference_Source";
this.interfereoption = dicData(code, []);
this.formData.loadType = this.interfereoption;
},
//获取统计类型
getclassificationData() {
var code = "Statistical_Type";
this.classificationData = dicData(code, [
"Report_Type",
"Voltage_Level",
"Load_Type",
]);
this.formData.statisticalType = this.classificationData[0];
},
//获取数据完整性列表数据
getQueryData() {
let data = {
area: "0",
comparison: 0,
interference: [],
manufacturer: [],
searchBeginTime: "",
searchEndTime: "",
statisticalType: 0,
voltageLevel: [],
};
},
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);
});
},
//导出文件
exportExcel() {},
rest() {
this.deptName = "全国";
this.formData = {
deptIndex: "",
monitorFlag: 2,
loadType: [],
manufacturer: [],
searchBeginTime: "",
searchEndTime: "",
statisticalType: "",
scale: [],
};
},
},
};
</script>
<style lang="less" scoped>
@import url("../../../styles/comStyle.less");
.main {
overflow: hidden;
}
::-webkit-scrollbar {
width: 5px;
height: 0px;
}
.container {
/* margin: auto; */
top: 0px;
right: 0;
width: 50%;
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;
}
</style>

912
src/views/device-boot/operationcenter/linecounttj.vue Normal file
View File

@@ -0,0 +1,912 @@
<template>
<div style="padding: 0.5% 0.5%">
<!--查询条件-->
<el-row>
<el-row>
<el-col :span="24">
<el-form :inline="true" :model="formData" class="demo-form-inline">
<el-form-item>
<el-switch
class="tableScopeSwitch"
:active-value="2"
:inactive-value="1"
@change="handleStatusChange"
:active-text="quyuname"
inactive-text="超高压"
inactive-color="#666666"
v-model="formData.monitorFlag"
>
</el-switch>
</el-form-item>
<el-form-item label="类型:">
<el-select
v-model="formData.statisticalType"
@change="changeclasss"
placeholder="请选择统计类型"
style="width: 60%"
>
<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
ref="select1"
v-model="deptName"
placeholder="请选择所属部门区域"
style="width: 50%"
>
<el-option :value="deptIndex" style="height: auto">
<el-tree
ref="tree"
:data="treeData"
node-key="id"
accordion
:default-expanded-keys="idArr"
:props="defaultProps"
@node-click="handleNodeClick"
>
<span class="span-ellipsis" slot-scope="{ node, data }">
<span :title="data.name">{{ data.name }}</span>
</span>
</el-tree>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="电压:" >
<el-select
v-model="formData.scale"
multiple
collapse-tags
placeholder="请选择电压等级"
style="width: 75%"
>
<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: 75%"
>
<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: 85%"
>
<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>
</el-col>
<!-- <el-button type="primary" class="el-icon-setting" @click="rest">重置</el-button> -->
<el-col :span="24" :offset="15" >
<timepicker
:id="id"
@querfromdata="querfromdata"
:interval="interval"
:treenode="treenode"
:tablename="tablename"
:name="name"
:path="path"
:dataTree="dataTree"
></timepicker>
</el-col>
</el-row>
<!-- <el-button type="primary" class="el-icon-search">查 询</el-button> -->
</el-row>
<!--内容区-->
<el-row style="margin-top: 0.5%">
<el-col :span="24">
<el-table
stripe
stripe
:data="tableData"
border
:height="height"
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="xh"
label="序号"
></el-table-column>
<el-table-column
align="center"
prop="tjfs"
label="统计方式"
></el-table-column>
<el-table-column
align="center"
prop="xzs"
label="新增数"
></el-table-column>
<el-table-column
align="center"
prop="zs"
label="总数"
></el-table-column>
<el-table-column align="center" label="投运">
<el-table-column align="center" prop="zc" label="通讯正常">
<template slot-scope="scope">
<span style="color: green">{{ scope.row.zc }}</span>
</template>
</el-table-column>
<el-table-column align="center" prop="zd" label="通讯中断">
<template slot-scope="scope">
<span style="color: red">{{ scope.row.zd }}</span>
</template>
</el-table-column>
</el-table-column>
<el-table-column
align="center"
prop="ty"
label="停运"
></el-table-column>
<el-table-column align="center" prop="rby" label="热备用">
<template slot-scope="scope">
<span style="color: #996600">{{ scope.row.rby }}</span>
</template>
</el-table-column>
</el-table>
</el-col>
<el-row>
<el-col :span="8">
<div
id="linezs"
:style="'width:100%;height:' + height + ';zoom:' + device"
></div>
</el-col>
<el-col :span="8">
<div
id="linexzs"
:style="'width:100%;height:' + height + ';zoom:' + device"
></div>
</el-col>
<el-col :span="8">
<div
id="linestatus"
:style="'width:100%;height:' + height + ';zoom:' + device"
></div>
</el-col>
</el-row>
</el-row>
</div>
</template>
<script>
import { getheight, tableheight } from "@/assets/commjs/common";
import timepicker from "../../components/TimePicker/index4";
//import '../../../../node_modules/echarts/map/js/china.js'
import operation from "@/api/device/operation";
import { dicData } from "@/assets/commjs/dictypeData";
import TreeSelect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
components: {
timepicker,
},
data() {
return {
interval: 3,
device: 1,
height: "",
statisticalTypeList: [],
classt: "Power_Network",
interval: 3,
treeData: [],
idArr: [],
defaultProps: {
children: "children",
label: "name",
},
deptName: "全国",
deptIndex: "",
//电压等级
voltageleveloption: [],
terminal: "",
terminaloption: [],
interfere: "",
interfereoption: [],
classificationData: [],
deptList: [],
loadType: [],
loadTypeList: [],
manufacturer: [],
manufacturerList: [],
scale: [],
scaleList: [],
formData: {
//后面需要修改
deptIndex: "",
monitorFlag: 2,
powerFlag: 2,
loadType: null,
manufacturer: null,
searchBeginTime: "",
searchEndTime: "",
statisticalType: "",
scale: null,
},
defaultProps: {
children: "children",
label: "name",
},
tableData: [
{
xh: "1",
tjfs: "江苏省",
xzs: 200,
zs: 500,
zc: 200,
zd: 100,
ty: 100,
rby: 100,
},
{
xh: "2",
tjfs: "安徽省",
xzs: 200,
zs: 500,
zc: 200,
zd: 100,
ty: 100,
rby: 100,
},
{
xh: "3",
tjfs: "浙江省",
xzs: 200,
zs: 500,
zc: 200,
zd: 100,
ty: 100,
rby: 100,
},
{
xh: "4",
tjfs: "江西省",
xzs: 200,
zs: 500,
zc: 200,
zd: 100,
ty: 100,
rby: 100,
},
{
xh: "5",
tjfs: "海南省",
xzs: 200,
zs: 500,
zc: 200,
zd: 100,
ty: 100,
rby: 100,
},
{
xh: "6",
tjfs: "广东省",
xzs: 200,
zs: 500,
zc: 200,
zd: 100,
ty: 100,
rby: 100,
},
],
dataList: [
{ name: "南海诸岛", value: 54 },
{ name: "北京", value: 54 },
{ name: "天津", value: 53 },
{ name: "上海", value: 40 },
{ name: "重庆", value: 75 },
{ name: "河北", value: 63 },
{ name: "河南", value: 83 },
{ name: "云南", value: 41 },
{ name: "辽宁", value: 0 },
{ name: "黑龙江", value: 75 },
{ name: "湖南", value: 69 },
{ name: "安徽", value: 60 },
{ name: "山东", value: 39 },
{ name: "新疆", value: 45 },
{ name: "江苏", value: 31 },
{ name: "浙江", value: 90 },
{ name: "江西", value: 36 },
{ name: "湖北", value: 38 },
{ name: "广西", value: 33 },
{ name: "甘肃", value: 0 },
{ name: "山西", value: 39 },
{ name: "内蒙古", value: 37 },
{ name: "陕西", value: 62 },
{ name: "吉林", value: 4 },
{ name: "福建", value: 18 },
{ name: "贵州", value: 35 },
{ name: "广东", value: 98 },
{ name: "青海", value: 45 },
{ name: "西藏", value: 50 },
{ name: "四川", value: 54 },
{ name: "宁夏", value: 34 },
{ name: "海南", value: 22 },
{ name: "台湾", value: 56 },
{ name: "香港", value: 53 },
{ name: "澳门", value: 52 },
],
};
},
created() {},
mounted() {
let data = window.sessionStorage.getItem("sysData");
let yudata = eval("(" + data + ")");
let str = yudata.dataReport.split("，");
this.quyuname = str[1];
var info = window.sessionStorage.getItem("Info");
info = eval("(" + info + ")");
this.formData.deptIndex = info.deptId;
this.getAreaDept();
this.getclassificationData();
this.getVoltage();
this.getManufacturer();
this.getLoadType();
this.$nextTick(() => {
this.initData();
this.getList();
});
this.device = window.devicePixelRatio;
if (this.device == 1) {
this.height = tableheight() / 2 + "px";
} else if (this.device == 1.25) {
this.height = (tableheight() - 70) / 2 + "px";
}
},
methods: {
//开关触发
handleStatusChange(val) {
this.formData.monitorFlag = val;
//this.fiveTreeData()
},
//获取区域
getAreaDept() {
api.getAreaDept().then((res) => {
if (res.code == "A0000") {
var data = res.data;
data.forEach((element) => {
this.idArr.push(element.id);
});
this.treeData = data;
}
});
},
//字典获取数据电压等级
getVoltage() {
// debugger
var code = "Dev_Voltage";
this.voltageleveloption = dicData(code, []);
this.formData.scale = this.voltageleveloption;
},
//字典获取数据终端厂家
getManufacturer() {
//debugger
var code = "Dev_Manufacturers";
this.terminaloption = dicData(code, []);
this.formData.manufacturer = this.terminaloption;
},
//字典获取数据干扰源类型
getLoadType() {
//debugger
var code = "Interference_Source";
this.interfereoption = dicData(code, []);
this.formData.loadType = this.interfereoption;
},
//获取统计类型
getclassificationData() {
//debugger
var code = "Statistical_Type";
this.classificationData = dicData(code, ["Report_Type"]);
this.formData.statisticalType = this.classificationData[0];
},
//切换统计类型
changeclasss(val) {
this.classt = val.code;
// console.log(val);
},
//部门绑定区域触发区域树节点
handleNodeClick(data, node) {
// console.log(node, data);
this.deptName = data.name;
this.deptId = data.id;
this.formData.deptIndex = data.id;
},
initData() {
const echarts = require("echarts");
let myChartes = echarts.init(document.getElementById("linezs"));
let myChartes2 = echarts.init(document.getElementById("linexzs"));
let myChartes3 = echarts.init(document.getElementById("linestatus"));
var white = "#000";
var option = {
//backgroundColor: '#151F2A',
title: {
text: "区域监测点总数",
textStyle: {
align: "center",
color: "#000",
fontSize: 20,
},
top: "3%",
left: "40%",
},
grid: {
containLabel: true,
left: 20,
right: 20,
bottom: 10,
top: 40,
},
dataZoom: [
{
type: "inside",
height: "5%",
start: 0,
end: 100,
},
{
start: 0,
end: 100,
},
],
xAxis: {
axisLabel: {
color: "#000",
fontSize: 14,
interval: 0,
},
axisTick: {
show: false,
},
splitLine: {
show: false,
},
axisLine: {
show: true,
},
data: [
"安徽省",
"江苏省",
"浙江省",
"海南省",
"广东省",
"福建省",
"河北省",
],
type: "category",
},
yAxis: {
axisLabel: {
color: "#000",
fontSize: 14,
},
axisTick: {
show: false,
},
splitLine: {
show: false,
},
axisLine: {
show: true,
},
name: "单位(个)",
},
series: [
{
data: [353, 66, 112, 270, 315, 418, 1500],
type: "bar",
barMaxWidth: "auto",
barWidth: 30,
itemStyle: {
color: "#3399CC",
},
label: {
show: true,
position: "top",
// distance: 10,
// color: '#fff'
},
},
],
};
var option2 = {
//backgroundColor: '#151F2A',
title: {
text: "区域监测点新增数",
textStyle: {
align: "center",
color: "#000",
fontSize: 20,
},
top: "3%",
left: "40%",
},
grid: {
containLabel: true,
left: 20,
right: 20,
bottom: 10,
top: 40,
},
dataZoom: [
{
type: "inside",
height: "5%",
start: 0,
end: 100,
},
{
start: 0,
end: 100,
},
],
xAxis: {
axisLabel: {
color: "#000",
fontSize: 14,
interval: 0,
},
axisTick: {
show: false,
},
splitLine: {
show: false,
},
axisLine: {
show: true,
},
data: [
"安徽省",
"江苏省",
"浙江省",
"海南省",
"广东省",
"福建省",
"河北省",
],
type: "category",
},
yAxis: {
axisLabel: {
color: "#000",
fontSize: 14,
},
axisTick: {
show: false,
},
splitLine: {
show: false,
},
axisLine: {
show: true,
},
name: "单位(个)",
},
series: [
{
data: [53, 66, 12, 70, 55, 118, 200],
type: "bar",
barMaxWidth: "auto",
barWidth: 30,
itemStyle: {
color: "#009966",
},
label: {
show: true,
position: "top",
// distance: 10,
// color: '#fff'
},
},
],
};
var option3 = {
//backgroundColor: '#151F2A',
title: {
text: "区域监测点状态",
textStyle: {
align: "center",
color: "#000",
fontSize: 20,
},
top: "3%",
left: "40%",
},
grid: {
containLabel: true,
left: "5%",
right: "5%",
bottom: "3%",
top: "10%",
},
legend: {
top: "9%",
left: "14%",
data: ["投运(通讯正常)", "投运(通讯中断)", "停运", "热备用"],
},
dataZoom: [
{
type: "inside",
height: "5%",
start: 0,
end: 100,
},
{
start: 0,
end: 100,
},
],
xAxis: {
axisLabel: {
color: "#000",
fontSize: 14,
interval: 0,
},
axisTick: {
show: false,
},
splitLine: {
show: false,
},
axisLine: {
show: true,
},
data: [
"安徽省",
"江苏省",
"浙江省",
"海南省",
"广东省",
"福建省",
"河北省",
],
type: "category",
},
yAxis: {
axisLabel: {
color: "#000",
fontSize: 14,
},
axisTick: {
show: false,
},
splitLine: {
show: false,
},
axisLine: {
show: true,
},
name: "单位(个)",
},
series: [
{
name: "投运(通讯正常)",
data: [153, 16, 52, 170, 215, 218, 100],
type: "bar",
stack: "total",
barMaxWidth: "auto",
barWidth: 15,
itemStyle: {
color: "#009966",
},
label: {
show: true,
// position: 'top',
// distance: 10,
// color: '#fff'
},
},
{
name: "投运(通讯中断)",
data: [53, 12, 162, 230, 125, 258, 230],
type: "bar",
barMaxWidth: "auto",
stack: "total",
barWidth: 15,
itemStyle: {
color: "#FF3333",
},
label: {
show: true,
// position: 'top',
// distance: 10,
// color: '#fff'
},
},
{
name: "停运",
data: [253, 66, 132, 230, 315, 318, 200],
type: "bar",
barMaxWidth: "auto",
barWidth: 15,
itemStyle: {
color: "#ccc",
},
label: {
show: true,
// position: 'top',
// distance: 10,
// color: '#fff'
},
},
{
name: "热备用",
data: [353, 66, 112, 270, 115, 418, 100],
type: "bar",
barMaxWidth: "auto",
barWidth: 15,
itemStyle: {
color: "#996600",
},
label: {
show: true,
// position: 'top',
// distance: 10,
// color: '#fff'
},
},
],
};
myChartes.setOption(option)
window.echartsArr.push(myChartes);
myChartes2.setOption(option2)
window.echartsArr.push(myChartes2);
myChartes3.setOption(option3)
window.echartsArr.push(myChartes3);
window.addEventListener("resize", function () {
myChartes.resize();
myChartes2.resize();
myChartes3.resize();
});
},
//查询
querfromdata(data) {
this.searchBeginTime = data[0];
this.searchEndTime = data[1];
},
//获取主列表
getList() {
let info = window.sessionStorage.getItem("Info");
let dept = JSON.parse(info);
if (this.scale !== "" && this.scale !== null) {
}
let data = {
searchBeginTime: this.searchBeginTime,
searchEndTime: this.searchEndTime,
deptIndex: dept.deptId,
scale: [this.scale],
manufacturer: [this.manufacturer],
loadType: [this.loadType],
};
operation.getLineStatisticList(data).then((response) => {
if (response.code === "A0000") {
this.dataList = response.data;
}
});
},
//字典获取数据电压等级
getVoltage() {
var code = "Dev_Voltage";
this.scaleList = dicData(code, []);
this.scale = this.scaleList;
},
//字典获取数据终端厂家
getManufacturer() {
var code = "Dev_Manufacturers";
this.manufacturerList = dicData(code, []);
this.manufacturer = this.manufacturerList;
},
//字典获取数据干扰源类型
getLoadType() {
var code = "Interference_Source";
this.loadTypeList = dicData(code, []);
this.loadType = this.loadTypeList;
},
//获取统计类型
getclassificationData() {
var code = "Statistical_Type";
this.statisticalTypeList = dicData(code, ["Report_Type"]);
this.statisticalType = this.statisticalTypeList[0];
},
//获取区域
getAreaDept() {
operation.loginDeptTree().then((res) => {
if (res.code === "A0000") {
res.data.forEach((element) => {
this.idArr.push(element.id);
});
this.deptList = res.data;
}
});
},
//部门绑定区域触发区域树节点
handleNodeClick(data, node) {
this.deptName = data.name;
this.deptId = data.id;
this.deptIndex = data.id;
},
},
};
</script>
<style scoped>
</style>

171
src/views/device-boot/operationcenter/linemoitorfb.vue Normal file
View File

@@ -0,0 +1,171 @@
<template>
<div style="padding: 0.5% 0.5%">
<!--内容区-->
<el-row style="margin-top: 0.5%">
<el-col :span="12">
<div
id="eventmap"
:style="'width:100%;height:' + eheight + ';zoom:' + device"
></div>
</el-col>
<el-col :span="12">
<el-table
stripe
stripe
:data="tableData"
border
:height="height"
style="width: 100%"
>
<el-table-column
align="center"
prop="name"
label="区域"
></el-table-column>
<el-table-column
align="center"
prop="value"
label="监测点个数"
></el-table-column>
</el-table>
</el-col>
</el-row>
</div>
</template>
<script>
import { getheight, tableheight } from "@/assets/commjs/common";
//import '../../../../node_modules/echarts/map/js/china.js'
import operation from "@/api/device/operation";
import { dicData } from "@/assets/commjs/dictypeData";
export default {
data() {
return {
height: "",
eheight: "",
statisticalType: null,
device: 1,
tableData: [],
dataList: [],
};
},
created() {
this.getClassificationData();
// console.log();
},
mounted() {
this.device = window.devicePixelRatio;
this.height = tableheight() + "px";
if (this.device == 1) {
this.eheight = this.height;
} else if (this.device == 1.25) {
this.eheight = tableheight() - 150 + "px";
}
this.$nextTick(() => {
this.initData();
});
},
methods: {
initData() {
let that = this;
let info = window.sessionStorage.getItem("Info");
info = eval("(" + info + ")");
let data = {
statisticalType: this.statisticalType,
deptIndex: info.deptId,
};
operation.getList(data).then((response) => {
if (response.code === "A0000") {
that.dataList = response.data;
that.tableData = response.data;
const echarts = require("echarts");
let myChartes = echarts.init(document.getElementById("eventmap"));
let white = "#000";
let option = {
title: {
text: this.title,
x: "center",
},
tooltip: {
trigger: "item",
formatter: function (e, t, n) {
let tips = "";
if (e.value === 0) {
tips =
"<font style='color:" + white + "'>暂无数据</font><br/>";
} else {
tips +=
"<font style='color:" +
white +
"'>" +
e.name +
"省</font><br/>监测点数量" +
"<font style='color:" +
white +
"'>：" +
e.value +
"个</font><br/>";
}
return tips;
},
},
visualMap: {
min: 0,
max: 1000,
left: 26,
bottom: 40,
showLabel: !0,
text: ["高", "低"],
show: !0,
},
geo: {
map: "china",
roam: true,
zoom: 1.23,
top: 120,
label: {
normal: {
show: true,
fontSize: "14",
color: "rgba(0,0,0,0.7)",
},
},
itemStyle: {
normal: {
//shadowBlur: 50,
//shadowColor: 'rgba(0, 0, 0, 0.2)',
borderColor: "rgba(0, 0, 0, 0.2)",
},
emphasis: {
areaColor: "#f2d5ad",
shadowOffsetX: 0,
shadowOffsetY: 0,
borderWidth: 0,
},
},
},
series: [
{
name: "综合评估为",
type: "map",
geoIndex: 0,
data: this.dataList,
},
],
};
myChartes.setOption(option)
window.echartsArr.push(myChartes);
}
});
},
//获取统计类型
getClassificationData() {
let code = "Statistical_Type";
let tem = dicData(code, ["Report_Type"]);
this.statisticalType = tem[0];
},
},
};
</script>

782
src/views/device-boot/operationcenter/lineruntj.vue Normal file
View File

@@ -0,0 +1,782 @@
<template>
<div style="padding: 0.5% 0.5%">
<!--查询条件-->
<el-row>
<el-col :span="4">
<span style="font-weight: ; font-size: 14px">统计类型:</span>
<el-select v-model="teriminal" placeholder="请选择统计类型">
<el-option
v-for="item in teriminaloption"
:key="item.id"
:label="item.name"
:value="item.id"
>
</el-option>
</el-select>
</el-col>
<el-col :span="18">
<timepicker
@querfromdata="querfromdata"
:interval="interval"
:falg="falg"
></timepicker>
</el-col>
</el-row>
<!--内容区-->
<el-row style="margin-top: 0.5%">
<!-- <el-col :span="24"> -->
<el-table
stripe
:data="tableData"
style="width: 100%"
row-key="id"
id="rebateSetTable"
border
highlight-current-row
default-expand-all
:height="height"
:header-cell-style="{
height: '25px',
top: '0px',
padding: '0px',
}"
:row-style="{ height: '25px' }"
:cell-style="{ padding: '0px' }"
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
>
<el-table-column prop="name" label="统计方式"></el-table-column>
<el-table-column align="center" prop="zdzt" label="终端状态">
<template slot-scope="scope">
<span
v-if="
scope.row.zdzt == 1 &&
(scope.row.level == 4 || scope.row.level == 5)
"
style="color: green"
>正常</span
>
<span
v-if="
scope.row.zdzt == 0 &&
(scope.row.level == 4 || scope.row.level == 5)
"
style="color: red"
>中断</span
>
</template>
</el-table-column>
<el-table-column align="center" prop="txzt" label="通讯状态">
<template slot-scope="scope">
<span
v-if="
scope.row.txzt == 1 &&
(scope.row.level == 4 || scope.row.level == 5)
"
style="color: green"
>正常</span
>
<span
v-if="
scope.row.txzt == 0 &&
(scope.row.level == 4 || scope.row.level == 5)
"
style="color: red"
>中断</span
>
</template>
</el-table-column>
<el-table-column
align="center"
prop="zxsjsj"
label="最新数据时间"
></el-table-column>
<el-table-column align="center" prop="onlinerate" label="在线率">
<template slot-scope="scope">
<el-tag
@click="chufazxl(scope.row)"
v-if="
scope.row.onlinerate >= 90 &&
scope.row.onlinerate !== 3.14159 &&
scope.row.onlinerate !== -1 &&
(scope.row.level == 5 || scope.row.level == 4)
"
style="background: #339966; color: #fff"
>{{ scope.row.onlinerate }}</el-tag
>
<el-tag
@click="chufazxl(scope.row)"
v-if="
scope.row.onlinerate < 60 &&
scope.row.onlinerate !== 3.14159 &&
scope.row.onlinerate !== -1 &&
(scope.row.level == 5 || scope.row.level == 4)
"
style="background: #cc0000; color: #fff"
>{{ scope.row.onlinerate }}</el-tag
>
<el-tag
@click="chufazxl(scope.row)"
v-if="
scope.row.onlinerate < 90 &&
scope.row.onlinerate >= 60 &&
scope.row.onlinerate !== 3.14159 &&
scope.row.onlinerate !== -1 &&
(scope.row.level == 5 || scope.row.level == 4)
"
style="background: #ffcc33; color: #fff"
>{{ scope.row.onlinerate }}</el-tag
>
<el-tag
@click="chufazxl(scope.row)"
v-if="
scope.row.onlinerate === 3.14159 &&
(scope.row.level == 5 || scope.row.level == 4)
"
style="background: #ccc; color: #fff"
>暂无数据</el-tag
>
<span
v-if="scope.row.onlinerate === -1 && scope.row.level !== 5"
style="background: #ccc; color: #fff"
></span>
</template>
</el-table-column>
<el-table-column align="center" prop="integrity" label="数据完整性">
<template slot-scope="scope">
<el-tag
@click="chufasjx(scope.row)"
v-if="
scope.row.integrity >= 90 &&
scope.row.integrity !== 3.14159 &&
scope.row.integrity !== -1 &&
scope.row.level == 5
"
style="background: #339966; color: #fff"
>{{ scope.row.integrity }}</el-tag
>
<el-tag
@click="chufasjx(scope.row)"
v-if="
scope.row.integrity < 60 &&
scope.row.integrity !== 3.14159 &&
scope.row.integrity !== -1 &&
scope.row.level == 5
"
style="background: #cc0000; color: #fff"
>{{ scope.row.integrity }}</el-tag
>
<el-tag
@click="chufasjx(scope.row)"
v-if="
scope.row.integrity < 90 &&
scope.row.integrity >= 60 &&
scope.row.integrity !== 3.14159 &&
scope.row.integrity !== -1 &&
scope.row.level == 5
"
style="background: #ffcc33; color: #fff"
>{{ scope.row.integrity }}</el-tag
>
<el-tag
@click="chufasjx(scope.row)"
v-if="scope.row.integrity === 3.14159 && scope.row.level == 5"
style="background: #ccc; color: #fff"
>暂无数据</el-tag
>
<span
v-if="scope.row.integrity === -1 && scope.row.level == 5"
style="background: #ccc; color: #fff"
></span>
</template>
</el-table-column>
<el-table-column
align="center"
prop="lltc"
label="套餐流量(MB)"
></el-table-column>
<el-table-column
align="center"
prop="ysyll"
label="已用流量(MB)"
></el-table-column>
<el-table-column align="center" prop="llzb" label="流量占比(%)">
<template slot-scope="scope">
<el-button type="text" @click="chufallzb(scope.row)">{{
scope.row.llzb
}}</el-button>
</template>
</el-table-column>
</el-table>
<!-- </el-col> -->
<el-row>
<el-col :span="24">
<div
id="tubiao"
:style="'width:100%;height:' + height + ';zoom:' + device"
></div>
</el-col>
</el-row>
</el-row>
</div>
</template>
<script>
import { getheight, tableheight } from "@/assets/commjs/common";
import timepicker from "../../components/TimePicker/index4";
export default {
components: {
timepicker,
},
data() {
return {
interval: 3,
falg: "",
height: "",
option: {
title: "(月)在线率/数据完整性/流量占比",
danwei: "单位:(%)",
},
teriminal: "",
teriminaloption: [],
tableData: [
{
id: 1,
level: 1,
name: "江苏省",
zdzt: "",
txzt: "",
zxsjsj: "",
onlinerate: "",
integrity: "",
lltc: "",
ysyll: "",
llzb: "",
children: [
{
id: 2,
level: 2,
name: "江苏省电力公司",
zdzt: "",
txzt: "",
zxsjsj: "",
onlinerate: "",
integrity: "",
lltc: "",
ysyll: "",
llzb: "",
children: [
{
id: 3,
level: 3,
name: "南京变电站",
zdzt: "",
txzt: "",
zxsjsj: "",
onlinerate: "",
integrity: "",
lltc: "",
ysyll: "",
llzb: "",
children: [
{
id: 4,
level: 4,
name: "pqs600-200",
zdzt: 0,
txzt: 0,
zxsjsj: "2022-03-12 11:23:14",
onlinerate: 20,
integrity: "",
lltc: 500,
ysyll: 500,
llzb: 45,
children: [
{
id: 41,
level: 5,
name: "测试监测点1",
zdzt: 0,
txzt: 1,
zxsjsj: "2022-03-12 11:23:14",
onlinerate: 20,
integrity: 96,
lltc: 400,
ysyll: 200,
llzb: 25,
children: [],
},
{
id: 42,
level: 5,
name: "测试监测点2",
zdzt: 1,
txzt: 0,
zxsjsj: "2022-03-12 11:23:14",
onlinerate: 80,
integrity: 96,
lltc: 100,
ysyll: 300,
llzb: 45,
children: [],
},
],
},
{
id: 5,
level: 4,
name: "pqs600-400",
zdzt: 0,
txzt: 0,
zxsjsj: "2022-03-12 11:23:14",
onlinerate: 70,
integrity: "",
lltc: 500,
ysyll: 500,
llzb: 45,
children: [
{
id: 51,
level: 5,
name: "测试监测点3",
zdzt: 0,
txzt: 1,
zxsjsj: "2022-03-12 11:23:14",
onlinerate: 90,
integrity: 36,
lltc: 400,
ysyll: 200,
llzb: 25,
children: [],
},
{
id: 52,
level: 5,
name: "测试监测点4",
zdzt: 1,
txzt: 0,
zxsjsj: "2022-03-12 11:23:14",
onlinerate: 80,
integrity: 66,
lltc: 100,
ysyll: 300,
llzb: 45,
children: [],
},
],
},
],
},
],
},
],
},
],
};
},
created() {
this.$nextTick(() => {
this.initData();
});
},
mounted() {
this.device = window.devicePixelRatio;
if (this.device == 1) {
this.height = tableheight() / 2 + "px";
} else if (this.device == 1.25) {
this.height = (tableheight() - 70) / 2 + "px";
}
},
methods: {
initData() {
const echarts = require("echarts");
let myChartes = echarts.init(document.getElementById("tubiao"));
var white = "#000";
var barOption = {
color: [
"#00FFFF",
"#7CFC00",
"#F08080",
"#7CFC00",
"#3ba272",
"#fc8452",
"#9a60b4",
"#ea7ccc",
],
xAxis: "",
seriesData: {
population: [
100, 120, 160, 180, 140, 170, 50, 90, 120, 150, 140, 140, 140, 140,
140, 140, 140, 140, 140, 140, 140, 140, 140, 140, 140, 140, 140,
140, 140, 140, 140,
],
thisWeek: [
30, 40, 40, 50, 90, 50, 20, 55, 60, 30, 40, 60, 60, 60, 60, 60, 60,
60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60, 60,
],
notAccumulated: [
36, 20, 45, 38, 90, 52, 30, 25, 10, 10, 20, 38, 38, 38, 38, 38, 38,
38, 38, 38, 38, 38, 38, 38, 38, 38, 38, 38, 38, 38, 38,
],
},
};
var option = {
title: {
text: this.option.title,
textStyle: {
align: "center",
color: "#000",
fontSize: 20,
},
top: "0%",
left: "40%",
},
grid: {
// 显示数据的图表位于当前canvas的坐标轴
top: "13%",
bottom: "10%",
left: "3%",
right: "3%",
},
legend: {
data: [
{
name: "在线率",
itemStyle: {
color: "#CC9900",
},
},
{
name: "数据完整性",
itemStyle: {
color: "#3399CC ",
},
},
{
name: "流量使用",
itemStyle: {
color: "#00CCCC ",
},
},
],
textStyle: {
color: "#5789c6",
fontSize: 14,
},
itemWidth: 10,
itemHeight: 10,
left: "80%",
},
tooltip: {
trigger: "axis",
},
// tooltip: {
// trigger: 'item',
// axisPointer: {
// type: 'none',
// crossStyle: {
// color: '#999'
// }
// },
// formatter: '{b}-{a}: {c}'
// },
xAxis: [
{
type: "category",
data: [
"1号",
"2号",
"3号",
"4号",
"5号",
"6号",
"7号",
"8号",
"9号",
"10号",
"12号",
"13号",
"14号",
"15号",
"16号",
"17号",
"18号",
"19号",
"20号",
"21号",
"22号",
"23号",
"24号",
"25号",
"26号",
"27号",
"28号",
"29号",
"30号",
"31号",
],
axisTick: {
show: false, // 不显示坐标轴刻度线
},
axisLabel: {
interval: 0,
textStyle: {
color: "#000",
fontSize: 14,
},
},
},
],
yAxis: [
{
type: "value",
name: "单位(流量:MB)",
axisTick: {
show: false, // 不显示坐标轴刻度线
},
axisLabel: {
formatter: "{value}MB",
},
axisLine: {
show: true,
},
splitLine: {
// show: false // 不显示网格线
lineStyle: {
type: "dashed",
// color: '#344a53'
},
},
},
{
type: "value",
name: "单位(%)",
axisLabel: {
show: true,
interval: "auto",
formatter: "{value}%",
},
splitLine: {
show: false, // 不显示网格线
},
axisLine: {
show: true,
},
axisTick: {
show: false, // 不显示坐标轴刻度线
},
},
],
dataZoom: [
{
type: "inside",
height: "5%",
start: 0,
end: 100,
},
{
start: 0,
end: 100,
},
],
// dataZoom: [
// {
// type: 'slider',
// xAxisIndex: [0],
// zoomLock: false ,
// minValueSpan:4,
// maxValueSpan:5,
// left: '50',
// bottom: 0,
// height: 6,
// backgroundColor: 'rgba(255,255,255,.2)',
// start: 0,
// borderColor: 'none',
// end: 100,
// dataBackground: {
// lineStyle: {
// color: 'none'
// },
// areaStyle: {
// color: 'none'
// }
// },
// selectedDataBackground: {
// lineStyle: {
// color: 'none'
// },
// areaStyle: {
// color: 'none'
// }
// },
// borderWidth: 0,
// handleSize: '0px',
// fillerColor: '#09E3EF',
// moveHandleSize: 0,
// showDetail: true
// }
// ],
series: [
{
name: "在线率",
data: barOption.seriesData.population,
type: "bar",
//barWidth: 16,
yAxisIndex: 0,
itemStyle: {
// 柱子颜色渐变
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "#CC9900", // 0% 处的颜色
},
{
offset: 1,
color: "#CC9900", // 100% 处的颜色
},
],
false
),
},
tooltip: {
trigger: "item",
axisPointer: {
type: "none",
crossStyle: {
color: "#999",
},
},
formatter: "{b}-{a}: {c}",
},
},
{
name: "数据完整性",
data: barOption.seriesData.thisWeek,
type: "bar",
// barWidth: 16,
yAxisIndex: 0,
itemStyle: {
// 柱子颜色渐变
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "#3399CC ", // 0% 处的颜色
},
{
offset: 1,
color: "#3399CC", // 100% 处的颜色
},
],
false
),
},
tooltip: {
trigger: "item",
axisPointer: {
type: "none",
crossStyle: {
color: "#999",
},
},
formatter: "{b}-{a}: {c}",
},
},
{
name: "流量使用",
data: barOption.seriesData.notAccumulated,
markLine: {
silent: true,
label: {
position: "middle",
formatter: "{b}",
color: "red",
},
data: [
{
name: "日均流量标准",
yAxis: 65.03,
lineStyle: {
color: "red",
},
itemStyle: {
color: "red",
},
label: {
position: "end",
formatter: "{b}\n {c}MB",
},
},
],
},
type: "bar",
// barWidth: 16,
yAxisIndex: 1,
itemStyle: {
// 柱子颜色渐变
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: "#00CCCC", // 0% 处的颜色
},
{
offset: 1,
color: "#00CCCC", // 100% 处的颜色
},
],
false
),
},
tooltip: {
trigger: "item",
axisPointer: {
type: "none",
crossStyle: {
color: "#999",
},
},
formatter: "{b}-{a}: {c}%",
},
},
],
};
myChartes.setOption(option)
window.echartsArr.push(myChartes);
setInterval(() => {
myChartes.resize();
}, 1000);
window.addEventListener("resize", function () {
myChartes.resize();
});
},
//查询
querfromdata() {},
//在线率触发
chufazxl(row) {
alert("在线率触发id:" + row.id);
},
//数据完整性触发
chufasjx(row) {
alert("数据完整性触发id:" + row.id);
},
//流量占比触发
chufallzb(row) {
alert("流量占比触发id:" + row.id);
},
},
};
</script>

609
src/views/device-boot/operationcenter/teriminaloniletj.vue Normal file
View File

@@ -0,0 +1,609 @@
<template>
<div class="pd10" v-loading="loading" element-loading-text="数据加载中" >
<el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item v-if="this.quyunames != undefined">
<el-switch
class="tableScopeSwitch"
:active-value="0"
:inactive-value="2"
@change="handleStatusChange"
:active-text="quyuname"
:inactive-text="quyunames"
inactive-color="#007878"
active-color="#666666"
v-model="this.formData.monitorFlag"
>
</el-switch>
</el-form-item>
<el-form-item>
<timepicker
:id="id"
:interval="interval"
:treenode="treenode"
:tablename="tablename"
ref="timepicker"
:name="name"
:path="path"
:dataTree="dataTree"
></timepicker>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="querfromdata" icon="el-icon-search" >查询</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>
<Area @click="handleNodeClick" ref="area"></Area>
</el-form-item>
<el-form-item label="统计类型:">
<el-select
v-model="formData.statisticalType"
@change="changeclasss"
placeholder="请选择统计类型"
>
<el-option
v-for="item in classificationData"
: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.lineGrade" placeholder="请选择终端等级">
<el-option
v-for="item in dejioption"
: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.scale"
multiple
collapse-tags
placeholder="请选择电压等级"
>
<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="请选择终端厂家"
>
<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="请选择干扰源类型"
>
<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>
</div>
<el-row :gutter="20">
<el-col :span="24">
<el-tabs
type="border-card"
v-model="activeName"
@tab-click="handleClick"
>
<el-tab-pane :lazy="false" label="在线率列表" name="tab1">
<bonlineratetable
:classvalue="classt"
:tableData="tableData"
></bonlineratetable>
</el-tab-pane>
<el-tab-pane :lazy="false" label="在线率图表" name="tab2">
<onlinerateechart
v-show="eacjartflag && activeName == 'tab2'"
:classvalue="classt"
:xdata="xdata"
:ydata="ydata"
ref="child"
></onlinerateechart>
</el-tab-pane>
</el-tabs>
</el-col>
</el-row>
</div>
</template>
<script>
import { getappheight, getheight } from "../../../assets/commjs/common";
import { dicData } from "../../../assets/commjs/dictypeData";
import api from "../../../api/onlinerate/onlinerate";
import apiOnline from "../../../api/device/onlineRate";
import timepicker from "../../components/TimePicker/index4";
import treeselect from "../../components/elselect/treeselect";
import Area from "@/views/components/Area/Area.vue";
import bonlineratetable from "../../components/bonlineratetable";
import onlinerateechart from "../../components/echarts/onlinerateechart";
import TreeSelect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default {
name: "onlineratestatistics",
components: {
TreeSelect,
treeselect,
timepicker,
bonlineratetable,
onlinerateechart,
Area,
},
watch: {},
computed: {},
data() {
return {
quyuname: undefined,
quyunames: undefined,
formInline: {},
loading: false,
view: false,
dejioption: [],
classt: "",
classname: "Power_Network",
tablename: "tab1",
eacjartflag: true,
treeData: [],
idArr: [],
defaultProps: {
children: "children",
label: "name",
},
interval: 3,
asideheight: undefined,
id: 1,
title: "电网拓扑",
deptName: "全国",
deptId: "0",
name: "sjwzx",
path: "/harmonic-boot/harmonic/getIntegrityData",
xdata: [],
ydata: [],
activeName: "tab1",
treenode: "",
dataTree: "",
voltageleve1: "",
voltageleveloption: [],
terminal: "",
terminaloption: [],
interfere: "",
interfereoption: [],
panindexOptions: [],
classificationData: [],
formData: {
deptIndex: JSON.parse(window.sessionStorage.getItem("Info")).deptId,
monitorFlag: 2,
powerFlag: 2,
loadType: [],
manufacturer: [],
searchBeginTime: "",
searchEndTime: "",
statisticalType: "",
scale: [],
lineGrade: "",
serverName: "deviceBoot",
},
tableData: [],
};
},
created() {
let data = window.sessionStorage.getItem("sysData");
let yudata = eval("(" + data + ")");
//debugger
let str = yudata.dataReport.split("，");
this.quyuname = str[0];
this.quyunames = str[1];
this.getAreaDept();
this.getclassificationData();
this.getVoltage();
this.getManufacturer();
this.getLoadType();
this.getLineGrade();
},
mounted() {
this.asideheight = getappheight();
let data = window.sessionStorage.getItem("sysData");
let yudata = eval("(" + data + ")");
//debugger
let str = yudata.dataReport.split("，");
this.quyuname = str[0];
this.quyunames = str[1];
this.querfromdata()
},
methods: {
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";
}
},
//时间格式转化
dateFormat(dateData1, dateData2) {
var timearr = [];
var date = new Date(dateData1);
var y = date.getFullYear();
var m = date.getMonth() + 1;
m = m < 10 ? "0" + m : m;
var d = date.getDate();
d = d < 10 ? "0" + d : d;
var h = date.getHours();
h = h < 10 ? "0" + h : h;
var f = date.getMinutes();
f = f < 10 ? "0" + f : f;
var s = date.getSeconds();
s = s < 10 ? "0" + s : s;
this.formData.searchBeginTime = y + "-" + m + "-" + d;
timearr.push(this.formData.startTime);
var date = new Date(dateData2);
var y = date.getFullYear();
var m = date.getMonth() + 1;
m = m < 10 ? "0" + m : m;
var d = date.getDate();
d = d < 10 ? "0" + d : d;
var h = date.getHours();
h = h < 10 ? "0" + h : h;
var f = date.getMinutes();
f = f < 10 ? "0" + f : f;
var s = date.getSeconds();
s = s < 10 ? "0" + s : s;
this.formData.searchEndTime = y + "-" + m + "-" + d;
timearr.push(this.formData.endTime);
return timearr;
},
//2次组件触发事件
formatDate(date) {
//; console.log(date);
// date = new Date();
date = new Date(Date.parse(date.replace(/-/g, "/"))); //转换成Data();
// console.log(date);
var y = date.getFullYear();
// console.log(y);
var m = date.getMonth() + 1;
m = m < 10 ? "0" + m : m;
var d = date.getDate();
d = d < 10 ? "0" + d : d;
return y + "-" + m + "-" + d;
},
//开关触发
handleStatusChange(val) {
this.formData.monitorFlag = val;
},
//2次组件触发事件
querfromdata() {
this.loading = true;
this.classt = this.classname;
this.timeValue = this.$refs.timepicker.timeValue;
this.timehuanbiValue = this.$refs.timepicker.timehbValue;
this.periodBeginTime = this.timehuanbiValue[0];
this.periodEndTime = this.timehuanbiValue[1];
this.ping = this.periodBeginTime + "至" + this.periodEndTime;
this.dateFormat(this.timeValue[0], this.timeValue[1]);
this.time =
this.formData.searchBeginTime + "至" + this.formData.searchEndTime;
apiOnline.getOnlineRateData(this.formData).then((res) => {
if (res.code === "A0000") {
res.data.forEach((m) => {
m.id = this.guid();
m.children.forEach((n) => {
n.id = this.guid();
n.children.forEach((d) => {
d.id = this.guid();
});
});
});
this.tableData = res.data;
}
});
// this.$nextTick(()=> {
// this.eacjartflag = false
var data = {
deptIndex: this.formData.deptIndex,
loadType: this.formData.loadType,
monitorFlag: this.formData.monitorFlag,
manufacturer: this.formData.manufacturer,
searchBeginTime: this.formData.searchBeginTime,
searchEndTime: this.formData.searchEndTime,
statisticalType: this.formData.statisticalType,
lineGrade: this.formData.lineGrade,
scale: this.formData.scale,
powerFlag: 2,
periodBeginTime: this.periodBeginTime,
periodEndTime: this.periodEndTime,
};
api.getOnlineRateDataCensus(data).then((res) => {
this.eacjartflag = true;
if (res.code == "A0000") {
this.xdata = res.data.type;
var data = res.data.single;
var data1 = res.data.ratio;
var single = [];
for (var i = 0; i < data.length; i++) {
if (data[i] == 3.14159) {
data[i] = 5;
}
single.push(data[i].toFixed(2));
}
this.ydata = single;
var ratio = [];
if (data1 !== null) {
for (var i = 0; i < data1.length; i++) {
if (data1[i] == 3.14159) {
data1[i] = 5;
}
ratio.push(data1[i]);
}
this.ydata1 = ratio;
}
this.$nextTick(() => {
this.$refs.child.onlinerateechart();
});
}
});
setTimeout(() => {
this.loading = false;
}, 1500);
},
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);
});
},
//标签切换
handleClick(tab, event) {
this.tablename = tab.name;
this.activeName = tab.name;
if (tab.name == "tab1") {
this.eacjartflag = true;
} else if (tab.name == "tab2") {
// console.log(tab.name);
this.$nextTick(() => {
this.$refs.child.onlinerateechart();
});
}
},
//获取区域
getAreaDept() {
api.getAreaDept().then((res) => {
if (res.code == "A0000") {
var data = res.data;
data.forEach((element) => {
this.idArr.push(element.id);
});
this.treeData = data;
}
});
},
//字典获取数据电压等级
getVoltage() {
var code = "Dev_Voltage_Stand";
this.voltageleveloption = dicData(code, []);
this.formData.scale = this.voltageleveloption;
},
//字典获取数据终端厂家
getManufacturer() {
var code = "Dev_Manufacturers";
this.terminaloption = dicData(code, []);
this.formData.manufacturer = this.terminaloption;
},
//字典获取数据干扰源类型
getLoadType() {
var code = "Interference_Source";
this.interfereoption = dicData(code, []);
this.formData.loadType = this.interfereoption;
},
//获取统计类型
getclassificationData() {
var code = "Statistical_Type";
this.classificationData = dicData(code, [
"Report_Type",
"Voltage_Level",
"Load_Type",
]);
this.formData.statisticalType = this.classificationData[0];
},
//监测点等级
getLineGrade() {
let code = "Dev_Level";
this.dejioption = dicData(code, []);
this.formData.lineGrade = this.dejioption[0].id;
},
//部门绑定区域触发区域树节点
handleNodeClick(data, node) {
this.formData.deptIndex = data.id;
this.deptName = data.name;
this.deptId = data.id;
this.formData.area = data.id;
},
changeclasss(val) {
this.classname = val.code;
// console.log(val);
},
rest() {
this.deptName = "全国";
this.formData = {
deptIndex: "",
monitorFlag: 2,
loadType: [],
manufacturer: [],
searchBeginTime: "",
searchEndTime: "",
statisticalType: "",
scale: [],
};
},
},
};
</script>
<style lang="less" scoped>
@import url("../../../styles/comStyle.less");
.main {
overflow: hidden;
}
::-webkit-scrollbar {
width: 5px;
height: 0px;
}
.container {
/* margin: auto; */
top: 0px;
right: 0;
width: 50%;
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;
}
// .tableScopeSwitch .el-switch__label {
// position: absolute;
// display: none;
// color: #fff !important;
// }
// /*打开时文字位置设置*/
// .tableScopeSwitch .el-switch__label--right {
// z-index: 1;
// /*不同场景下可能不同，自行调整*/
// }
// /*关闭时文字位置设置*/
// .tableScopeSwitch .el-switch__label--left {
// z-index: 1;
// left: 80px; /*不同场景下可能不同，自行调整*/
// }
// /*显示文字*/
// .tableScopeSwitch .el-switch__label.is-active {
// display: block;
// }
// .tableScopeSwitch.el-switch .el-switch__core,
// .el-switch .el-switch__label {
// width: 200px !important; /*开关按钮的宽度大小*/
// }
</style>

651
src/views/device-boot/operationcenter/terminalerrortj.vue Normal file
View File

@@ -0,0 +1,651 @@
<template>
<div class="pd10">
<el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item label="终端等级:" v-show="zdzs">
<el-select v-model="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 v-show="zdzs">
<timepicker
@querfromdata="querfromdata"
:interval="interval"
:falg="falg"
></timepicker>
</el-form-item>
<el-form-item v-show="zdxq" style="float: right">
<el-button type="primary" @click="back">返回</el-button>
</el-form-item>
</el-form>
<!--内容区-->
<el-row v-show="zdzs">
<el-col :span="18">
<div id="error" :style="'width:100%;height:' + vhh"></div>
</el-col>
<el-col :span="6">
<el-table
stripe
:data="tableData"
border
style="width: 100%"
header-cell-class-name="table_header"
highlight-current-row
:height="vh"
>
<el-table-column
align="center"
prop="time"
label="时间"
></el-table-column>
<el-table-column
align="center"
prop="data"
label="终端异常个数"
></el-table-column>
<el-table-column align="center" label="操作">
<template slot-scope="scope">
<el-button
type="primary"
size="mini"
@click="deialData(scope.row)"
>终端详情</el-button
>
</template>
</el-table-column>
</el-table>
</el-col>
</el-row>
<el-row v-show="zdxq">
<el-table
stripe
:data="tableData2"
header-cell-class-name="table_header"
style="width: 100%"
row-key="id"
id="rebateSetTable"
border
highlight-current-row
default-expand-all
:height="vh"
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
>
<el-table-column prop="name" label="台账信息"></el-table-column>
<el-table-column align="center" prop="sjwzx" label="数据完整性(%)">
<template slot-scope="scope">
<span
v-if="
scope.row.sjwzx >= 90 &&
scope.row.sjwzx !== 3.14159 &&
scope.row.sjwzx !== -1 &&
scope.row.level == 5
"
style="color: #339966"
>{{ scope.row.sjwzx }}</span
>
<span
v-if="
scope.row.sjwzx < 60 &&
scope.row.sjwzx !== 3.14159 &&
scope.row.sjwzx !== -1 &&
scope.row.level == 5
"
style="color: #cc0000"
>{{ scope.row.sjwzx }}</span
>
<span
v-if="
scope.row.sjwzx < 90 &&
scope.row.sjwzx >= 60 &&
scope.row.sjwzx !== 3.14159 &&
scope.row.sjwzx !== -1 &&
scope.row.level == 5
"
style="color: #ffcc33"
>{{ scope.row.sjwzx }}</span
>
<span
v-if="scope.row.sjwzx === 3.14159 && scope.row.level == 5"
style="color: #ccc"
>暂无数据</span
>
<span
v-if="scope.row.sjwzx === -1 && scope.row.level == 5"
style="background: #ccc; color: #fff"
></span>
</template>
</el-table-column>
<el-table-column
align="center"
prop="txzd"
label="通讯中断(次)"
></el-table-column>
<el-table-column
align="center"
prop="zdgj"
label="终端告警(次)"
></el-table-column>
<el-table-column
align="center"
prop="zdll"
label="终端流量(%)"
></el-table-column>
<el-table-column align="center" label="操作">
<template slot-scope="scope">
<el-button
v-if="scope.row.level == 5"
type="primary"
size="mini"
@click="xiangqing(scope.row)"
>详情</el-button
>
</template>
</el-table-column>
</el-table>
<el-dialog
:close-on-click-modal="false"
:title="title"
:visible.sync="dialogVisible"
width="30%"
:before-close="handleClose"
>
<!-- <el-table :data="tableData3" border style="width: 100%"
highlight-current-row
height="45vh"
:header-cell-style="{
height:'25px',
top:'0px',
padding:'0px'
}"
:row-style="{height:'25px'}"
:cell-style="{padding:'2px'}">
<el-table-column align="center" prop="time" label="终端基础信息" ></el-table-column>
<el-table-column align="center" prop="data" label="数据完整性" ></el-table-column>
<el-table-column align="center" prop="data" label="终端通讯信息" ></el-table-column>
<el-table-column align="center" prop="data" label="终端告警信息" ></el-table-column>
<el-table-column align="center" prop="data" label="终端流量信息" ></el-table-column>
</el-table> -->
<el-collapse v-model="activeName" accordion>
<!-- <el-button type="primary" circle>1</el-button> -->
<el-collapse-item title="终端基础信息" name="1">
<div>
包头 , 0.38kV华电内蒙古能源有限公司土默特发电分公司 , NPQS-581-3;
</div>
</el-collapse-item>
<el-collapse-item title="数据完整性" name="2">
<div>数据完整性 : [合格 ]</div>
<div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
</el-collapse-item>
<el-collapse-item title="终端通讯信息" name="3">
<div>[暂无通讯中断信息]</div>
<div>
清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；
</div>
<div>
帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。
</div>
</el-collapse-item>
<el-collapse-item title="终端告警信息" name="4">
<div>NPQS-581-3告警1次,具体如下所示:</div>
<div>
2022-05-12 23:55:57 装置名称:NPQS-581-3
Mac地址:00-B7-8D-00-FB-6D所属的装置型号：NPQS-580未在数据库中找到！
</div>
</el-collapse-item>
<el-collapse-item title="终端流量信息" name="5">
<div>NPQS-581-3终端流量已使用 5.38 %</div>
<div>
结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。
</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>
</el-row>
</div>
</template>
<script>
import { getheight, tableheight } from "@/assets/commjs/common";
import timepicker from "../../components/TimePicker/index4";
export default {
components: {
timepicker,
},
data() {
return {
vh: "",
formInline: {},
interval: 3,
height: "",
eheight: "",
activeName: "1",
zdzs: true,
zdxq: false,
tableData: [
{
time: "1号",
data: 268,
},
{
time: "2号",
data: 268,
},
{
time: "3号",
data: 268,
},
{
time: "4号",
data: 268,
},
{
time: "5号",
data: 268,
},
{
time: "6号",
data: 268,
},
{
time: "7号",
data: 268,
},
{
time: "8号",
data: 268,
},
{
time: "9号",
data: 268,
},
{
time: "10号",
data: 268,
},
{
time: "11号",
data: 268,
},
{
time: "12号",
data: 268,
},
{
time: "13号",
data: 268,
},
{
time: "14号",
data: 268,
},
{
time: "15号",
data: 268,
},
{
time: "16号",
data: 268,
},
{
time: "17号",
data: 268,
},
{
time: "18号",
data: 268,
},
{
time: "19号",
data: 268,
},
{
time: "20号",
data: 268,
},
{
time: "21号",
data: 268,
},
{
time: "22号",
data: 268,
},
{
time: "23号",
data: 268,
},
{
time: "24号",
data: 268,
},
{
time: "25号",
data: 268,
},
{
time: "26号",
data: 268,
},
{
time: "27号",
data: 268,
},
{
time: "28号",
data: 268,
},
{
time: "29号",
data: 268,
},
{
time: "30号",
data: 268,
},
{
time: "31号",
data: 268,
},
],
tableData2: [
{
id: 1,
level: 1,
name: "在线项目",
sjwzx: "",
txzd: "",
zdgj: "",
zdll: "",
children: [
{
id: 2,
level: 2,
name: "南京数据中心",
sjwzx: "",
txzd: "",
zdgj: "",
zdll: "",
children: [
{
id: 3,
level: 3,
name: "南京灿能电力公司",
sjwzx: "",
txzd: "",
zdgj: "",
zdll: "",
children: [
{
id: 4,
level: 4,
name: "软件研发部",
sjwzx: "",
txzd: "",
zdgj: "",
zdll: "",
children: [
{
id: 41,
level: 5,
name: "终端1",
sjwzx: 76,
txzd: 23,
zdgj: 56,
zdll: 156,
children: [],
},
{
id: 42,
level: 5,
name: "终端2",
sjwzx: 58,
txzd: 35,
zdgj: 65,
zdll: 43,
children: [],
},
],
},
{
id: 5,
level: 4,
name: "数据中心",
sjwzx: "",
txzd: "",
zdgj: "",
zdll: "",
children: [
{
id: 51,
level: 5,
name: "终端3",
sjwzx: 90,
txzd: 343,
zdgj: 22,
zdll: 322,
children: [],
},
{
id: 52,
level: 5,
name: "终端3",
sjwzx: 88,
txzd: 332,
zdgj: 233,
zdll: 146,
children: [],
},
],
},
],
},
],
},
],
},
],
tableData3: [],
title: "",
dialogVisible: false,
};
},
created() {},
mounted() {
this.device = window.devicePixelRatio;
this.setHeight()
window.addEventListener('resize', this.setHeight)
this.$nextTick(() => {
this.initData();
});
},
beforeDestroy() {
window.removeEventListener('resize', this.setHeight)
},
methods: {
setHeight() {
this.vh = window.sessionStorage.getItem("appheight") - 55;
this.vhh = window.sessionStorage.getItem("appheight") - 55 + "px";
},
initData() {
const echarts = require("echarts");
let myChartes = echarts.init(document.getElementById("error"));
var option = {
//backgroundColor: '#151F2A',
title: {
text: "异常终端个数统计",
textStyle: {
align: "center",
color: "#000",
fontSize: 20,
},
top: "0%",
left: "40%",
},
grid: {
containLabel: true,
left: 20,
right: 20,
bottom: 10,
top: 40,
},
tooltip: {
trigger: "axis",
},
xAxis: {
axisLabel: {
color: "#000",
fontSize: 14,
interval: 0,
},
axisTick: {
show: false,
},
splitLine: {
show: false,
},
axisLine: {
show: true,
},
data: [
"1号",
"2号",
"3号",
"4号",
"5号",
"6号",
"7号",
"8号",
"9号",
"10号",
"11号",
"12号",
"13号",
"14号",
"15号",
"16号",
"17号",
"18号",
"19号",
"20号",
"21号",
"22号",
"23号",
"24号",
"25号",
"26号",
"27号",
"28号",
"29号",
"30号",
"31号",
],
type: "category",
},
yAxis: {
axisLabel: {
color: "#000",
fontSize: 14,
},
axisTick: {
show: false,
},
splitLine: {
show: false,
},
axisLine: {
show: true,
},
name: "单位(个)",
},
dataZoom: [
{
type: "inside",
height: "5%",
start: 0,
end: 100,
},
{
start: 0,
end: 100,
},
],
series: [
{
data: [
353, 66, 112, 270, 315, 418, 500, 353, 66, 112, 270, 315, 418,
500, 353, 66, 112, 270, 315, 418, 500, 353, 66, 112, 270, 315,
418, 500, 353, 66, 112, 270, 315, 418, 500,
],
type: "bar",
barMaxWidth: "auto",
// barWidth: 25,
itemStyle: {
color: "#FFCC66",
},
label: {
show: true,
// position: 'top',
// distance: 10,
// color: '#fff'
},
},
],
};
myChartes.clear();
myChartes.setOption(option)
window.echartsArr.push(myChartes);
setInterval(() => {
myChartes.resize();
}, 500);
window.addEventListener("resize", function () {
myChartes.resize();
});
},
//终端详情触发事件
deialData(row) {
this.zdzs = false;
this.zdxq = true;
//this.dialogVisible = true
},
//关闭事件
handleClose() {
this.dialogVisible = false;
},
//返回
back() {
if (this.zdzs) {
this.zdzs = false;
this.zdxq = true;
} else {
this.zdzs = true;
this.zdxq = false;
this.$nextTick(() => {
this.initData();
});
}
},
//详情
xiangqing(row) {
this.title = row.name + "----异常终端详情";
this.dialogVisible = true;
},
},
};
</script>
<style lang="less" scoped>
@import url("../../../styles/comStyle.less");
</style>

459
src/views/device-boot/setconfig/basicpackage.vue Normal file
View File

@@ -0,0 +1,459 @@
<template>
<div class="pd10">
<el-form :inline="true" class="demo-form-inline">
<div style="display: flex">
<el-form-item label="筛选">
<el-input v-model="searchContent" placeholder="请输入内容"></el-input>
</el-form-item>
<div
style="display: flex; justify-content: space-between; flex-grow: 1"
>
<el-form-item></el-form-item>
<el-form-item>
<el-button
type="primary"
size="small"
@click="add"
icon="el-icon-plus"
>新增</el-button
>
</el-form-item>
</div>
</div>
</el-form>
<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
<el-tab-pane label="基础套餐" name="first">
<el-col :span="24">
<el-table
stripe
:data="tableData"
header-cell-class-name="table_header"
border
:height="height + 'px'"
style="width: 100%"
highlight-current-row
>
<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="200">
<template slot-scope="scope">
<el-button
@click="edit(scope.row)"
type="primary"
size="mini"
icon="el-icon-edit"
>修改</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-col>
</el-tab-pane>
<el-tab-pane label="扩展套餐" name="second">
<el-col :span="24">
<el-table
stripe
:data="tableDataExtend"
header-cell-class-name="table_header"
border
:height="height + 'px'"
style="width: 100%"
highlight-current-row
>
<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="200">
<template slot-scope="scope">
<el-button
@click="edit(scope.row)"
type="primary"
size="mini"
icon="el-icon-edit"
>修改</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-col>
</el-tab-pane>
</el-tabs>
<el-dialog
:close-on-click-modal="false"
:title="title + '套餐'"
:visible.sync="dialogVisible"
width="30%"
:before-close="handleClose"
>
<el-form ref="formd" :model="formData" :rules="rules" label-width="100px">
<el-form-item label="套餐名称:" prop="name">
<el-input v-model="formData.name"></el-input>
</el-form-item>
<el-form-item label="套餐流量:" class="top" prop="flow">
<el-input v-model.number="formData.flow"></el-input>
</el-form-item>
<el-form-item label="套餐类型:" class="top" prop="type">
<el-select
v-model="formData.type"
:disabled="falg"
placeholder="请选择套餐类型"
@change="relationEvent"
style="width: 100%"
>
<el-option
v-for="item in tclxoptions"
:key="item.id"
:label="item.name"
:value="item.id"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="二级类型:" class="top" prop="flag">
<el-select
v-model="formData.flag"
placeholder="请选择二级类型"
style="width: 100%"
>
<el-option
v-for="item in erjitcoptions"
: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="handleClose">取 消</el-button>
<el-button type="primary" @click="submitData('form')">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import { tableheight } from "@/assets/commjs/common";
import flow from "@/api/device/flow";
export default {
name: "packagemanage",
components: {},
data() {
return {
falg: false,
dialogVisible: false,
searchContent: "",
height: null,
type: 0, //0.新增 1.修改
formData: {
name: "",
flow: null,
type: 0,
flag: 1,
},
activeName: "first",
tcoptions: [],
tclxoptions: [
{ id: 0, name: "基础套餐" },
{ id: 1, name: "扩展套餐" },
],
erjitcoptions: [
{ id: 0, name: "其他" },
{ id: 1, name: "默认套餐" },
],
tableData: [],
search: "",
tableDataExtend: [],
stashList: [],
stashListExtend: [],
title: "",
rules: {
name: [
{ required: true, message: "请输入套餐名称", trigger: "blur" },
{ min: 1, max: 20, message: "长度在 3 到 5 个字符", trigger: "blur" },
],
flow: [
{ required: true, message: "请输入套餐流量", trigger: "blur" },
{ type: "number", message: "流量必须为数字值", trigger: "blur" },
],
type: [{ required: true, message: "套餐类型不为空", trigger: "blur" }],
flag: [{ required: true, message: "默认类型不为空", trigger: "blur" }],
},
};
},
watch: {
searchContent: {
handler(newValue, oldValue) {
let self = this;
if (newValue) {
//这里要从暂存的所有数据中过滤 放到展示的数组中
self.tableData = self.stashList.filter((item) => {
return item.name.includes(newValue);
});
self.tableDataExtend = self.stashListExtend.filter((item) => {
return item.name.includes(newValue);
});
} else {
self.tableData = self.stashList;
self.tableDataExtend = self.stashListExtend;
}
},
deep: true,
},
},
created() {
this.getList();
},
mounted() {
this.setHeight()
window.addEventListener('resize', this.setHeight)
},
beforeDestroy() {
window.removeEventListener('resize', this.setHeight)
},
methods: {
setHeight() {
this.height = window.sessionStorage.getItem("appheight") - 110;
},
handleClick() {
if (this.activeName === "first") {
this.formData.type = 0;
} else {
this.formData.type = 1;
}
this.relationEvent();
},
//修改方法
edit(row) {
this.falg = true;
this.dialogVisible = true;
this.type = 1;
this.title = "修改";
this.formData.name = row.name;
this.formData.flow = row.flow;
this.formData.type = row.type;
this.formData.flag = row.flag;
this.formData.id = row.id;
},
//删除方法
deleteData(row) {
this.$confirm("此操作将永久删除该条记录, 是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
flow.deleteRateOfFlowData(row.id).then((response) => {
if (response.code === "A0000") {
this.$message({
type: "success",
message: "删除成功!",
});
this.getList();
}
});
})
.catch(() => {
this.$message({
type: "info",
message: "已取消删除",
});
});
},
//关闭弹窗
handleClose() {
this.dialogVisible = false;
this.resetForm2()
},
// 表单重置
resetForm2() {
if (this.$refs["formd"]) {
this.$refs["formd"].resetFields();
}
},
//新增
add() {
this.falg = false;
this.formData.name = "";
this.formData.flow = "";
this.formData.flag = 0;
this.type = 0;
this.dialogVisible = true;
this.title = "新增";
},
//提交
submitData(form) {
this.$refs[form].validate((valid) => {
if (valid) {
if (this.type === 0) {
flow.addRateOfFlowData(this.formData).then((response) => {
if (response.code === "A0000") {
this.$message.success("新增成功");
this.dialogVisible = false;
this.getList();
}
});
} else {
flow.updateRateOfFlowData(this.formData).then((response) => {
if (response.code === "A0000") {
this.$message.success("修改成功");
this.dialogVisible = false;
this.falg = false;
this.getList();
}
});
}
} else {
return false;
}
});
},
relationEvent() {
if (this.formData.type === 0) {
this.erjitcoptions = [
{ id: 0, name: "其他" },
{ id: 1, name: "默认套餐" },
];
} else {
this.erjitcoptions = [
{ id: 0, name: "当月生效" },
{ id: 1, name: "连续生效" },
];
}
},
resetForm(formName) {
this.$refs[formName].resetFields();
},
//获取主界面列表
getList() {
flow.getList().then((response) => {
if (response.code === "A0000") {
this.tableData = response.data.filter((item) => {
if (item.type === 0) {
return item;
}
});
this.tableDataExtend = 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;
}
// ::v-deep .table_header {
// height: 35px !important;
// }
</style>

245
src/views/device-boot/setconfig/extendedpackage.vue Normal file
View File

@@ -0,0 +1,245 @@
<template>
<div style="padding: 0.5% 0.5%">
<el-row>
<el-col :span="24">
<span style="font-weight: ; font-size: 14px">筛选:</span>
<el-input
v-model="seach"
placeholder="请输入内容"
style="width: 20%"
></el-input>
<el-button type="primary" size="small" @click="add">新增</el-button>
</el-col>
<el-col :span="24" style="margin-top: 0.2%">
<el-table
stripe
:data="tableData"
border
:height="height"
style="width: 100%"
>
<el-table-column
align="center"
prop="tcm"
label="套餐名"
></el-table-column>
<el-table-column
align="center"
prop="tcll"
label="套餐流量(MB)"
></el-table-column>
<el-table-column
align="center"
prop="xgr"
label="修改人"
></el-table-column>
<el-table-column
align="center"
prop="xgsj"
label="修改时间"
></el-table-column>
<el-table-column
align="center"
prop="lx"
label="类型"
></el-table-column>
<el-table-column label="操作" align="center" width="180">
<template slot-scope="scope">
<el-button
@click="handleClick(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-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="pageData.pageNum"
:page-sizes="[23, 30, 50, 100]"
:page-size="pageData.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="pageData.total"
>
</el-pagination>
</el-col>
</el-row>
<el-dialog
:close-on-click-modal="false"
:title="title + '套餐'"
:visible.sync="dialogVisible"
width="20%"
:before-close="handleClose"
>
<el-form ref="form" :model="formData" label-width="100px">
<el-form-item label="套餐名称:">
<el-input v-model="formData.name" style="width: 83%"></el-input>
</el-form-item>
<el-form-item label="套餐流量:">
<el-select v-model="formData.flow" placeholder="请选择套餐流量">
<el-option
v-for="item in tcoptions"
: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.tctype" placeholder="请选择套餐类型">
<el-option
v-for="item in tclxoptions"
: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.type" placeholder="请选择二级类型">
<el-option
v-for="item in erjitcoptions"
: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="submitData">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import { tableheight } from "@/assets/commjs/common";
import pagination from "@/views/components/pagination/index";
export default {
components: {
pagination,
},
data() {
return {
dialogVisible: false,
seach: "",
height: "",
pageData: {
pageNum: 1,
pageSize: 23,
total: 100,
},
formData: {
name: "",
flow: "",
tctype: 1,
type: 1,
},
tcoptions: [],
tclxoptions: [
{ id: 1, name: "通用" },
{ id: 2, name: "普通" },
],
erjitcoptions: [
{ id: 1, name: "通用" },
{ id: 2, name: "普通" },
],
tableData: [
{
id: "1",
tcm: "基础套餐",
tcll: 1024,
xgr: "管理员",
xgsj: "2022-06-12 12:22:12",
lx: "默认套餐",
},
{
id: "2",
tcm: "基础套餐2",
tcll: 1024,
xgr: "管理员2",
xgsj: "2022-06-12 12:22:12",
lx: "默认套餐1",
},
],
title: "",
};
},
created() {},
mounted() {
this.height = tableheight() + "px";
},
methods: {
//改变页触发方法
handleCurrentChange(val) {
// console.log(`当前页: ${val}`);
},
//改变条数触发方法
handleSizeChange(val) {
// console.log(`每页 ${val} 条`);
},
//修改方法
handleClick(row) {
this.form = {
name: "",
flow: "",
tctype: "",
type: "",
};
this.dialogVisible = true;
this.title = "修改";
},
//删除方法
deleteData(row) {
this.$confirm("此操作将永久删除该条记录, 是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
this.$message({
type: "success",
message: "删除成功!",
});
})
.catch(() => {
this.$message({
type: "info",
message: "已取消删除",
});
});
},
//关闭弹窗
handleClose() {
this.dialogVisible = false;
},
//新增
add() {
this.form = {
name: "",
flow: "",
tctype: "",
type: "",
};
this.dialogVisible = true;
this.title = "新增";
},
//提交
submitData() {
this.dialogVisible = false;
},
},
};
</script>

444
src/views/device-boot/setconfig/trafficpolicy.vue Normal file
View File

@@ -0,0 +1,444 @@
<!--流量策略-->
<template>
<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="searchContent" 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"
icon="el-icon-plus"
>新增</el-button
>
</el-form-item>
</div>
</div>
</el-form>
<el-table
stripe
:data="tableData"
border
:height="height + 'px'"
header-cell-class-name="table_header"
highlight-current-row
style="width: 100%"
>
<el-table-column
align="center"
prop="name"
label="策略名"
></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
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="comPerData"
label="普通占比(%)"
></el-table-column>
<el-table-column
align="center"
prop="warnPerData"
label="预警占比(%)"
></el-table-column>
<el-table-column
align="center"
prop="alertPerData"
label="告警占比(%)"
></el-table-column>
<el-table-column label="操作" align="center" width="200">
<template slot-scope="scope">
<el-button
@click="handleClick(scope.row)"
type="primary"
size="mini"
icon="el-icon-edit"
>修改</el-button
>
<el-button
type="danger"
size="mini"
@click="deleteData(scope.row)"
icon="el-icon-delete"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
<!--新增策略弹框-->
<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="120px">
<el-form-item label="策略名称:" prop="name">
<el-input v-model="formData.name"></el-input>
</el-form-item>
<el-form-item label="策略类型:" class="top" prop="flag">
<el-select
v-model="formData.flag"
placeholder="请选择类型"
style="width: 100%"
>
<el-option
v-for="item in tcoptions"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</el-form-item>
<div style="display: flex">
<el-form-item label="普通占比(%):" class="mt10" prop="comPerData">
<div
style="
display: flex;
justify-content: space-between;
flex-grow: 2;
"
>
<el-input
v-model="formData.comPerData"
style="width:50%"
></el-input>
<el-select
v-model="formData.comList"
multiple
collapse-tags
placeholder="请选择"
>
<el-option
v-for="item in listOptions"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
</el-form-item>
</div>
<div style="display: flex">
<el-form-item label="预警占比(%):" class="mt10" prop="warnPerData">
<div
style="
display: flex;
justify-content: space-between;
flex-grow: 2;
"
>
<el-input
v-model="formData.warnPerData"
style="width:50%"
></el-input>
<el-select
v-model="formData.warnList"
multiple
collapse-tags
placeholder="请选择"
>
<el-option
v-for="item in listOptions"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
</el-form-item>
</div>
<div style="display: flex">
<el-form-item label="告警占比(%):" class="mt10" prop="alertPerData">
<div
style="
display: flex;
justify-content: space-between;
flex-grow: 2;
"
>
<el-input
v-model="formData.alertPerData"
style="width:50%"
></el-input>
<el-select
v-model="formData.alertList"
multiple
collapse-tags
placeholder="请选择"
>
<el-option
v-for="item in listOptions"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
</el-form-item>
</div>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="handleClose">取 消</el-button>
<el-button type="primary" @click="submitData('form')">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import { tableheight } from "@/assets/commjs/common";
import flow from "@/api/device/flow";
import { dicData } from "@/assets/commjs/dictypeData";
export default {
name: "flowmage",
data() {
return {
dialogVisible: false,
type: 0, //0新增 1修改
search: "",
searchContent: "",
height: "",
form: {},
formData: {
name: "",
flag: 1,
comPerData: null,
warnPerData: null,
alertPerData: null,
comList: [],
warnList: [],
alertList: [],
},
stashList: [],
rules: {
name: [
{ required: true, message: "请输入流量策略名称", trigger: "blur" },
{ min: 1, max: 20, message: "长度在 3 到 5 个字符", trigger: "blur" },
],
flag: [
{ required: true, message: "策略类型不可为空", trigger: "blur" },
],
comPerData: [
{ required: true, message: "普通占比不可为空", trigger: "blur" },
],
warnPerData: [
{ required: true, message: "预警占比不可为空", trigger: "blur" },
],
alertPerData: [
{ required: true, message: "告警占比不可为空", trigger: "blur" },
],
},
tcoptions: [
{
value: 0,
label: "定制",
},
{
value: 1,
label: "默认通用",
},
],
tableData: [],
title: "",
listOptions: [],
};
},
watch: {
searchContent: {
handler(newValue, oldValue) {
let self = this;
if (newValue) {
//这里要从暂存的所有数据中过滤 放到展示的数组中
self.tableData = self.stashList.filter((item) => {
return item.name.includes(newValue);
});
} else {
self.tableData = self.stashList;
}
},
deep: true,
},
},
created() {
this.getList();
this.getDevFun();
},
mounted() {
this.setHeight()
window.addEventListener('resize', this.setHeight)
},
beforeDestroy() {
window.removeEventListener('resize', this.setHeight)
},
methods: {
setHeight() {
this.height = window.sessionStorage.getItem("appheight") - 65;
},
//改变页触发方法
// 表单重置
resetForm2() {
if (this.$refs["form"]) {
this.$refs["form"].resetFields();
}
},
//修改方法
handleClick(row) {
this.type = 1;
flow.getFlowStrategyById(row.id).then((res) => {
this.formData = {
id: res.data.id,
name: res.data.name,
flag: res.data.flag,
comPerData: res.data.comPerData,
warnPerData: res.data.warnPerData,
alertPerData: res.data.alertPerData,
comList: res.data.comList,
warnList: res.data.warnList,
alertList: res.data.alertList,
};
}),
(this.dialogVisible = true);
this.title = "修改";
},
//删除方法
deleteData(row) {
this.$confirm("此操作将永久删除该条记录, 是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
flow.deleteRateOfFlowStrategy(row.id).then((response) => {
if (response.code === "A0000") {
this.$message({
type: "success",
message: "删除成功!",
});
this.getList();
}
});
})
.catch(() => {
this.$message({
type: "info",
message: "已取消删除",
});
});
},
//关闭弹窗
handleClose() {
this.dialogVisible = false;
this.resetForm2()
},
//新增
add() {
this.type = 0;
(this.formData = {
name: "",
flag: 1,
comPerData: null,
warnPerData: null,
alertPerData: null,
comList: [],
warnList: [],
alertList: [],
}),
(this.dialogVisible = true);
this.title = "新增";
},
//提交
submitData(form) {
this.$refs[form].validate((valid) => {
if (valid) {
if (
this.formData.comList == [] ||
this.formData.warnList == [] ||
this.formData.alertList.length == []
) {
this.$message.warning("装置功能不可为空");
return;
}
if (this.type === 0) {
flow.addRateOfFlowStrategy(this.formData).then((response) => {
if (response.code === "A0000") {
this.$message.success("新增成功");
this.dialogVisible = false;
this.getList();
}
});
} else {
flow.updateRateOfFlowStrategy(this.formData).then((response) => {
if (response.code === "A0000") {
this.$message.success("修改成功");
this.dialogVisible = false;
this.getList();
}
});
}
} else {
return false;
}
});
},
//获取主列表
getList() {
flow.getFlowStrategyList().then((response) => {
if (response.code === "A0000") {
this.tableData = response.data;
this.stashList = this.tableData; //暂存数组 当搜索为空时候 数组展示所有数据
}
});
},
//获取所有装置功能
getDevFun() {
let code = "Dev_Fun";
this.listOptions = dicData(code, []);
},
},
};
</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>