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

115
src/views/govern/alarm/boxing.vue Normal file
View File

@@ -0,0 +1,115 @@
<template>
<div>
<el-page-header @back="goBack" content="波形分析"></el-page-header>
<div class="boxing">
<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
<el-tab-pane lazy label="瞬时波形" name="first">
</el-tab-pane>
<el-tab-pane lazy label="RMS波形" name="second">
</el-tab-pane>
</el-tabs>
<div id="瞬时波形" style="height: 50vh;" v-if="activeName == 'first'"></div>
<div id="RMS波形" style="height: 50vh;" v-if="activeName == 'second'"></div>
</div>
</div>
</template>
<script>
import Device from './device'
import Steady from './steady'
import Transient from './transient'
import * as echarts from 'echarts';
export default {
components: {
Device,
Steady,
Transient
},
data() {
return {
activeName: 'first',
};
},
mounted() {
this.初始化瞬时波形();
},
methods: {
goBack() {
this.$router.push({
path: '/app/alarm?tab=3'
})
},
handleClick(tab, event) {
console.log(tab, event);
setTimeout(() => {
if (this.activeName == 'first') {
this.初始化瞬时波形();
} else {
this.初始化RMS波形();
}
}, 100);
},
初始化RMS波形() {
console.log("init");
var chartDom = document.getElementById('RMS波形');
var myChart = echarts.init(chartDom);
var option;
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [20, 22, 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, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44],
type: 'line',
smooth: true
}
]
};
option && myChart.setOption(option)
window.echartsArr.push(myChart);
},
初始化瞬时波形() {
console.log("init");
var chartDom = document.getElementById('瞬时波形');
var myChart = echarts.init(chartDom);
var option;
option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
yAxis: {
type: 'value'
},
series: [
{
data: [820, 932, 901, 934, 1290, 1330, 1320, 820, 932, 901, 934, 1290, 1330, 1320, 820, 932, 901, 934, 1290, 1330, 1320, 820, 932, 901, 934, 1290, 1330, 1320, 820, 932, 901, 934, 1290, 1330, 1320, 820, 932, 901, 934, 1290, 1330, 1320],
type: 'line',
smooth: true
}
]
};
option && myChart.setOption(option)
window.echartsArr.push(myChart);
},
}
};
</script>
<style lang="scss">
.el-page-header {
padding: 20px;
background: #fff;
}
.boxing {
padding: 10px;
}
</style>

194
src/views/govern/alarm/device.vue Normal file
View File

@@ -0,0 +1,194 @@
<template>
<div class="dictionary" >
<el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item label="数据来源:">
<el-cascader placeholder="请选择数据来源"
@change="sourceChange"
:options="deviceTree"
:show-all-levels="false"
:props="{ checkStrictly: true }"
clearable></el-cascader>
</el-form-item>
<el-form-item label="级别:">
<el-select v-model="formInline.level" placeholder="请选择级别" clearable>
<el-option v-for="item in rankOptions" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item>
<timepicker ref="timepk" :interval="3"></timepicker>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="queryData" icon="el-icon-search">查询</el-button>
</el-form-item>
</el-form>
<el-table
stripe
highlight-current-row
header-cell-class-name="table_header"
style="width: 100%;"
:data="tableData"
height="calc(100vh - 280px)"
border
v-loading="loading"
>
<el-table-column prop="engineeringName" label="工程名称" align="center">
</el-table-column>
<el-table-column prop="projectName" label="项目名称" align="center">
</el-table-column>
<el-table-column prop="equipmentName" label="设备名称" align="center">
</el-table-column>
<el-table-column prop="code" label="告警代码" align="center">
</el-table-column>
<el-table-column prop="showName" label="事件描述" align="center">
</el-table-column>
<!-- <el-table-column prop="tagName" label="级别" align="center">-->
<!-- </el-table-column>-->
<el-table-column prop="startTime" label="发生时刻" align="center" min-width="150px">
</el-table-column>
<!-- <el-table-column prop="date2" label="结束时间" align="center">-->
<!-- </el-table-column>-->
<!-- <el-table-column label="操作" width="220px" fixed="right" >
<template slot-scope="scope">
<el-button size="mini" type="primary" @click="edit">绑定治理指标</el-button>
</template>
</el-table-column> -->
</el-table>
<el-pagination
background
align="right"
@size-change="handleSizeChange"
@current-change="pageChange"
:current-page="formInline.pageNum"
:page-sizes="[20, 30, 40, 50, 100]"
:page-size="formInline.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
class="mt10"
>
</el-pagination>
</div>
</template>
<script>
import timepicker from "@/views/components/TimePicker/index4.vue";
import {queryEventpage} from "@/api/app/log";
export default {
components: {timepicker},
data() {
return {
loading: false,
formInline: {
deviceId: "",
endTime: "",
engineeringid: "",
eventIds: [],
level: "",
pageNum: 1,
pageSize: 50,
projectId: "",
startTime: "",
status: "",
target: [],
type: 3,
userId: ""
},
total: 0,
rankOptions: [{
value: '1',
label: '1级'
}, {
value: '2',
label: '2级'
}, {
value: '3',
label: '3级'
}],
tableData: [],
tagList: []
}
},
props: {
deviceTree: {
type: Array,
default: () => {
return []
}
},
},
computed: {
},
mounted() {
this.$tools.getDictData('app_event').then(res => {
this.tagList = res
console.log(this.tagList)
})
this.queryData()
},
methods: {
sourceChange(e) {
console.log(e)
this.formInline.engineeringid = e[0] || ''
this.formInline.projectId = e[1] || ''
this.formInline.deviceId = e[2] || ''
},
pageChange(e) {
console.log('pageChange!')
console.log(e)
this.formInline.pageNum = e
this.queryData()
},
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
this.formInline.pageNum = 1
this.formInline.pageSize = val
this.queryData()
},
queryData() {
this.loading = true
this.formInline.startTime = this.$refs.timepk.timeValue[0]
this.formInline.endTime = this.$refs.timepk.timeValue[1]
queryEventpage(this.formInline).then(res => {
console.log(res)
this.loading = false
if (res.code === 'A0000') {
this.tableData = res.data.records.map(item => {
return {
tagName: this.tagList.find(item2 => item2.code === item.tag) ? this.tagList.find(item2 => item2.code === item.tag).name : item.tag,
...item
}
})
this.total = res.data.total
}
})
},
onSubmit() {
console.log('submit!');
},
del() {
this.$confirm('确定删除该字段吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$message({
type: 'success',
message: '删除成功!'
});
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
},
}
}
</script>
<style lang="scss">
</style>

72
src/views/govern/alarm/index.vue Normal file
View File

@@ -0,0 +1,72 @@
<template>
<Page>
<div class="setting">
<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
<el-tab-pane lazy label="设备告警" name="first">
<Device :deviceTree="deviceTree" v-if="activeName == 'first'" />
</el-tab-pane>
<el-tab-pane lazy label="稳态越限告警" name="second">
<Steady :deviceTree="deviceTree" v-if="activeName == 'second'" />
</el-tab-pane>
<el-tab-pane lazy label="暂态事件" name="three">
<Transient :deviceTree="deviceTree" v-if="activeName == 'three'" />
</el-tab-pane>
</el-tabs>
</div>
</Page>
</template>
<script>
import Device from './device'
import Steady from './steady'
import Transient from './transient'
import { getDeviceTree } from '@/api/app/device.js'
export default {
name: 'GovernAlarmIndex',
components: {
Device,
Steady,
Transient
},
data() {
return {
activeName: 'first',
deviceTree: []
}
},
created() {
getDeviceTree().then(res => {
res.data.forEach(item => {
item.value = item.id
item.label = item.name
item.children.forEach(child => {
child.value = child.id
child.label = child.name
child.children.forEach(grand => {
grand.value = grand.id
grand.label = grand.name
delete grand.children
})
})
})
this.deviceTree = res.data
})
},
mounted() {
console.log(this.$route)
if (this.$route.query.tab == 3) {
this.activeName = 'three'
}
},
methods: {
handleClick(tab, event) {
console.log(tab, event)
}
}
}
</script>
<style lang="scss">
.setting {
}
</style>

194
src/views/govern/alarm/steady.vue Normal file
View File

@@ -0,0 +1,194 @@
<template>
<div class="dictionary">
<el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item label="数据来源:">
<el-cascader
placeholder="请选择数据来源"
@change="sourceChange"
:options="deviceTree"
:show-all-levels="false"
:props="{ checkStrictly: true }"
clearable
></el-cascader>
</el-form-item>
<el-form-item label="级别:">
<el-select v-model="formInline.level" placeholder="请选择级别" clearable>
<el-option
v-for="item in rankOptions"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
<el-form-item>
<timepicker ref="timepk" :interval="3"></timepicker>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="queryData" icon="el-icon-search">查询</el-button>
</el-form-item>
</el-form>
<el-table
stripe
highlight-current-row
header-cell-class-name="table_header"
style="width: 100%"
:data="tableData"
height="calc(100vh - 280px)"
border
v-loading="loading"
>
<el-table-column prop="engineeringName" label="工程名称" align="center"></el-table-column>
<el-table-column prop="projectName" label="项目名称" align="center"></el-table-column>
<el-table-column prop="equipmentName" label="设备名称" align="center"></el-table-column>
<el-table-column prop="showName" label="事件描述" align="center"></el-table-column>
<!-- <el-table-column prop="tagName" label="级别" align="center">-->
<!-- </el-table-column>-->
<el-table-column prop="startTime" label="发生时刻" align="center" min-width="150px"></el-table-column>
<!-- <el-table-column prop="date2" label="结束时间" align="center">-->
<!-- </el-table-column>-->
<!-- <el-table-column label="操作" width="220px" fixed="right" >
<template slot-scope="scope">
<el-button size="mini" type="primary" @click="edit">绑定治理指标</el-button>
</template>
</el-table-column> -->
</el-table>
<el-pagination
background
align="right"
@size-change="handleSizeChange"
@current-change="pageChange"
:current-page="formInline.pageNum"
:page-sizes="[20, 30, 40, 50, 100]"
:page-size="formInline.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
class="mt10"
></el-pagination>
</div>
</template>
<script>
import timepicker from '@/views/components/TimePicker/index4.vue'
import { queryEventpage } from '@/api/app/log'
export default {
components: { timepicker },
data() {
return {
loading: false,
formInline: {
deviceId: '',
endTime: '',
engineeringid: '',
eventIds: [],
level: '',
pageNum: 1,
pageSize: 50,
projectId: '',
startTime: '',
status: '',
target: [],
type: 1,
userId: ''
},
total: 0,
rankOptions: [
{
value: '1',
label: '1级'
},
{
value: '2',
label: '2级'
},
{
value: '3',
label: '3级'
}
],
tableData: [],
tagList: []
}
},
props: {
deviceTree: {
type: Array,
default: () => {
return []
}
}
},
computed: {},
mounted() {
this.$tools.getDictData('app_event').then(res => {
this.tagList = res
console.log(this.tagList)
})
this.queryData()
},
methods: {
sourceChange(e) {
console.log(e)
this.formInline.engineeringid = e[0] || ''
this.formInline.projectId = e[1] || ''
this.formInline.deviceId = e[2] || ''
},
pageChange(e) {
console.log('pageChange!')
console.log(e)
this.formInline.pageNum = e
this.queryData()
},
handleSizeChange(val) {
console.log(`每页 ${val} 条`)
this.formInline.pageNum = 1
this.formInline.pageSize = val
this.queryData()
},
queryData() {
this.loading = true
this.formInline.startTime = this.$refs.timepk.timeValue[0]
this.formInline.endTime = this.$refs.timepk.timeValue[1]
queryEventpage(this.formInline).then(res => {
console.log(res)
this.loading = false
if (res.code === 'A0000') {
this.tableData = res.data.records.map(item => {
return {
tagName: this.tagList.find(item2 => item2.code === item.tag)
? this.tagList.find(item2 => item2.code === item.tag).name
: item.tag,
...item
}
})
this.total = res.data.total
}
})
},
onSubmit() {
console.log('submit!')
},
del() {
this.$confirm('确定删除该字段吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
this.$message({
type: 'success',
message: '删除成功!'
})
})
.catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
})
})
}
}
}
</script>
<style lang="scss"></style>

336
src/views/govern/alarm/transient.vue Normal file
View File

@@ -0,0 +1,336 @@
<template>
<div class="dictionary" >
<div v-show="view">
<el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item label="数据来源:">
<el-cascader placeholder="请选择数据来源"
@change="sourceChange"
:options="deviceTree"
:show-all-levels="false"
:props="{ checkStrictly: true }"
clearable></el-cascader>
</el-form-item>
<el-form-item label="级别:">
<el-select v-model="formInline.level" placeholder="请选择级别" clearable>
<el-option v-for="item in rankOptions" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item>
<timepicker ref="timepk" :interval="3"></timepicker>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="queryData" icon="el-icon-search">查询</el-button>
</el-form-item>
</el-form>
<el-table
stripe
highlight-current-row
header-cell-class-name="table_header"
style="width: 100%;"
:data="tableData"
height="calc(100vh - 280px)"
border
v-loading="loading"
>
<el-table-column prop="engineeringName" label="工程名称" align="center" min-width="160">
</el-table-column>
<el-table-column prop="projectName" label="项目名称" align="center" min-width="160">
</el-table-column>
<el-table-column prop="equipmentName" label="设备名称" align="center" min-width="120">
</el-table-column>
<el-table-column prop="showName" label="事件描述" align="center" min-width="160">
</el-table-column>
<el-table-column prop="evtParamPosition" label="事件发生位置" align="center" min-width="160">
</el-table-column>
<el-table-column prop="evtParamPhase" label="相别" align="center" width="80px">
</el-table-column>
<el-table-column prop="evtParamTm" label="持续时间(s)" align="center" min-width="140">
</el-table-column>
<el-table-column prop="evtParamVVaDepth" label="暂降深度" align="center">
</el-table-column>
<!-- <el-table-column prop="tagName" label="级别" align="center">-->
<!-- </el-table-column>-->
<el-table-column prop="startTime" label="发生时刻" align="center" min-width="180">
</el-table-column>
<!-- <el-table-column prop="date2" label="结束时间" align="center">-->
<!-- </el-table-column>-->
<el-table-column label="操作" width="220px" align="center">
<template slot-scope="scope">
<el-button size="mini" icon="el-icon-s-marketing" type="primary" v-if="scope.row.wavePath && scope.row.evtParamTm<20" @click="getboxin(scope.row)">波形分析</el-button>
<el-button v-else size="mini" icon="el-icon-s-marketing" type="info" :disabled="true">暂无波形</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
background
align="right"
@size-change="handleSizeChange"
@current-change="pageChange"
:current-page="formInline.pageNum"
:page-sizes="[20, 30, 40, 50, 100]"
:page-size="formInline.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
class="mt10"
>
</el-pagination>
</div>
<el-row>
<el-row>
<el-col :span="12">
<span
v-if="view2"
style="font-size: 14px; font-weight: ; line-height: 30px;"
>值类型选择:</span
>
<el-select
v-if="view2"
@change="changeView"
v-model="value"
placeholder="请选择值类型"
>
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</el-col>
<el-col :span="12">
<el-button
v-if="view2"
@click="backbxlb"
type="primary"
class="el-icon-refresh-right"
style="float: right;"
>返回</el-button
>
</el-col>
</el-row>
<el-tabs v-if="view2" v-model="bxactiveName" @tab-click="bxhandleClick">
<el-tab-pane
label="瞬时波形"
name="ssbx"
:style="'height:' + bxecharts + ';overflow-y: scroll;'"
>
<shushiboxi
v-if="bxactiveName == 'ssbx' && showBoxi"
:value="value"
:boxoList="boxoList"
:wp="wp"
></shushiboxi>
</el-tab-pane>
<el-tab-pane
label="RMS波形"
name="rmsbx"
:style="'height:' + bxecharts + ';overflow-y: scroll;'"
>
<rmsboxi
v-if="bxactiveName == 'rmsbx' && showBoxi"
:value="value"
:boxoList="boxoList"
:wp="wp"
></rmsboxi>
</el-tab-pane>
</el-tabs>
<!-- <xiebofenxi ref="child" :bxshuju="bxshuju" @backfh="back"></xiebofenxi> -->
</el-row>
</div>
</template>
<script>
import timepicker from "@/views/components/TimePicker/index4.vue";
import {queryEventpage,getTransientAnalyseWave} from "@/api/app/log";
import rmsboxi from "@/views/Event-boot/components/echarts/rmsboxi";
import shushiboxi from "@/views/Event-boot/components/echarts/shushiboxi";
export default {
components: {timepicker,rmsboxi,shushiboxi},
data() {
return {
loading: false,
view: true,
view2: false,
formInline: {
deviceId: "",
endTime: "",
engineeringid: "",
eventIds: [],
level: "",
pageNum: 1,
pageSize: 50,
projectId: "",
startTime: "",
status: "",
target: [],
type: 0,
userId: ""
},
total: 0,
rankOptions: [{
value: '1',
label: '1级'
}, {
value: '2',
label: '2级'
}, {
value: '3',
label: '3级'
}],
tableData: [],
tagList: [],
bxecharts: null,
boxoList: {},
value: 1,
options: [
{
value: 1,
label: "一次值",
},
{
value: 2,
label: "二次值",
},
],
wp:{},
bxactiveName: "ssbx",
showBoxi: true,
}
},
props: {
deviceTree: {
type: Array,
default: () => {
return []
}
}
},
computed: {
vth() {
return window.sessionStorage.getItem("appheight") - 155;
},
},
mounted() {
this.bxecharts = window.sessionStorage.getItem("appheight") - 160 + "px";
this.$tools.getDictData('app_event').then(res => {
this.tagList = res
//console.log(this.tagList)
})
this.queryData()
},
methods: {
getboxin(row){
// let data = {
// eventId: row.id,
// };
this.boxoList = row;
getTransientAnalyseWave(row.id).then((res) => {
if (res != undefined) {
this.wp = res.data;
this.view = false;
this.view2 = true;
}
});
},
//返回触发事件
backbxlb() {
this.view = true;
this.view2 = false;
},
changeView() {
this.showBoxi = false;
setTimeout(() => {
this.showBoxi = true;
}, 0);
},
//里层波形tab标签页触发事件
bxhandleClick(tab, event) {
if (tab.name == "ssbx") {
this.bxactiveName = "ssbx";
} else if (tab.name == "rmsbx") {
this.bxactiveName = "rmsbx";
}
// console.log(tab, event);
},
sourceChange(e) {
console.log(e)
this.formInline.engineeringid = e[0] || ''
this.formInline.projectId = e[1] || ''
this.formInline.deviceId = e[2] || ''
},
pageChange(e) {
console.log('pageChange!')
console.log(e)
this.formInline.pageNum = e
this.queryData()
},
handleSizeChange(val) {
console.log(`每页 ${val} 条`);
this.formInline.pageNum = 1
this.formInline.pageSize = val
this.queryData()
},
queryData() {
this.loading = true
this.formInline.startTime = this.$refs.timepk.timeValue[0]
this.formInline.endTime = this.$refs.timepk.timeValue[1]
queryEventpage(this.formInline).then(res => {
console.log(res)
this.loading = false
if (res.code === 'A0000') {
this.tableData =[]
let tableData = res.data.records.map(item => {
return {
tagName: this.tagList.find(item2 => item2.code === item.tag) ? this.tagList.find(item2 => item2.code === item.tag).name : item.tag,
info:item.dataSet.map(item=>item.showName+ ':' + item.value +item.unit).join(','),
...item
}
})
let str =[]
tableData.forEach(m => {
str = m.evtParamTm.split("s");
let str1 =str[0]
str1 =Number(str[0])
m.evtParamTm = str1
// if(str1<20){
this.tableData.push(m)
// }
});
this.total =res.data.total
//this.total = this.tableData.length
}
})
},
onSubmit() {
console.log('submit!');
},
del() {
this.$confirm('确定删除该字段吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.$message({
type: 'success',
message: '删除成功!'
});
}).catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
});
});
},
}
}
</script>
<style lang="scss">
</style>

358
src/views/govern/analyze/DVR/index.vue Normal file
View File

@@ -0,0 +1,358 @@
<template>
<Page>
<div class="steady">
<DeviceTree @selectDevice="selectDevice" />
<div class="content" style="overflow: hidden" id="fgh">
<!-- <el-form :inline="true" :model="formInline" class="demo-form-inline">-->
<!-- <el-form-item label="数据来源:">-->
<!-- <el-cascader-->
<!-- @change="sourceChange"-->
<!-- :options="deviceTree"-->
<!-- :show-all-levels="false"-->
<!-- :props="{ checkStrictly: true }"-->
<!-- clearable></el-cascader>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="级别:">-->
<!-- <el-select v-model="formInline.level" placeholder="请选择" clearable>-->
<!-- <el-option v-for="item in rankOptions" :key="item.value" :label="item.label"-->
<!-- :value="item.value">-->
<!-- </el-option>-->
<!-- </el-select>-->
<!-- </el-form-item>-->
<!-- <el-form-item>-->
<!-- <timepicker ref="timepk" :interval="3"></timepicker>-->
<!-- </el-form-item>-->
<!-- <el-form-item>-->
<!-- <el-button type="primary" @click="queryData" icon="el-icon-search">查询</el-button>-->
<!-- </el-form-item>-->
<!-- </el-form>-->
<el-table
stripe
highlight-current-row
header-cell-class-name="table_header"
style="width: 100%"
:data="tableData"
height="calc(100vh - 180px)"
border
v-loading="loading"
>
<el-table-column prop="showName" label="事件描述" align="center"></el-table-column>
<el-table-column
prop="evtParamPosition"
label="事件发生位置"
align="center"
min-width="160"
></el-table-column>
<el-table-column prop="evtParamPhase" label="相别" align="center" width="80px"></el-table-column>
<el-table-column
prop="evtParamTm"
label="持续时间(s)"
align="center"
min-width="140"
></el-table-column>
<el-table-column prop="evtParamVVaDepth" label="暂降深度" align="center"></el-table-column>
<!-- <el-table-column prop="tagName" label="级别" align="center">-->
<!-- </el-table-column>-->
<el-table-column prop="startTime" label="发生时刻" align="center" min-width="180"></el-table-column>
<!-- <el-table-column prop="date2" label="结束时间" align="center">-->
<!-- </el-table-column>-->
<el-table-column label="操作" width="220px" align="center">
<template slot-scope="scope">
<el-button
size="mini"
icon="el-icon-s-marketing"
type="primary"
v-if="scope.row.wavePath && scope.row.evtParamTm < 20"
@click="getboxin(scope.row)"
>
波形分析
</el-button>
<el-button v-else size="mini" icon="el-icon-s-marketing" type="info" :disabled="true">
暂无波形
</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
background
align="right"
@size-change="handleSizeChange"
@current-change="pageChange"
:current-page="formInline.pageNum"
:page-sizes="[20, 30, 40, 50, 100]"
:page-size="formInline.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
class="mt10"
></el-pagination>
</div>
<el-tabs v-if="view2" v-model="bxactiveName" @tab-click="bxhandleClick">
<el-row>
<el-col :span="12">
<span v-if="view2" style="font-size: 14px; font-weight: ; line-height: 30px">值类型选择:</span>
<el-select v-if="view2" @change="changeView" v-model="value" placeholder="请选择值类型">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-col>
<el-col :span="12">
<el-button
v-if="view2"
@click="backbxlb"
type="primary"
class="el-icon-refresh-right"
style="float: right"
>
返回
</el-button>
</el-col>
</el-row>
<el-tab-pane label="瞬时波形" name="ssbx" :style="'height:' + bxecharts + ';overflow-y: scroll;'">
<shushiboxi
v-if="bxactiveName == 'ssbx' && showBoxi"
:value="value"
:boxoList="boxoList"
:wp="wp"
></shushiboxi>
</el-tab-pane>
<el-tab-pane label="RMS波形" name="rmsbx" :style="'height:' + bxecharts + ';overflow-y: scroll;'">
<rmsboxi
v-if="bxactiveName == 'rmsbx' && showBoxi"
:value="value"
:boxoList="boxoList"
:wp="wp"
></rmsboxi>
</el-tab-pane>
</el-tabs>
</div>
</Page>
</template>
<script>
import timepicker from '@/views/components/TimePicker/index4.vue'
import { queryEventpage, getTransientAnalyseWave } from '@/api/app/log'
import rmsboxi from '@/views/Event-boot/components/echarts/rmsboxi'
import shushiboxi from '@/views/Event-boot/components/echarts/shushiboxi'
import DeviceTree from '../../components/deviceTree'
export default {
components: { timepicker, rmsboxi, shushiboxi, DeviceTree },
data() {
return {
loading: false,
view: true,
view2: false,
formInline: {
deviceId: '',
endTime: '',
engineeringid: '',
eventIds: [],
level: '',
pageNum: 1,
pageSize: 50,
projectId: '',
startTime: '',
status: '',
target: [],
type: 0,
userId: ''
},
total: 0,
rankOptions: [
{
value: '1',
label: '1级'
},
{
value: '2',
label: '2级'
},
{
value: '3',
label: '3级'
}
],
tableData: [],
tagList: [],
bxecharts: null,
boxoList: {},
value: 1,
options: [
{
value: 1,
label: '一次值'
},
{
value: 2,
label: '二次值'
}
],
wp: {},
bxactiveName: 'ssbx',
showBoxi: true
}
},
props: {
deviceTree: {
type: Array,
default: () => {
return []
}
}
},
computed: {
vth() {
return window.sessionStorage.getItem('appheight') - 75
}
},
mounted() {
this.setHeight()
window.addEventListener('resize', this.setHeight)
this.$tools.getDictData('app_event').then(res => {
this.tagList = res
//console.log(this.tagList)
})
},
beforeDestroy() {
window.removeEventListener('resize', this.setHeight)
},
methods: {
setHeight() {
this.bxecharts = window.sessionStorage.getItem('appheight') - 160 + 'px'
},
selectDevice(e) {
console.log(e)
this.formInline.deviceId = e.id
this.queryData()
},
getboxin(row) {
// let data = {
// eventId: row.id,
// };
this.boxoList = row
getTransientAnalyseWave(row.id).then(res => {
if (res != undefined) {
this.wp = res.data
this.view = false
this.view2 = true
}
})
},
//返回触发事件
backbxlb() {
this.view = true
this.view2 = false
},
changeView() {
this.showBoxi = false
setTimeout(() => {
this.showBoxi = true
}, 0)
},
//里层波形tab标签页触发事件
bxhandleClick(tab, event) {
if (tab.name == 'ssbx') {
this.bxactiveName = 'ssbx'
} else if (tab.name == 'rmsbx') {
this.bxactiveName = 'rmsbx'
}
// console.log(tab, event);
},
sourceChange(e) {
console.log(e)
this.formInline.engineeringid = e[0] || ''
this.formInline.projectId = e[1] || ''
this.formInline.deviceId = e[2] || ''
},
pageChange(e) {
console.log('pageChange!')
console.log(e)
this.formInline.pageNum = e
this.queryData()
},
handleSizeChange(val) {
console.log(`每页 ${val} 条`)
this.formInline.pageNum = 1
this.formInline.pageSize = val
this.queryData()
},
queryData() {
this.loading = true
// this.formInline.startTime = this.$refs.timepk.timeValue[0]
// this.formInline.endTime = this.$refs.timepk.timeValue[1]
queryEventpage(this.formInline).then(res => {
console.log(res)
this.loading = false
if (res.code === 'A0000') {
this.tableData = []
let tableData = res.data.records.map(item => {
return {
tagName: this.tagList.find(item2 => item2.code === item.tag)
? this.tagList.find(item2 => item2.code === item.tag).name
: item.tag,
info: item.dataSet.map(item => item.showName + ':' + item.value + item.unit).join(','),
...item
}
})
let str = []
tableData.forEach(m => {
str = m.evtParamTm.split('s')
let str1 = str[0]
str1 = Number(str[0])
m.evtParamTm = str1
// if(str1<20){
this.tableData.push(m)
// }
})
this.total = res.data.total
}
})
},
onSubmit() {
console.log('submit!')
},
del() {
this.$confirm('确定删除该字段吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
})
.then(() => {
this.$message({
type: 'success',
message: '删除成功!'
})
})
.catch(() => {
this.$message({
type: 'info',
message: '已取消删除'
})
})
}
}
}
</script>
<style lang="scss">
.steady {
display: flex;
height: 100%;
width: 100%;
.el-tree {
// height: calc(100vh - 178px) !important;
}
}
#lsxbjbl2,
#ssxbhl2 {
width: 100%;
height: 300px;
}
</style>

409
src/views/govern/analyze/steady/comp/jiBianLvLiShi.vue Normal file
View File

@@ -0,0 +1,409 @@
<template>
<div class="content" style="display: block" id="jkl" v-loading="loading">
<el-form :inline="true">
<el-form-item label="统计指标:">
<el-select v-model="formData.statisticalId" filterable placeholder="请选择">
<el-option
v-for="item in zblist"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="值类型:">
<el-select v-model="formData.valueType" filterable placeholder="请选择">
<el-option
v-for="item in typelist"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="时间:">
<el-date-picker
v-model="formData.date"
:clearable="false"
type="datetimerange"
value-format="yyyy-MM-dd HH:mm:ss"
:picker-options="pickerOptions"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
align="right"
@change="xiebojibianlvTimeChange"
></el-date-picker>
<!-- <timepicker com-type="datetimerange" ref="timepk" :interval="5" value-format="yyyy-MM-dd hh:mm:ss"></timepicker>-->
</el-form-item>
<el-form-item>
<el-button type="primary" @click="xiebojibianlvSearch" icon="el-icon-search">查询</el-button>
</el-form-item>
</el-form>
<!-- <div style="height: 20px"></div> -->
<el-empty description="暂无数据" v-if="tableData.length == 0"></el-empty>
<template v-else>
<div id="lisjbl" ref="lisjbl"></div>
<span style="position: absolute; right: 10px; top: 10px">
<i style="color: #ff9912" type="warning" class="el-icon-warning"></i>
总输出电流阈值和总输出电流比较
</span>
</template>
</div>
</template>
<script>
import * as echarts from 'echarts'
import { queryStatisticalSelect, queryCommonStatisticalByTime, getDevCapacity } from '@/api/app/steady'
import yan from '@/assets/commjs/color'
import { queryCsDictTree } from '@/api/app/setting'
import timepicker from '@/views/components/TimePicker/index4.vue'
export default {
components: { timepicker },
data() {
return {
loading: true,
zoom: '',
pickerOptions: {
shortcuts: [
{
text: '最近一周',
onClick(picker) {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
picker.$emit('pick', [start, end])
}
},
{
text: '最近一个月',
onClick(picker) {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
picker.$emit('pick', [start, end])
}
},
{
text: '最近三个月',
onClick(picker) {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
picker.$emit('pick', [start, end])
}
}
]
},
tableData: [],
zblist: [],
typelist: [
{
label: '平均值',
value: 'avg'
},
{
label: '最大值',
value: 'max'
},
{
label: '最小值',
value: 'min'
},
{
label: 'CP95值',
value: 'cp95'
}
],
formData: {
devId: '',
date: [],
endTime: '',
frequency: '',
startTime: '',
statisticalId: '',
valueType: ''
},
linePosition: [],
myCharts: '',
vh: '',
devCapacity: 0
}
},
props: {
queryByCodeId: {
type: String,
default: ''
},
devId: {
type: String,
default: ''
}
},
watch: {
devId() {
if (this.formData.statisticalId) {
getDevCapacity(this.devId).then(res => {
this.devCapacity = res.data
this.xiebojibianlvSearch()
})
}
}
},
created() {
const dictypeData = JSON.parse(localStorage.getItem('dictypeData'))
if (dictypeData) {
dictypeData.forEach(item => {
let arr = [
{
code: 'Line_Position',
key: 'linePosition'
}
]
arr.forEach(item2 => {
if (item.code == item2.code) {
this[item2.key] = item.children.map(item3 => {
return {
label: item3.name,
value: item3.id,
code: item3.code
}
})
}
})
})
}
queryCsDictTree(this.queryByCodeId).then(res => {
this.zblist = res.data.map(item => {
return {
value: item.id,
label: item.name,
...item
}
})
this.formData.statisticalId = this.zblist[0].value
this.formData.valueType = this.typelist[0].value
getDevCapacity(this.devId).then(res => {
this.devCapacity = res.data
this.xiebojibianlvSearch()
})
})
this.formData.endTime = this.$tools.formatDate()
// 今日0点
this.formData.startTime = this.$tools.formatDate(new Date(new Date().setHours(0, 0, 0, 0)))
this.formData.date = [this.formData.startTime, this.formData.endTime]
// formData.date
// queryStatisticalSelect(this.queryByCodeId).then((res) => {
// if (res.code == 'A0000') {
// this.zblist = res.data.map((item) => {
// return {
// label: item.phase == 'T' || item.phase == 'M' ? '' : item.phase + '相' + item.showName,
// value: item.id,
// ...item,
// }
// })
//
// }
// })
},
methods: {
xiebojibianlvTimeChange(e) {
if (e) {
this.formData.startTime = e[0]
this.formData.endTime = e[1]
} else {
this.formData.startTime = ''
this.formData.endTime = ''
}
},
xiebojibianlvSearch() {
this.loading = true
this.tableData = []
console.log('谐波畸变率查询')
this.formData.devId = this.devId
// this.formData.startTime = this.$refs.timepk.timeValue[0]
// this.formData.endTime = this.$refs.timepk.timeValue[1]
queryCommonStatisticalByTime(this.formData).then(res => {
this.tableData = res.data
if (this.tableData.length) {
this.$nextTick(() => {
this.lisjbl()
})
}
this.loading = false
})
},
lisjbl() {
let legend = []
let xAxis = []
this.tableData.forEach(item => {
if (!xAxis.includes(item.time)) {
xAxis.push(item.time)
}
if (!legend.includes(item.anotherName)) {
legend.push(item.anotherName)
}
})
let series = [
// 总输出电流
{
name: this.tableData.find(item => item.statisticalName === 'Apf_RmsI_TolOut').anotherName,
symbol: 'none',
smooth: true,
type: 'line',
//stack: 'Total',
data: this.tableData
.map(item => {
if (item.statisticalName === 'Apf_RmsI_TolOut') {
return item.statisticalData
} else {
return ''
}
})
.filter(item => item !== ''),
markLine: {
symbol: 'none',
data: [
{
yAxis: this.devCapacity,
label: {
position: 'middle', // 表现内容展示的位置
formatter: '总输出电流阈值', // 标线展示的内容
color: '#daa569' // 展示内容颜色
}
}
]
},
yAxisIndex: 1
},
//负载电流畸变率
{
name: this.tableData.find(item => item.statisticalName === 'Apf_ThdA_Load').anotherName,
symbol: 'none',
smooth: true,
type: 'line',
data: this.tableData
.map(item => {
if (item.statisticalName === 'Apf_ThdA_Load') {
return item.statisticalData
} else {
return ''
}
})
.filter(item => item !== '')
},
// 电网电流畸变率
{
name: this.tableData.find(item => item.statisticalName === 'Apf_ThdA_Sys').anotherName,
symbol: 'none',
smooth: true,
type: 'line',
data: this.tableData
.map(item => {
if (item.statisticalName === 'Apf_ThdA_Sys') {
return item.statisticalData
} else {
return ''
}
})
.filter(item => item !== '')
}
]
console.log(this.$refs)
let myCharts = echarts.init(this.$refs.lisjbl)
let option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross',
crossStyle: {
color: '#999'
}
}
},
legend: {
data: legend
},
grid: {
left: '20px',
right: '40px',
bottom: '50px',
containLabel: true
},
toolbox: {
feature: {
saveAsImage: {}
}
},
xAxis: {
name: '时间',
type: 'category',
boundaryGap: false,
data: xAxis,
axisLabel: {
formatter: function (value, index) {
return value.split(' ').join('\n')
}
},
axisLine: {
show: true,
// symbol: ["none", "arrow"],
lineStyle: {
color: '#333'
}
}
},
yAxis: [
{
name: '畸变率:(%)',
type: 'value',
max: 10,
min: 0,
axisLine: {
show: true,
//symbol: ["none", "arrow"],
lineStyle: {
color: '#333'
}
}
},
{
name: '电流:(A)',
type: 'value',
min: 0,
// 寻找data最大值
max:
series[0].data.reduce((a, b) => Math.max(a, b)) > this.devCapacity
? series[0].data.reduce((a, b) => Math.max(a, b))
: this.devCapacity + this.devCapacity * 0.5,
interval:
(series[0].data.reduce((a, b) => Math.max(a, b)) > this.devCapacity
? series[0].data.reduce((a, b) => Math.max(a, b))
: this.devCapacity) / 10,
axisLine: {
show: true,
//symbol: ["none", "arrow"],
lineStyle: {
color: '#333'
}
}
}
],
dataZoom: yan.EchartObject.dataZoom,
series: series
}
myCharts.setOption(option)
window.echartsArr.push(myCharts)
}
}
}
</script>
<style lang="scss">
#lisjbl,
#ssxbhl {
width: 100%;
height: calc(100vh - 184px);
}
</style>

203
src/views/govern/analyze/steady/comp/jiBianLvShiShi.vue Normal file
View File

@@ -0,0 +1,203 @@
<template>
<div class="content" style="display: block">
<el-form :inline="true">
<el-form-item label="统计指标:">
<el-select v-model="formData.statisticalId" filterable clearable placeholder="请选择">
<el-option v-for="item in zblist" :key="item.value" :label="item.label" :value="item.value"> </el-option>
</el-select>
</el-form-item>
<el-form-item label="值类型:">
<el-select v-model="formData.valueType" filterable clearable placeholder="请选择">
<el-option v-for="item in typelist" :key="item.value" :label="item.label" :value="item.value"> </el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="xiebojibianlvSearch">查询</el-button>
</el-form-item>
</el-form>
<el-descriptions border direction="vertical" :column="4">
<el-descriptions-item label="最新数据时间">{{ new Date().toLocaleString() }}</el-descriptions-item>
<el-descriptions-item label="设备温度">10</el-descriptions-item>
<el-descriptions-item label="环境温度">10</el-descriptions-item>
<el-descriptions-item label="湿度">10</el-descriptions-item>
</el-descriptions>
<div style="height: 10px"></div>
<el-table
stripe :cell-style="{ textAlign: 'center' }"
:header-cell-style="{ textAlign: 'center' }"
style="width: 100%"
:data="tableData"
border
header-cell-class-name="table_header"
>
<!-- <el-table-column type="phase" :index="indexMethod"></el-table-column> -->
<el-table-column prop="positionName" label="位置"> </el-table-column>
<el-table-column prop="statisticalData" label="值"> </el-table-column>
<!-- <el-table-column prop="address" label="输出侧"> </el-table-column> -->
</el-table>
<div style="height: 20px"></div>
<div id="ssjbl"></div>
</div>
</template>
<script>
import * as echarts from 'echarts'
import { queryStatisticalSelect, queryFisrtCommonStatistical } from '@/api/app/steady'
export default {
data() {
return {
tableData: [],
zblist: [],
typelist: [
{
label: '平均值',
value: 'avg',
},
{
label: '最大值',
value: 'max',
},
{
label: '最小值',
value: 'min',
},
{
label: 'CP95值',
value: 'cp95',
},
],
formData: {
devId: '',
date: [],
endTime: '',
frequency: '',
startTime: '',
statisticalId: '',
valueType: '',
},
linePosition: [],
}
},
props: {
queryByCodeId: {
type: String,
default: '',
},
devId: {
type: String,
default: '',
},
},
created() {
const dictypeData = JSON.parse(localStorage.getItem('dictypeData'))
if (dictypeData) {
dictypeData.forEach((item) => {
let arr = [
{
code: 'Line_Position',
key: 'linePosition',
},
]
arr.forEach((item2) => {
if (item.code == item2.code) {
this[item2.key] = item.children.map((item3) => {
return {
label: item3.name,
value: item3.id,
code: item3.code,
}
})
}
})
})
}
queryStatisticalSelect(this.queryByCodeId).then((res) => {
if (res.code == 'A0000') {
this.zblist = res.data.map((item) => {
return {
label: item.phase == 'T' || item.phase == 'M' ? '' : item.phase + '相' + item.showName,
value: item.id,
...item,
}
})
this.formData.statisticalId = this.zblist[0].value
this.formData.valueType = this.typelist[0].value
this.xiebojibianlvSearch()
}
})
},
methods: {
xiebojibianlvSearch() {
console.log('谐波畸变率查询')
this.formData.devId = this.devId
queryFisrtCommonStatistical(this.formData).then((res) => {
this.tableData = res.data.map((item) => {
item.positionName = this.linePosition.find((item2) => {
return item2.value == item.position
}).label
return {
...item,
}
})
console.log(this.tableData)
this.ssjbl()
})
},
ssjbl() {
let chartDom = document.getElementById('ssjbl')
let myChart = echarts.init(chartDom)
let option = {
title: {
// text: '准实时' + this.zblist.find((item) => item.value == this.formData.statisticalId).label,
// subtext: 'Feature Sample: Gradient Color, Shadow, Click Zoom'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
// legend: {
// data: this.tableData.map((item) => item.positionName),
// },
xAxis: {
type: 'category',
data: this.tableData.map((item) => item.positionName),
},
yAxis: {
type: 'value',
},
series: [
{
// name: '负载侧',
data: this.tableData.map((item) => item.statisticalData),
type: 'bar',
},
// {
// name: '电网侧',
// data: [110],
// type: 'bar',
// },
// {
// name: '输出侧',
// data: [120],
// type: 'bar',
// },
],
}
option && myChart.setOption(option)
window.echartsArr.push(myChart)
},
},
}
</script>
<style lang="scss">
#ssjbl,
#实时谐波含量 {
width: 100%;
height: 300px;
}
</style>

266
src/views/govern/analyze/steady/comp/xieBoHanLiangLiShi.vue Normal file
View File

@@ -0,0 +1,266 @@
<template>
<div class="content" style="display: block">
<el-form :inline="true">
<el-form-item label="统计指标:">
<el-select v-model="谐波畸变率筛选表单.statisticalId" filterable clearable placeholder="请选择">
<el-option v-for="item in 统计指标下拉框" :key="item.value" :label="item.label" :value="item.value"> </el-option>
</el-select>
</el-form-item>
<el-form-item label="值类型:">
<el-select v-model="谐波畸变率筛选表单.valueType" filterable clearable placeholder="请选择">
<el-option v-for="item in 值类型下拉框" :key="item.value" :label="item.label" :value="item.value"> </el-option>
</el-select>
</el-form-item>
<el-form-item label="频次:">
<el-select v-model="谐波畸变率筛选表单.frequency" filterable clearable placeholder="请选择">
<el-option v-for="item in timesOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
</el-select>
</el-form-item>
<el-form-item label="时间:">
<el-date-picker
v-model="谐波畸变率筛选表单.date"
clearable
type="datetimerange"
value-format="yyyy-MM-dd HH:mm:ss"
:picker-options="pickerOptions"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
align="right"
@change="xiebojibianlvTimeChange"
>
</el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="xiebojibianlvSearch">查询</el-button>
</el-form-item>
</el-form>
<div style="height: 20px"></div>
<el-empty description="暂无数据" v-if="tableData.length == 0"></el-empty>
<div id="历史谐波畸变率"></div>
</div>
</template>
<script>
import * as echarts from 'echarts'
import { queryStatisticalSelect, queryCommonStatisticalByTime } from '@/api/app/steady'
export default {
data() {
return {
pickerOptions: {
shortcuts: [
{
text: '最近一周',
onClick(picker) {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
picker.$emit('pick', [start, end])
},
},
{
text: '最近一个月',
onClick(picker) {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
picker.$emit('pick', [start, end])
},
},
{
text: '最近三个月',
onClick(picker) {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
picker.$emit('pick', [start, end])
},
},
],
},
tableData: [],
统计指标下拉框: [],
值类型下拉框: [
{
label: '平均值',
value: 'avg',
},
{
label: '最大值',
value: 'max',
},
{
label: '最小值',
value: 'min',
},
{
label: 'CP95值',
value: 'cp95',
},
],
timesOptions: [],
谐波畸变率筛选表单: {
devId: '',
date: [],
endTime: '',
frequency: '2',
startTime: '',
statisticalId: '',
valueType: '',
},
linePosition: [],
}
},
props: {
queryByCodeId: {
type: String,
default: '',
},
devId: {
type: String,
default: '',
},
},
created() {
for (let i = 2; i < 50; i++) {
this.timesOptions.push({
label: i + '次',
value: i,
})
}
const dictypeData = JSON.parse(localStorage.getItem('dictypeData'))
if (dictypeData) {
dictypeData.forEach((item) => {
let arr = [
{
code: 'Line_Position',
key: 'linePosition',
},
]
arr.forEach((item2) => {
if (item.code == item2.code) {
this[item2.key] = item.children.map((item3) => {
return {
label: item3.name,
value: item3.id,
code: item3.code,
}
})
}
})
})
}
queryStatisticalSelect(this.queryByCodeId).then((res) => {
if (res.code == 'A0000') {
this.统计指标下拉框 = res.data.map((item) => {
return {
label: item.phase == 'T' || item.phase == 'M' ? '' : item.phase + '相' + item.showName,
value: item.id,
...item,
}
})
this.谐波畸变率筛选表单.statisticalId = this.统计指标下拉框[0].value
this.谐波畸变率筛选表单.valueType = this.值类型下拉框[0].value
// 谐波畸变率筛startTime和endTime默认值是一天内 yyyy-MM-dd HH:mm:ss
this.谐波畸变率筛选表单.endTime = this.$tools.formatDate()
this.谐波畸变率筛选表单.startTime = this.$tools.formatDate(new Date(new Date().getTime() - 3600 * 1000 * 24))
this.谐波畸变率筛选表单.date = [this.谐波畸变率筛选表单.startTime, this.谐波畸变率筛选表单.endTime]
this.xiebojibianlvSearch()
}
})
},
methods: {
xiebojibianlvTimeChange(e) {
this.谐波畸变率筛选表单.startTime = e[0]
this.谐波畸变率筛选表单.endTime = e[1]
},
xiebojibianlvSearch() {
console.log('谐波畸变率查询')
this.谐波畸变率筛选表单.devId = this.devId
queryCommonStatisticalByTime(this.谐波畸变率筛选表单).then((res) => {
this.tableData = res.data.map((item) => {
item.positionName = this.linePosition.find((item2) => {
return item2.value == item.position
}).label
return {
...item,
}
})
console.log(this.tableData)
if (this.tableData.length) {
this.历史谐波畸变率()
}
})
},
历史谐波畸变率() {
let legend = []
let series = []
let xAxis = []
this.tableData.forEach((item) => {
if (!legend.includes(item.positionName)) {
legend.push(item.positionName)
}
if (!xAxis.includes(item.time)) {
xAxis.push(item.time)
}
})
legend.forEach((item) => {
let data = []
this.tableData.forEach((item2) => {
if (item == item2.positionName) {
data.push(item2.statisticalData)
}
})
series.push({
name: item,
type: 'line',
stack: 'Total',
data: data,
})
})
console.log(legend, series, xAxis)
let chartDom = document.getElementById('历史谐波畸变率')
let myChart = echarts.init(chartDom)
let option = {
tooltip: {
trigger: 'axis',
},
legend: {
data: legend,
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true,
},
toolbox: {
feature: {
saveAsImage: {},
},
},
xAxis: {
type: 'category',
boundaryGap: false,
data: xAxis,
},
yAxis: {
type: 'value',
},
series: series,
}
option && myChart.setOption(option)
window.echartsArr.push(myChart)
},
},
}
</script>
<style lang="scss">
#历史谐波畸变率,
#实时谐波含量 {
width: 100%;
height: 300px;
}
</style>

215
src/views/govern/analyze/steady/comp/xieBoHanLiangShiShi.vue Normal file
View File

@@ -0,0 +1,215 @@
<template>
<div class="content" style="display: block">
<el-form :inline="true">
<el-form-item label="统计指标:">
<el-select v-model="谐波畸变率筛选表单.statisticalId" filterable clearable placeholder="请选择">
<el-option v-for="item in 统计指标下拉框" :key="item.value" :label="item.label" :value="item.value"> </el-option>
</el-select>
</el-form-item>
<el-form-item label="值类型:">
<el-select v-model="谐波畸变率筛选表单.valueType" filterable clearable placeholder="请选择">
<el-option v-for="item in 值类型下拉框" :key="item.value" :label="item.label" :value="item.value"> </el-option>
</el-select>
</el-form-item>
<el-form-item label="频次:">
<el-select v-model="谐波畸变率筛选表单.frequency" filterable clearable placeholder="请选择">
<el-option v-for="item in timesOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="xiebojibianlvSearch">查询</el-button>
</el-form-item>
</el-form>
<el-descriptions border direction="vertical" :column="4">
<el-descriptions-item label="最新数据时间">{{ new Date().toLocaleString() }}</el-descriptions-item>
<el-descriptions-item label="设备温度">10</el-descriptions-item>
<el-descriptions-item label="环境温度">10</el-descriptions-item>
<el-descriptions-item label="湿度">10</el-descriptions-item>
</el-descriptions>
<div style="height: 10px"></div>
<el-table
stripe :cell-style="{ textAlign: 'center' }"
:header-cell-style="{ textAlign: 'center' }"
style="width: 100%"
:data="tableData"
border
header-cell-class-name="table_header"
>
<!-- <el-table-column type="phase" :index="indexMethod"></el-table-column> -->
<el-table-column prop="positionName" label="位置"> </el-table-column>
<el-table-column prop="statisticalData" label="值"> </el-table-column>
<!-- <el-table-column prop="address" label="输出侧"> </el-table-column> -->
</el-table>
<div style="height: 20px"></div>
<div id="实时谐波畸变率"></div>
</div>
</template>
<script>
import * as echarts from 'echarts'
import { queryStatisticalSelect, queryFisrtCommonStatistical } from '@/api/app/steady'
export default {
data() {
return {
tableData: [],
统计指标下拉框: [],
值类型下拉框: [
{
label: '平均值',
value: 'avg',
},
{
label: '最大值',
value: 'max',
},
{
label: '最小值',
value: 'min',
},
{
label: 'CP95值',
value: 'cp95',
},
],
谐波畸变率筛选表单: {
devId: '',
date: [],
endTime: '',
frequency: '2',
startTime: '',
statisticalId: '',
valueType: '',
},
timesOptions: [],
linePosition: [],
}
},
props: {
queryByCodeId: {
type: String,
default: '',
},
devId: {
type: String,
default: '',
},
},
created() {
for (let i = 2; i < 51; i++) {
this.timesOptions.push({
label: i + '次',
value: i,
})
}
const dictypeData = JSON.parse(localStorage.getItem('dictypeData'))
if (dictypeData) {
dictypeData.forEach((item) => {
let arr = [
{
code: 'Line_Position',
key: 'linePosition',
},
]
arr.forEach((item2) => {
if (item.code == item2.code) {
this[item2.key] = item.children.map((item3) => {
return {
label: item3.name,
value: item3.id,
code: item3.code,
}
})
}
})
})
}
queryStatisticalSelect(this.queryByCodeId).then((res) => {
if (res.code == 'A0000') {
this.统计指标下拉框 = res.data.map((item) => {
return {
label: item.phase == 'T' || item.phase == 'M' ? '' : item.phase + '相' + item.showName,
value: item.id,
...item,
}
})
this.谐波畸变率筛选表单.statisticalId = this.统计指标下拉框[0].value
this.谐波畸变率筛选表单.valueType = this.值类型下拉框[0].value
this.xiebojibianlvSearch()
}
})
},
methods: {
xiebojibianlvSearch() {
console.log('谐波畸变率查询')
this.谐波畸变率筛选表单.devId = this.devId
queryFisrtCommonStatistical(this.谐波畸变率筛选表单).then((res) => {
this.tableData = res.data.map((item) => {
item.positionName = this.linePosition.find((item2) => {
return item2.value == item.position
}).label
return {
...item,
}
})
console.log(this.tableData)
this.实时谐波畸变率()
})
},
实时谐波畸变率() {
let chartDom = document.getElementById('实时谐波畸变率')
let myChart = echarts.init(chartDom)
let option = {
title: {
// text: '准实时' + this.统计指标下拉框.find((item) => item.value == this.谐波畸变率筛选表单.statisticalId).label,
// subtext: 'Feature Sample: Gradient Color, Shadow, Click Zoom'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
// legend: {
// data: this.tableData.map((item) => item.positionName),
// },
xAxis: {
type: 'category',
data: this.tableData.map((item) => item.positionName),
},
yAxis: {
type: 'value',
},
series: [
{
// name: '负载侧',
data: this.tableData.map((item) => item.statisticalData),
type: 'bar',
},
// {
// name: '电网侧',
// data: [110],
// type: 'bar',
// },
// {
// name: '输出侧',
// data: [120],
// type: 'bar',
// },
],
}
option && myChart.setOption(option)
window.echartsArr.push(myChart)
},
},
}
</script>
<style lang="scss">
#实时谐波畸变率,
#实时谐波含量 {
width: 100%;
height: 300px;
}
</style>

230
src/views/govern/analyze/steady/detail.vue Normal file
View File

@@ -0,0 +1,230 @@
<template>
<div class="steady-detail">
<!-- <el-descriptions title="" border direction="vertical">
<el-descriptions-item label="设备名称">121212</el-descriptions-item>
<el-descriptions-item label="设备编号">18100000000</el-descriptions-item>
<el-descriptions-item label="所属项目">苏州市</el-descriptions-item>
</el-descriptions> -->
<JiBianLvLiShi :queryByCodeId="xiebBoCode" :devId="devId" v-if="!loading" />
<!-- <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">-->
<!--&lt;!&ndash; <el-tab-pane lazy label="拓扑图" name="one">&ndash;&gt;-->
<!--&lt;!&ndash; <div class="content">&ndash;&gt;-->
<!--&lt;!&ndash; <el-image&ndash;&gt;-->
<!--&lt;!&ndash; fit="contain"&ndash;&gt;-->
<!--&lt;!&ndash; style="height: calc(100% - 50px)"&ndash;&gt;-->
<!--&lt;!&ndash; :src="topologyDiagramFilePath"&ndash;&gt;-->
<!--&lt;!&ndash; :preview-src-list="[topologyDiagramFilePath]"&ndash;&gt;-->
<!--&lt;!&ndash; >&ndash;&gt;-->
<!--&lt;!&ndash; </el-image>&ndash;&gt;-->
<!--&lt;!&ndash; </div>&ndash;&gt;-->
<!--&lt;!&ndash; </el-tab-pane>&ndash;&gt;-->
<!--&lt;!&ndash; <el-tab-pane lazy label="实时畸变率" name="two">&ndash;&gt;-->
<!--&lt;!&ndash; <JiBianLvShiShi :queryByCodeId="xiebBoCode" :devId="devId" v-if="activeName == 'two'" />&ndash;&gt;-->
<!--&lt;!&ndash; </el-tab-pane>&ndash;&gt;-->
<!--&lt;!&ndash; <el-tab-pane lazy label="历史畸变率" name="three">&ndash;&gt;-->
<!--&lt;!&ndash; <JiBianLvLiShi :queryByCodeId="xiebBoCode" :devId="devId" v-if="activeName == 'three'" />&ndash;&gt;-->
<!--&lt;!&ndash; </el-tab-pane>&ndash;&gt;-->
<!--&lt;!&ndash; <el-tab-pane lazy label="实时谐波含量" name="four">&ndash;&gt;-->
<!--&lt;!&ndash; <XieBoHanLiangShiShi :queryByCodeId="jiBianLvCode" :devId="devId" v-if="activeName == 'four'" />&ndash;&gt;-->
<!--&lt;!&ndash; </el-tab-pane>&ndash;&gt;-->
<!--&lt;!&ndash; <el-tab-pane lazy label="历史谐波含量" name="five">&ndash;&gt;-->
<!--&lt;!&ndash; <XieBoHanLiangLiShi :queryByCodeId="jiBianLvCode" :devId="devId" v-if="activeName == 'five'" />&ndash;&gt;-->
<!--&lt;!&ndash; </el-tab-pane>&ndash;&gt;-->
<!-- </el-tabs>-->
</div>
</template>
<script>
import { queryFisrtThdContent, queryTopologyDiagram } from '@/api/app/steady'
import { queryByCode } from '@/api/app/setting'
import JiBianLvLiShi from './comp/jiBianLvLiShi'
import JiBianLvShiShi from './comp/jiBianLvShiShi'
import XieBoHanLiangLiShi from './comp/xieBoHanLiangLiShi'
import XieBoHanLiangShiShi from './comp/xieBoHanLiangShiShi'
export default {
components: {
JiBianLvShiShi,
JiBianLvLiShi,
XieBoHanLiangLiShi,
XieBoHanLiangShiShi,
},
data() {
return {
activeName: 'one',
tableData: [],
实时谐波含量数据: [],
topologyDiagramFilePath: '',
xiebBoCode: '',
jiBianLvCode: '',
loading:true
}
},
props: {
devId: {
type: String,
default: '',
},
},
created() {
this.init()
},
methods: {
queryTopologyDiagram() {
queryTopologyDiagram(this.devId).then((res) => {
console.log(res)
this.topologyDiagramFilePath = res.data.filePath
console.log(this.topologyDiagramFilePath)
})
},
xiebojibianlvTimeChange(e) {
console.log(e)
},
init() {
queryByCode('Harmonic_Type').then((res) => {
this.xiebBoCode = res.data.id
this.loading = false
})
// queryByCode('LMT').then((res) => {
// this.jiBianLvCode = res.data.id
// })
// this.handleClick()
},
handleClick(tab, event) {
setTimeout(() => {
if (this.activeName == 'one') {
// this.queryTopologyDiagram()
} else if (this.activeName == 'three') {
// this.实时谐波含量()
}
}, 100)
},
async 实时谐波含量() {
const res = await queryFisrtThdContent({
devId: this.devId,
statisticalName: 'H14VLmt',
})
this.实时谐波含量数据 = []
res.data.forEach((item) => {
const arr = this.实时谐波含量数据.map((item2) => item2.phase)
if (arr.indexOf(item.phase) == -1) {
this.实时谐波含量数据.push({
name: item.phase,
phase: item.phase,
originData: [item],
data: [],
type: 'bar',
})
} else {
this.实时谐波含量数据.forEach((item1) => {
if (item1.phase == item.phase) {
item1.originData.push(item)
}
})
}
})
this.实时谐波含量数据.forEach((item) => {
item.originData.forEach((item1) => {
switch (item1.statMethod) {
case 'cp95':
item.data[0] = item1.statisticalData
break
case 'max':
item.data[1] = item1.statisticalData
break
case 'min':
item.data[2] = item1.statisticalData
break
case 'avg':
item.data[3] = item1.statisticalData
break
default:
break
}
})
})
let series = [
{
name: 'cp95',
type: 'bar',
data: [],
},
{
name: 'max',
type: 'bar',
data: [],
},
{
name: 'min',
type: 'bar',
data: [],
},
{
name: 'avg',
type: 'bar',
data: [],
},
]
this.实时谐波含量数据.forEach((item, index) => {
item.data.forEach((item2, index2) => {
series[index2].data.push(item2)
})
})
console.warn(this.实时谐波含量数据)
let chartDom = document.getElementById('实时谐波含量')
let myChart = echarts.init(chartDom)
let option
option = {
title: {
text: '实时谐波含量',
// subtext: 'Feature Sample: Gradient Color, Shadow, Click Zoom'
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
legend: {
data: ['cp95', 'max', 'min', 'avg'],
},
xAxis: {
type: 'category',
data: this.实时谐波含量数据.map((item) => item.phase),
},
yAxis: {
type: 'value',
},
series: series,
}
option && myChart.setOption(option)
window.echartsArr.push(myChart)
},
indexMethod(index) {
return 'L' + (index + 1)
},
goBack() {
this.$router.push({
path: '/app/steady',
})
},
},
}
</script>
<style lang="scss">
.el-page-header {
background: #fff;
}
.steady-detail {
flex: 1;
.content {
overflow: auto;
display: flex;
align-items: center;
justify-content: center;
// height: calc(100vh - 198px);
}
}
</style>

46
src/views/govern/analyze/steady/index.vue Normal file
View File

@@ -0,0 +1,46 @@
<template>
<Page>
<div class="steady device-manage">
<DeviceTree @selectDevice="selectDevice" :devId="devId" />
<Detail ref="detail" :devId="devId" />
</div>
</Page>
</template>
<script>
import Detail from './detail'
import DeviceTree from '../../components/deviceTree'
export default {
name: 'GovernAnalyzeSteady',
components: { Detail, DeviceTree },
data() {
return {
devId: null
}
},
created() {},
mounted() {},
methods: {
selectDevice({ id }) {
// console.log(id)
if (!id) return
this.devId = id
this.$refs.detail.activeName = 'one'
this.$refs.detail.handleClick()
}
}
}
</script>
<style lang="scss">
.steady {
display: flex;
width: 100%;
height: 100%;
padding: 0;
.el-tree {
font-size: 14px;
//height: calc(100vh - 168px) !important;
}
}
</style>

421
src/views/govern/analyze/tendency.vue Normal file
View File

@@ -0,0 +1,421 @@
<template>
<div class="tendency" >
<el-card class="box-card" style="height: 100%">
<el-row :gutter="5">
<!--左侧列表区-->
<el-col :span="3">
<PointTree showCheckbox @check-change="checkChange" :highlightCurrent="false"
/>
</el-col>
<!--右侧内容区-->
<el-col :span="21">
<div class="content" style="display: block;" id="sdf">
<el-form :inline="true">
<el-form-item label="统计指标:">
<el-select v-model="formInline.statisticalId" filterable clearable placeholder="请选择">
<el-option v-for="item in statisticalOptions" :key="item.value" :label="item.label"
:value="item.value"></el-option>
</el-select>
</el-form-item>
<el-form-item label="值类型:">
<el-select v-model="formInline.valueType" filterable clearable placeholder="请选择">
<el-option v-for="item in valueTypeOptions" :key="item.value" :label="item.label"
:value="item.value"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<!-- <el-date-picker-->
<!-- v-model="formInline.date"-->
<!-- clearable-->
<!-- type="datetimerange"-->
<!-- value-format="yyyy-MM-dd HH:mm:ss"-->
<!-- :picker-options="pickerOptions"-->
<!-- range-separator="至"-->
<!-- start-placeholder="开始日期"-->
<!-- end-placeholder="结束日期"-->
<!-- align="right"-->
<!-- >-->
<!-- </el-date-picker>-->
<timepicker ref="timepk" :interval="3"></timepicker>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="queryLineCommonStatistical" icon="el-icon-search">
查询
</el-button>
</el-form-item>
</el-form>
<!-- <div style="height: 20px;"></div> -->
<el-empty description="暂无数据" v-if="tableData.length == 0"></el-empty>
<div id="echarts-dom" v-else ref="fglkrdd"
:style="`heigth:100%;width:100%`"></div>
</div>
</el-col>
</el-row>
</el-card>
</div>
</template>
<script>
import {queryLineCommonStatistical} from '@/api/app/analyze.js'
import {queryByCode, queryCsDictTree, queryByid} from '@/api/app/setting.js'
import PointTree from '../components/pointTree'
import * as echarts from 'echarts'
import DeviceTree from "@/views/govern/components/deviceTree.vue";
import {queryFisrtCommonStatistical, queryStatisticalSelect} from "@/api/app/steady";
import yan from "@/assets/commjs/color";
import timepicker from "@/views/components/TimePicker/index4.vue";
export default {
name: 'GovernAnalyzeTendency',
components: {timepicker, DeviceTree, PointTree},
computed: {
vth() {
return window.sessionStorage.getItem("appheight") - 190;
}
},
data() {
return {
pickerOptions: {
shortcuts: [
{
text: '最近一周',
onClick(picker) {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
picker.$emit('pick', [start, end])
},
},
{
text: '最近一个月',
onClick(picker) {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
picker.$emit('pick', [start, end])
},
},
{
text: '最近三个月',
onClick(picker) {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
picker.$emit('pick', [start, end])
},
},
],
},
tableData: [],
statisticalOptions: [],
valueTypeOptions: [
{
label: '平均值',
value: 'avg',
},
{
label: '最大值',
value: 'max',
},
{
label: '最小值',
value: 'min',
},
{
label: 'CP95值',
value: 'cp95',
},
],
formInline: {
"endTime": "",
"lineList": [],
"startTime": "",
"statisticalId": "",
"valueType": "",
"date": []
},
zoom: '',
myChartes: ''
}
},
created() {
queryByCode('Harmonic_Type').then((res) => {
// queryStatisticalSelect(res.data.id).then((res) => {
// if (res.code == 'A0000') {
// this.statisticalOptions = res.data.map((item) => {
// return {
// label: item.phase == 'T' || item.phase == 'M' ? '' : item.phase + '相' + item.showName,
// value: item.id,
// ...item,
// }
// })
// this.formInline.statisticalId = this.statisticalOptions[0].value
// this.formInline.valueType = this.valueTypeOptions[0].value
// // this.queryLineCommonStatistical()
// }
// })
queryCsDictTree(res.data.id).then((res) => {
this.statisticalOptions = res.data.map((item) => {
return {
value: item.id,
label: item.name,
...item,
}
})
})
})
},
mounted() {
this.zoom = 1 / document.body.style.zoom;
//this.vh = window.sessionStorage.getItem("appheight") - 125 + "px";
window.addEventListener("resize", () => {
this.zoom = 1 / document.body.style.zoom;
if (this.myChartes !== '') {
this.myChartes.resize();
}
});
// this.$nextTick(() => {
// this.lisjbl();
// });
},
methods: {
checkChange(data, checked, indeterminate) {
console.log(data, checked, indeterminate)
if (data.level === 3) {
if (checked) {
this.formInline.lineList.push(data.id)
} else {
this.formInline.lineList.splice(this.formInline.lineList.indexOf(data.id), 1)
}
}
},
queryLineCommonStatistical() {
if (this.formInline.lineList.length == 0) {
this.$message({
message: '请选择监测点',
type: 'warning'
})
return
}
this.formInline.startTime = this.$refs.timepk.timeValue[0]
this.formInline.endTime = this.$refs.timepk.timeValue[1]
queryLineCommonStatistical(this.formInline).then((res) => {
this.tableData = res.data
console.log(this.tableData)
if (this.tableData.length == 0) {
this.$message({
message: '暂无数据',
type: 'warning'
})
return
}
this.$nextTick(() => {
this.initEcharts()
})
})
},
// initEcharts() {
// let chartDom = document.getElementById('echarts-dom')
// let myChart = echarts.init(chartDom)
// let option = {
// title: {
// // text: '准实时' + this.statisticalOptions.find((item) => item.value == this.formInline.statisticalId).label,
// // subtext: 'Feature Sample: Gradient Color, Shadow, Click Zoom'
// },
// tooltip: {
// trigger: 'axis',
// axisPointer: {
// type: 'shadow',
// },
// },
// // legend: {
// // data: this.tableData.map((item) => item.lineName),
// // },
// xAxis: {
// type: 'category',
// data: this.tableData.map((item) => item.lineName),
// },
// yAxis: {
// type: 'value',
// },
// series: [
// {
// // name: '负载侧',
// data: this.tableData.map((item) => item.statisticalData),
// type: 'bar',
// },
// // {
// // name: '电网侧',
// // data: [110],
// // type: 'bar',
// // },
// // {
// // name: '输出侧',
// // data: [120],
// // type: 'bar',
// // },
// ],
// }
// },
initEcharts() {
let legend = []
let series = []
let xAxis = []
this.tableData.forEach((item) => {
if (!legend.includes(item.lineName)) {
legend.push(item.lineName)
}
if (!xAxis.includes(item.time)) {
xAxis.push(item.time)
}
})
legend.forEach((item) => {
let data = []
this.tableData.forEach((item2) => {
if (item == item2.lineName) {
data.push(item2.statisticalData)
}
})
series.push({
name: item,
type: 'line',
symbol: 'none',
smooth: true,
// stack: 'Total',
data: data,
})
})
console.log(legend, series, xAxis)
let domID1 = document.getElementById('echarts-dom')
setTimeout(() => {
domID1.style.width = document.getElementById("sdf").offsetWidth - 10 + 'px'
domID1.style.height =
window.sessionStorage.getItem("appheight") - 96 + "px";
}, 0);
let myChartes = echarts.init(domID1)
this.myChartes = myChartes
myChartes.clear()
let option = {
tooltip: {
trigger: 'axis',
},
legend: {
data: legend,
},
grid: {
left: '10',
right: '40',
bottom: '50px',
containLabel: true,
},
xAxis: {
name: '时间',
type: 'category',
data: xAxis,
axisLabel: {
formatter: function (value, index) {
return value.split(' ').join('\n')
},
},
axisLine: {
show: true,
//symbol: ["none", "arrow"],
lineStyle: {
color: '#333',
},
},
},
toolbox: {
feature: {
saveAsImage: {},
},
},
yAxis: {
name: '单位:(%)',
type: 'value',
axisLine: {
show: true,
//symbol: ["none", "arrow"],
lineStyle: {
color: '#333',
},
},
},
dataZoom: yan.EchartObject.dataZoom,
series: series,
}
console.log(option)
myChartes.setOption(option)
window.echartsArr.push(myChartes)
setTimeout(() => {
myChartes.resize();
}, 100);
let _this = this;
_this.$erd.listenTo(_this.$refs.fglkrdd, (element) => {
_this.$nextTick(() => {
domID1.style.width = document.getElementById("sdf").offsetWidth - 10 + 'px'
myChartes.resize();
});
});
},
},
}
</script>
<style lang="scss">
.tendency {
padding: 10px;
height: 100%;
width: 100%;
.el-tree {
// height: calc(100vh - 158px) !important;
}
#echarts-dom {
width: 98%;
height: 300px;
}
.el-dialog__body {
// .el-descriptions__title {
// font-size: 14px;
// }
// .el-descriptions__extra {
// height: 36px;
// align-items: center;
// display: flex;
// }
.el-form {
padding-right: 0;
}
}
.custom-tree-node {
display: flex;
align-items: center;
justify-content: space-between;
padding-right: 8px;
font-size: 14px;
flex: 1;
}
.content {
display: flex;
align-items: center;
justify-content: center;
//height: calc(100vh - 198px);
overflow: auto;
}
#main {
width: 100%;
height: 60vh;
}
}
.tendency-box-card {
// height: calc(100vh - 250px);
// overflow-y: scroll;
}
</style>

354
src/views/govern/analyze/transient/index.vue Normal file
View File

@@ -0,0 +1,354 @@
<template>
<div class="steady">
<el-card class="box-card" style="height: 100%">
<el-row :gutter="5">
<!--左侧列表区-->
<el-col :span="3">
<DeviceTree @selectDevice="selectDevice" :devId="devId"/>
</el-col>
<!--右侧内容区-->
<el-col :span="21" v-loading="loading">
<div class="content" style="display: block" id="fgh">
<el-form :inline="true">
<el-form-item label="统计指标:">
<el-select v-model="formInline.statisticalId" filterable clearable
placeholder="请选择">
<el-option v-for="item in xblist" :key="item.value" :label="item.label"
:value="item.value"></el-option>
</el-select>
</el-form-item>
<el-form-item label="值类型:">
<el-select v-model="formInline.valueType" filterable clearable
placeholder="请选择">
<el-option v-for="item in typelist" :key="item.value" :label="item.label"
:value="item.value"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<!-- <el-date-picker-->
<!-- v-model="formInline.date"-->
<!-- clearable-->
<!-- type="datetimerange"-->
<!-- value-format="yyyy-MM-dd HH:mm:ss"-->
<!-- :picker-options="pickerOptions"-->
<!-- range-separator="至"-->
<!-- start-placeholder="开始日期"-->
<!-- end-placeholder="结束日期"-->
<!-- align="right"-->
<!-- @change="xiebojibianlvTimeChange"-->
<!-- >-->
<timepicker ref="timepk" :interval="3"></timepicker>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="xiebojibianlvSearch" icon="el-icon-search">查询</el-button>
</el-form-item>
</el-form>
<div style="height: 20px"></div>
<el-empty description="暂无数据" v-if="tableData.length == 0"></el-empty>
<template v-else>
<div id="lsxbjbl2" ref="fglkrss" :style="`heigth:100%;width:100%`"></div>
</template>
</div>
</el-col>
</el-row>
</el-card>
</div>
</template>
<script>
import DeviceTree from '../../components/deviceTree'
import {queryStatisticalSelect, queryCommonStatisticalByTime} from '@/api/app/steady'
import {queryByCode} from '@/api/app/setting'
import * as echarts from 'echarts'
import yan from "@/assets/commjs/color";
import timepicker from "@/views/components/TimePicker/index4.vue";
export default {
name: 'GovernAnalyzeTransient',
components: {timepicker, DeviceTree},
data() {
return {
loading:true,
devId: null,
pickerOptions: {
shortcuts: [
{
text: '最近一周',
onClick(picker) {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
picker.$emit('pick', [start, end])
},
},
{
text: '最近一个月',
onClick(picker) {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
picker.$emit('pick', [start, end])
},
},
{
text: '最近三个月',
onClick(picker) {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
picker.$emit('pick', [start, end])
},
},
],
},
tableData: [],
xblist: [],
typelist: [
{
label: '平均值',
value: 'avg',
},
{
label: '最大值',
value: 'max',
},
{
label: '最小值',
value: 'min',
},
{
label: 'CP95值',
value: 'cp95',
},
],
formInline: {
devId: '',
date: [],
endTime: '',
frequency: '',
startTime: '',
statisticalId: '',
valueType: '',
},
linePosition: [],
zoom:'',
myChartes:''
}
},
created() {
const dictypeData = JSON.parse(localStorage.getItem('dictypeData'))
if (dictypeData) {
dictypeData.forEach((item) => {
let arr = [
{
code: 'Line_Position',
key: 'linePosition',
},
]
arr.forEach((item2) => {
if (item.code == item2.code) {
this[item2.key] = item.children.map((item3) => {
return {
label: item3.name,
value: item3.id,
code: item3.code,
}
})
}
})
})
}
},
mounted(){
this.zoom = 1 / document.body.style.zoom;
//this.vh = window.sessionStorage.getItem("appheight") - 125 + "px";
window.addEventListener("resize", () => {
this.zoom = 1 / document.body.style.zoom;
if(this.myChartes !==''){
this.myChartes.resize();
}
});
// this.$nextTick(() => {
// this.lisjbl();
// });
},
methods: {
selectDevice({id}) {
if (!id) return
this.formInline.devId = id
this.init()
},
init() {
if (this.xblist.length) {
this.formInline.statisticalId = this.xblist[0].value
this.formInline.valueType = this.typelist[0].value
this.xiebojibianlvSearch()
} else {
queryByCode('Event_Type').then((res) => {
queryStatisticalSelect(res.data.id).then((res) => {
if (res.code == 'A0000') {
this.xblist = res.data.map((item) => {
return {
label: item.phase == 'T' || item.phase == 'M' ? '' : item.phase + '相' + item.showName,
value: item.id,
...item,
}
})
this.formInline.statisticalId = this.xblist[0].value
this.formInline.valueType = this.typelist[0].value
this.xiebojibianlvSearch()
}
})
})
}
},
xiebojibianlvTimeChange(e) {
this.formInline.startTime = e[0]
this.formInline.endTime = e[1]
},
xiebojibianlvSearch() {
this.loading = true
this.formInline.startTime = this.$refs.timepk.timeValue[0]
this.formInline.endTime = this.$refs.timepk.timeValue[1]
queryCommonStatisticalByTime(this.formInline).then((res) => {
this.tableData = res.data.map((item) => {
item.positionName = this.linePosition.find((item2) => {
return item2.value == item.position
}).label
return {
...item,
}
})
console.log(this.tableData)
if (this.tableData.length) {
this.$nextTick(()=>{
this.lsxbjbl2()
})
}
this.loading = false
})
},
lsxbjbl2() {
let legend = []
let series = []
let xAxis = []
this.tableData.forEach((item) => {
if (!legend.includes(item.positionName)) {
legend.push(item.positionName)
}
if (!xAxis.includes(item.time)) {
xAxis.push(item.time)
}
})
legend.forEach((item) => {
let data = []
this.tableData.forEach((item2) => {
if (item == item2.positionName) {
data.push(item2.statisticalData)
}
})
series.push({
name: item,
type: 'line',
symbol:'none',
smooth: true,
type: 'line',
// stack: 'Total',
data: data,
})
})
console.log(legend, series, xAxis)
let domID1 = document.getElementById('lsxbjbl2')
setTimeout(() => {
domID1.style.width =document.getElementById("fgh").offsetWidth -10+'px'
domID1.style.height =
window.sessionStorage.getItem("appheight") - 96 + "px";
}, 0);
let myChartes = echarts.init(domID1)
this.myChartes=myChartes
myChartes.clear()
let option = {
tooltip: {
trigger: 'axis',
},
legend: {
data: legend,
},
grid: {
left: '10px',
right: '40px',
bottom: '50px',
containLabel: true,
},
toolbox: {
feature: {
saveAsImage: {},
},
},
dataZoom: yan.EchartObject.dataZoom,
xAxis: {
name:'时间',
type: 'category',
boundaryGap: false,
data: xAxis,
axisLabel: {
formatter: function (value, index) {
return value.split(' ').join('\n')
},
},
axisLine: {
show: true,
//symbol: ["none", "arrow"],
lineStyle: {
color: '#333',
},
},
},
yAxis: {
name:'单位:(%)',
type: 'value',
axisLine: {
show: true,
//symbol: ["none", "arrow"],
lineStyle: {
color: '#333',
},
},
},
series: series,
}
myChartes.setOption(option)
window.echartsArr.push(myChartes)
setTimeout(() => {
myChartes.resize();
}, 100);
let _this = this;
_this.$erd.listenTo(_this.$refs.fglkrss, (element) => {
_this.$nextTick(() => {
domID1.style.width = document.getElementById("fgh").offsetWidth -10+'px'
myChartes.resize();
});
});
},
},
}
</script>
<style lang="scss">
.steady {
padding: 10px;
height: 100%;
width: 100%;
.el-tree {
// height: calc(100vh - 178px) !important;
}
}
#lsxbjbl2,
#ssxbhl2 {
width: 100%;
height: 300px;
}
</style>

92
src/views/govern/components/deviceTree.vue Normal file
View File

@@ -0,0 +1,92 @@
<template>
<div class="device-tree">
<energyTree @eleMenuData="getTreeText" :dataTree="dataTree" ref="energyTree" :showCheckbox="showCheckbox"
@check-change="checkChange" :default-checked-keys="defaultCheckedKeys"></energyTree>
</div>
</template>
<script>
import energyTree from '../../components/tree/energyTree'
import {getDeviceTree} from '@/api/app/device.js'
export default {
components: {
energyTree,
},
props: {
showCheckbox: {
type: Boolean,
default: false
},
defaultCheckedKeys: {
type: Array,
default: () => []
},
},
data() {
return {
dataTree: [],
}
},
created() {
this.getDeviceTree()
},
mounted() {
},
methods: {
checkChange(data, checked, indeterminate) {
this.$emit('check-change', data, checked, indeterminate)
},
getDeviceTree() {
getDeviceTree().then((res) => {
console.log(res)
if (res.code === 'A0000') {
this.dataTree = res.data
let arr = []
this.dataTree.forEach((item) => {
item.icon = 'el-icon-s-home'
item.color = 'royalblue'
item.children.forEach((item2) => {
item2.icon = 'el-icon-s-order'
item2.color = 'royalblue'
item2.children.forEach((item3) => {
item3.icon = 'el-icon-s-platform'
item3.color = 'royalblue'
if(item3.comFlag === 1){
item3.color = '#e26257 !important'
}
arr.push(item3)
})
})
})
this.$emit('selectDevice', arr[0])
//默认点击
this.$nextTick().then(() => {
this.$refs.energyTree.$refs.menuTree.setCurrentKey(arr[0].id) // 默认选中节点第一个
})
}
})
},
getTreeText(data, level) {
console.log(data, level)
this.$emit('selectDevice', data)
},
},
}
</script>
<style lang="scss">
.device-tree{
font-size: 14px;
width: 270px;
margin-right: 10px;
flex-shrink: 0;
.menu-tree > .el-row {
height: 36px !important;
padding-top: 2px;
}
}
</style>

83
src/views/govern/components/marketTree.vue Normal file
View File

@@ -0,0 +1,83 @@
<template>
<div class="device-tree">
<energyTree
@eleMenuData="getTreeText"
:dataTree="dataTree"
ref="energyTree"
:showCheckbox="showCheckbox"
:eventLevel="1"
@check-change="checkChange"
:default-checked-keys="defaultCheckedKeys"
></energyTree>
</div>
</template>
<script>
import energyTree from '../../components/tree/energyTree'
import { getMarketList } from '@/api/app/user'
export default {
components: {
energyTree
},
props: {
showCheckbox: {
type: Boolean,
default: false
},
defaultCheckedKeys: {
type: Array,
default: () => []
}
},
data() {
return {
dataTree: []
}
},
created() {
this.getDeviceTree()
},
methods: {
checkChange(data, checked, indeterminate) {
this.$emit('check-change', data, checked, indeterminate)
},
getDeviceTree() {
getMarketList().then(res => {
console.log(res)
if (res.code === 'A0000') {
this.dataTree = res.data.map(item => {
return {
...item,
icon: 'el-icon-user',
color: 'royalblue'
}
})
this.$emit('selectUser', this.dataTree[0])
//默认点击
this.$nextTick().then(() => {
this.$refs.energyTree.$refs.menuTree.setCurrentKey(this.dataTree[0].id) // 默认选中节点第一个
})
}
})
},
getTreeText(data, level) {
console.log(data, level)
this.$emit('selectUser', data)
}
}
}
</script>
<style lang="scss">
.device-tree {
font-size: 14px;
width: 270px;
margin-right: 10px;
flex-shrink: 0;
.menu-tree > .el-row {
height: 36px !important;
padding-top: 2px;
}
}
</style>

98
src/views/govern/components/pointTree.vue Normal file
View File

@@ -0,0 +1,98 @@
<template>
<div class="device-tree">
<energyTree :eventLevel="4" @eleMenuData="getTreeText" :dataTree="dataTree" ref="energyTree"
:highlightCurrent="highlightCurrent"
:showCheckbox="showCheckbox" @check-change="checkChange"
:default-checked-keys="defaultCheckedKeys"></energyTree>
</div>
</template>
<script>
import energyTree from '../../components/tree/energyTree'
import {lineTree} from '@/api/app/device.js'
import * as echarts from 'echarts'
import {queryStatisticalSelect, queryCommonStatisticalByTime} from '@/api/app/steady'
export default {
components: {
energyTree,
},
data() {
return {
dataTree: [],
}
},
props: {
showCheckbox: {
type: Boolean,
default: false
},
highlightCurrent: {
type: Boolean,
default: true
},
defaultCheckedKeys: {
type: Array,
default: () => []
},
},
created() {
this.lineTree()
},
methods: {
checkChange(data, checked, indeterminate) {
this.$emit('check-change', data, checked, indeterminate)
},
lineTree() {
lineTree().then((res) => {
console.log(res)
if (res.code === 'A0000') {
this.dataTree = res.data
let arr = []
this.dataTree.forEach((item) => {
item.icon = 'el-icon-s-home'
item.color = 'royalblue'
item.children.forEach((item2) => {
item2.icon = 'el-icon-s-order'
item2.color = 'royalblue'
item2.children.forEach((item3) => {
item3.icon = 'el-icon-s-platform'
item3.color = 'royalblue'
if(item3.comFlag === 1){
item3.color = '#e26257 !important'
}
item3.children.forEach((item4) => {
item4.icon = 'el-icon-location'
arr.push(item4)
})
})
})
})
console.log(this.dataTree)
this.$emit('selectPoint', arr[0])
//默认点击
this.$nextTick().then(() => {
this.$refs.energyTree.$refs.menuTree.setCurrentKey(arr[0].id) // 默认选中节点第一个
})
}
})
},
getTreeText(data, level) {
console.log(data, level)
this.$emit('selectPoint', data)
},
},
}
</script>
<style lang="scss">
.device-tree {
width: 270px;
margin-right: 10px;
flex-shrink: 0;
.menu-tree > .el-row {
height: 36px !important;
padding-top: 2px;
}
}
</style>

77
src/views/govern/components/projectSelect.vue Normal file
View File

@@ -0,0 +1,77 @@
<template>
<el-select
v-model="nowValue"
filterable
remote
clearable
reserve-keyword
placeholder="请输入关键词"
:remote-method="remoteMethod"
:loading="loading"
style="width: 100%"
>
<el-option
v-for="(item, index) in options"
:key="index"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</template>
<script>
import { queryProject } from "@/api/app/project.js";
export default {
props: {
value: {
type: String,
default: "",
},
},
watch: {
nowValue(val) {
console.log(val);
this.$emit("input", val);
this.$emit("change", val);
},
},
data() {
return {
options: [],
nowValue: this.value,
loading: false,
state: [],
};
},
mounted() {
this.getProjectList("");
},
methods: {
getProjectList(searchValue) {
queryProject({
pageNum: 1,
pageSize: 100,
searchValue,
}).then((res) => {
this.options = res.data.records.map((item) => {
return { value: item.id, label: item.name };
});
this.state.length > 0 ? null : (this.state = this.options);
console.log(this.options);
});
},
remoteMethod(query) {
console.log(query);
if (query !== "") {
this.getProjectList(query);
} else {
console.log(this.state);
this.options = this.state;
}
},
},
};
</script>

606
src/views/govern/device/control.vue Normal file
View File

@@ -0,0 +1,606 @@
<template>
<Page>
<div class="device-control">
<!--左侧列表区-->
<PointTree @selectPoint="selectPoint" />
<!--右侧内容区-->
<div class="device-control-right" v-if="deviceData" v-loading="loading">
<el-descriptions title="设备基本信息" class="mb10" :column="3" border>
<el-descriptions-item>
<template slot="label">名称</template>
{{ deviceData.name }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">类型</template>
{{
devTypeOptions.filter(item => item.value == deviceData.devType)[0] &&
devTypeOptions.filter(item => item.value == deviceData.devType)[0].label
}}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">接入方式</template>
{{ deviceData.devAccessMethod }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">识别码</template>
{{ deviceData.ndid }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">型号</template>
{{
devModelOptions.filter(item => item.value == deviceData.devModel)[0] &&
devModelOptions.filter(item => item.value == deviceData.devModel)[0].label
}}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">接入时间</template>
{{ deviceData.time }}
</el-descriptions-item>
</el-descriptions>
<el-tabs v-model="dataSet" type="card" class="device-control-box-card" @tab-click="handleClick">
<el-tab-pane
lazy
:label="item.name"
:name="item.id"
v-for="item in deviceData.dataSetList"
:key="item.id"
></el-tab-pane>
<el-form :inline="true">
<el-form-item label="指标:">
<el-input
v-model="formInline.searchValue"
autocomplete="off"
clearable
placeholder="请输入关键词"
></el-input>
</el-form-item>
<el-form-item v-if="dataSet.indexOf('_history') > -1">
<timepicker ref="timepk" :interval="3"></timepicker>
</el-form-item>
<el-form-item>
<el-button type="primary" size="mini" icon="el-icon-search" @click="handleClick">
查询
</el-button>
</el-form-item>
</el-form>
<div style="overflow: auto; height: calc(100vh - 388px)">
<div class="content">
<el-card
class="box-card"
v-for="(item, index) in tableData"
:key="index"
:style="
'color:#fff;opacity:0.8;background-image:linear-gradient(' +
settings.themeColor +
',#ccc);'
"
>
<div slot="header" class="clearfix" :style="'background:' + settings.themeColor">
<span style="flex: 1">{{ item.name }}</span>
<i
class="el-icon-s-marketing ml10"
style="font-size: 26px; cursor: pointer"
@click="getDeviceDataTrend(item)"
></i>
</div>
<div class="box-card-content" v-if="dataSet.indexOf('_history') == -1">
<div v-for="(child, childIndex) in item.children" :key="childIndex">
{{ child.anotherName }}:
{{ child.dataValue === 3.1415926 ? '暂无数据' : child.dataValue }}
</div>
<div class="mt10" style="color: rgb(0, 102, 80)">
统计时间：{{ item.children.length ? item.children[0].time : '' }}
</div>
</div>
<div v-else-if="item.children.length">
<div style="display: flex; align-items: center">
<el-tag
size="mini"
effect="dark"
type="danger"
style="width: 40px; text-align: center"
class="mr10"
>
MAX
</el-tag>
{{
item.children[0].maxValue === 3.1415956
? '暂无数据'
: item.children[0].maxValue
}}
</div>
<div style="display: flex; align-items: center" class="mt10">
<el-tag
size="mini"
effect="dark"
type="success"
style="width: 40px; text-align: center"
class="mr10"
>
AVG
</el-tag>
{{
item.children[0].avgValue === 3.1415956
? '暂无数据'
: item.children[0].avgValue
}}
</div>
<div style="display: flex; align-items: center" class="mt10">
<el-tag
size="mini"
effect="dark"
type="warning"
style="width: 40px; text-align: center"
class="mr10"
>
MIN
</el-tag>
{{
item.children[0].minValue === 3.1415956
? '暂无数据'
: item.children[0].minValue
}}
</div>
</div>
</el-card>
<el-empty description="暂无数据" v-if="tableData.length === 0"></el-empty>
</div>
</div>
<el-pagination
v-if="tableData.length"
background
align="right"
@size-change="handleSizeChange"
@current-change="pageChange"
:current-page="formInline.pageNum"
:page-sizes="[20, 30, 40, 50, 100]"
:page-size="formInline.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
></el-pagination>
</el-tabs>
</div>
<el-dialog
:close-on-click-modal="false"
:title="dialogData.name"
:visible.sync="dialogVisible"
width="80%"
class="dfghs"
@close="dialogClose"
:destroy-on-close="true"
>
<el-form :inline="true">
<el-form-item>
<timepicker ref="timepk2" :interval="3"></timepicker>
</el-form-item>
<el-form-item>
<el-button
type="primary"
size="mini"
icon="el-icon-search"
@click="getDeviceDataTrend(dialogData)"
>
查询
</el-button>
</el-form-item>
</el-form>
<!-- <div class="title">趋势曲线</div> -->
<div id="main" class="mt10" v-if="echartsData && echartsData.length"></div>
<el-empty description="暂无数据" v-else style="height: 60vh"></el-empty>
</el-dialog>
</div>
</Page>
</template>
<script>
import { getDeviceData, deviceRtData, deviceHisData, getDeviceDataTrend } from '@/api/app/device.js'
import { queryByCode, queryCsDictTree, queryByid } from '@/api/app/setting.js'
import PointTree from '../components/pointTree'
import * as echarts from 'echarts'
import timepicker from '@/views/components/TimePicker/index4.vue'
export default {
name: 'GovernDeviceControl',
components: { timepicker, PointTree },
data() {
return {
pickerOptions: {
shortcuts: [
{
text: '最近一周',
onClick(picker) {
const end = new Date()
console.log(end)
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
picker.$emit('pick', [start, end])
}
},
{
text: '最近一个月',
onClick(picker) {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
picker.$emit('pick', [start, end])
}
},
{
text: '最近三个月',
onClick(picker) {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
picker.$emit('pick', [start, end])
}
},
{
text: '最近六个月',
onClick(picker) {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 180)
picker.$emit('pick', [start, end])
}
},
{
text: '最近一年',
onClick(picker) {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 360)
picker.$emit('pick', [start, end])
}
}
]
},
formLabelWidth: '68px',
deviceData: null,
dataSet: '',
loading: false,
devTypeOptions: [],
devModelOptions: [],
tableData: [],
treeData: [],
defaultProps: {
children: 'children',
label: 'label'
},
pointData: {},
formInline: {
date: [],
pageNum: 1,
pageSize: 20,
lineId: '',
id: '',
startTime: '',
endTime: '',
searchValue: ''
},
total: 0,
dialogVisible: false,
dialogForm: {
startTime: '',
endTime: '',
date: []
},
dialogData: {},
echartsData: null
}
},
computed: {
vth() {
return window.sessionStorage.getItem('appheight') - 260
},
settings() {
return this.$store.state.settings
}
},
created() {
queryByCode('Direct_Connected_Device').then(res => {
queryCsDictTree(res.data.id).then(res => {
this.devTypeOptions = res.data.map(item => {
return {
value: item.id,
label: item.name,
...item
}
})
})
queryByid(res.data.id).then(res => {
this.devModelOptions = res.data.map(item => {
return {
value: item.id,
label: item.name,
...item
}
})
})
})
this.dialogForm.endTime = this.$tools.formatDate()
// 今日0点
this.dialogForm.startTime = this.$tools.formatDate(new Date(new Date().setHours(0, 0, 0, 0)))
this.dialogForm.date = [this.dialogForm.startTime, this.dialogForm.endTime]
},
mounted() {},
methods: {
dialogClose() {},
dateChange(e) {},
formInlineDateChange(e) {},
getDeviceDataTrend(e) {
this.dialogData = e
this.dialogVisible = true
this.$nextTick(() => {
getDeviceDataTrend({
endTime: this.$refs.timepk2.timeValue[1],
lineId: this.formInline.lineId,
startTime: this.$refs.timepk2.timeValue[0],
statisticalParams: e.children
}).then(res => {
if (res.data.length && res.data[0].length) {
this.echartsData = res.data
this.$nextTick(() => {
this.initChart(res.data)
})
} else {
this.echartsData = null
}
})
})
},
initChart(data) {
var chartDom = document.getElementById('main')
var myChart = echarts.init(chartDom)
let arr = []
data.forEach(item => {
arr.push(...item)
})
console.log(
arr
.map(item => item.statisticalData)
.sort((a, b) => {
return b - a
})
)
console.log(arr)
console.log(
arr
.map(item => item.statisticalData)
.sort((a, b) => {
return b - a
})[0] * 1.5
)
var option
option = {
grid: {
right: '10px',
bottom: '10px',
left: '10px',
top: '40px',
containLabel: true
},
tooltip: {
trigger: 'axis'
},
legend: {
data: data.map(item => {
return item[0].anotherName
})
},
xAxis: {
type: 'category',
data: data[0].map(item => {
return item.time
}),
axisLabel: {
formatter: function (value, index) {
return value.split(' ').join('\n')
}
}
},
yAxis: {
name: `单位:(${data[0][0].unit})`,
type: 'value',
axisLine: {
show: true
},
minInterval: 1,
min: 0,
max: parseInt(
arr
.map(item => item.statisticalData)
.sort((a, b) => {
return b - a
})[0] * (1.5).toFixed(0)
)
},
series: data.map(item => {
return {
data: item.map(item => {
return item.statisticalData
}),
markPoint: {
symbol: 'circle',
symbolSize: 8,
label: {
show: false
},
data: [
{ type: 'max', name: 'Max' },
{ type: 'min', name: 'Min' }
]
},
type: 'line',
showSymbol: false,
smooth: true,
name: item[0].anotherName
}
})
// series: [
// {
// data: [820, 932, 901, 934, 1290, 1330, 1320],
// type: 'line',
// smooth: true,
// },
// ],
}
option && myChart.setOption(option)
window.echartsArr.push(myChart)
},
pageChange(e) {
this.formInline.pageNum = e
this.handleClick()
},
handleSizeChange(val) {
this.formInline.pageNum = 1
this.formInline.pageSize = val
this.handleClick()
},
selectPoint(e) {
this.loading = true
console.log(e, 123)
getDeviceData(e.pid, 'history', e.id).then(res => {
res.data.dataSetList.forEach(item => {
// dataSetList.push({
// ...item,
// name: '历史' + item.name,
// id: item.id + '_history',
// })
if (item.type === 'history') {
item.id = item.id + '_history'
}
})
// this.deviceData.dataSetList.push(...dataSetList)
this.deviceData = res.data
if (res.data.dataSetList.length === 0) {
this.dataSet = ''
this.tableData = []
this.$nextTick(() => {
this.loading = false
})
} else {
this.dataSet = this.deviceData.dataSetList[0].id
this.handleClick()
}
})
this.formInline.lineId = e.id
this.pointData = e
},
handleClick(tab, event) {
if (tab) {
this.tableData = []
this.formInline.pageNum = 1
}
if (this.dataSet.indexOf('_history') > -1) {
this.$nextTick(() => {
this.formInline.startTime = this.$refs.timepk.timeValue[0]
this.formInline.endTime = this.$refs.timepk.timeValue[1]
this.formInline.id = this.dataSet.replace('_history', '')
deviceHisData(this.formInline).then(res => {
console.log(res)
this.tableData = res.data.records
this.total = res.data.total
this.$nextTick(() => {
this.loading = false
})
})
})
} else {
this.formInline.id = this.dataSet
deviceRtData(this.formInline).then(res => {
this.tableData = res.data.records
this.total = res.data.total
this.$nextTick(() => {
this.loading = false
})
})
}
}
}
}
</script>
<style lang="scss" >
::v-deep .dfghs .el-dialog .el-dialog__body {
max-height: 70vh !important;
padding: 10px !important;
// overflow-y: auto;
}
.device-control {
display: flex;
.device-control-right {
flex: 1;
}
.el-descriptions--small.is-bordered .el-descriptions-item__cell {
padding: 8px 10px !important;
}
.custom-tree-node {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
padding-right: 8px;
}
.content {
box-sizing: border-box;
overflow: auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-template-rows: max-content;
grid-gap: 10px;
justify-content: center;
.box-card {
display: flex;
flex-direction: column;
justify-content: space-between;
color: #fff;
background-image: linear-gradient(rgb(44, 162, 180), rgb(6, 78, 96));
opacity: 0.8;
min-height: 150px;
font-size: 13px;
.el-card__header {
padding: 0;
.clearfix {
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
height: 35px;
padding: 0 10px;
background: rgb(6, 78, 96);
color: #fff;
}
}
.el-card__body {
flex: 1;
margin-bottom: 0;
.box-card-content {
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
}
}
}
#main {
width: 100%;
height: 60vh;
}
}
::v-deep .device-control-box-card {
// height: calc(100vh - 250px);
overflow-y: scroll;
}
</style>

376
src/views/govern/device/manage.vue Normal file
View File

@@ -0,0 +1,376 @@
<template>
<Page>
<div class="device-manage">
<DeviceTree @selectDevice="selectDevice" />
<div class="device-manage-right" v-if="deviceData" v-loading="loading">
<el-descriptions title="设备基本信息" class="mb10" :column="3" border>
<template slot="extra">
<el-button
type="primary"
icon="el-icon-share"
size="small"
@click="openGroup"
:loading="getGroupLoading"
>
设备模版分组
</el-button>
</template>
<el-descriptions-item>
<template slot="label">名称</template>
{{ deviceData.name }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">类型</template>
{{
devTypeOptions.filter(item => item.value == deviceData.devType)[0] &&
devTypeOptions.filter(item => item.value == deviceData.devType)[0].label
}}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">接入方式</template>
{{ deviceData.devAccessMethod }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">识别码</template>
{{ deviceData.ndid }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">型号</template>
{{
devModelOptions.filter(item => item.value == deviceData.devModel)[0] &&
devModelOptions.filter(item => item.value == deviceData.devModel)[0].label
}}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">接入时间</template>
{{ deviceData.time }}
</el-descriptions-item>
</el-descriptions>
<el-tabs v-model="dataSet" type="card" class="device-manage-box-card" @tab-click="handleClick">
<el-tab-pane
lazy
:label="item.name"
:name="item.id"
v-for="item in deviceData.dataSetList"
:key="item.id"
></el-tab-pane>
<el-table
stripe
:header-cell-style="{ height: '24px', padding: '0px' }"
highlight-current-row
header-cell-class-name="table_header"
:data="tableData"
height="calc(100vh - 320px)"
border
style="width: 100%"
>
<el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
<el-table-column prop="name" label="数据名称" align="center"></el-table-column>
<el-table-column prop="phasic" label="相别" align="center"></el-table-column>
<el-table-column prop="type" label="数据类型" align="center"></el-table-column>
<el-table-column prop="unit" label="单位" align="center"></el-table-column>
<el-table-column prop="startTimes" label="开始次数" align="center"></el-table-column>
<el-table-column prop="endTimes" label="结束次数" align="center"></el-table-column>
</el-table>
</el-tabs>
<el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" width="30%" class="dfghs">
<el-descriptions class="mb10" :column="3" border>
<el-descriptions-item>
<template slot="label">名称</template>
{{ deviceData.name }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">识别码</template>
{{ deviceData.ndid }}
</el-descriptions-item>
</el-descriptions>
<el-descriptions :title="'数据集名称: ' + dataSetName" size="mini" :column="2" border>
<template slot="extra">
<template v-if="newGroupVisible">
<el-input
v-model="form.name"
autocomplete="off"
clearable
placeholder="请输入分组名称"
></el-input>
<el-button class="mt10" type="primary" size="mini" @click="newGroupVisible = false">
取消
</el-button>
<el-button class="mt10 ml10" type="primary" size="mini" @click="addNewGroup">
完成
</el-button>
</template>
<template v-else>
<el-button type="primary" size="mini" @click="selectGroup">
{{ selectAll ? '取消全选' : '全选' }}
</el-button>
<el-button type="primary" size="mini" @click="newGroupVisible = true">
新增分组
</el-button>
</template>
</template>
</el-descriptions>
<div style="height: 40vh; overflow: auto">
<el-tree
:data="treeData"
node-key="id"
draggable
:allow-drop="allowDrop"
:allow-drag="allowDrag"
>
<div class="custom-tree-node" slot-scope="{ node, data }">
<span>{{ node.label }}</span>
<div v-if="node.level == 1">
<el-popconfirm
style="margin-right: 20px"
:title="'确定删除' + node.label + '吗?'"
@confirm="deleteGroup(node)"
>
<i class="el-icon-delete" slot="reference"></i>
</el-popconfirm>
<el-checkbox v-model="data.isShow" @click.stop.native=""></el-checkbox>
</div>
</div>
</el-tree>
</div>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="submit">确 定</el-button>
</div>
</el-dialog>
</div>
</div>
</Page>
</template>
<script>
import { getDeviceData, getTargetById, getGroup, updateGroArr } from '@/api/app/device.js'
import { queryByCode, queryCsDictTree, queryByid } from '@/api/app/setting.js'
import DeviceTree from '../components/deviceTree'
export default {
name: 'GovernDeviceManage',
components: { DeviceTree },
data() {
return {
selectAll: false,
dialogFormVisible: false,
getGroupLoading: false,
newGroupVisible: false,
formLabelWidth: '68px',
dialogTitle: '设备模版分组',
deviceData: null,
dataSet: '',
loading: false,
devTypeOptions: [],
devModelOptions: [],
tableData: [],
form: {
name: ''
},
treeData: [],
defaultProps: {
children: 'children',
label: 'label'
}
}
},
computed: {
dataSetName() {
if (this.deviceData && this.deviceData.dataSetList && this.deviceData.dataSetList.length > 0) {
return this.deviceData.dataSetList.filter(item => item.id == this.dataSet)[0].name
}
}
},
created() {
queryByCode('Device_Type').then(res => {
queryCsDictTree(res.data.id).then(res => {
this.devTypeOptions = res.data.map(item => {
return {
value: item.id,
label: item.name,
...item
}
})
})
queryByid(res.data.id).then(res => {
this.devModelOptions = res.data.map(item => {
return {
value: item.id,
label: item.name,
...item
}
})
})
})
},
mounted() {},
methods: {
deleteGroup(node) {
console.log(node)
if (node.data.children && node.data.children.length > 0) {
this.$message.error('该分组下有指标，不能删除')
return
}
let index = this.treeData.findIndex(item => item.id === node.data.id || item.name === node.data.name)
this.treeData.splice(index, 1)
},
selectGroup() {
if (this.selectAll) {
this.treeData.forEach(item => {
item.isShow = false
})
this.selectAll = false
} else {
this.treeData.forEach(item => {
item.isShow = true
})
this.selectAll = true
}
},
addNewGroup() {
if (this.form.name === '') {
this.$message.error('请输入分组名称')
return
}
if (this.treeData.some(item => item.name === this.form.name)) {
this.$message.error('分组名称已存在')
return
}
this.newGroupVisible = false
this.treeData.splice(0, 0, {
id: '',
label: this.form.name,
name: this.form.name,
isShow: true,
children: []
})
this.form.name = ''
},
submit() {
let data = JSON.parse(JSON.stringify(this.treeData))
const call = data => {
data.forEach(item => {
item.isShow = item.isShow ? 1 : 0
delete item.label
if (item.children && item.children.length > 0) {
call(item.children)
}
})
}
call(data)
data.forEach(item => {
item.children = item.children.map(item => item.id)
})
updateGroArr({
setId: this.dataSet,
data: data
}).then(res => {
if (res.code == 'A0000') {
this.$message({
message: '保存成功',
type: 'success'
})
this.dialogFormVisible = false
}
})
},
openGroup() {
if (!this.dataSet) {
return this.$message.error('暂无数据')
}
this.getGroupLoading = true
getGroup(this.dataSet).then(res => {
const call = data => {
data.forEach(item => {
item.label = item.name
item.isShow = item.isShow == 1
if (item.children && item.children.length > 0) {
call(item.children)
}
})
}
call(res.data)
this.treeData = res.data
this.selectAll = this.treeData.every(item => item.isShow)
this.dialogFormVisible = true
this.getGroupLoading = false
})
},
selectDevice(e) {
this.loading = true
console.log(e, 123)
getDeviceData(e.id, 'rt').then(res => {
this.deviceData = res.data
this.loading = false
if (res.data.dataSetList.length === 0) {
this.dataSet = ''
this.tableData = []
} else {
this.dataSet = res.data.dataSetList[0].id
this.handleClick()
}
})
},
handleClick(tab, event) {
this.tableData = []
getTargetById(this.dataSet).then(res => {
console.log(res)
this.tableData = res.data
})
},
allowDrop(draggingNode, dropNode, type) {
console.log(dropNode)
return (dropNode.level === 2 && type !== 'inner') || (dropNode.level === 1 && type === 'inner')
},
allowDrag(draggingNode) {
console.log(draggingNode)
return draggingNode.level === 2
}
}
}
</script>
<style lang="scss">
.device-manage {
display: flex;
.el-table--enable-row-hover .el-table__body tr:hover > td {
background-color: $hoverf !important;
}
.el-dialog__body {
max-height: 70vh !important;
padding: 10px !important;
.el-descriptions__title {
font-size: 14px;
}
.el-descriptions__extra {
height: 36px;
align-items: center;
display: flex;
}
.el-form {
padding-right: 0;
}
}
.el-descriptions--small.is-bordered .el-descriptions-item__cell {
padding: 8px 10px !important;
}
.device-manage-right {
overflow: hidden;
flex: 1;
}
.custom-tree-node {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
font-size: 14px;
padding-right: 8px;
}
}
</style>

114
src/views/govern/device/tourist.vue Normal file
View File

@@ -0,0 +1,114 @@
<template>
<Page>
<div class="device-manage">
<DeviceTree showCheckbox @check-change="checkChange" :default-checked-keys="defaultCheckedKeys" />
<el-table
highlight-current-row
style="flex: 1"
:data="tableData"
height='calc(100vh - 135px)'
bordervth
stripe
v-loading="loading"
:header-cell-style="{
//background:'#5E95E8',
//color:'#FFFFFF',
height: '25px',
padding: '0px'
}"
header-cell-class-name="table_header"
:row-style="{ height: '28px' }"
:cell-style="{ padding: '0px' }"
algin="center"
>
<el-table-column prop="enginerName" label="工程名称" align="center"></el-table-column>
<el-table-column prop="projectName" label="项目名称" align="center"></el-table-column>
<el-table-column prop="deviceName" label="装置名称" align="center"></el-table-column>
<!-- <el-table-column label="操作" width="240px">-->
<!-- <template slot-scope="scope">-->
<!-- <div class="table-operation">-->
<!-- <el-button size="mini" type="danger" @click="deleteVisitorConfig(scope.row)">移除</el-button>-->
<!-- </div>-->
<!-- </template>-->
<!-- </el-table-column>-->
</el-table>
</div>
</Page>
</template>
<script>
import { getVisitorConfig, updateVisitorConfig } from '@/api/app/device'
import DeviceTree from '../components/deviceTree'
import energyTree from '@/views/components/tree/energyTree.vue'
export default {
name: 'GovernDeviceTourist',
components: { energyTree, DeviceTree },
data() {
return {
loading: false,
// tabHeight: 'calc(100vh - 118px)',
defaultCheckedKeys: [],
timeout: null,
tableData: []
}
},
computed: {
vth() {
return window.sessionStorage.getItem('appheight') - 10
}
},
created() {
this.getVisitorConfig()
},
mounted() {},
methods: {
checkChange(data, checked, indeterminate) {
console.log(data, checked, indeterminate)
if (data.level === 2) {
if (checked) {
this.defaultCheckedKeys.push(data.id)
} else {
this.defaultCheckedKeys.splice(this.defaultCheckedKeys.indexOf(data.id), 1)
}
clearTimeout(this.timeout)
this.timeout = setTimeout(this.updateVisitorConfig, 100)
}
},
updateVisitorConfig() {
const result = Array.from(new Set(this.defaultCheckedKeys))
updateVisitorConfig(
result.map(item => {
return {
deviceId: item
}
})
).then(res => {
if (res.code === 'A0000') {
this.getVisitorConfig()
}
})
},
getVisitorConfig() {
getVisitorConfig().then(res => {
console.log(res)
if (res.code === 'A0000') {
this.tableData = res.data
if (this.defaultCheckedKeys.length > 0) return
this.defaultCheckedKeys = [] // 清空
res.data.forEach(item => {
this.defaultCheckedKeys.push(item.deviceId)
})
}
})
}
}
}
</script>
<style lang="scss">
.el-tree {
font-size: 14px;
}
.device-manage{
display: flex;
}
</style>

394
src/views/govern/disposition/gplot.vue Normal file
View File

@@ -0,0 +1,394 @@
<template>
<Page>
<el-form :inline="true" class="demo-form-inline">
<el-form-item style="float: right">
<el-upload
action=""
class="upload-demo"
:show-file-list="false"
:auto-upload="false"
:on-change="chooseImage"
>
<el-button size="small" type="primary" icon="el-icon-plus">新增拓扑图</el-button>
</el-upload>
</el-form-item>
</el-form>
<el-table
stripe
:data="tableData"
header-cell-class-name="table_header"
:height="tabHeight"
highlight-current-row
border
style="width: 100%"
>
<el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
<el-table-column align="center" prop="name" label="拓扑图模版名称"></el-table-column>
<el-table-column align="center" prop="name" label="监测点数量">
<template slot-scope="scope">
{{ scope.row.csLineTopologyTemplateVOList.length }}
</template>
</el-table-column>
<el-table-column label="操作" width="220px" align="center">
<template slot-scope="scope">
<!-- <div class="table-operation"> -->
<el-button @click="handleClick(scope.row)" type="primary" size="mini" icon="el-icon-edit">
编辑
</el-button>
<el-button @click="deleteTopoTemplate(scope.row)" type="danger" size="mini" icon="el-icon-delete">
删除
</el-button>
<!-- </div> -->
</template>
</el-table-column>
</el-table>
<el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" width="30%" class="dfhdsa">
<!-- <el-form :label-width="formLabelWidth">-->
<!-- <el-form-item label="名称:">-->
<!-- <el-input v-model="form.name" autocomplete="off" placeholder="请输入"></el-input>-->
<!-- </el-form-item>-->
<!-- </el-form>-->
<el-form :label-width="formLabelWidth">
<el-form-item label="拓扑图:" style='height: auto !important;'>
<div class="gplot-content">
<img :src="form.file" class="gplot-content" style="border: 1px solid #dcdfe6" />
<VueDragResize
:isActive="editorIndex == index"
:h="item.height"
:w="item.width"
:x="item.left"
:y="item.top"
v-on:dragging="resize(index, $event)"
v-for="(item, index) in pointList"
:key="index"
:isResizable="false"
>
<div
class="text"
style="line-height: 20px; white-space: nowrap"
:style="{ color: item.name === '监测点' ? 'red' : 'black' }"
@click.stop="textClick(item, index)"
>
{{ item.name }}
</div>
</VueDragResize>
<div>注意监测点不要移出圈</div>
</div>
</el-form-item>
</el-form>
<el-form :label-width="formLabelWidth" v-if="editorIndex > -1">
<el-form-item label="监测点位置:">
<div style="display: flex">
<el-select
v-model="pointList[editorIndex].position"
placeholder="请选择"
style="flex: 1"
@change="positionChange"
>
<el-option
v-for="item in linePosition"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
<el-button class="ml20" type="danger" size="mini" @click="deletePoint" icon="el-icon-delete">
删除
</el-button>
</div>
</el-form-item>
</el-form>
<el-form :label-width="formLabelWidth">
<el-form-item label="">
<el-button type="primary" @click="addPoint">添加监测点</el-button>
</el-form-item>
</el-form>
<el-form :label-width="formLabelWidth">
<!-- <el-form-item label="名称:">-->
<!-- <el-input v-model="form.name" autocomplete="off" placeholder="请输入"></el-input>-->
<!-- </el-form-item>-->
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="addGplotSubmit">确 定</el-button>
</div>
</el-dialog>
</Page>
</template>
<script>
import { uploadTopo, uploadTopoPoint, getTopoTemplate, deleteTopoTemplate } from '@/api/app/device'
import VueDragResize from 'vue-drag-resize'
export default {
name: 'GovernDispositionGplot',
components: {
VueDragResize
},
data() {
return {
pointList: [], // 检测带你列表
dialogFormVisible: false,
dialogTitle: '新增',
formLabelWidth: '95px',
form: {
name: null,
file: '',
id: ''
},
mode: 'transfer', // transfer addressList
defaultProps: {
label: 'name',
children: 'children'
},
fromData: [], // 穿梭框 - 源数据 - 树形
toData: [], // 穿梭框 - 目标数据 - 树形
toArray: [],
defaultCheckedKeys: [], // 左侧默认选中数据
dialogVisible: false,
tableData: [],
zbdata: [],
bindId: [],
rowId: '',
renderFunc(h, option) {
return <span>{option.label}</span>
},
tabHeight: 'calc(100vh - 181px)',
editorIndex: -1,
linePosition: []
}
},
created() {
const dictypeData = JSON.parse(localStorage.getItem('dictypeData'))
if (dictypeData) {
dictypeData.forEach(item => {
let arr = [
{
code: 'Line_Position',
key: 'linePosition'
}
]
arr.forEach(item2 => {
if (item.code == item2.code) {
this[item2.key] = item.children.map(item3 => {
return {
label: item3.name,
value: item3.id,
code: item3.code
}
})
}
})
})
}
this.queryData()
},
methods: {
positionChange(e) {
console.log(e)
this.pointList[this.editorIndex].name = this.linePosition.find(item => {
return item.value == e
}).label
},
chooseImage(e) {
console.warn(e)
uploadTopo(e.raw).then(res => {
if (res.code == 'A0000') {
this.form.file = localStorage.getItem('STATIC_URL') + res.data.filePath
this.form.id = res.data.id
this.dialogFormVisible = true
this.pointList = []
this.editorIndex = -1
}
})
},
addPoint() {
this.pointList.push({
name: '监测点',
position: '',
width: 'auto',
height: 20,
top: 100,
left: 100
})
this.editorIndex = this.pointList.length - 1
},
textClick(item, index) {
this.editorIndex = index
console.log(this.editorIndex)
this.$forceUpdate()
},
deletePoint() {
this.pointList.splice(this.editorIndex, 1)
let arr = this.pointList
this.pointList = []
this.editorIndex = -1
this.$nextTick(() => {
this.pointList = arr
})
},
resize(index, newRect) {
if (!newRect) return
const dom = this.pointList[index]
dom.top = newRect.top
dom.left = newRect.left
},
addGplotSubmit() {
let allSelect = this.pointList.some(item => item.position === '')
if (allSelect) {
this.$message.error('请完善监测点信息')
return
}
let arr = this.pointList.map(item => {
return {
linePostion: item.position,
lat: item.left,
lng: item.top,
topoId: this.form.id
}
})
uploadTopoPoint(arr).then(res => {
if (res.code == 'A0000') {
this.$message.success('操作成功')
this.dialogFormVisible = false
this.queryData()
}
})
},
deleteTopoTemplate(item) {
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
deleteTopoTemplate(item.id).then(res => {
if (res.code == 'A0000') {
this.$message.success('操作成功')
this.queryData()
}
})
})
},
handleClick(row) {
this.editorIndex = -1
this.dialogFormVisible = true
this.dialogTitle = '编辑'
this.form.id = row.id
this.form.file = localStorage.getItem('STATIC_URL') + row.filePath
this.pointList = []
this.$nextTick(() => {
this.pointList = row.csLineTopologyTemplateVOList.map(item => {
return {
name: this.linePosition.find(item2 => {
return item2.value == item.linePostion
}).label,
position: item.linePostion,
width: 'auto',
height: 20,
top: item.lng,
left: item.lat
}
})
console.log(this.pointList)
})
},
handleChange(value, direction, movedKeys) {
console.log(value, direction, movedKeys)
console.log(movedKeys)
},
handleClose() {
this.dialogVisible = false
},
//获取列表数据
queryData() {
getTopoTemplate().then(res => {
if (res.code == 'A0000') {
this.tableData = res.data
}
})
}
}
}
</script>
<style lang="less" scoped>
.gplot-content {
width: 375px;
object-fit: cover;
}
.content-container {
width: auto;
}
::v-deep .el-transfer-panel__list {
height: 20vh;
padding-top: 0;
overflow: auto;
}
.title {
padding: 40px 0;
}
.box {
width: 600px;
margin: 0 auto;
//height:50vh;
text-align: left;
}
.btn {
padding: 5px 10px;
background-color: #f5f7fa;
border: 1px solid #ebeef5;
outline: none;
}
.my-title-right {
float: right;
font-size: 12px;
cursor: pointer;
}
wl-transfer .el-tree {
// height: 50vh;
display: inline-block !important;
min-width: 100%;
margin-bottom: 5px;
}
::v-deep .el-tree {
position: relative;
height: 22vh;
overflow: auto;
color: #000608;
cursor: default;
background: #f5f7fa;
}
::v-deep .wl-transfer .transfer-main {
height: 50vh;
padding: 0 10px 10px;
overflow: auto;
box-sizing: border-box;
}
::v-deep .wl-transfer .transfer-title {
height: 40px;
padding: 0 15px;
margin-top: -2px;
font-size: 16px;
line-height: 40px;
color: #333;
background-color: #f5f7fa;
border-bottom: 1px solid #ebeef5;
}
</style>
<style lang="scss" scoped>
::v-deep .dfhdsa .el-dialog .el-dialog__body {
max-height: 70vh !important;
padding: 10px !important;
// overflow-y: auto;
}
</style>

179
src/views/govern/disposition/salesman.vue Normal file
View File

@@ -0,0 +1,179 @@
<template>
<Page>
<div class="salesman">
<MarketTree @selectUser="selectUser" />
<div style='flex: 1'>
<el-descriptions title="用户基本信息" class="mb10" :column="2" border>
<template slot="extra">
<el-button type="primary" size="small" icon="el-icon-plus" @click="getMarketEnginner">
添加工程
</el-button>
</template>
<el-descriptions-item>
<template slot="label">名称</template>
{{ user.name }}
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">手机号</template>
{{ user.phone }}
</el-descriptions-item>
</el-descriptions>
<el-table
stripe
style="width: 100%"
:data="tableData"
height='calc(100vh - 225px)'
border
highlight-current-row
v-loading="loading"
header-cell-class-name="table_header"
>
<el-table-column prop="engineerName" label="工程名称"></el-table-column>
<el-table-column label="操作" width="240px" align="center">
<template slot-scope="scope">
<el-button
size="mini"
type="danger"
icon="el-icon-delete"
@click="deleteEngineering(scope.row)"
>
移除
</el-button>
</template>
</el-table-column>
</el-table>
</div>
<el-dialog title="添加工程" :visible.sync="dialogFormVisible" width="30%" class="hhgjk">
<div style="display: flex; align-items: center" class="mb10">
<el-input
size="mini"
v-model="engineerName"
autocomplete="off"
placeholder="请输入工程名称"
></el-input>
<el-button size="mini" class="ml10" type="primary" @click="engineerName = ''">重置</el-button>
</div>
<el-table
stripe
:cell-style="{ textAlign: 'center' }"
:header-cell-style="{ textAlign: 'center' }"
style="width: 100%"
:data="filterTableData2"
height="60vh"
border
v-loading="loading"
header-cell-class-name="table_header"
algin="center"
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" width="55"></el-table-column>
<el-table-column prop="name" label="工程名称"></el-table-column>
</el-table>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="addMarketData">确 定</el-button>
</div>
</el-dialog>
</div>
</Page>
</template>
<script>
import MarketTree from '../components/marketTree'
import { getMarketData, getMarketEnginner, removeMarketData, addMarketData } from '@/api/app/user'
export default {
name: 'GovernDeviceSalesman',
components: { MarketTree },
data() {
return {
loading: false,
tabHeight: 'calc(100vh - 210px)',
defaultCheckedKeys: [],
timeout: null,
tableData: [],
tableData2: [],
dialogFormVisible: false,
user: {},
selectArr: [],
engineerName: ''
}
},
computed: {
vth() {
return window.sessionStorage.getItem('appheight') - 100
},
filterTableData2() {
return this.tableData2.filter(item => {
return item.name.includes(this.engineerName)
})
}
},
created() {},
mounted() {},
methods: {
handleSelectionChange(val) {
this.selectArr = val
},
addMarketData() {
let arr = this.tableData.map(item => {
return {
engineerId: item.engineerId,
userId: this.user.id
}
})
arr.push(
...this.selectArr.map(item => {
return {
engineerId: item.id,
userId: this.user.id
}
})
)
addMarketData(arr).then(res => {
this.$message({
message: '操作成功',
type: 'success'
})
this.getMarketData()
this.dialogFormVisible = false
})
},
deleteEngineering(row) {
console.log(row)
removeMarketData(row.id).then(res => {
this.$message({
message: '删除成功',
type: 'success'
})
this.getMarketData()
this.dialogFormVisible = false
})
},
selectUser(data) {
this.selectArr = []
this.user = data
this.getMarketData()
},
getMarketData() {
getMarketData(this.user.id).then(res => {
this.tableData = res.data
})
},
getMarketEnginner() {
this.engineerName = ''
getMarketEnginner(this.user.id).then(res => {
this.tableData2 = res.data
this.dialogFormVisible = true
})
}
}
}
</script>
<style lang="scss">
.salesman {
display: flex;
.el-descriptions--small.is-bordered .el-descriptions-item__cell {
padding: 8px 10px !important;
}
}
</style>

740
src/views/govern/disposition/type.vue Normal file
View File

@@ -0,0 +1,740 @@
<template>
<Page>
<el-form :inline="true" class="demo-form-inline">
<el-form-item style="float: right">
<el-button type="primary" icon="el-icon-plus" @click="addType">新增</el-button>
</el-form-item>
</el-form>
<el-table
stripe
header-cell-class-name="table_header"
highlight-current-row
:data="tableData"
height="calc(100vh - 180px)"
border
style="width: 100%"
>
<el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
<el-table-column align="center" prop="name" label="统计类型"></el-table-column>
<el-table-column label="操作" width="320px" align="center">
<template slot-scope="scope">
<!-- <div class="table-operation"> -->
<el-button @click="handleClick(scope.row)" type="primary" size="mini" icon="el-icon-share">
绑定指标
</el-button>
<el-button size="mini" type="primary" @click="edit(scope.row)" icon="el-icon-edit">编辑</el-button>
<el-button @click="deleteStatistical(scope.row)" type="danger" size="mini" icon="el-icon-delete">
删除
</el-button>
<!-- </div> -->
</template>
</el-table-column>
</el-table>
<el-dialog
title="统计指标配置"
:visible.sync="dialogVisible"
width="60%"
:before-close="handleClose"
class="hhgjk"
>
<div class="box">
<div class="box-left">
<el-cascader-panel v-model="fromDataValue" :props="props" :options="fromData"></el-cascader-panel>
</div>
<div class="box-center">
<el-button type="primary" icon="el-icon-plus" @click="newGroup">新建分组</el-button>
<el-popover v-model="popoverVisible" placement="right" width="400" trigger="click">
<div class="button-group">
<el-button
type="primary"
style="margin-left: 0"
v-for="item in toData"
@click="leftCheckChange(item)"
>
{{ item.label }}
</el-button>
<div>请先创建分组</div>
<!-- <el-button type="primary" style="margin-left: 0" @click="leftCheckChange">不分组-->
<!-- </el-button>-->
</div>
<el-button
slot="reference"
style="margin-left: 0"
class="mt20"
type="primary"
icon="el-icon-arrow-right"
>
向右
</el-button>
</el-popover>
<el-button
style="margin-left: 0"
icon="el-icon-arrow-left"
class="mt20"
type="primary"
@click="rightCheckChange"
>
向左
</el-button>
</div>
<div class="box-right">
<el-cascader-panel v-model="toDataValue" :props="props" :options="toData">
<template slot-scope="{ node, data }">
<div style="display: flex; align-items: center">
<div class="hide-txt">{{ data.label }}</div>
<template v-if="!node.isLeaf">
<div class="ml5">({{ data.children.length }})</div>
<div style="flex: 1"></div>
<i
class="el-icon-delete ml10"
style="cursor: pointer"
@click="deleteStatistical2(data)"
></i>
</template>
</div>
</template>
</el-cascader-panel>
</div>
<!-- <tree-transfer-->
<!-- ref="wl-tree-transfer"-->
<!-- filter-->
<!-- high-light-->
<!-- :mode="mode"-->
<!-- :title="title"-->
<!-- :button_text="['绑定', '解绑']"-->
<!-- :to_data="toData"-->
<!-- :from_data="fromData"-->
<!-- :filterNode="filterNode"-->
<!-- :defaultProps="defaultProps"-->
<!-- :defaultCheckedKeys="defaultCheckedKeys"-->
<!-- :defaultExpandedKeys="[2, 3]"-->
<!-- @right-check-change="rightCheckChange"-->
<!-- @left-check-change="leftCheckChange"-->
<!-- @render-content="renderContent"-->
<!-- @remove-btn="remove"-->
<!-- @add-btn="add"-->
<!-- node_key="id"-->
<!-- >-->
<!-- </tree-transfer>-->
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取 消</el-button>
<el-button type="primary" @click="submint">确 定</el-button>
</span>
</el-dialog>
<el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" width="30%" :before-close="closeDialog">
<el-form :model="form" :label-width="formLabelWidth" ref="form" :rules="rules">
<el-form-item label="名称:" prop="name">
<el-input v-model="form.name" autocomplete="off" placeholder="请输入"></el-input>
</el-form-item>
<el-form-item label="编码:" prop="code">
<el-input v-model="form.code" autocomplete="off" placeholder="请输入"></el-input>
</el-form-item>
<el-form-item label="备注:" prop="remark">
<el-input v-model="form.remark" autocomplete="off" placeholder="请输入"></el-input>
</el-form-item>
<el-form-item label="排序:" prop="sort">
<el-input type="" v-model="form.sort" autocomplete="off" placeholder="请输入"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="closeDialog">取 消</el-button>
<el-button type="primary" @click="addTypeSubmit">确 定</el-button>
</div>
</el-dialog>
</Page>
</template>
<script>
import treeTransfer from 'el-tree-transfer'
import {
queryCsDictTree,
queryByCode,
queryStatistical,
addStatistical,
addDictTree,
deleteStatistical,
updateStatistical
} from '@/api/app/setting'
import api from '@/api/energy/sysconfig'
import { deleteEquipmentDelivery } from '@/api/app/device'
export default {
name: 'GovernDispositionType',
computed: {
title() {
if (this.mode == 'transfer') {
return ['未绑定指标', '已绑定指标']
} else {
return ['通讯录', '收件人', '抄送人', '密送人']
}
},
vth() {
return window.sessionStorage.getItem('appheight') - 55
}
},
components: { treeTransfer },
data() {
return {
popoverVisible: false,
props: { multiple: true },
dialogFormVisible: false,
dialogTitle: '新增',
formLabelWidth: '120px',
form: {
code: null,
name: null,
pid: null,
remark: null,
sort: null
},
mode: 'transfer', // transfer addressList
defaultProps: {
label: 'name',
children: 'children'
},
fromData: [], // 穿梭框 - 源数据 - 树形
fromDataValue: [],
toData: [], // 穿梭框 - 目标数据 - 树形
toDataValue: [],
toArray: [],
defaultCheckedKeys: [], // 左侧默认选中数据
dialogVisible: false,
tableData: [],
zbdata: [],
bindId: [],
rowId: '',
renderFunc(h, option) {
return <span>{option.label}</span>
},
tabHeight: 'calc(100vh - 161px)',
rules: {
name: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
code: [{ required: true, message: '编码不能为空', trigger: 'blur' }],
sort: [{ required: true, message: '排序不能为空', trigger: 'blur' }]
}
}
},
created() {},
mounted() {
this.queryData()
},
methods: {
resetForm() {
if (this.$refs['form']) {
this.$refs['form'].resetFields()
}
},
closeDialog() {
this.resetForm()
this.dialogFormVisible = false
},
edit(row) {
this.dialogFormVisible = true
this.dialogTitle = '编辑'
for (let key in this.form) {
if (key != 'pid') {
this.form[key] = row[key]
}
}
this.form.id = row.id
},
deleteStatistical(row) {
this.$confirm('确定删除该统计类型吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
deleteStatistical(row.id).then(res => {
if (res.code == 'A0000') {
this.$message.success('删除成功')
this.queryData()
} else {
this.$message.error(res.msg)
}
})
})
},
deleteStatistical2(data) {
if (data.children.length) {
return this.$message.warning('该分组下有指标，不能删除')
}
this.$confirm('确定删除该分组吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
deleteStatistical(data.value).then(res => {
if (res.code == 'A0000') {
this.$message.success('删除成功')
this.toData = this.toData.filter(item => item.value !== data.value)
} else {
this.$message.error(res.msg)
}
})
})
},
addTypeSubmit() {
console.log(this.form)
// 非空校验
for (let key in this.form) {
if (key != 'pid' && key != 'id' && key != 'sort') {
if (!this.form[key]) {
this.$message.error('请填写完整信息')
return
}
}
}
if (this.dialogVisible) {
let obj = JSON.parse(JSON.stringify(this.form))
obj.pid = this.rowId
// 新增二级分组
addDictTree(obj).then(res => {
if (res.code == 'A0000') {
this.$message.success('新增成功')
this.dialogFormVisible = false
this.handleClick({ id: this.rowId })
} else {
this.$message.error(res.msg)
}
})
} else {
if (this.form.id) {
updateStatistical(this.form).then(res => {
if (res.code == 'A0000') {
this.$message.success('编辑成功')
this.dialogFormVisible = false
this.queryData()
} else {
this.$message.error(res.msg)
}
})
} else {
addDictTree(this.form).then(res => {
if (res.code == 'A0000') {
this.$message.success('新增成功')
this.dialogFormVisible = false
this.queryData()
} else {
this.$message.error(res.msg)
}
})
}
}
},
addType() {
for (let key in this.form) {
if (key != 'pid') {
this.form[key] = null
}
}
this.dialogFormVisible = true
this.dialogTitle = '新增'
},
//获取指标树触发事件
handleClick(row) {
this.rowId = row.id
queryStatistical(row.id).then(res => {
if (res.code == 'A0000') {
this.dialogVisible = true
console.log(res)
this.fromData = []
this.fromDataValue = []
this.toData = []
this.toDataValue = []
res.data.unSelectedList.forEach(item => {
const obj = {
id: item.dataType,
value: item.dataType,
pid: 0,
label: item.dataTypeName,
children: []
}
item.eleEpdPqdVOS.forEach(item2 => {
const obj2 = {
id: item2.id,
pid: item.dataType,
value: item2.id,
label: item2.phase === 'M' ? item2.showName : item2.phase + '相' + item2.showName
}
if (item2.showName) {
obj.children.push(obj2)
}
})
this.fromData.push(obj)
})
res.data.selectedList.forEach(item => {
const obj = {
id: item.dataType,
value: item.dataType,
pid: 0,
label: item.dataTypeName,
children: []
}
item.eleEpdPqdVOS.forEach(item2 => {
const obj2 = {
id: item2.id,
pid: item2.dataType,
value: item2.id,
label: item2.phase === 'M' ? item2.showName : item2.phase + '相' + item2.showName
}
if (item2.showName) {
obj.children.push(obj2)
}
})
this.toData.push(obj)
})
}
})
},
handleChange(value, direction, movedKeys) {
console.log(value, direction, movedKeys)
console.log(movedKeys)
},
handleClose() {
this.dialogVisible = false
},
//获取列表数据
queryData() {
queryByCode('Statistical_Type').then(res => {
this.form.pid = res.data.id
queryCsDictTree(res.data.id).then(res => {
if (res.code == 'A0000') {
this.tableData = res.data
}
})
})
},
//提交绑定
submint() {
this.dialogVisible = true
console.log(this.toData)
let ids = []
let one = {
id: this.rowId,
ids: []
}
this.toData.forEach(item => {
let obj = {
id: item.id,
ids: []
}
if (item.children) {
item.children.forEach(item2 => {
obj.ids.push(item2.value)
})
ids.push(obj)
} else {
one.ids.push(item.value)
}
})
if (one.ids.length) {
ids.push(one)
}
// var data = {
// id: this.rowId,
// ids: this.bindId,
// }
addStatistical(ids).then(res => {
if (res.code == 'A0000') {
this.$message.success('绑定指标成功')
this.dialogVisible = false
}
})
},
// 获取选中
getChecked() {
const checkeds = this.$refs['wl-tree-transfer'].getChecked()
console.log('获取选中：', checkeds)
},
// 设置选中
setChecked() {
this.$refs['wl-tree-transfer'].setChecked([3], [2])
},
// 清除选中
clearChecked() {
this.$refs['wl-tree-transfer'].clearChecked()
},
// 自定义筛选函数
filterNode(value, data, where) {
console.log(value, data, where)
if (!value) return true
return data[this.defaultProps.label].indexOf(value) !== -1
},
// 懒加载回调
lazyFn(node, resolve) {
setTimeout(() => {
resolve([
{
id: 71272,
pid: 7127,
name: 'debug22',
// disabled: true,
children: []
},
{
id: 71273,
pid: 7127,
name: 'debug11',
children: []
}
])
}, 500)
},
// 切换模式 现有树形穿梭框模式transfer 和通讯录模式addressList
changeMode() {
if (this.mode == 'transfer') {
this.mode = 'addressList'
} else {
this.mode = 'transfer'
}
},
// 添加按钮
add(fromData, toData, obj) {
// 树形穿梭框模式transfer时，返回参数为左侧树移动后数据、右侧树移动后数据、移动的{keys,nodes,halfKeys,halfNodes}对象
// 通讯录模式addressList时，返回参数为右侧收件人列表、右侧抄送人列表、右侧密送人列表
console.log('fromData:', fromData)
console.log('toData:', toData)
console.log('obj:', obj)
},
// 移除按钮
remove(fromData, toData, obj) {
// 树形穿梭框模式transfer时，返回参数为左侧树移动后数据、右侧树移动后数据、移动的{keys,nodes,halfKeys,halfNodes}对象
// 通讯录模式addressList时，返回参数为右侧收件人列表、右侧抄送人列表、右侧密送人列表
console.log('fromData:', fromData)
console.log('toData:', toData)
console.log('obj:', obj)
},
newGroup() {
this.addType()
},
// 左侧源数据选中事件
leftCheckChange(e) {
console.log(this.fromDataValue)
if (this.fromDataValue.length === 0) {
return this.$message.error('请先选择数据')
}
let arr = []
this.fromDataValue.forEach(item1 => {
this.fromData.forEach(item2 => {
if (item2.value === item1[0]) {
item2.children = item2.children.filter((item3, index) => {
if (item3.value === item1[1]) {
arr.push(item3)
return false
} else {
return true
}
})
}
})
})
console.log(arr)
console.log(this.fromData)
if (e.value) {
this.toData.forEach(item => {
if (item.value === e.value) {
item.children.push(...arr)
}
})
} else {
this.toData.push(...arr)
}
// this.fromDataValue = []
this.popoverVisible = false
},
// 右侧目标数据选中事件
rightCheckChange() {
console.log(this.toDataValue)
if (this.toDataValue.length === 0) {
return this.$message.error('请先选择数据')
}
let arr = []
this.toDataValue.forEach(item1 => {
if (item1.length === 1) {
this.toData = this.toData.filter(item2 => {
if (item2.value === item1[0]) {
arr.push(item2)
return false
} else {
return true
}
})
} else {
this.toData.forEach(item2 => {
if (item2.value === item1[0]) {
item2.children = item2.children.filter((item3, index) => {
if (item3.value === item1[1]) {
arr.push(item3)
return false
} else {
return true
}
})
}
})
}
})
this.fromData.forEach(item1 => {
arr.forEach(item2 => {
if (item2.pid === item1.value) {
item1.children.push(item2)
}
})
})
// this.toDataValue = []
this.$forceUpdate()
},
// 自定义节点 仅树形结构支持
renderContent(h, { node, data, store }) {
return (
<span class="custom-tree-node">
<span>{node.label}</span>
<span>
<el-button size="mini" type="text" on-click={() => this.append(data)}>
Append
</el-button>
<el-button size="mini" type="text" on-click={() => this.remove(node, data)}>
Delete
</el-button>
</span>
</span>
)
},
// 标题自定义区点击事件
handleTitleRight() {
alert('标题自定义区点击事件')
}
}
}
</script>
<style lang="scss">
::v-deep .Cn-page .el-dialog__body .el-form {
display: grid;
padding-right: 30px;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
grid-gap: 10px 20px !important;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
::v-deep .hhgjk .el-dialog .el-dialog__body {
max-height: 70vh !important;
padding: 10px !important;
// overflow-y: auto;
}
.title {
padding: 40px 0;
}
.button-group {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
}
.hide-txt {
overflow-x: hidden;
text-overflow: ellipsis;
word-break: break-all;
white-space: nowrap;
-webkit-line-clamp: 1;
}
.box {
display: flex;
width: 1000px;
height: 60vh;
margin: 0 auto;
text-align: left;
.box-center {
display: flex;
align-items: center;
width: 100px;
padding-top: 20px;
margin: 0 20px;
flex-direction: column;
}
.box-right,
.box-left {
height: 100%;
overflow: hidden;
flex: 1;
.el-cascader-menu__wrap {
height: auto;
}
.el-cascader-panel {
height: 100%;
.el-cascader-menu__list {
height: 100% !important;
}
}
}
.box-right {
::v-deep .el-cascader-node__label {
padding-right: 0 !important;
}
::v-deep .el-cascader-node {
padding: 0 30px 0 20px;
}
}
}
.btn {
padding: 5px 10px;
background-color: #f5f7fa;
border: 1px solid #ebeef5;
outline: none;
}
.my-title-right {
float: right;
font-size: 12px;
cursor: pointer;
}
wl-transfer .el-tree {
// height: 50vh;
display: inline-block !important;
min-width: 100%;
margin-bottom: 5px;
}
::v-deep .el-tree {
position: relative;
height: 22vh;
overflow: auto;
color: #000608;
cursor: default;
background: #f5f7fa;
}
::v-deep .wl-transfer .transfer-main {
height: 50vh;
padding: 0 10px 10px;
overflow: auto;
box-sizing: border-box;
}
::v-deep .wl-transfer .transfer-title {
height: 40px;
padding: 0 15px;
margin-top: -2px;
font-size: 16px;
line-height: 40px;
color: #333;
background-color: #f5f7fa;
border-bottom: 1px solid #ebeef5;
}
</style>

145
src/views/govern/log/debug.vue Normal file
View File

@@ -0,0 +1,145 @@
<template>
<Page>
<el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item label="设备名称">
<el-input v-model="formInline.searchValue" placeholder="请输入设备名称" clearable></el-input>
</el-form-item>
<el-form-item>
<timepicker ref="timepk" :interval="interval" :dataTree="dataTree"></timepicker>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="queryData" icon="el-icon-search">查询</el-button>
</el-form-item>
</el-form>
<el-table
stripe
highlight-current-row
header-cell-class-name="table_header"
border
style="width: 100%"
:data="tableData"
height="calc(100vh - 225px)"
v-loading="loading"
>
<el-table-column prop="devName" label="设备名称" align="center"></el-table-column>
<el-table-column prop="operatorName" label="操作用户" align="center"></el-table-column>
<el-table-column prop="processName" label="操作内容" align="center"></el-table-column>
<el-table-column prop="startTime" label="开始时间" align="center"></el-table-column>
<el-table-column prop="endTime" label="结束时间" align="center"></el-table-column>
</el-table>
<el-pagination
background
align="right"
@size-change="handleSizeChange"
@current-change="pageChange"
:current-page="formInline.pageNum"
:page-sizes="[20, 30, 40, 50, 100]"
:page-size="formInline.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
class="mt10"
></el-pagination>
</Page>
</template>
<script>
import { queryDebugLog } from '@/api/app/device'
import timepicker from '@/views/components/TimePicker/index4'
export default {
name: 'GovernLogOperation',
components: {
timepicker
},
data() {
return {
interval: 3,
total: '',
formInline: {
searchBeginTime: '',
searchEndTime: '',
searchState: 0,
searchValue: '',
sortBy: '',
orderBy: '',
pageNum: 1,
pageSize: 50
},
loading: false,
tableData: []
//tabHeight: 'calc(100vh - 255px)',
}
},
computed: {
vth() {
return window.sessionStorage.getItem('appheight') - 95
}
},
mounted() {
this.queryData()
},
methods: {
processText(process) {
let str = ''
// 1 2 3 4
switch (process) {
case '1':
str = '设备登记'
break
case '2':
str = '功能调试'
break
case '3':
str = '出厂调试'
break
case '4':
str = '设备注册'
break
default:
str = '未知'
break
}
return str
},
queryData() {
this.loading = true
this.formInline.searchBeginTime = this.$refs.timepk.timeValue[0]
this.formInline.searchEndTime = this.$refs.timepk.timeValue[1]
queryDebugLog(this.formInline).then(res => {
if (res.code == 'A0000') {
this.total = res.data.total
this.tableData = res.data.records.map(item => {
return {
...item,
processName: this.processText(item.process),
endTime: item.endTime || '-'
}
})
}
this.loading = false
})
},
onSubmit() {
console.log('submit!')
},
pageChange(e) {
console.log('pageChange!')
console.log(e)
this.formInline.pageNum = e
this.queryData()
},
handleSizeChange(val) {
console.log(`每页 ${val} 条`)
this.formInline.pageNum = 1
this.formInline.pageSize = val
this.queryData()
}
}
}
</script>
<style lang="scss" scoped>
::v-deep.el-table--enable-row-hover .el-table__body tr:hover > td {
background-color: $hoverf !important;
color: #000 !important;
}
</style>

39
src/views/govern/log/index.vue Normal file
View File

@@ -0,0 +1,39 @@
<template>
<Page>
<el-tabs v-model="activeName" type="card" @tab-click="handleClick">
<el-tab-pane label="操作日志" name="first">
<Operation></Operation>
</el-tab-pane>
<el-tab-pane label="运维日志" name="second">
<Maintenance></Maintenance>
</el-tab-pane>
</el-tabs>
</Page>
</template>
<script>
import Operation from './operation.vue'
import Maintenance from './maintenance.vue'
export default {
components: {
Operation,
Maintenance
},
data() {
return {
activeName: 'first'
}
},
methods: {
handleClick(tab, event) {
console.log(tab, event)
}
}
}
</script>
<style lang="scss">
.log {
padding: 10px;
}
</style>

71
src/views/govern/log/maintenance.vue Normal file
View File

@@ -0,0 +1,71 @@
<template>
<div>
<el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item label="日期:">
<el-date-picker
v-model="formInline.date"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
></el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">查询</el-button>
</el-form-item>
</el-form>
<el-table
stripe
:cell-style="{ textAlign: 'center' }"
:header-cell-style="{ textAlign: 'center' }"
style="width: 100%"
:data="tableData"
height="calc(100vh - 205px)"
>
<el-table-column prop="date" label="序号" width="180"></el-table-column>
<el-table-column prop="name" label="操作名称"></el-table-column>
<el-table-column prop="name" label="操作时间"></el-table-column>
</el-table>
<el-pagination class="mt10" align="right" background layout="prev, pager, next" :total="100"></el-pagination>
</div>
</template>
<script>
export default {
data() {
return {
formInline: {
date: ''
},
tableData: [
{
date: '2016-05-02',
name: '王小虎',
address: '上海市普陀区金沙江路 1518 弄'
},
{
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
},
{
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
},
{
date: '2016-05-03',
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}
],
tabHeight: 'calc(100vh - 260px)'
}
},
methods: {
onSubmit() {
console.log('submit!')
}
}
}
</script>

135
src/views/govern/log/operation.vue Normal file
View File

@@ -0,0 +1,135 @@
<template>
<Page>
<el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item>
<timepicker ref="timepk" :interval="interval" :dataTree="dataTree"></timepicker>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="queryData" icon="el-icon-search">查询</el-button>
</el-form-item>
</el-form>
<el-table
stripe
highlight-current-row
header-cell-class-name="table_header"
border
style="width: 100%"
:data="tableData"
height="calc(100vh - 225px)"
v-loading='loading'
>
<el-table-column prop="createTime" label="操作日期" align="center"></el-table-column>
<el-table-column
prop="operate"
label="操作描述"
align="center"
:show-overflow-tooltip="true"
></el-table-column>
<el-table-column prop="userName" label="用户名称" align="center"></el-table-column>
<el-table-column prop="updateTime" label="更新时间" align="center"></el-table-column>
<!-- <el-table-column prop="createBy" label="创建人" align="center"> </el-table-column> -->
<el-table-column prop="failReason" label="失败原因" align="center">
<template slot-scope="scope">
{{ scope.row.failReason == null || scope.row.failReason == '' ? '/' : scope.row.failReason }}
</template>
</el-table-column>
<el-table-column prop="result" label="状态" align="center">
<template slot-scope="scope">
{{ scope.row.result == 1 ? '成功' : '失败' }}
</template>
</el-table-column>
<el-table-column prop="loginName" label="登录名" align="center">
<template slot-scope="scope">
{{ scope.row.loginName == null || scope.row.loginName == '' ? '/' : scope.row.loginName }}
</template>
</el-table-column>
</el-table>
<el-pagination
background
align="right"
@size-change="handleSizeChange"
@current-change="pageChange"
:current-page="formInline.pageNum"
:page-sizes="[20, 30, 40, 50, 100]"
:page-size="formInline.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
class="mt10"
></el-pagination>
</Page>
</template>
<script>
import { userLogquery } from '@/api/app/device'
import timepicker from '@/views/components/TimePicker/index4'
export default {
name: 'GovernLogOperation',
components: {
timepicker
},
data() {
return {
interval: 3,
total: '',
formInline: {
searchBeginTime: '',
searchEndTime: '',
searchState: 0,
searchValue: '',
sortBy: '',
orderBy: '',
pageNum: 1,
pageSize: 50
},
loading: false,
tableData: []
//tabHeight: 'calc(100vh - 255px)',
}
},
computed: {
vth() {
return window.sessionStorage.getItem('appheight') - 95
}
},
mounted() {
this.queryData()
},
methods: {
queryData() {
this.loading = true
this.formInline.searchBeginTime = this.$refs.timepk.timeValue[0]
this.formInline.searchEndTime = this.$refs.timepk.timeValue[1]
userLogquery(this.formInline).then(res => {
if (res.code == 'A0000') {
this.total = res.data.total
this.tableData = res.data.records
}
this.loading = false
})
},
onSubmit() {
console.log('submit!')
},
pageChange(e) {
console.log('pageChange!')
console.log(e)
this.formInline.pageNum = e
this.queryData()
},
handleSizeChange(val) {
console.log(`每页 ${val} 条`)
this.formInline.pageNum = 1
this.formInline.pageSize = val
this.queryData()
}
}
}
</script>
<style lang="scss" scoped>
::v-deep.el-table--enable-row-hover .el-table__body tr:hover > td {
background-color: $hoverf !important;
color: #000 !important;
}
</style>

117
src/views/govern/log/push.vue Normal file
View File

@@ -0,0 +1,117 @@
<template>
<Page>
<el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item>
<timepicker ref="timepk" :interval="interval" :dataTree="dataTree"></timepicker>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="queryData" icon="el-icon-search">查询</el-button>
</el-form-item>
</el-form>
<el-table
stripe
highlight-current-row
header-cell-class-name="table_header"
border
style="width: 100%"
:data="tableData"
height="calc(100vh - 225px)"
v-loading='loading'
>
<el-table-column prop="userName" label="推送用户" align="center"></el-table-column>
<el-table-column prop="info" label="推送内容" align="center"></el-table-column>
<el-table-column prop="sendTime" label="推送时间" align="center"></el-table-column>
</el-table>
<el-pagination
background
align="right"
@size-change="handleSizeChange"
@current-change="pageChange"
:current-page="formInline.pageNum"
:page-sizes="[20, 30, 40, 50, 100]"
:page-size="formInline.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
class="mt10"
></el-pagination>
</Page>
</template>
<script>
import { queryPushLog } from '@/api/app/device'
import timepicker from '@/views/components/TimePicker/index4'
export default {
name: 'GovernLogOperation',
components: {
timepicker
},
data() {
return {
interval: 3,
total: '',
formInline: {
searchBeginTime: '',
searchEndTime: '',
searchState: 0,
searchValue: '',
sortBy: '',
orderBy: '',
pageNum: 1,
pageSize: 50
},
loading: false,
tableData: []
//tabHeight: 'calc(100vh - 255px)',
}
},
computed: {
vth() {
return window.sessionStorage.getItem('appheight') - 95
}
},
mounted() {
this.queryData()
},
methods: {
queryData() {
this.loading = true
this.formInline.searchBeginTime = this.$refs.timepk.timeValue[0]
this.formInline.searchEndTime = this.$refs.timepk.timeValue[1]
queryPushLog(this.formInline).then(res => {
if (res.code == 'A0000') {
this.total = res.data.total
this.tableData = res.data.records.map(item => {
return {
info: item.devName + item.showName,
...item
}
})
}
this.loading = false
})
},
onSubmit() {
console.log('submit!')
},
pageChange(e) {
console.log('pageChange!')
console.log(e)
this.formInline.pageNum = e
this.queryData()
},
handleSizeChange(val) {
console.log(`每页 ${val} 条`)
this.formInline.pageNum = 1
this.formInline.pageSize = val
this.queryData()
}
}
}
</script>
<style lang="scss" scoped>
::v-deep.el-table--enable-row-hover .el-table__body tr:hover > td {
background-color: $hoverf !important;
color: #000 !important;
}
</style>

64
src/views/govern/manage/app/agreement.vue Normal file
View File

@@ -0,0 +1,64 @@
<template>
<div class="agreement" style="height:calc(100vh - 190px)">
<div style="margin-top: 5px;right: 10px;position: absolute;z-index: 9999999;">
<el-button type="primary" @click="submit" icon="el-icon-s-claim">保存</el-button>
</div>
<WangEditor v-model="value" style="height:100%;"/>
<!-- <div > -->
<!-- <el-button type="primary" @click="submit" style="z-index: 1000000;">保存</el-button> -->
<!-- </div> -->
</div>
</template>
<script>
import {addAppInfo, queryAppInfo} from '@/api/app/setting'
export default {
name: '',
computed: {
vth() {
return window.sessionStorage.getItem("appheight") - 60;
},
},
components: {},
data() {
return {
value: '',
id: ''
}
},
created() {
let dictypeData = localStorage.getItem('dictypeData')
if (dictypeData) {
dictypeData = JSON.parse(dictypeData)
dictypeData.forEach(item => {
if (item.code === 'appInformationType') {
item.children.forEach(item2 => {
if (item2.code === 'User_Agreement') {
this.id = item2.id
queryAppInfo(item2.id).then(res => {
this.value = res.data.content
})
}
})
}
})
}
},
methods: {
submit() {
addAppInfo({
type: this.id,
content: this.value,
}).then((res) => {
if (res.code === 'A0000') {
this.$message.success('保存成功')
}
})
}
},
}
</script>
<style lang="scss">
</style>

64
src/views/govern/manage/app/company.vue Normal file
View File

@@ -0,0 +1,64 @@
<template>
<div class="agreement" style="height:calc(100vh - 190px)">
<div style="margin-top: 5px;right: 10px;position: absolute;z-index: 9999999;">
<el-button type="primary" @click="submit" icon="el-icon-s-claim">保存</el-button>
</div>
<WangEditor v-model="value" style="height:100%"/>
<!-- <div class="mt10">
<el-button type="primary" @click="submit">保存</el-button>
</div> -->
</div>
</template>
<script>
import {addAppInfo, queryAppInfo} from '@/api/app/setting'
export default {
name: '',
components: {},
computed: {
vth() {
return window.sessionStorage.getItem("appheight") - 60;
},
},
data() {
return {
value: '',
id: ''
}
},
created() {
let dictypeData = localStorage.getItem('dictypeData')
if (dictypeData) {
dictypeData = JSON.parse(dictypeData)
dictypeData.forEach(item => {
if (item.code === 'appInformationType') {
item.children.forEach(item2 => {
if (item2.code === 'Company_Profile') {
this.id = item2.id
queryAppInfo(item2.id).then(res => {
this.value = res.data.content
})
}
})
}
})
}
},
methods: {
submit() {
addAppInfo({
type: this.id,
content: this.value,
}).then((res) => {
if (res.code === 'A0000') {
this.$message.success('保存成功')
}
})
}
},
}
</script>
<style lang="scss">
</style>

64
src/views/govern/manage/app/dataBank.vue Normal file
View File

@@ -0,0 +1,64 @@
<template>
<div class="agreement" style="height:calc(100vh - 190px)">
<div style="margin-top: 5px;right: 10px;position: absolute;z-index: 9999999;">
<el-button type="primary" @click="submit" icon="el-icon-s-claim">保存</el-button>
</div>
<WangEditor v-model="value" style="height:100%"/>
<!-- <div class="mt10">
<el-button type="primary" @click="submit">保存</el-button>
</div> -->
</div>
</template>
<script>
import {addAppInfo, queryAppInfo} from '@/api/app/setting'
export default {
name: '',
computed: {
vth() {
return window.sessionStorage.getItem("appheight") - 60;
},
},
components: {},
data() {
return {
value: '',
id: ''
}
},
created() {
let dictypeData = localStorage.getItem('dictypeData')
if (dictypeData) {
dictypeData = JSON.parse(dictypeData)
dictypeData.forEach(item => {
if (item.code === 'appInformationType') {
item.children.forEach(item2 => {
if (item2.code === 'Data_base') {
this.id = item2.id
queryAppInfo(item2.id).then(res => {
this.value = res.data.content
})
}
})
}
})
}
},
methods: {
submit() {
addAppInfo({
type: this.id,
content: this.value,
}).then((res) => {
if (res.code === 'A0000') {
this.$message.success('保存成功')
}
})
}
},
}
</script>
<style lang="scss">
</style>

70
src/views/govern/manage/app/index.vue Normal file
View File

@@ -0,0 +1,70 @@
<template>
<Page :loading="loading">
<el-tabs v-model="activeName" type="card" @tab-click="handleClick" >
<el-tab-pane lazy label="用户协议" name="first">
<Agreement/>
</el-tab-pane>
<el-tab-pane lazy label="个人信息保护政策" name="six">
<Policy/>
</el-tab-pane>
<el-tab-pane lazy label="系统介绍" name="second">
<Introduce/>
</el-tab-pane>
<el-tab-pane lazy label="使用手册" name="three">
<Specification/>
</el-tab-pane>
<!-- <el-tab-pane lazy label="资料库" name="four">
<DataBank/>
</el-tab-pane> -->
<el-tab-pane lazy label="公司介绍" name="five">
<Company/>
</el-tab-pane>
</el-tabs>
</Page>
</template>
<script>
import Agreement from './agreement.vue'
import DataBank from "./dataBank.vue"
import Introduce from "./introduce.vue"
import Specification from "./specification.vue";
import Company from "./company.vue";
import Policy from "./policy.vue";
import {queryPersonSet} from '@/api/app/setting'
export default {
name: 'GovernManageApp',
components: {
Agreement,
DataBank,
Introduce,
Specification,
Company,
Policy
},
data() {
return {
activeName: 'first',
personSet: "",
loading: false
}
},
created() {
//
// queryPersonSet().then(res => {
// console.log(res)
// this.personSet = res.data
// this.loading = false
// })
},
methods: {
handleClick(tab, event) {
console.log(tab, event)
},
changeTab(e) {
this.activeName = e
},
},
}
</script>
<style lang="scss"></style>

64
src/views/govern/manage/app/introduce.vue Normal file
View File

@@ -0,0 +1,64 @@
<template>
<div class="agreement" style="height:calc(100vh - 190px)">
<div style="margin-top: 5px;right: 10px;position: absolute;z-index: 9999999;">
<el-button type="primary" @click="submit" icon="el-icon-s-claim">保存</el-button>
</div>
<WangEditor v-model="value" style="height:100%"/>
<!-- <div class="mt10">
<el-button type="primary" @click="submit">保存</el-button>
</div> -->
</div>
</template>
<script>
import {addAppInfo, queryAppInfo} from '@/api/app/setting'
export default {
name: '',
components: {},
computed: {
vth() {
return window.sessionStorage.getItem("appheight") - 60;
},
},
data() {
return {
value: '',
id: ''
}
},
created() {
let dictypeData = localStorage.getItem('dictypeData')
if (dictypeData) {
dictypeData = JSON.parse(dictypeData)
dictypeData.forEach(item => {
if (item.code === 'appInformationType') {
item.children.forEach(item2 => {
if (item2.code === 'introduction') {
this.id = item2.id
queryAppInfo(item2.id).then(res => {
this.value = res.data.content
})
}
})
}
})
}
},
methods: {
submit() {
addAppInfo({
type: this.id,
content: this.value,
}).then((res) => {
if (res.code === 'A0000') {
this.$message.success('保存成功')
}
})
}
},
}
</script>
<style lang="scss">
</style>

64
src/views/govern/manage/app/policy.vue Normal file
View File

@@ -0,0 +1,64 @@
<template>
<div class="agreement" style="height:calc(100vh - 190px)">
<div style="margin-top: 5px;right: 10px;position: absolute;z-index: 9999999;">
<el-button type="primary" @click="submit" icon="el-icon-s-claim">保存</el-button>
</div>
<WangEditor v-model="value" style="height:100%"/>
<!-- <div > -->
<!-- <el-button type="primary" @click="submit" style="z-index: 1000000;">保存</el-button> -->
<!-- </div> -->
</div>
</template>
<script>
import {addAppInfo, queryAppInfo} from '@/api/app/setting'
export default {
name: 'Policy',
computed: {
vth() {
return window.sessionStorage.getItem("appheight") - 60;
},
},
components: {},
data() {
return {
value: '',
id: ''
}
},
created() {
let dictypeData = localStorage.getItem('dictypeData')
if (dictypeData) {
dictypeData = JSON.parse(dictypeData)
dictypeData.forEach(item => {
if (item.code === 'appInformationType') {
item.children.forEach(item2 => {
if (item2.code === 'Personal_Infor_Protect') {
this.id = item2.id
queryAppInfo(item2.id).then(res => {
this.value = res.data.content
})
}
})
}
})
}
},
methods: {
submit() {
addAppInfo({
type: this.id,
content: this.value,
}).then((res) => {
if (res.code === 'A0000') {
this.$message.success('保存成功')
}
})
}
},
}
</script>
<style lang="scss">
</style>

64
src/views/govern/manage/app/specification.vue Normal file
View File

@@ -0,0 +1,64 @@
<template>
<div class="agreement" style="height:calc(100vh - 190px)">
<div style="margin-top: 5px;right: 10px;position: absolute;z-index: 9999999;">
<el-button type="primary" @click="submit" icon="el-icon-s-claim">保存</el-button>
</div>
<WangEditor v-model="value" style="height:100%"/>
<!-- <div class="mt10">
<el-button type="primary" @click="submit">保存</el-button>
</div> -->
</div>
</template>
<script>
import {addAppInfo, queryAppInfo} from '@/api/app/setting'
export default {
name: '',
components: {},
computed: {
vth() {
return window.sessionStorage.getItem("appheight") - 60;
},
},
data() {
return {
value: '',
id: ''
}
},
created() {
let dictypeData = localStorage.getItem('dictypeData')
if (dictypeData) {
dictypeData = JSON.parse(dictypeData)
dictypeData.forEach(item => {
if (item.code === 'appInformationType') {
item.children.forEach(item2 => {
if (item2.code === 'User_Manual') {
this.id = item2.id
queryAppInfo(item2.id).then(res => {
this.value = res.data.content
})
}
})
}
})
}
},
methods: {
submit() {
addAppInfo({
type: this.id,
content: this.value,
}).then((res) => {
if (res.code === 'A0000') {
this.$message.success('保存成功')
}
})
}
},
}
</script>
<style lang="scss">
</style>

692
src/views/govern/manage/basic/dictionary.vue Normal file
View File

@@ -0,0 +1,692 @@
<template>
<div class="page" >
<el-form :inline="true" :model="formInline" ref="formInline" class="demo-form-inline" style="height: auto;">
<el-form-item label="数据分类:">
<el-select v-model="formInline.dataType" multiple filterable collapse-tags clearable
placeholder="请选择数据分类"
@change="formInlineChange">
<el-option v-for="item in dataTypeSelect" :key="item.value" :label="item.label"
:value="item.value"></el-option>
</el-select>
</el-form-item>
<el-form-item label="数据存储:">
<el-select v-model="formInline.classId" multiple filterable collapse-tags clearable placeholder="请选择数据存储"
@change="formInlineChange">
<el-option v-for="item in dataSelect" :key="item.code" :label="item.label"
:value="item.value"></el-option>
</el-select>
</el-form-item>
<el-form-item label="过滤筛选:">
<el-input v-model="formInline.searchValue" placeholder="数据名称、别名、名称"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="queryCsDictDataPage" icon="el-icon-search">查询</el-button>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="resetFormInline" icon="el-icon-setting">重置</el-button>
</el-form-item>
<el-form-item style="float: right;">
<el-button type="primary" @click="add" icon="el-icon-plus">新增字典</el-button>
</el-form-item>
</el-form>
<el-table
stripe
style="width: 100%;"
:data="tableData"
height="calc(100vh - 280px)"
border
v-loading="loading"
highlight-current-row
header-cell-class-name="table_header"
>
<el-table-column align="center" show-overflow-tooltip min-width="120" prop="classId" label="数据分类">
<template slot-scope="scope">
<span>{{
dataTypeSelect.find((item) => item.value == scope.row.dataType) &&
dataTypeSelect.find((item) => item.value == scope.row.dataType).label
}}</span>
</template>
</el-table-column>
<el-table-column align="center" show-overflow-tooltip min-width="180" prop="name"
label="数据名称"></el-table-column>
<el-table-column align="center" show-overflow-tooltip min-width="180" prop="otherName"
label="别名"></el-table-column>
<el-table-column align="center" show-overflow-tooltip min-width="150" prop="showName"
label="展示名称"></el-table-column>
<el-table-column align="center" show-overflow-tooltip min-width="100" prop="phase" label="相别"
width="80px">
<template slot-scope="scope"> {{ scope.row.phase === 'M' ? '-' : scope.row.phase }}</template>
</el-table-column>
<el-table-column align="center" show-overflow-tooltip min-width="100" prop="unit" label="单位"
width="80px">
<template slot-scope="scope"> {{ scope.row.unit == null ? '-' : scope.row.unit }}</template>
</el-table-column>
<el-table-column align="center" show-overflow-tooltip min-width="130" prop="type"
label="基础数据类型">
<template slot-scope="scope"> {{ scope.row.type == '' ? '-' : scope.row.type }}</template>
</el-table-column>
<el-table-column align="center" show-overflow-tooltip min-width="150" prop="harmStart"
label="数据谐波次数">
<template slot-scope="scope"> {{ scope.row.harmStart }} - {{ scope.row.harmEnd }}</template>
</el-table-column>
<!-- <el-table-column min-width='80' prop="harmEnd" label="数据结束谐波次数"> </el-table-column> -->
<el-table-column align="center" min-width="180" prop="statMethod" show-overflow-tooltip
label="数据统计方法">
<template slot-scope="scope"> {{ scope.row.statMethod == null ? '-' : scope.row.statMethod }}</template>
</el-table-column>
<el-table-column align="center" min-width="120" prop="classId" label="数据存储" show-overflow-tooltip
:formatter="formFilter"></el-table-column>
<el-table-column align="center" min-width="110" prop="resourcesId" label="数据来源"
show-overflow-tooltip :formatter="formFilter">
<template slot-scope="scope"> {{
scope.row.resourcesId == null ? '-' : scope.row.resourcesId
}}
</template>
</el-table-column>
<!-- <el-table-column align="center" min-width="100" prop="sort" label="排序" width="80px"></el-table-column>-->
<el-table-column align="center" min-width="200" label="操作">
<template slot-scope="scope">
<el-button size="mini" type="primary" @click="edit(scope.row)" icon="el-icon-edit">编辑</el-button>
<el-button size="mini" type="danger" @click="del(scope.row.id)" icon="el-icon-delete">删除
</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
background
align="right"
@size-change="handleSizeChange"
@current-change="pageChange"
:current-page="formInline.pageNum"
:page-sizes="[20, 30, 40, 50, 100]"
:page-size="formInline.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
class="mt10"
>
</el-pagination>
<el-dialog :title="dialogTitle" :visible.sync="drawer" size="80%" custom-class="dictionary-draw" class="Cn-page" :before-close="closeDialog"
width="1000px">
<el-divider content-position="center">基础数据</el-divider>
<el-form :model="form" :label-width="formLabelWidth" :rules="rules" ref="form">
<el-form-item label="数据分类:" prop="dataType">
<el-select v-model="form.dataType" filterable clearable placeholder="请选择数据分类">
<el-option v-for="item in dataTypeSelect" :key="item.value" :label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="数据名称:" prop="name">
<el-input v-model="form.name" autocomplete="off" placeholder="请输入数据名称"></el-input>
</el-form-item>
<el-form-item label="别名:" prop="otherName" >
<el-input v-model="form.otherName" autocomplete="off" placeholder="请输入别名"></el-input>
</el-form-item>
<el-form-item label="展示名称:" prop="showName" >
<el-input v-model="form.showName" autocomplete="off" placeholder="请输入展示名称"></el-input>
</el-form-item>
<el-form-item label="相别:" prop="phase" >
<el-select v-model="form.phase" filterable clearable placeholder="请选择相别">
<el-option v-for="item in phaseSelect" :key="item.value" :label="item.label"
:value="item.value"></el-option>
</el-select>
</el-form-item>
<el-form-item label="单位:" prop="unit" >
<el-input v-model="form.unit" autocomplete="off" placeholder="请输入单位"></el-input>
</el-form-item>
<el-form-item label="基础数据类型:" prop="type" >
<el-input v-model="form.type" autocomplete="off" placeholder="请输入基础数据类型"></el-input>
</el-form-item>
<el-form-item label="开始结束次数:" prop="harmStart" >
<div class="input-2">
<el-input type="number" v-model="form.harmStart" autocomplete="off"></el-input>
<div style="margin-left: 10px;">-</div>
<el-input style="margin-left: 10px;" type="number" v-model="form.harmEnd"
autocomplete="off"></el-input>
</div>
</el-form-item>
<el-form-item label="统计方法:" prop="statMethod" >
<el-select v-model="form.statMethod" multiple filterable clearable placeholder="请选择统计方法">
<el-option v-for="item in statMethodSelect" :key="item.value" :label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="数据存储:" prop="classId" >
<el-select v-model="form.classId" filterable clearable placeholder="请选择数据存储">
<el-option v-for="item in dataSelect" :key="item.code" :label="item.label"
:value="item.value"></el-option>
</el-select>
</el-form-item>
<el-form-item label="报表数据来源:" prop="resourcesId" >
<el-select v-model="form.resourcesId" filterable clearable placeholder="请选择报表数据来源">
<el-option v-for="item in resourcesIdSelect" :key="item.code" :label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="序号:" prop="sort" >
<el-input type="number" v-model="form.sort" autocomplete="off" placeholder="请输入序号"></el-input>
</el-form-item>
<el-form-item label="限值名称:" prop="limitName" >
<el-input type="text" v-model="form.limitName" autocomplete="off" placeholder="请输入限值名称"></el-input>
</el-form-item>
<el-form-item label="限值表名:" prop="limitTable" >
<el-input type="text" v-model="form.limitTable" autocomplete="off"
placeholder="请输入限值表名"></el-input>
</el-form-item>
<el-form-item label="超标判断方式:" prop="formula" >
<el-select v-model="form.formula" filterable clearable placeholder="请选择超标判断方式">
<el-option v-for="item in formulaSelect" :key="item.code" :label="item.label"
:value="item.value">
</el-option>
</el-select>
</el-form-item>
</el-form>
<el-divider content-position="center">拓展数据</el-divider>
<el-form :model="form" :label-width="formLabelWidth" :rules="rules2" ref="form2">
<el-form-item label="参数缺省值:" prop="defaultValue">
<el-input v-model="form.defaultValue" autocomplete="off" placeholder="请输入参数缺省值"></el-input>
</el-form-item>
<el-form-item label="事件类别:" prop="eventType">
<el-input v-model="form.eventType" autocomplete="off" placeholder="请输入事件类别"></el-input>
</el-form-item>
<el-form-item label="设置最大值:" prop="maxNum" >
<el-input type="number" v-model="form.maxNum" autocomplete="off" placeholder="请输入设置最大值"></el-input>
</el-form-item>
<el-form-item label="设置最小值:" prop="minNum" >
<el-input type="number" v-model="form.minNum" autocomplete="off" placeholder="请输入设置最小值"></el-input>
</el-form-item>
<el-form-item label="枚举序列:" prop="setValue" >
<el-input v-model="form.setValue" autocomplete="off" placeholder="请输入枚举序列"></el-input>
</el-form-item>
<el-form-item label="字符串长度上限:" prop="strlen" >
<el-input type="number" v-model="form.strlen" autocomplete="off" placeholder="请输入字符串长度上限"></el-input>
</el-form-item>
<el-form-item label="上送规则:" prop="tranRule" >
<el-input v-model="form.tranRule" autocomplete="off" placeholder="请输入上送规则"></el-input>
</el-form-item>
<el-form-item label="是否可远程控制:" prop="ctlSts">
<el-radio v-model="form.ctlSts" :label="1">是</el-radio>
<el-radio v-model="form.ctlSts" :label="0">否</el-radio>
</el-form-item>
<el-form-item label="是否需遥控校验:" prop="curSts">
<el-radio v-model="form.curSts" :label="1">是</el-radio>
<el-radio v-model="form.curSts" :label="0">否</el-radio>
</el-form-item>
<el-form-item label="是否存储:" prop="storeFlag">
<el-radio v-model="form.storeFlag" :label="1">是</el-radio>
<el-radio v-model="form.storeFlag" :label="0">否</el-radio>
</el-form-item>
<el-form-item label="是否加密:" prop="storeFlag">
<el-radio v-model="form.storeFlag" :label="1">是</el-radio>
<el-radio v-model="form.storeFlag" :label="0">否</el-radio>
</el-form-item>
<el-form-item label="数据是否上送:" prop="tranFlag">
<el-radio v-model="form.tranFlag" :label="1">是</el-radio>
<el-radio v-model="form.tranFlag" :label="0">否</el-radio>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="closeDialog">取 消</el-button>
<el-button type="primary" @click="addCsDictData">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import {addCsDictData, queryCsDictDataPage, delCsDictData, updateCsDictData} from '@/api/app/setting.js'
import {dicData} from "@/assets/commjs/dictypeData";
export default {
data() {
return {
loading: true,
drawer: false,
dialogTitle: '新增字典数据',
form: {
classId: null,
ctlSts: null,
curSts: null,
dataType: null,
defaultValue: null,
eventType: null,
harmEnd: null,
harmStart: null,
maxNum: null,
minNum: null,
name: null,
otherName: null,
phase: null,
resourcesId: null,
setValue: null,
showName: null,
sort: null,
statMethod: null,
storeFlag: null,
strlen: null,
systemType: null,
tranFlag: null,
tranRule: null,
type: null,
unit: null,
formula: null,
limitName: null,
limitTable: "pq_overlimit",
},
dataTypeSelect: [],
systemTypeSelect: [],
resourcesIdSelect: [],
formulaSelect: [],
dataSelect: [],
typeSelect: [],
// A、B、C、T、M
phaseSelect: [
{
label: 'A相',
value: 'A',
},
{
label: 'B相',
value: 'B',
},
{
label: 'C相',
value: 'C',
},
{
label: 'T相',
value: 'T',
},
],
statMethodSelect: [
{
label: '平均值',
value: 'avg',
},
{
label: '最大值',
value: 'max',
},
{
label: '最小值',
value: 'min',
},
{
label: 'CP95值',
value: 'cp95',
},
],
formLabelWidth: '140px',
formInline: {
pageNum: 1,
pageSize: 20,
searchValue: '',
dataType: [],
classId: [],
},
total: 0,
tableData: [],
tabHeight: 'calc(100vh - 255px)',
rules: {
dataType: [
{required: true, message: '请输入数据分类', trigger: 'blur'},
{min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
],
name: [
{required: true, message: '请输入数据名称', trigger: 'blur'}
],
otherName: [
{type: 'date', required: true, message: '请输入别名', trigger: 'blur'}
],
showName: [
{type: 'date', required: true, message: '请输入展示名称', trigger: 'blur'}
],
phase: [
{type: 'array', required: true, message: '请选择相别', trigger: 'blur'}
],
unit: [
{required: true, message: '请输入单位', trigger: 'blur'}
],
type: [
{required: true, message: '请输入基础数据类型', trigger: 'blur'}
],
harmStart: [
{required: true, message: '请填写开始结束次数', trigger: 'blur'}
],
statMethod: [
{required: true, message: '请选择统计方法', trigger: 'blur'}
],
classId: [
{required: true, message: '请选择数据存储', trigger: 'blur'}
],
resourcesId: [
{required: true, message: '请选择报表数据来源', trigger: 'blur'}
],
sort: [
{required: true, message: '请填写序号', trigger: 'blur'}
],
},
rules2: {
defaultValue: [
{required: true, message: '请输入参数缺省值', trigger: 'blur'},
{min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
],
eventType: [
{required: true, message: '请输入事件类别', trigger: 'blur'}
],
maxNum: [
{type: 'date', required: true, message: '请设置最大值', trigger: 'blur'}
],
minNum: [
{type: 'date', required: true, message: '请设置最小值', trigger: 'blur'}
],
setValue: [
{type: 'array', required: true, message: '请输入枚举序列', trigger: 'blur'}
],
strlen: [
{required: true, message: '请输入字符串长度上限', trigger: 'blur'}
],
tranRule: [
{required: true, message: '请填写上送规则', trigger: 'blur'}
],
ctlSts: [
{required: true, message: '请选择是否可远程控制', trigger: 'blur'}
],
storeFlag: [
{required: true, message: '请选择是否需遥控校验', trigger: 'blur'}
],
tranFlag: [
{required: true, message: '请选择是否存储||是否加密', trigger: 'blur'}
],
}
}
},
computed: {
vth() {
return window.sessionStorage.getItem("appheight") - 145;
},
},
created() {
this.queryCsDictDataPage()
},
mounted() {
const dictypeData = JSON.parse(localStorage.getItem('dictypeData'))
if (dictypeData) {
dictypeData.forEach((item) => {
let arr = [
{
code: 'Data',
key: 'dataSelect',
},
{
code: 'Cs_Data_Type',
key: 'dataTypeSelect',
},
{
code: 'System_Type',
key: 'systemTypeSelect',
},
{
code: 'Data_Day',
key: 'resourcesIdSelect',
},
{
code: 'Type',
key: 'typeSelect',
},
{
code: 'Limit_Value_Judgment',
key: 'formulaSelect',
},
]
arr.forEach((item2) => {
if (item.code == item2.code) {
this[item2.key] = item.children.map((item3) => {
return {
label: item3.name,
value: item3.id,
code: item3.code,
}
})
}
})
})
}
this.loading = false
},
methods: {
closeDialog(){
this.drawer=false
this.resetForm()
},
resetForm() {
if (this.$refs["form"]) {
this.$refs["form"].resetFields();
this.$refs["form2"].resetFields();
}
},
// 数据过滤
formFilter(row, column) {
if (column.property == "classId") {
let title = "";
dicData("Data", []).forEach((item) => {
if (item.id == row.classId) {
title = item.name;
}
});
return title;
} else if (column.property == "resourcesId") {
let title = "";
this.resourcesIdSelect.forEach((item) => {
if (item.value == row.resourcesId) {
title = item.label;
}
});
return title;
}
},
formInlineChange() {
setTimeout(() => {
const formInlineHeight = this.$refs.formInline.$el.offsetHeight
console.log(formInlineHeight)
this.tabHeight = 'calc(100vh - ' + (213 + formInlineHeight) + 'px)'
}, 20)
},
pageChange(e) {
console.log('pageChange!')
console.log(e)
this.formInline.pageNum = e
this.queryCsDictDataPage()
},
handleSizeChange(val) {
// console.log(`每页 ${val} 条`);
this.formInline.pageNum = 1
this.formInline.pageSize = val
this.queryCsDictDataPage()
},
onSearch() {
this.formInline.pageNum = 1
this.queryCsDictDataPage()
},
addCsDictData() {
if (this.form.id) {
this.editSave()
return
}
addCsDictData(this.form).then((res) => {
console.warn(res)
if (res.code == 'A0000') {
this.$message({
type: 'success',
message: '添加成功!',
})
this.drawer = false
this.onSearch()
} else {
this.$message({
type: 'error',
message: res.message,
})
}
})
},
queryCsDictDataPage() {
queryCsDictDataPage(this.formInline).then((res) => {
console.warn(res)
this.tableData = res.data.records
this.total = res.data.total
})
},
resetFormInline() {
this.formInline.searchValue = ''
this.formInline.dataType = []
this.formInline.classId = []
},
onSubmit() {
console.log('submit!')
},
del(id) {
this.$confirm('确定删除该字段吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
})
.then(() => {
delCsDictData(id).then((res) => {
console.warn(res)
if (res.code == 'A0000') {
this.$message({
type: 'success',
message: '删除成功!',
})
this.onSearch()
} else {
this.$message({
type: 'error',
message: res.message,
})
}
})
})
.catch(() => {
this.$message({
type: 'info',
message: '已取消删除',
})
})
},
add() {
const obj = {
classId: null,
ctlSts: null,
curSts: null,
dataType: null,
defaultValue: null,
eventType: null,
harmEnd: null,
harmStart: null,
maxNum: null,
minNum: null,
name: null,
otherName: null,
phase: null,
resourcesId: null,
setValue: null,
showName: null,
sort: null,
statMethod: null,
storeFlag: null,
strlen: null,
systemType: null,
tranFlag: null,
tranRule: null,
type: null,
unit: null,
formula: null,
limitName: null,
limitTable: "pq_overlimit",
}
this.dialogTitle = '新增字典数据'
for (let key in this.form) {
this.form[key] = obj[key]
}
delete this.form.id
this.drawer = true
},
edit(item) {
console.log(item)
for (let key in this.form) {
this.form[key] = item[key]
if (key === 'statMethod' && item[key]) {
this.form[key] = item[key].split(',')
} else if (key === 'phase') {
this.form[key] = ''
}
}
this.form.id = item.id
this.dialogTitle = '编辑字典数据'
this.drawer = true
},
editSave() {
updateCsDictData(this.form).then((res) => {
console.warn(res)
if (res.code == 'A0000') {
this.$message({
type: 'success',
message: '修改成功!',
})
this.drawer = false
this.onSearch()
} else {
this.$message({
type: 'error',
message: res.message,
})
}
})
},
},
}
</script>
<style lang="less" scoped>
@import url("../../../../styles/comStyle.less");
</style>
<style lang="scss" scoped>
::v-deep .Cn-page .el-dialog__body .el-form {
display: grid;
padding-right: 30px;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
grid-gap: 10px 20px !important;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.page {
.el-form-item {
height: auto !important;
}
.dictionary-draw {
.el-dialog__body {
padding-top: 0;
}
}
.input-2 {
display: flex;
width: 245px;
.el-input {
flex: 1;
}
}
}
</style>

43
src/views/govern/manage/basic/index.vue Normal file
View File

@@ -0,0 +1,43 @@
<template>
<page>
<el-tabs v-model="activeName" type="card" @tab-click="handleClick" >
<el-tab-pane lazy label="数据字典" name="first">
<Dictionary @changeTab="changeTab" v-if="activeName == 'first'" />
</el-tab-pane>
<el-tab-pane lazy label="程序版本" name="second">
<Version @changeTab="changeTab" v-if="activeName == 'second'" />
</el-tab-pane>
<el-tab-pane lazy label="模版" name="three">
<Temp @changeTab="changeTab" v-if="activeName == 'three'" />
</el-tab-pane>
</el-tabs>
</page>
</template>
<script>
import Dictionary from './dictionary.vue'
import Version from './version.vue'
import Temp from './template.vue'
export default {
name: 'GovernManageBasic',
components: {
Dictionary,
Version,
Temp,
},
data() {
return {
activeName: 'first',
}
},
methods: {
handleClick(tab, event) {
console.log(tab, event)
},
changeTab(e) {
this.activeName = e
},
},
}
</script>
<style lang="scss"></style>

336
src/views/govern/manage/basic/template.vue Normal file
View File

@@ -0,0 +1,336 @@
<template>
<div >
<el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item label="模版名称:">
<el-input v-model="formInline.name" clearable placeholder="请输入名称"></el-input>
</el-form-item>
<el-form-item label="装置型号:">
<el-select v-model="formInline.devType" placeholder="请选择" style="width: 100%" clearable>
<el-option v-for="item in devTypeOptions" :key="item.value" :label="item.label"
:value="item.value"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSearch" icon="el-icon-search">查询</el-button>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="resetFormInline" icon="el-icon-setting">重置</el-button>
</el-form-item>
<el-form-item style="float: right">
<!-- <el-button type="primary" icon="el-icon-plus" @click="add"
v-if="userInfo.role.indexOf('工程')>-1 || userInfo.role.indexOf('运维管理员')>-1">
新增模版
</el-button> -->
<el-button type="primary" icon="el-icon-plus" @click="add">
新增模版
</el-button>
</el-form-item>
</el-form>
<el-table
stripe
style="width: 100%"
:data="tableData"
border
header-cell-class-name="table_header"
highlight-current-row
height="calc(100vh - 280px)"
>
<el-table-column prop="devTypeName" label="装置型号" align="center"></el-table-column>
<el-table-column prop="name" label="模板名称" align="center"></el-table-column>
<el-table-column prop="versionNo" label="版本号" align="center"></el-table-column>
<el-table-column prop="versionDate" label="版本时间" align="center"></el-table-column>
<el-table-column label="操作" width="220px" align="center">
<template slot-scope="scope">
<el-button size="mini" type="danger" @click="del(scope.row)" icon="el-icon-delete">删除</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
background
align="right"
@size-change="handleSizeChange"
@current-change="pageChange"
:current-page="formInline.pageNum"
:page-sizes="[20, 30, 40, 50, 100]"
:page-size="formInline.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
class="mt10"
>
</el-pagination>
<el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible">
<el-form :model="form" :label-width="formLabelWidth">
<el-form-item label="升级文件:">
<el-upload
class="upload-demo"
action="123"
:limit="1"
:auto-upload="false"
:on-change="fileChange"
:on-exceed="fileExceed"
>
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="addDevModel">确 定</el-button>
</div>
</el-dialog>
<el-dialog :visible.sync="lookDialog">
<el-tabs v-model="activeName">
<el-tab-pane label="测量数据" name="first">
<el-table
stripe
:cell-style="{ textAlign: 'center' }"
:header-cell-style="{ textAlign: 'center' }"
:data="tableData"
height="50vh"
v-if="activeName == 'first'"
>
<el-table-column prop="date" label="数据名称" width="180"></el-table-column>
<el-table-column prop="name" label="数据类型" width="180"></el-table-column>
<el-table-column prop="address" label="单位"></el-table-column>
</el-table>
</el-tab-pane>
<el-tab-pane label="电能量数据" name="second">
<el-table
stripe
:cell-style="{ textAlign: 'center' }"
:header-cell-style="{ textAlign: 'center' }"
:data="tableData"
height="50vh"
v-if="activeName == 'second'"
>
<el-table-column prop="date" label="数据名称" width="180"></el-table-column>
<el-table-column prop="name" label="数据类型" width="180"></el-table-column>
<el-table-column prop="address" label="单位"></el-table-column>
</el-table>
</el-tab-pane>
</el-tabs>
</el-dialog>
</div>
</template>
<script>
import {queryDevModelPage, addDevModel, AuditDevModel, queryByid, queryByCode} from '@/api/app/setting.js'
export default {
data() {
return {
loading: true,
dialogFormVisible: false,
activeName: 'second',
lookDialog: false,
dialogTitle: '新增字典数据',
form: {
devType: '',
devTypeName: '',
filePath: '',
// softInfoId: '',
// versionDate: '',
// versionNo: '',
},
formLabelWidth: '120px',
formInline: {
devType: '',
pageNum: 1,
pageSize: 20,
versionStartDate: '',
versionendDate: '',
date: [],
name: '',
},
file: '',
fileList: [], // 回显‰
tableData: [],
total: 0,
options: [
{
value: '选项1',
label: '黄金糕',
},
{
value: '选项2',
label: '双皮奶',
},
{
value: '选项3',
label: '蚵仔煎',
},
{
value: '选项4',
label: '龙须面',
},
{
value: '选项5',
label: '北京烤鸭',
},
],
// tabHeight: 'calc(100vh - 255px)',
devTypeOptions: [],
typeOptions: [],
userInfo: {},
}
},
computed: {
vth() {
return window.sessionStorage.getItem("appheight") - 145;
}
},
created() {
this.userInfo = sessionStorage.getItem('Info')
queryByCode('Direct_Connected_Device').then((res) => {
queryByid(res.data.id).then((res) => {
this.devTypeOptions = res.data.map((item) => {
return {
value: item.id,
label: item.name,
}
})
})
})
},
mounted() {
this.onSearch()
this.loading = false
},
methods: {
devTypeChange(e) {
console.log(e)
this.form.devTypeName = this.devTypeOptions.filter((item) => item.value == e)[0].label
},
fileChange(e) {
console.log('fileChange!')
console.log(e)
this.file = e.raw
},
fileExceed(e) {
console.log('fileExceed!')
console.log(e)
this.$message({
message: '最多只能上传一个文件，如若替换请先删除',
type: 'error',
})
},
onSearch() {
console.log('submit!')
queryDevModelPage(this.formInline).then((res) => {
console.log(res)
this.tableData = res.data.records
this.total = res.data.total
})
},
resetFormInline() {
this.formInline.devType = ''
this.formInline.name = ''
this.formInline.versionStartDate = ''
this.formInline.versionendDate = ''
this.formInline.date = []
},
addDevModel() {
if (!this.file) {
return this.$message({
message: '请上传文件',
type: 'error',
})
}
addDevModel(this.file).then((res) => {
if (res.code == 'A0000') {
this.onSearch()
this.$message({
message: '添加成功',
type: 'success',
})
this.dialogFormVisible = false
}
})
},
AuditDevModel() {
for (let key in this.form) {
if (!this.form[key]) {
this.$message({
message: '请完善表单信息',
type: 'error',
})
return
}
}
AuditDevModel(this.form).then((res) => {
if (res.code == 'A0000') {
this.onSearch()
this.$message({
message: '编辑成功',
type: 'success',
})
this.dialogFormVisible = false
}
})
},
pageChange(e) {
console.log('pageChange!')
console.log(e)
this.formInline.pageNum = e
this.onSearch()
},
handleSizeChange(val) {
// console.log(`每页 ${val} 条`);
this.formInline.pageNum = 1
this.formInline.pageSize = val
this.onSearch()
},
dateChange(e) {
console.log(e)
if (e.length > 0) {
this.formInline.versionStartDate = e[0]
this.formInline.versionendDate = e[1]
}
},
del(item) {
this.$confirm('确定删除吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
}).then(() => {
AuditDevModel({
id: item.id,
status: 0,
}).then((res) => {
console.log(res)
if (res.code == 'A0000') {
this.onSearch()
this.$message({
message: '删除成功',
type: 'success',
})
this.dialogFormVisible = false
}
})
})
},
edit(item) {
this.form.id = item.id
for (let key in this.form) {
this.form[key] = item[key]
}
this.dialogTitle = '设备数据模版编辑'
this.dialogFormVisible = true
},
look() {
this.lookDialog = true
},
add() {
for (let key in this.form) {
this.form[key] = ''
}
delete this.form.id
this.dialogTitle = '设备数据模版新增'
this.dialogFormVisible = true
},
},
}
</script>
<style lang="scss">
</style>

466
src/views/govern/manage/basic/version.vue Normal file
View File

@@ -0,0 +1,466 @@
<template>
<div class="page" >
<el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item label="装置型号:">
<el-select
clearable
filterable
v-model="formInline.devType"
placeholder="请选择"
style="width: 100%"
@change="devTypeChange"
>
<el-option v-for="item in devTypeAllOptions" :key="item.value" :label="item.label"
:value="item.value"></el-option>
</el-select>
</el-form-item>
<el-form-item label="日期:">
<el-date-picker
v-model="formInline.date"
type="daterange"
value-format="yyyy-MM-dd"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
@change="dateChange"
>
</el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSearch" icon="el-icon-search">查询</el-button>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="resetFormInline" icon="el-icon-setting">重置</el-button>
</el-form-item>
<el-form-item style="float: right">
<el-button type="primary" icon="el-icon-plus" @click="add">新增版本</el-button>
</el-form-item>
</el-form>
<el-table
stripe
style="width: 100%"
:data="tableData"
border
header-cell-class-name="table_header"
highlight-current-row
height="calc(100vh - 280px)"
>
<el-table-column prop="devTypeName" label="装置型号" align="center"></el-table-column>
<el-table-column prop="versionNo" label="版本号" align="center"></el-table-column>
<el-table-column prop="versionAgreement" label="版本协议" align="center"></el-table-column>
<el-table-column prop="versionDate" label="版本日期" align="center"></el-table-column>
<!-- <el-table-column prop="updateBy" label="修改人员"> </el-table-column> -->
<el-table-column prop="updateTime" label="归档日期" align="center"></el-table-column>
<el-table-column prop="description" label="描述" show-overflow-tooltip align="center"></el-table-column>
<el-table-column label="状态" align="center">
<template slot-scope="scope">
{{ scope.row.status == 1 ? '启用' : '禁用' }}
</template>
</el-table-column>
<el-table-column label="操作" width="220px" fixed="right" align="center">
<template slot-scope="scope">
<!-- <div class="table-operation"> -->
<el-button size="mini" type="primary" @click="edit(scope.row)" icon="el-icon-edit">编辑</el-button>
<el-button icon="el-icon-warning" size="mini" type="danger" @click="del(scope.row)" v-if="scope.row.status == 1" >禁用
</el-button>
<el-button icon="el-icon-success" size="mini" type="success" @click="start(scope.row)" v-if="scope.row.status == 0">
启用
</el-button>
<!-- </div> -->
</template>
</el-table-column>
</el-table>
<el-pagination
background
align="right"
@size-change="handleSizeChange"
@current-change="pageChange"
:current-page="formInline.pageNum"
:page-sizes="[20, 30, 40, 50, 100]"
:page-size="formInline.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
class="mt10"
>
</el-pagination>
<el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" :close-on-click-modal="false">
<el-form :model="form" :label-width="formLabelWidth">
<el-form-item label="装置类型:">
<el-select v-model="form.type" placeholder="请选择" style="width: 100%" @change="typeChange">
<el-option v-for="item in typeOptions" :key="item.value" :label="item.label"
:value="item.value"></el-option>
</el-select>
</el-form-item>
<el-form-item label="装置型号:">
<el-select v-model="form.devType" placeholder="请选择" style="width: 100%" @change="devTypeChange">
<el-option v-for="item in devTypeOptions" :key="item.value" :label="item.label"
:value="item.value"></el-option>
</el-select>
</el-form-item>
<el-form-item label="版本号:">
<el-input v-model="form.versionNo" autocomplete="off" placeholder="请输入"></el-input>
</el-form-item>
<el-form-item label="版本类型:">
<el-input v-model="form.versionType" autocomplete="off" placeholder="填写特殊类型(不填默认通用类型)"></el-input>
</el-form-item>
<el-form-item label="版本协议:">
<el-input v-model="form.versionAgreement" autocomplete="off" placeholder="请输入"></el-input>
</el-form-item>
<el-form-item label="版本日期:">
<el-date-picker
v-model="form.versionDate"
type="date"
value-format="yyyy-MM-dd"
placeholder="选择日期时间"
align="right"
style="width: 100%"
:picker-options="pickerOptions"
>
</el-date-picker>
</el-form-item>
<el-form-item label="描述:">
<el-input v-model="form.description" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="CRC校验:">
<el-input v-model="form.crcInfo" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="升级文件:">
<el-upload
class="upload-demo"
action="123"
:limit="1"
:auto-upload="false"
:on-change="fileChange"
:on-exceed="fileExceed"
:file-list="fileList"
>
<el-button size="small" type="primary">点击上传</el-button>
</el-upload>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="addEdData">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import {queryEdDataPage, addEdData, auditEdData, queryCsDictTree, queryByCode, queryByid} from '@/api/app/setting.js'
export default {
data() {
return {
loading: false,
dialogFormVisible: false,
dialogTitle: '新增字典数据',
pickerOptions: {
shortcuts: [
{
text: '今天',
onClick(picker) {
picker.$emit('pick', new Date())
},
},
{
text: '昨天',
onClick(picker) {
const date = new Date()
date.setTime(date.getTime() - 3600 * 1000 * 24)
picker.$emit('pick', date)
},
},
{
text: '一周前',
onClick(picker) {
const date = new Date()
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
picker.$emit('pick', date)
},
},
],
},
form: {
devType: null,
devTypeName: null,
// versionAgreement: null,
// versionNo: null,
// versionType: null,
// crcInfo: null,
// description: null,
// versionDate: null,
type: null,
},
file: '',
fileList: [], // 回显
formInline: {
pageNum: 1,
pageSize: 20,
versionStartDate: '',
versionendDate: '',
date: [],
},
formLabelWidth: '120px',
tableData: [],
total: 0,
devTypeOptions: [],
devTypeAllOptions: [],
typeOptions: [],
tabHeight: 'calc(100vh - 255px)',
}
},
computed: {
vth() {
return window.sessionStorage.getItem("appheight") -145;
}
},
created() {
this.onSearch()
queryByCode('Direct_Connected_Device').then((res) => {
queryCsDictTree(res.data.id).then((res) => {
this.typeOptions = res.data.map((item) => {
return {
value: item.id,
label: item.name,
}
})
})
queryByid(res.data.id).then((res) => {
this.devTypeAllOptions = res.data.map((item) => {
return {
value: item.id,
label: item.name,
}
})
})
})
},
methods: {
typeChange() {
this.form.devType = null
this.form.devTypeName = null
queryCsDictTree(this.form.type).then((res) => {
this.devTypeOptions = res.data.map((item) => {
return {
value: item.id,
label: item.name,
}
})
})
},
devTypeChange(e) {
console.log(e)
this.form.devTypeName = this.devTypeOptions.filter((item) => item.value == e)[0].label
},
fileChange(e) {
console.log('fileChange!')
console.log(e)
this.file = e.raw
},
fileExceed(e) {
console.log('fileExceed!')
console.log(e)
this.$message({
message: '最多只能上传一个文件，如若替换请先删除',
type: 'error',
})
},
addEdData() {
let form = new FormData()
for (let key in this.form) {
if (!this.form[key]) {
this.$message({
message: '请完善表单信息',
type: 'error',
})
return
}
form.append(key, this.form[key])
}
if (this.form.id) {
if (this.file) {
form.append('file', this.file)
}
auditEdData(form).then((res) => {
console.log(res)
if (res.code == 'A0000') {
this.onSearch()
this.$message({
type: 'success',
message: '修改成功!',
})
this.dialogFormVisible = false
for (let key in this.form) {
this.form[key] = ''
}
delete this.form.id
this.fileList = []
this.file = ''
}
})
} else {
if (!this.file) {
this.$message({
message: '请上传升级文件',
type: 'error',
})
return
}
form.append('file', this.file)
addEdData(form).then((res) => {
console.log(res)
if (res.code == 'A0000') {
this.onSearch()
this.$message({
message: '添加成功',
type: 'success',
})
this.dialogFormVisible = false
for (let key in this.form) {
this.form[key] = ''
}
this.file = ''
}
})
}
},
onSearch() {
console.log('submit!')
queryEdDataPage(this.formInline).then((res) => {
console.log(res)
this.tableData = res.data.records
this.total = res.data.total
})
},
resetFormInline() {
this.formInline.devType = ''
this.formInline.versionendDate = ''
this.formInline.versionStartDate = ''
this.formInline.date = []
},
pageChange(e) {
console.log('pageChange!')
console.log(e)
this.formInline.pageNum = e
this.onSearch()
},
handleSizeChange(val) {
// console.log(`每页 ${val} 条`);
this.formInline.pageNum = 1
this.formInline.pageSize = val
this.onSearch()
},
dateChange(e) {
console.log(e)
if (e && e.length > 0) {
this.formInline.versionStartDate = e[0]
this.formInline.versionendDate = e[1]
} else {
this.formInline.versionStartDate = ''
this.formInline.versionendDate = ''
}
},
start(item) {
console.log(item)
this.confirmPassWord().then(() => {
this.$confirm('确定启用吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
}).then(() => {
auditEdData({
id: item.id,
status: 1,
}).then((res) => {
console.log(res)
if (res.code == 'A0000') {
this.onSearch()
this.$message({
type: 'success',
message: '启用成功!',
})
}
})
})
})
},
del(item) {
console.log(item)
this.confirmPassWord().then(() => {
this.$confirm('确定禁用吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
}).then(() => {
auditEdData({
id: item.id,
status: 0,
}).then((res) => {
console.log(res)
if (res.code == 'A0000') {
this.onSearch()
this.$message({
type: 'success',
message: '禁用成功!',
})
}
})
})
})
},
add() {
this.confirmPassWord().then(() => {
this.dialogTitle = '新增版本'
this.dialogFormVisible = true
})
},
confirmPassWord() {
return new Promise((resolve, reject) => {
if (localStorage.getItem('password')) {
resolve()
} else {
this.$prompt('密码确认', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
inputType: 'password',
}).then(({value}) => {
localStorage.setItem('password', value)
resolve()
})
}
})
},
edit(item) {
this.confirmPassWord().then(() => {
for (let key in this.form) {
this.form[key] = item[key]
}
this.fileList = [
{
name: item.filePath,
url: item.filePath,
},
]
this.form.id = item.id
console.log(this.form)
this.dialogTitle = '修改终端版本'
this.dialogFormVisible = true
})
},
},
}
</script>
<style lang="scss">
.dictionary {
.el-input {
width: 100%;
}
}
</style>

85
src/views/govern/manage/engineering.vue Normal file
View File

@@ -0,0 +1,85 @@
<template>
<Page>
<div class="engineering">
<el-table
stripe
style="width: 100%"
:data="tableData"
height="calc(100vh - 136px)"
border
highlight-current-row
v-loading="loading"
:header-cell-style="{
//background:'#5E95E8',
//color:'#FFFFFF',
height: '25px',
padding: '0px'
}"
header-cell-class-name="table_header"
:row-style="{ height: '28px' }"
:cell-style="{ padding: '0px' }"
row-key="id"
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
>
<el-table-column align="left" prop="name" label="名称"></el-table-column>
<el-table-column align="center" prop="area" label="区域">
<template slot-scope="scope">
{{ scope.row.area || '/' }}
</template>
</el-table-column>
<el-table-column align="center" prop="remark" label="备注">
<template slot-scope="scope">
{{ scope.row.remark || '/' }}
</template>
</el-table-column>
<!-- <el-table-column align="center" label="操作" width="260">-->
<!-- <template slot-scope="scope">-->
<!-- <div class="table-operation">-->
<!-- <el-button size="mini" type="primary" @click="edit(scope.row)" icon="el-icon-edit" >编辑</el-button>-->
<!-- <el-button size="mini" type="primary" @click="jumpProject(scope.row)" icon="el-icon-search">项目</el-button>-->
<!-- <el-button size="mini" type="danger" @click="del(scope.row)" icon="el-icon-delete">删除</el-button> -->
<!-- </div>-->
<!-- </template>-->
<!-- </el-table-column>-->
</el-table>
</div>
</Page>
</template>
<script>
import { engineeringTree } from '@/api/app/engineering'
export default {
name: 'GovernManageEngineering',
data() {
return {
loading: false,
total: 0,
tableData: [],
tabHeight: 'calc(100vh - 116px)'
}
},
computed: {
vth() {
return window.sessionStorage.getItem('appheight') - 10
}
},
created() {
this.search()
},
methods: {
search() {
engineeringTree().then(res => {
console.warn(res)
this.tableData = res.data
this.loading = false
})
}
}
}
</script>
<style lang="scss">
.project {
}
</style>

763
src/views/govern/manage/factory.vue Normal file
View File

@@ -0,0 +1,763 @@
<template>
<Page>
<el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item label="设备类型:">
<el-select
v-model="formInline.devType"
placeholder="请选择设备类型"
style="width: 100%"
@change="devTypeChange"
clearable
>
<el-option
v-for="item in devTypeOptions"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="设备型号:">
<el-select v-model="formInline.devModel" placeholder="请选择设备型号" style="width: 100%" clearable>
<el-option
v-for="item in devModelOptionsFilter"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="通讯协议:">
<el-select
v-model="formInline.devAccessMethod"
placeholder="请选择通讯协议"
style="width: 100%"
clearable
@change="devModelChange"
>
<el-option label="MQTT" value="mqtt"></el-option>
<el-option label="CLD" value="cloud"></el-option>
</el-select>
</el-form-item>
<el-form-item label="状态:">
<el-select
v-model="formInline.status"
placeholder="请选择状态"
style="width: 100%"
clearable
@change="devModelChange"
>
<el-option label="未注册" :value="1"></el-option>
<el-option label="注册" :value="2"></el-option>
<el-option label="接入" :value="3"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="search" icon="el-icon-search">查询</el-button>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="resetFormInline" icon="el-icon-setting">重置</el-button>
</el-form-item>
<el-form-item style="display: flex; float: right">
<el-button type="primary" @click="downLoadFile" icon="el-icon-download">模版下载</el-button>
<el-upload
style="display: inline-block"
action=""
accept=".xlsx"
class="upload-demo"
:show-file-list="false"
:auto-upload="false"
:on-change="bulkImport"
>
<el-button type="primary" icon="el-icon-tickets">批量导入</el-button>
</el-upload>
<el-button type="primary" @click="add" icon="el-icon-plus">新增设备</el-button>
</el-form-item>
</el-form>
<el-table
stripe
style="width: 100%"
:data="tableData"
height="calc(100vh - 224px)"
border
v-loading="loading"
highlight-current-row
header-cell-class-name="table_header"
>
<el-table-column align="center" prop="name" label="设备名称"></el-table-column>
<el-table-column align="center" prop="devType" label="设备类型">
<template slot-scope="scope">
{{
devTypeOptions.filter(item => item.value == scope.row.devType)[0] &&
devTypeOptions.filter(item => item.value == scope.row.devType)[0].label
}}
</template>
</el-table-column>
<el-table-column align="center" prop="devModel" label="设备型号">
<template slot-scope="scope">
{{
devModelOptions.filter(item => item.value == scope.row.devModel)[0] &&
devModelOptions.filter(item => item.value == scope.row.devModel)[0].label
}}
</template>
</el-table-column>
<el-table-column align="center" prop="devAccessMethod" label="通讯协议">
<template slot-scope="scope">
{{
scope.row.devAccessMethod === 'MQTT'
? 'MQTT'
: scope.row.devAccessMethod === 'cloud'
? 'CLD'
: scope.row.devAccessMethod
}}
</template>
</el-table-column>
<el-table-column align="center" prop="createTime" label="录入时间" min-width="150"></el-table-column>
<!-- <el-table-column align="center" prop="programVersion" label="程序版本" min-width="130">-->
<!-- <template slot-scope="scope">-->
<!-- {{-->
<!-- versionOptions.filter((item) => item.value == scope.row.programVersion)[0] &&-->
<!-- versionOptions.filter((item) => item.value == scope.row.programVersion)[0].label-->
<!-- }}-->
<!-- </template>-->
<!-- </el-table-column>-->
<el-table-column align="center" prop="ndid" label="网络设备ID" min-width="120"></el-table-column>
<el-table-column align="center" prop="status" label="状态" min-width="70">
<template slot-scope="scope">
{{ scope.row.status == 1 ? '未注册' : scope.row.status == 2 ? '注册' : '接入' }}
</template>
</el-table-column>
<el-table-column align="center" label="操作" min-width="340">
<template slot-scope="scope">
<!-- <div class="table-operation"> -->
<el-button size="mini" type="primary" @click="edit(scope.row)" icon="el-icon-edit">编辑</el-button>
<el-button size="mini" type="primary" @click="qrCode(scope.row)" icon="el-icon-s-grid">
二维码
</el-button>
<el-button size="mini" type="primary" @click="reset(scope.row.ndid)" icon="el-icon-setting">
出厂恢复
</el-button>
<el-button
size="mini"
type="danger"
@click="deleteEquipmentDelivery(scope.row.id)"
icon="el-icon-delete"
>
删除
</el-button>
<!-- </div> -->
</template>
</el-table-column>
</el-table>
<el-pagination
background
align="right"
@size-change="handleSizeChange"
@current-change="pageChange"
:current-page="formInline.pageNum"
:page-sizes="[20, 30, 40, 50, 100]"
:page-size="formInline.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
class="mt10"
></el-pagination>
<el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" width="30%" :before-close="closeDialog">
<el-form :model="form" :label-width="formLabelWidth" :rules="rules" ref="form">
<el-form-item label="设备名称:" prop="name">
<el-input
v-model="form.name"
autocomplete="off"
clearable
placeholder="请输入（项目名称+设备名称）"
></el-input>
</el-form-item>
<el-form-item label="网络设备ID:" prop="ndid" class="top">
<el-input v-model="form.ndid" autocomplete="off" placeholder="请输入"></el-input>
</el-form-item>
<el-form-item label="设备类型:" prop="devType" class="top">
<el-select
v-model="form.devType"
placeholder="请选择"
style="width: 100%"
@change="formDevTypeChange"
clearable
>
<el-option
v-for="item in devTypeOptions"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="设备型号:" prop="devModel" class="top">
<el-select
v-model="form.devModel"
placeholder="请选择"
style="width: 100%"
clearable
@change="formDevModelChange"
>
<el-option
v-for="item in formDevModelOptionsFilter"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="通讯协议:" prop="devAccessMethod" class="top">
<el-select v-model="form.devAccessMethod" placeholder="请选择" style="width: 100%" clearable>
<el-option label="MQTT" value="MQTT"></el-option>
<el-option label="CLD" value="cloud"></el-option>
</el-select>
</el-form-item>
<!-- <el-form-item label="程序版本:" prop="programVersion">-->
<!-- <el-select v-model="form.programVersion" placeholder="请选择" style="width: 100%">-->
<!-- <el-option v-for="item in versionOptionsFilter" :key="item.value" :label="item.label"-->
<!-- :value="item.value">-->
<!-- </el-option>-->
<!-- </el-select>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="MAC地址:" prop="mac">-->
<!-- <el-input v-model="form.mac" autocomplete="off" placeholder="请输入"></el-input>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="调试人员:" prop="debugPerson">-->
<!-- <el-input v-model="form.debugPerson" autocomplete="off" placeholder="请输入"></el-input>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="设备出厂日期:" prop="producteTime">-->
<!-- <el-date-picker value-format="yyyy-MM-dd" v-model="form.producteTime" type="date" style="width: 100%"-->
<!-- placeholder="选择日期时间">-->
<!-- </el-date-picker>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="检修日期:" prop="checkTime">-->
<!-- <el-date-picker value-format="yyyy-MM-dd" v-model="form.checkTime" type="date" style="width: 100%"-->
<!-- placeholder="选择日期时间">-->
<!-- </el-date-picker>-->
<!-- </el-form-item>-->
<!-- <el-form-item label="调试日期:" prop="debugTime">-->
<!-- <el-date-picker value-format="yyyy-MM-dd" v-model="form.debugTime" type="date" style="width: 100%"-->
<!-- placeholder="选择日期时间">-->
<!-- </el-date-picker>-->
<!-- </el-form-item>-->
<el-form-item label="合同号:" prop="cntractNo" class="top">
<el-input v-model="form.cntractNo" autocomplete="off" placeholder="请输入"></el-input>
</el-form-item>
<!-- <el-form-item label="营销经理:" prop="salesManager">-->
<!-- <el-input v-model="form.salesManager" autocomplete="off" placeholder="请输入"></el-input>-->
<!-- </el-form-item>-->
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="closeDialog">取 消</el-button>
<el-button type="primary" @click="onSubmit">确 定</el-button>
</div>
</el-dialog>
<div class="qrcode-label">
<div class="qrcode-label-title">{{ deivce.mac }}</div>
<img class="qrcode-label-img" alt="二维码加载失败" :src="deivce.qrPath" />
</div>
</Page>
</template>
<script>
import {
getDeviceLeavesFactoryList,
addEquipmentDelivery,
deleteEquipmentDelivery,
editEquipmentDelivery,
uploadTopo,
batchImportDevice,
resetEquipmentDelivery
} from '@/api/app/device'
import { queryByCode, queryCsDictTree, queryByid, queryEdDataPage } from '@/api/app/setting'
import html2canvas from 'html2canvas'
export default {
name: 'GovernManageFactory',
data() {
return {
loading: true,
dialogFormVisible: false,
dialogTitle: '新增设备',
form: {
// checkTime: '',
cntractNo: '',
// debugPerson: '',
// debugTime: '',
devAccessMethod: 'mqtt',
devModel: '',
devType: '',
// mac: '',
name: '',
ndid: ''
// producteTime: '',
// programVersion: '',
// salesManager: '',
},
deivce: {},
dialogImageUrl: '',
dialogVisible: false,
formLabelWidth: '120px',
formInline: {
devAccessMethod: '',
devModel: '',
devType: '',
orderBy: '',
pageNum: 1,
pageSize: 20,
searchBeginTime: '',
searchEndTime: '',
searchState: '',
searchValue: '',
sortBy: '',
status: ''
},
// 设备类型
devTypeOptions: [],
// 设备型号
devModelOptions: [],
// 程序版本
versionOptions: [],
total: 0,
tableData: [],
engineeringList: [],
tabHeight: 'calc(100vh - 205px)',
rules: {
name: [
{ required: true, message: '设备名不能为空', trigger: 'blur' }
// {
// pattern: /[^\u4E00-\u9FA5]/,
// message: "请输入中文字符",
// trigger: "blur",
// },
],
ndid: [{ required: true, message: '网络设备id不能为空', trigger: 'blur' }],
devType: [{ required: true, message: '设备类型不能为空', trigger: 'blur' }],
devModel: [{ required: true, message: '设备型号不能为空', trigger: 'blur' }],
devAccessMethod: [{ required: true, message: '接入方式不能为空', trigger: 'blur' }],
// programVersion: [{ required: true, message: '程序版本不能为空', trigger: 'blur' }],
mac: [
{
required: true,
trigger: 'blur',
validator: (rule, value, callback) => {
if (value) {
// MAC地址正则表达式
let reg = /^([0-9a-fA-F]{2})(([/\s:-][0-9a-fA-F]{2}){5})$/
// IP4地址正则表达式
let reg2 =
/^((([0-9]|([1-9][0-9])|(1[0-9]{2})|(2[0-4][0-9])|(25[0-5]))\.){3})([0-9]|([1-9][0-9])|(1[0-9]{2})|(2[0-4][0-9])|(25[0-5]))$/
if (reg.test(this.form.mac) || reg2.test(this.form.mac)) {
callback()
} else {
callback(new Error('请输入正确的MAC地址'))
}
} else {
callback(new Error('请输入正确的MAC地址'))
}
}
}
],
debugPerson: [{ required: true, message: '调试人员不能为空', trigger: 'blur' }],
producteTime: [
{ required: false, message: '设备出场日期不能为空', trigger: 'blur' }
// {
// type: "email",
// message: "'请输入正确的邮箱地址",
// trigger: ["blur", "change"],
// },
],
checkTime: [
{ required: false, message: '检修日期不能为空', trigger: 'blur' }
// {
// pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
// message: "请输入正确的手机号码",
// trigger: "blur",
// },
],
debugTime: [{ required: true, message: '调试日期不能为空', trigger: 'blur' }],
cntractNo: [
{ required: true, message: '合同号不能为空', trigger: 'blur' }
// {
// required: true,
// validator: (rule, value, callback) => {
// let regexp =
// /^((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})(\.((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})){3}$/;
// let isCorrect = regexp.test(value);
// if (value == "") {
// return callback(new Error("请输入IP地址"));
// } else if (!isCorrect) {
// callback(new Error("请输入正确的IP地址"));
// } else {
// callback();
// }
// },
// trigger: "blur",
// },
],
salesManager: [
{ required: true, message: '销售经理不能为空', trigger: 'blur' }
// {
// required: true,
// validator: (rule, value, callback) => {
// let regexp =
// /^((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})(\.((2(5[0-5]|[0-4]\d))|[0-1]?\d{1,2})){3}$/;
// let isCorrect = regexp.test(value);
// if (value == "") {
// return callback(new Error("请输入IP地址"));
// } else if (!isCorrect) {
// callback(new Error("请输入正确的IP地址"));
// } else {
// callback();
// }
// },
// trigger: "blur",
// },
]
}
}
},
computed: {
vth() {
return window.sessionStorage.getItem('appheight') - 95
},
devModelOptionsFilter() {
return this.devModelOptions.filter(item => {
if (this.formInline.devType) {
return item.pid == this.formInline.devType
} else {
return true
}
})
},
formDevModelOptionsFilter() {
return this.devModelOptions.filter(item => {
if (this.form.devType) {
return item.pid == this.form.devType
} else {
return true
}
})
},
versionOptionsFilter() {
return this.versionOptions.filter(item => {
if (this.form.devModel) {
return item.devType == this.form.devModel
} else {
return true
}
})
}
},
created() {
this.search()
queryByCode('Device_Type').then(res => {
queryCsDictTree(res.data.id).then(res => {
this.devTypeOptions = res.data.map(item => {
return {
value: item.id,
label: item.name,
...item
}
})
})
queryByid(res.data.id).then(res => {
this.devModelOptions = res.data.map(item => {
return {
value: item.id,
label: item.name,
...item
}
})
})
})
queryEdDataPage({
pageNum: 1,
pageSize: 1000
}).then(res => {
console.log(res)
this.versionOptions = res.data.records.map(item => {
return {
value: item.id,
label: item.versionNo,
...item
}
})
})
},
methods: {
closeDialog() {
this.resetForm()
this.dialogFormVisible = false
},
// 表单重置
resetForm() {
if (this.$refs['form']) {
this.$refs['form'].resetFields()
}
},
downLoadFile() {
window.open(window.location.origin + '/api/cs-device-boot/EquipmentDelivery/getExcelTemplate')
},
bulkImport(e) {
console.warn(e)
batchImportDevice(e.raw).then(res => {
console.log(res)
if (res.type === 'application/json') {
const reader = new FileReader()
reader.readAsText(res)
reader.onload = e => {
console.log(e)
let data = JSON.parse(e.target.result)
if (data.code === 'A0000') {
this.$message({
type: 'success',
message: data.message
})
this.search()
} else {
this.$message({
type: 'error',
message: data.message
})
}
}
} else {
let url = window.URL.createObjectURL(res)
let link = document.createElement('a')
link.style.display = 'none'
link.href = url
link.setAttribute('download', '导入失败.xlsx')
document.body.appendChild(link)
link.click()
document.body.removeChild(link)
}
})
},
qrCode(item) {
this.deivce = item
this.deivce.qrPath = localStorage.getItem('STATIC_URL') + this.deivce.qrPath
this.$nextTick(() => {
html2canvas(document.querySelector('.qrcode-label'), {
useCORS: true
}).then(canvas => {
let url = canvas.toDataURL('image/png')
// 下载图片
let a = document.createElement('a')
let event = new MouseEvent('click')
a.href = url
a.download = item.mac + '.png'
a.dispatchEvent(event)
})
})
},
deleteEquipmentDelivery(id) {
this.$confirm('确定删除该设备吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
deleteEquipmentDelivery(id).then(res => {
console.log(res)
if (res.code === 'A0000') {
this.$message({
type: 'success',
message: '删除成功!'
})
this.search()
}
})
})
},
reset(id) {
this.$confirm('确定该设备恢复出厂吗?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
resetEquipmentDelivery(id).then(res => {
console.log(res)
if (res.code === 'A0000') {
this.$message({
type: 'success',
message: '恢复成功!'
})
this.search()
}
})
})
},
devTypeChange(e) {
console.log(e)
if (!e) {
return
}
this.formInline.devModel = ''
},
formDevTypeChange(e) {
console.log(e)
if (!e) {
return
}
this.form.devModel = ''
},
formDevModelChange(e) {
console.log(e)
if (!e) {
return
}
// this.form.programVersion = ''
},
devModelChange(e) {
console.log(e)
},
imageChange(e) {
console.log(e)
this.form.files.push(e)
},
handleRemove(file, fileList) {
console.log(file, fileList)
if (file.id) {
delAppTopologyDiagram(file.id).then(res => {
console.log(res)
})
}
this.form.files = fileList
},
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url
this.dialogVisible = true
},
pageChange(e) {
console.log('pageChange!')
console.log(e)
this.formInline.pageNum = e
this.search()
},
handleSizeChange(val) {
console.log(`每页 ${val} 条`)
this.formInline.pageNum = 1
this.formInline.pageSize = val
this.search()
},
search() {
this.loading = true
getDeviceLeavesFactoryList(this.formInline).then(res => {
console.warn(res)
this.tableData = res.data.records
this.total = res.data.total
this.loading = false
})
},
resetFormInline() {
for (let key in this.formInline) {
if (key !== 'pageNum' && key !== 'pageSize') {
this.formInline[key] = ''
}
}
},
reload() {
for (let key in this.formInline) {
this.formInline[key] = ''
}
this.formInline.pageNum = 1
this.formInline.pageSize = 20
this.search()
},
onSubmit() {
console.log(this.form)
for (let key in this.form) {
if (this.form[key] === '') {
this.$message.error('请填写完整信息')
return
}
}
if (this.dialogTitle == '新增设备') {
addEquipmentDelivery(this.form).then(res => {
console.log(res)
if (res.code === 'A0000') {
this.$message({
message: '新增成功',
type: 'success'
})
this.dialogFormVisible = false
this.reload()
}
})
} else {
editEquipmentDelivery(this.form).then(res => {
if (res.code === 'A0000') {
this.$message({
message: '修改成功',
type: 'success'
})
this.dialogFormVisible = false
this.reload()
}
})
}
},
add() {
for (let key in this.form) {
if (key == 'files') {
this.form[key] = []
continue
}
this.form[key] = ''
}
delete this.form.id
this.dialogTitle = '新增设备'
this.dialogFormVisible = true
},
edit(item) {
console.log(item)
this.dialogTitle = '编辑设备'
for (let key in this.form) {
this.form[key] = item[key]
}
this.form.id = item.id
this.dialogFormVisible = true
},
dialogClose() {
this.form.id = ''
this.form.name = ''
this.dialogFormVisible = false
}
}
}
</script>
<style lang="less" scoped>
@import url('../../../styles/comStyle.less');
</style>
<style lang="scss">
.qrcode-label {
position: absolute;
top: 0;
right: 0;
z-index: -99;
display: flex;
align-items: center;
justify-content: center;
width: 180px;
height: 180px;
padding: 10px;
background: #fff;
flex-direction: column;
.qrcode-label-title {
margin-bottom: 10px;
font-size: 14px;
font-weight: bold;
}
.qrcode-label-img {
width: 140px;
height: 140px;
}
}
</style>

157
src/views/govern/manage/feedback.vue Normal file
View File

@@ -0,0 +1,157 @@
<template>
<Page>
<el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item label="关键词">
<el-input v-model="formInline.searchValue" placeholder="请输入关键词" clearable></el-input>
</el-form-item>
<el-form-item>
<timepicker ref="timepk" :interval="interval" :dataTree="dataTree"></timepicker>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="queryData" icon="el-icon-search">查询</el-button>
</el-form-item>
</el-form>
<el-table
stripe
highlight-current-row
header-cell-class-name="table_header"
border
style="width: 100%"
:data="tableData"
height="calc(100vh - 224px)"
>
<el-table-column prop="title" label="问题标题" align="center"></el-table-column>
<el-table-column prop="description" label="问题描述" align="center"></el-table-column>
<el-table-column prop="status" label="问题状态" align="center">
<template slot-scope="scope">
<el-tag v-if="scope.row.status == 2">处理中</el-tag>
<el-tag v-if="scope.row.status == 0" type="success">已解决</el-tag>
<el-tag v-if="scope.row.status == 1" type="warning">待处理</el-tag>
</template>
</el-table-column>
<el-table-column prop="createTime" label="发布时间" align="center"></el-table-column>
<el-table-column label="操作" width="240px" align="center">
<template slot-scope="scope">
<el-button
size="mini"
type="primary"
icon="el-icon-finished"
@click="solve(scope.row)"
v-if="scope.row.status != 0"
>
解决
</el-button>
</template>
</el-table-column>
</el-table>
<el-pagination
background
align="right"
@size-change="handleSizeChange"
@current-change="pageChange"
:current-page="formInline.pageNum"
:page-sizes="[20, 30, 40, 50, 100]"
:page-size="formInline.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
class="mt10"
></el-pagination>
</Page>
</template>
<script>
import { queryFeedBackPage, updateFeedBackStatus } from '@/api/app/manage'
import timepicker from '@/views/components/TimePicker/index4'
export default {
name: 'GovernLogOperation',
components: {
timepicker
},
data() {
return {
interval: 3,
total: 0,
formInline: {
pageNum: 1,
pageSize: 20,
searchValue: ''
},
loading: false,
tableData: []
//tabHeight: 'calc(100vh - 255px)',
}
},
computed: {
vth() {
return window.sessionStorage.getItem('appheight') - 101
}
},
mounted() {
this.queryData()
},
methods: {
solve(row) {
console.log(row)
this.$confirm('该问题是否已解决？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
updateFeedBackStatus({
id: row.id,
status: 0
}).then(res => {
console.log(res)
if (res.code == 'A0000') {
this.$message({
type: 'success',
message: '操作成功!'
})
this.queryData()
} else {
this.$message({
type: 'error',
message: '操作失败!'
})
}
})
})
},
queryData() {
this.loading = true
this.formInline.searchBeginTime = this.$refs.timepk.timeValue[0]
this.formInline.searchEndTime = this.$refs.timepk.timeValue[1]
queryFeedBackPage(this.formInline).then(res => {
console.log(res)
if (res.code == 'A0000') {
this.total = res.data.total
this.tableData = res.data.records
}
this.loading = false
})
},
onSubmit() {
console.log('submit!')
},
pageChange(e) {
console.log('pageChange!')
console.log(e)
this.formInline.pageNum = e
this.queryData()
},
handleSizeChange(val) {
console.log(`每页 ${val} 条`)
this.formInline.pageNum = 1
this.formInline.pageSize = val
this.queryData()
}
}
}
</script>
<style lang="scss" scoped>
::v-deep.el-table--enable-row-hover .el-table__body tr:hover > td {
color: #000 !important;
background-color: $hoverf !important;
}
</style>

58
src/views/govern/manage/referral.vue Normal file
View File

@@ -0,0 +1,58 @@
<template>
<Page :loading="false">
<div >
<el-form :inline="true" class="demo-form-inline">
<el-form-item style="float: right;">
<el-button type="primary" @click="refreshReferralCode">刷新推荐码</el-button>
</el-form-item>
</el-form>
<el-table
stripe :cell-style="{ textAlign: 'center' }"
:header-cell-style="{ textAlign: 'center' }"
:data="tableData"
height="calc(100vh - 185px)"
border
header-cell-class-name="table_header"
algin="center"
style="width: 100%;">
<el-table-column
prop="roleName"
label="角色名称"
>
</el-table-column>
<el-table-column
prop="roleReferralCode"
label="推荐码"
>
</el-table-column>
</el-table>
</div>
</page>
</template>
<script>
import {findReferralCode, refreshReferralCode} from '@/api/app/setting'
export default {
name: 'GovernManageReferral',
data() {
return {
tableData: []
}
},
created() {
findReferralCode().then(res => {
console.log(res)
this.tableData = res.data
})
},
methods: {
refreshReferralCode() {
refreshReferralCode().then(res => {
console.log(res)
this.tableData = res.data
})
}
}
}
</script>