提交
This commit is contained in:
1188
src/views/energy-system/advancedanalysis/airanalysis.vue
Normal file
1188
src/views/energy-system/advancedanalysis/airanalysis.vue
Normal file
File diff suppressed because it is too large
Load Diff
1191
src/views/energy-system/advancedanalysis/airanalysisstrategy.vue
Normal file
1191
src/views/energy-system/advancedanalysis/airanalysisstrategy.vue
Normal file
File diff suppressed because it is too large
Load Diff
1024
src/views/energy-system/advancedanalysis/costloadanalysis.vue
Normal file
1024
src/views/energy-system/advancedanalysis/costloadanalysis.vue
Normal file
File diff suppressed because it is too large
Load Diff
230
src/views/energy-system/advancedanalysis/dataintegrity.vue
Normal file
230
src/views/energy-system/advancedanalysis/dataintegrity.vue
Normal file
@@ -0,0 +1,230 @@
|
||||
<template>
|
||||
<div style="padding: 0.5%">
|
||||
<el-row :gutter="10" style="margin-bottom: 10px">
|
||||
<el-col :span="18.5">
|
||||
<timepicker
|
||||
@querfromdata="querfromdata"
|
||||
:interval="interval"
|
||||
></timepicker>
|
||||
</el-col>
|
||||
<el-col :span="5.5" style="float: right">
|
||||
<el-form :inline="true" :model="formInline" class="demo-form-inline">
|
||||
<el-form-item label="通讯状态:">
|
||||
<el-tag style="background: #339966; color: #fff" size="mini"
|
||||
>正常</el-tag
|
||||
>
|
||||
<el-tag style="background: #cc0000; color: #fff" size="mini"
|
||||
>中断</el-tag
|
||||
>
|
||||
</el-form-item>
|
||||
<el-form-item label="数据完整性:">
|
||||
<el-tag
|
||||
style="background: #339966; color: #fff; width: 33px"
|
||||
size="mini"
|
||||
> </el-tag
|
||||
>
|
||||
</el-form-item>
|
||||
<el-form-item label=">=90%">
|
||||
<el-tag
|
||||
style="background: #ffcc33; color: #fff; width: 33px"
|
||||
size="mini"
|
||||
> </el-tag
|
||||
>
|
||||
</el-form-item>
|
||||
<el-form-item label="60%~90%">
|
||||
<el-tag
|
||||
style="background: #cc0000; color: #fff; width: 33px"
|
||||
size="mini"
|
||||
> </el-tag
|
||||
>
|
||||
</el-form-item>
|
||||
<el-form-item label=">60%"> </el-form-item>
|
||||
</el-form>
|
||||
</el-col>
|
||||
<el-table
|
||||
stripe
|
||||
:data="tableData"
|
||||
border
|
||||
v-loading="loading"
|
||||
:style="'width: 100%;height:' + tableheight + 'px'"
|
||||
:height="tableheight + 'px'"
|
||||
row-key="id"
|
||||
id="rebateSetTable"
|
||||
default-expand-all
|
||||
highlight-current-row
|
||||
:header-cell-style="{
|
||||
height: '25px',
|
||||
top: '0px',
|
||||
padding: '0px',
|
||||
}"
|
||||
:row-style="{ height: '25px' }"
|
||||
:cell-style="{ padding: '0px' }"
|
||||
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
|
||||
>
|
||||
<el-table-column prop="name" label="拓扑"></el-table-column>
|
||||
<el-table-column prop="comFlag" label="通讯状态" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-tag
|
||||
v-if="scope.row.comFlag == 1"
|
||||
style="color: #fff; background: #339966"
|
||||
>正常</el-tag
|
||||
>
|
||||
<el-tag
|
||||
v-if="scope.row.comFlag == 0"
|
||||
style="color: #fff; background: #cc0000"
|
||||
>中断</el-tag
|
||||
>
|
||||
<span v-if="scope.row.comFlag == null"></span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="integrity" label="数据完整性(%)" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-tag
|
||||
v-if="
|
||||
scope.row.integrity >= 90 &&
|
||||
scope.row.integrity !== 3.14159 &&
|
||||
scope.row.integrity !== -1
|
||||
"
|
||||
style="background: #339966; color: #fff"
|
||||
>{{ scope.row.integrity }}</el-tag
|
||||
>
|
||||
<el-tag
|
||||
v-if="
|
||||
scope.row.integrity < 60 &&
|
||||
scope.row.integrity !== 3.14159 &&
|
||||
scope.row.integrity !== -1
|
||||
"
|
||||
style="background: #cc0000; color: #fff"
|
||||
>{{ scope.row.integrity }}</el-tag
|
||||
>
|
||||
<el-tag
|
||||
v-if="
|
||||
scope.row.integrity < 90 &&
|
||||
scope.row.integrity >= 60 &&
|
||||
scope.row.integrity !== 3.14159 &&
|
||||
scope.row.integrity !== -1
|
||||
"
|
||||
style="background: #ffcc33; color: #fff"
|
||||
>{{ scope.row.integrity }}</el-tag
|
||||
>
|
||||
<el-tag
|
||||
v-if="scope.row.integrity === 3.14159"
|
||||
style="background: #ccc; color: #fff"
|
||||
>暂无数据</el-tag
|
||||
>
|
||||
<span
|
||||
v-if="scope.row.integrity === -1"
|
||||
style="background: #ccc; color: #fff"
|
||||
></span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { getheight } from "@/assets/commjs/common";
|
||||
import api from "@/api/energy/sysconfig";
|
||||
import timepicker from "../../components/TimePicker/index4";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
device: 1,
|
||||
multipleSelection: [],
|
||||
tableheight: undefined,
|
||||
loading: true,
|
||||
tableData: [],
|
||||
formData: {},
|
||||
tablename: "tab1",
|
||||
treenode: "",
|
||||
interval: 4,
|
||||
formInline: {
|
||||
user: "",
|
||||
region: "",
|
||||
},
|
||||
};
|
||||
},
|
||||
components: {
|
||||
timepicker,
|
||||
},
|
||||
created() {},
|
||||
mounted() {
|
||||
this.device = window.devicePixelRatio;
|
||||
this.tableheight = window.sessionStorage.getItem('appheight') - 65
|
||||
|
||||
// if (this.device == 1) {
|
||||
// this.tableheight = getheight() * 2.22;
|
||||
// }
|
||||
// if (this.device == 1.25) {
|
||||
// this.tableheight = getheight() * 2.22;
|
||||
// }
|
||||
// if (this.device == 1.5) {
|
||||
// this.tableheight = getheight() * 1.93;
|
||||
// }
|
||||
},
|
||||
methods: {
|
||||
handleSelectionChange(val) {
|
||||
console.log(val);
|
||||
this.multipleSelection = val;
|
||||
},
|
||||
//时间格式转化
|
||||
dateFormat(dateData1, dateData2) {
|
||||
var timearr = [];
|
||||
var date = new Date(dateData1);
|
||||
var y = date.getFullYear();
|
||||
var m = date.getMonth() + 1;
|
||||
m = m < 10 ? "0" + m : m;
|
||||
var d = date.getDate();
|
||||
d = d < 10 ? "0" + d : d;
|
||||
var h = date.getHours();
|
||||
h = h < 10 ? "0" + h : h;
|
||||
var f = date.getMinutes();
|
||||
f = f < 10 ? "0" + f : f;
|
||||
var s = date.getSeconds();
|
||||
s = s < 10 ? "0" + s : s;
|
||||
this.formData.startTime = y + "-" + m + "-" + d;
|
||||
timearr.push(this.formData.startTime);
|
||||
var date = new Date(dateData2);
|
||||
var y = date.getFullYear();
|
||||
var m = date.getMonth() + 1;
|
||||
m = m < 10 ? "0" + m : m;
|
||||
var d = date.getDate();
|
||||
d = d < 10 ? "0" + d : d;
|
||||
var h = date.getHours();
|
||||
h = h < 10 ? "0" + h : h;
|
||||
var f = date.getMinutes();
|
||||
f = f < 10 ? "0" + f : f;
|
||||
var s = date.getSeconds();
|
||||
s = s < 10 ? "0" + s : s;
|
||||
this.formData.endTime = y + "-" + m + "-" + d;
|
||||
timearr.push(this.formData.endTime);
|
||||
return timearr;
|
||||
},
|
||||
querfromdata(data, timehbValue, interval) {
|
||||
this.interval = interval;
|
||||
this.loading = true;
|
||||
this.dateFormat(data[0], data[1]);
|
||||
// this.time = this.formData.searchBeginTime+'至'+this.formData.searchEndTime
|
||||
this.dataShuju();
|
||||
},
|
||||
dataShuju() {
|
||||
api.getIntegrityTree(this.formData).then((res) => {
|
||||
if (res.code === "A0000") {
|
||||
// this.tableData = res.data
|
||||
res.data.forEach((element) => {
|
||||
element.children.forEach((m) => {
|
||||
m.children.forEach((n) => {
|
||||
n.integrity = -1;
|
||||
});
|
||||
});
|
||||
});
|
||||
this.tableData = res.data;
|
||||
this.loading = false;
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
</style>
|
||||
1019
src/views/energy-system/advancedanalysis/electricalcontrast.vue
Normal file
1019
src/views/energy-system/advancedanalysis/electricalcontrast.vue
Normal file
File diff suppressed because it is too large
Load Diff
1469
src/views/energy-system/advancedanalysis/electricenergy.vue
Normal file
1469
src/views/energy-system/advancedanalysis/electricenergy.vue
Normal file
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,945 @@
|
||||
<template>
|
||||
<div style="padding: 0.5%">
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="24">
|
||||
<el-form :inline="true" :model="ruleForm" class="demo-form-inline" style='margin-left: 15px'>
|
||||
<el-form-item label="统计指标:">
|
||||
<el-select
|
||||
v-model="formData.tagType"
|
||||
placeholder="请选择"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="负荷类型:">
|
||||
<el-select
|
||||
v-model="value2"
|
||||
multiple
|
||||
collapse-tags
|
||||
placeholder="请选择"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in options2"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="值类型:">
|
||||
<el-select
|
||||
v-model="formData.valType"
|
||||
placeholder="请选择"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in options1"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="统计类型:">
|
||||
<el-select
|
||||
v-model="formData.statisticType"
|
||||
placeholder="请选择"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in options3"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<!-- <el-button type="primary" style="float:right" @click="Indexstrategy">指标策略</el-button>
|
||||
<el-button type="primary" style="float:right;margin-right:1%" @click="loadtype">负荷策略</el-button> -->
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<timepicker
|
||||
v-if="falg"
|
||||
@querfromdata="querfromdata"
|
||||
:type="2"
|
||||
:interval="interval"
|
||||
:tablename="tablename"
|
||||
:thb="true"
|
||||
></timepicker>
|
||||
</el-col>
|
||||
|
||||
<el-col :span="24">
|
||||
<div
|
||||
id="electrih"
|
||||
:style="
|
||||
'background:;width:100%;height:' + (tableheight-50) + 'px;'
|
||||
"
|
||||
></div>
|
||||
<div
|
||||
v-if="radio3 == '累计'"
|
||||
id="electri2"
|
||||
:style="
|
||||
'background:;width:100%;height:' + (tableheight-50) + 'px;'
|
||||
"
|
||||
></div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<!--指标策略-->
|
||||
<el-dialog
|
||||
:close-on-click-modal="false"
|
||||
title="指标策略"
|
||||
:visible.sync="dialogVisible"
|
||||
width="20%"
|
||||
:before-close="handleClose"
|
||||
>
|
||||
<span class="spantext">请勾选需要参与统计的指标:</span>
|
||||
<div class="border">
|
||||
<el-checkbox-group v-model="checkList" style="padding: 2%">
|
||||
<el-checkbox label="三相有功功率" class="check"></el-checkbox>
|
||||
<el-checkbox label="三相无功功率" class="check"></el-checkbox>
|
||||
<el-checkbox label="三相净有功电能" class="check"></el-checkbox>
|
||||
<el-checkbox label="电流总有效值" class="check"> </el-checkbox>
|
||||
<el-checkbox label="电压基波幅值" class="check"></el-checkbox>
|
||||
<el-checkbox label="电流基波幅值" class="check"></el-checkbox>
|
||||
<el-checkbox label="总有有功功率" class="check"></el-checkbox>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="dialogVisible = false"
|
||||
>保 存</el-button
|
||||
>
|
||||
</span>
|
||||
</el-dialog>
|
||||
<!--负荷策略-->
|
||||
<el-dialog
|
||||
:close-on-click-modal="false"
|
||||
title="电度策略"
|
||||
:visible.sync="dialogVisible2"
|
||||
width="30%"
|
||||
:before-close="handleClose"
|
||||
>
|
||||
<span class="spantext">负荷设备树:</span>
|
||||
<el-row class="border2">
|
||||
<el-col :span="10">
|
||||
<el-tree
|
||||
:data="treedata"
|
||||
:props="defaultProps"
|
||||
default-expand-all
|
||||
style="height: 30vh; overflow-y: auto"
|
||||
:highlight-current="true"
|
||||
@node-click="handleNodeClick"
|
||||
></el-tree>
|
||||
</el-col>
|
||||
<el-col :span="14">
|
||||
<el-form
|
||||
ref="form"
|
||||
:model="form"
|
||||
label-width="80px"
|
||||
style="margin-top: 20%"
|
||||
>
|
||||
<el-form-item label="负荷名称">
|
||||
<el-input
|
||||
v-model="form.name"
|
||||
placeholder="请输入负荷名称"
|
||||
style="width: 86%"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="负荷终端">
|
||||
<el-select v-model="form.region" placeholder="请选择负荷终端">
|
||||
<el-option label="2号楼217宿舍" value="shanghai"></el-option>
|
||||
<el-option label="号楼218宿舍" value="beijing"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item style="margin-left: 10%">
|
||||
<el-button type="primary">删除</el-button>
|
||||
<el-button type="primary">新增</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogVisible2 = false">取 消</el-button>
|
||||
<el-button type="primary" @click="dialogVisible2 = false"
|
||||
>确 定</el-button
|
||||
>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import ElInputGroup from "@/components/ElInputGroup/el-input-group.vue";
|
||||
import { dicData } from "../../../assets/commjs/dictypeData";
|
||||
import { getappheight, getheight } from "../../../assets/commjs/common";
|
||||
import api from "@/api/energy/sysconfig";
|
||||
import timepicker from "../../components/TimePicker/index4";
|
||||
import echarts from "echarts";
|
||||
export default {
|
||||
components: {
|
||||
timepicker,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
falg: false,
|
||||
tablename: "tab2",
|
||||
dialogVisible: false,
|
||||
dialogVisible2: false,
|
||||
formData: {
|
||||
startTime: "",
|
||||
endTime: "",
|
||||
startTimeBi: "",
|
||||
endTimeBi: "",
|
||||
statisticType: 0,
|
||||
tagType: "",
|
||||
loadType: [],
|
||||
valType: "",
|
||||
},
|
||||
interval: 4,
|
||||
//统计指标
|
||||
//统计指标
|
||||
value: 0,
|
||||
options: [
|
||||
{ value: 0, label: "净有功电能" },
|
||||
{ value: 1, label: "三相无功功率" },
|
||||
],
|
||||
value1: 0,
|
||||
options1: [
|
||||
{ value: 0, label: "增量" },
|
||||
{ value: 1, label: "峰" },
|
||||
{ value: 2, label: "平" },
|
||||
{ value: 3, label: "谷" },
|
||||
],
|
||||
value3: 0,
|
||||
options3: [
|
||||
{ value: 0, label: "电度" },
|
||||
{ value: 1, label: "电费" },
|
||||
],
|
||||
value2: [],
|
||||
options2: [
|
||||
{ value: 0, label: "空调负荷" },
|
||||
{ value: 1, label: "办公负荷" },
|
||||
{ value: 2, label: "厨房负荷" },
|
||||
{ value: 3, label: "宿舍负荷" },
|
||||
{ value: 4, label: "光伏发电" },
|
||||
{ value: 5, label: "进线" },
|
||||
{ value: 6, label: "总负荷" },
|
||||
],
|
||||
tableData: [],
|
||||
checkList: [],
|
||||
device: 1,
|
||||
tableheight: undefined,
|
||||
treedata: [
|
||||
{
|
||||
id: 0,
|
||||
label: "空调负荷",
|
||||
children: [
|
||||
{
|
||||
id: 1,
|
||||
label: "1层1号监测点",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
label: "1层2号监测点",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "办公负荷",
|
||||
id: 11,
|
||||
children: [
|
||||
{
|
||||
id: 12,
|
||||
label: "1号楼电梯",
|
||||
},
|
||||
{
|
||||
id: 13,
|
||||
label: "1号楼照明",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
label: "厨房负荷",
|
||||
id: 3,
|
||||
children: [
|
||||
{
|
||||
id: 31,
|
||||
label: "厨房",
|
||||
},
|
||||
{
|
||||
id: 32,
|
||||
label: "保安室",
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
defaultProps: {
|
||||
children: "children",
|
||||
label: "label",
|
||||
},
|
||||
form: {
|
||||
name: "",
|
||||
region: "",
|
||||
},
|
||||
name: "kWh",
|
||||
name1: "",
|
||||
text: "环比",
|
||||
//subtext:'增量值',
|
||||
legend: [],
|
||||
xdata: [],
|
||||
ydata1: [],
|
||||
ydata2: [],
|
||||
ping: "",
|
||||
time: "",
|
||||
periodBeginTime: "",
|
||||
periodEndTime: "",
|
||||
timehuanbiValue: [],
|
||||
t: false,
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.getTarget();
|
||||
},
|
||||
mounted() {
|
||||
// this.tableheight = getheight();
|
||||
// this.device = window.devicePixelRatio;
|
||||
// if (this.device == 1) {
|
||||
// this.tableheight = this.tableheight * 2.25;
|
||||
// }
|
||||
// if (this.device == 1.25) {
|
||||
// this.tableheight = this.tableheight * 1.8;
|
||||
// }
|
||||
// if (this.device == 1.5) {
|
||||
// this.tableheight = this.tableheight * 1.93;
|
||||
// }
|
||||
this.tableheight = window.sessionStorage.getItem('appheight') - 120
|
||||
this.$nextTick(() => {
|
||||
this.electritypeEcharts1();
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
//获取指标数据
|
||||
getTarget() {
|
||||
var p = {
|
||||
statisticalName: "电度统计",
|
||||
};
|
||||
api.getEleStatisticalTree(p).then((res) => {
|
||||
if (res.code == "A0000") {
|
||||
this.options = res.data.binds;
|
||||
this.formData.tagType = this.options[0].id;
|
||||
}
|
||||
this.getDetail();
|
||||
});
|
||||
},
|
||||
//获取负荷类型
|
||||
getDetail() {
|
||||
api.getEleLoadSetDetail().then((res) => {
|
||||
if (res.code == "A0000") {
|
||||
var data = res.data;
|
||||
var arr = [];
|
||||
var arrId = [];
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
var p = {
|
||||
name: data[i].loadName,
|
||||
id: data[i].loadId,
|
||||
};
|
||||
arrId.push(data[i].loadId);
|
||||
arr.push(p);
|
||||
}
|
||||
this.value2 = arrId;
|
||||
this.options2 = arr;
|
||||
}
|
||||
this.RateDetail();
|
||||
});
|
||||
},
|
||||
//字典获取数据
|
||||
RateDetail() {
|
||||
var code = "Rate_Type";
|
||||
this.options1 = dicData(code, []);
|
||||
this.options1.push({ id: "", name: "全部", label: "全部" });
|
||||
this.formData.valType = this.options1[0].id;
|
||||
this.falg = true;
|
||||
},
|
||||
//指标策略触发事件
|
||||
Indexstrategy() {
|
||||
this.dialogVisible = true;
|
||||
},
|
||||
//树节点触发事件
|
||||
handleNodeClick(data) {
|
||||
console.log(data);
|
||||
},
|
||||
//负荷策略触发事件
|
||||
loadtype() {
|
||||
this.dialogVisible2 = true;
|
||||
},
|
||||
//关闭事件
|
||||
handleClose() {
|
||||
this.dialogVisible = false;
|
||||
this.dialogVisible2 = false;
|
||||
},
|
||||
//切换事件
|
||||
checkbox(val) {
|
||||
this.radio3 = val;
|
||||
if (val == "增量") {
|
||||
this.$nextTick(() => {
|
||||
this.electritypeEcharts1();
|
||||
});
|
||||
} else {
|
||||
this.$nextTick(() => {
|
||||
this.electritypeEcharts2();
|
||||
});
|
||||
}
|
||||
},
|
||||
//时间格式化
|
||||
dateFormat(dateData1, dateData2) {
|
||||
var timearr = [];
|
||||
var date = new Date(dateData1);
|
||||
var y = date.getFullYear();
|
||||
var m = date.getMonth() + 1;
|
||||
m = m < 10 ? "0" + m : m;
|
||||
var d = date.getDate();
|
||||
d = d < 10 ? "0" + d : d;
|
||||
var h = date.getHours();
|
||||
h = h < 10 ? "0" + h : h;
|
||||
var f = date.getMinutes();
|
||||
f = f < 10 ? "0" + f : f;
|
||||
var s = date.getSeconds();
|
||||
s = s < 10 ? "0" + s : s;
|
||||
this.formData.searchBeginTime = y + "-" + m + "-" + d;
|
||||
timearr.push(this.formData.startTime);
|
||||
var date = new Date(dateData2);
|
||||
var y = date.getFullYear();
|
||||
var m = date.getMonth() + 1;
|
||||
m = m < 10 ? "0" + m : m;
|
||||
var d = date.getDate();
|
||||
d = d < 10 ? "0" + d : d;
|
||||
var h = date.getHours();
|
||||
h = h < 10 ? "0" + h : h;
|
||||
var f = date.getMinutes();
|
||||
f = f < 10 ? "0" + f : f;
|
||||
var s = date.getSeconds();
|
||||
s = s < 10 ? "0" + s : s;
|
||||
this.formData.searchEndTime = y + "-" + m + "-" + d;
|
||||
timearr.push(this.formData.endTime);
|
||||
return timearr;
|
||||
},
|
||||
querfromdata(data, timehbValue, interval) {
|
||||
this.interval = interval;
|
||||
|
||||
this.timeValue = data;
|
||||
console.log("日期" + this.timeValue);
|
||||
this.timehuanbiValue = timehbValue;
|
||||
console.log("环比" + this.timehuanbiValue);
|
||||
this.periodBeginTime = this.timehuanbiValue[0];
|
||||
this.periodEndTime = this.timehuanbiValue[1];
|
||||
console.log("开始" + this.periodBeginTime);
|
||||
console.log("结束" + this.periodEndTime);
|
||||
this.ping = this.periodBeginTime + "至" + this.periodEndTime;
|
||||
this.dateFormat(this.timeValue[0], this.timeValue[1]);
|
||||
this.time =
|
||||
this.formData.searchBeginTime + "至" + this.formData.searchEndTime;
|
||||
var arr = [];
|
||||
|
||||
var startTime = this.timeValue[0];
|
||||
var year1 = parseInt(startTime.substring(0, 4));
|
||||
// var month = parseInt(startTime.substring(5, 7))
|
||||
// arr.push(year1+'年'+month+'月')
|
||||
var startTimeb = this.periodBeginTime;
|
||||
var year2 = parseInt(startTimeb.substring(0, 4));
|
||||
// var month = parseInt(startTimeb.substring(5, 7))
|
||||
// arr.push(year2+'年'+month+'月')
|
||||
arr.push(this.time);
|
||||
arr.push(this.ping);
|
||||
this.legend = arr;
|
||||
for (var i = 0; i < this.options.length; i++) {
|
||||
if (this.formData.tagType == this.options[i].id) {
|
||||
this.name1 = this.options[i].name;
|
||||
}
|
||||
}
|
||||
|
||||
var data = {
|
||||
startTime: this.timeValue[0],
|
||||
endTime: this.timeValue[1],
|
||||
startTimeBi: this.periodBeginTime,
|
||||
endTimeBi: this.periodEndTime,
|
||||
tagType: this.formData.tagType,
|
||||
statisticType: this.formData.statisticType,
|
||||
loadType: this.value2,
|
||||
valType: this.formData.valType,
|
||||
};
|
||||
api.getElectStatistic(data).then((res) => {
|
||||
if (res.code == "A0000") {
|
||||
var data = res.data;
|
||||
var xdata = [];
|
||||
var ydata1 = [];
|
||||
var ydata2 = [];
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
if (
|
||||
data[i].afterNum == data[i].beforeNum &&
|
||||
data[i].afterNum !== 0 &&
|
||||
data[i].beforeNum !== 0
|
||||
) {
|
||||
this.t = true;
|
||||
ydata1.push(data[i].beforeNum.toFixed(2));
|
||||
xdata.push(data[i].loadName);
|
||||
} else {
|
||||
this.t = false;
|
||||
xdata.push(data[i].loadName);
|
||||
if (data[i].afterNum == 3.14159) {
|
||||
data[i].afterNum = 0.5;
|
||||
}
|
||||
if (data[i].beforeNum == 3.14159) {
|
||||
data[i].beforeNum = 0.5;
|
||||
}
|
||||
ydata2.push(data[i].afterNum.toFixed(2));
|
||||
ydata1.push(data[i].beforeNum.toFixed(2));
|
||||
}
|
||||
}
|
||||
this.xdata = xdata;
|
||||
this.ydata1 = ydata1;
|
||||
this.ydata2 = ydata2;
|
||||
if (this.formData.statisticType == 0) {
|
||||
this.name = "kWh";
|
||||
} else {
|
||||
this.name = "元";
|
||||
}
|
||||
if (this.text === "环比" && year1 > year2 && !this.t) {
|
||||
this.text = "同比";
|
||||
this.electritypeEcharts1();
|
||||
} else if (this.text === "环比" && year1 === year2 && !this.t) {
|
||||
this.text = "环比";
|
||||
this.electritypeEcharts1();
|
||||
} else {
|
||||
if (this.t) {
|
||||
this.text = "";
|
||||
this.electritypeEcharts1();
|
||||
} else {
|
||||
this.text = "环比";
|
||||
this.electritypeEcharts1();
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
// if(d !==''){
|
||||
// this.text='同比'
|
||||
// this.subtext='空调负荷'
|
||||
// this.xdata=['最大值','最小值','平均值']
|
||||
// this.ydata1=[89,35,45],
|
||||
// this.ydata2=[97.89,56.78,35,6]
|
||||
// this.loadtypeEcharts()
|
||||
// }
|
||||
},
|
||||
electritypeEcharts1() {
|
||||
let echarts = require("echarts");
|
||||
var myChart1 = echarts.init(document.getElementById("electrih"));
|
||||
// var xData=['2021-01-01', '2021-01-02', '2021-01-03', '2021-01-04', '2021-01-05', '2021-01-06', '2021-01-07', '2021-01-08', '2021-01-09', '2021-01-10', '2021-01-11', '2021-01-12', '2021-02-01', '2021-02-02', '2021-02-03', '2021-02-04']
|
||||
// var yData=[50, 75, 84, 65, 90, 56, 68,89, 67, 95, 69, 96,75, 58, 85, 65]
|
||||
var option1 = {
|
||||
title: {
|
||||
text: this.text,
|
||||
// subtext:this.subtext ,
|
||||
left: "center",
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
axisPointer: {
|
||||
type: "cross",
|
||||
crossStyle: {
|
||||
color: "#999",
|
||||
},
|
||||
},
|
||||
formatter: function (params) {
|
||||
var tips = "";
|
||||
tips +=
|
||||
'<span style="font-weight:bold;color:#0099CC">' +
|
||||
params[0].name +
|
||||
"</span></br/>";
|
||||
for (var i = 0; i < params.length; i++) {
|
||||
if (params[i].value == 0.5) {
|
||||
tips += params[i].seriesName + ":暂无数据<br/>";
|
||||
} else {
|
||||
tips +=
|
||||
params[i].seriesName +
|
||||
':<span style="font-weight:bold;color:#996600">' +
|
||||
params[i].value +
|
||||
"</span><br/>";
|
||||
}
|
||||
}
|
||||
return tips;
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
left: "2%",
|
||||
right: "4%",
|
||||
bottom: "2%",
|
||||
top: "10%",
|
||||
containLabel: true,
|
||||
},
|
||||
toolbox: {
|
||||
feature: {
|
||||
//dataView: { show: true, readOnly: false },
|
||||
// magicType: { show: true, type: ['line', 'bar'] },
|
||||
//restore: { show: true },
|
||||
saveAsImage: { show: true },
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
// orient: 'vertical',
|
||||
data: [
|
||||
{ name: this.legend[0], itemStyle: { color: "#FF9900" } },
|
||||
{ name: this.legend[1], itemStyle: { color: "#0099CC" } },
|
||||
],
|
||||
left: "left",
|
||||
// itemStyle: {
|
||||
// color:['#00CC33','#0099CC']
|
||||
// }
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
data: this.xdata,
|
||||
axisPointer: {
|
||||
type: "shadow",
|
||||
},
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
name: this.name1,
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
type: "dashed",
|
||||
color: "#55b9b4",
|
||||
},
|
||||
},
|
||||
//min: 0,
|
||||
// max: 100,
|
||||
//interval: 10,
|
||||
axisLabel: {
|
||||
formatter: "{value}" + this.name,
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: this.legend[1],
|
||||
barMaxWidth: 45,
|
||||
type: "bar",
|
||||
// tooltip: {
|
||||
// valueFormatter: function (value) {
|
||||
// return value + 'kWh';
|
||||
// }
|
||||
// },
|
||||
data: this.ydata2,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: function (params) {
|
||||
if (params.value == 0.5) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: "#999999",
|
||||
},
|
||||
],
|
||||
false
|
||||
);
|
||||
} else {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: "#0099CC",
|
||||
},
|
||||
],
|
||||
false
|
||||
);
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: "top",
|
||||
// distance: 10,
|
||||
// color: '#fff'
|
||||
},
|
||||
},
|
||||
{
|
||||
name: this.legend[0],
|
||||
barMaxWidth: 45,
|
||||
type: "bar",
|
||||
// tooltip: {
|
||||
// valueFormatter: function (value) {
|
||||
// return value + 'kWh';
|
||||
// }
|
||||
// },
|
||||
data: this.ydata1,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: function (params) {
|
||||
if (params.value == 0.5) {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: "#999999",
|
||||
},
|
||||
],
|
||||
false
|
||||
);
|
||||
} else {
|
||||
return new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 1,
|
||||
color: "#FF9900",
|
||||
},
|
||||
],
|
||||
false
|
||||
);
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
label: {
|
||||
show: true,
|
||||
position: "top",
|
||||
// distance: 10,
|
||||
// color: '#fff'
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
myChart1.clear();
|
||||
|
||||
option1 && myChart1.setOption(option1, true)
|
||||
window.echartsArr.push(myChart1);
|
||||
},
|
||||
electritypeEcharts2() {
|
||||
let echarts = require("echarts");
|
||||
var myChart = echarts.init(document.getElementById("electri2"));
|
||||
var xData = [
|
||||
"2021-01-01",
|
||||
"2021-01-02",
|
||||
"2021-01-03",
|
||||
"2021-01-04",
|
||||
"2021-01-05",
|
||||
"2021-01-06",
|
||||
"2021-01-07",
|
||||
"2021-01-08",
|
||||
"2021-01-09",
|
||||
"2021-01-10",
|
||||
"2021-01-11",
|
||||
"2021-01-12",
|
||||
"2021-02-01",
|
||||
"2021-02-02",
|
||||
"2021-02-03",
|
||||
"2021-02-04",
|
||||
];
|
||||
var yData = [
|
||||
50, 75, 84, 65, 90, 56, 68, 89, 67, 95, 69, 96, 75, 58, 85, 65,
|
||||
];
|
||||
var option = {
|
||||
title: {
|
||||
text: "",
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
},
|
||||
grid: {
|
||||
left: "2%",
|
||||
right: "4%",
|
||||
bottom: "6%",
|
||||
top: "10%",
|
||||
containLabel: true,
|
||||
},
|
||||
legend: {},
|
||||
toolbox: {
|
||||
show: true,
|
||||
feature: {
|
||||
dataZoom: {
|
||||
yAxisIndex: "none",
|
||||
},
|
||||
//dataView: { readOnly: false },
|
||||
magicType: { type: ["line", "bar"] },
|
||||
//restore: {},
|
||||
saveAsImage: {},
|
||||
},
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
boundaryGap: false,
|
||||
data: [
|
||||
"2022-03-11 11:15",
|
||||
"11:30",
|
||||
"11:45",
|
||||
"12:00",
|
||||
"12:15",
|
||||
"12:30",
|
||||
"12:45",
|
||||
],
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
axisLabel: {
|
||||
formatter: "{value} kW-h",
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "空调负荷",
|
||||
type: "line",
|
||||
data: [30, 61, 94, 125, 157, 189, 228],
|
||||
markPoint: {
|
||||
data: [
|
||||
{ type: "max", name: "Max" },
|
||||
{ type: "min", name: "Min" },
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "办公负荷",
|
||||
type: "line",
|
||||
data: [16, 27, 40, 51, 63, 75, 84],
|
||||
markPoint: {
|
||||
data: [
|
||||
{ type: "max", name: "Max" },
|
||||
{ type: "min", name: "Min" },
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "厨房负荷",
|
||||
type: "line",
|
||||
data: [6, 14, 21, 30, 38, 48, 57],
|
||||
markPoint: {
|
||||
data: [
|
||||
{ type: "max", name: "Max" },
|
||||
{ type: "min", name: "Min" },
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "宿舍负荷",
|
||||
type: "line",
|
||||
data: [3, 5, 9, 15, 18, 21, 24],
|
||||
markPoint: {
|
||||
data: [
|
||||
{ type: "max", name: "Max" },
|
||||
{ type: "min", name: "Min" },
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "光伏发电",
|
||||
type: "line",
|
||||
data: [43, 85, 129, 175, 218, 261, 304],
|
||||
markPoint: {
|
||||
data: [
|
||||
{ type: "max", name: "Max" },
|
||||
{ type: "min", name: "Min" },
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
name: "进线",
|
||||
type: "line",
|
||||
data: [63, 125, 189, 255, 318, 381, 444],
|
||||
markPoint: {
|
||||
data: [
|
||||
{ type: "max", name: "Max" },
|
||||
{ type: "min", name: "Min" },
|
||||
],
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
var app = {
|
||||
currentIndex: -1,
|
||||
};
|
||||
setInterval(function () {
|
||||
var dataLen = option.series[0].data.length;
|
||||
|
||||
// 取消之前高亮的图形
|
||||
myChart.dispatchAction({
|
||||
type: "downplay",
|
||||
seriesIndex: 0,
|
||||
dataIndex: app.currentIndex,
|
||||
});
|
||||
app.currentIndex = (app.currentIndex + 1) % dataLen;
|
||||
//console.log(app.currentIndex);
|
||||
// 高亮当前图形
|
||||
myChart.dispatchAction({
|
||||
type: "highlight",
|
||||
seriesIndex: 0,
|
||||
dataIndex: app.currentIndex,
|
||||
});
|
||||
// 显示 tooltip
|
||||
myChart.dispatchAction({
|
||||
type: "showTip",
|
||||
seriesIndex: 0,
|
||||
dataIndex: app.currentIndex,
|
||||
});
|
||||
}, 1000);
|
||||
myChart.clear();
|
||||
myChart.setOption(option)
|
||||
window.echartsArr.push(myChart);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang='scss' scoped>
|
||||
.spantext {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.border {
|
||||
border: 1px solid rgb(15, 15, 15);
|
||||
height: 30vh;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.check {
|
||||
margin-top: 2%;
|
||||
margin-left: 25%;
|
||||
}
|
||||
.border2 {
|
||||
border: 1px solid rgb(15, 15, 15);
|
||||
}
|
||||
::v-deep .el-tree {
|
||||
color: rgb(1, 15, 27);
|
||||
font-weight: bold;
|
||||
// background: rgba(87, 122, 133, 0.39);
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
1586
src/views/energy-system/advancedanalysis/loadanalysis.vue
Normal file
1586
src/views/energy-system/advancedanalysis/loadanalysis.vue
Normal file
File diff suppressed because it is too large
Load Diff
190
src/views/energy-system/advancedanalysis/onlinerate.vue
Normal file
190
src/views/energy-system/advancedanalysis/onlinerate.vue
Normal file
@@ -0,0 +1,190 @@
|
||||
<template>
|
||||
<div style="padding: 0.5%">
|
||||
<el-row :gutter="10" style="margin-bottom: 10px">
|
||||
<el-col :span="18.5">
|
||||
<timepicker
|
||||
@querfromdata="querfromdata"
|
||||
:interval="interval"
|
||||
:treenode="treenode"
|
||||
:tablename="tablename"
|
||||
></timepicker>
|
||||
</el-col>
|
||||
<el-col :span="5.5" style="float: right">
|
||||
<el-form :inline="true" :model="formInline" class="demo-form-inline">
|
||||
<el-form-item label="通讯状态:">
|
||||
<el-tag style="color: #fff; background: #396" size="mini">正常</el-tag>
|
||||
<el-tag style="color: #fff; background: #c00" size="mini">中断</el-tag>
|
||||
</el-form-item>
|
||||
<el-form-item label="终端在线率:">
|
||||
<el-tag style="width: 33px; color: #fff; background: #396" size="mini">
|
||||
|
||||
</el-tag>
|
||||
</el-form-item>
|
||||
<el-form-item label=">=90%">
|
||||
<el-tag style="width: 33px; color: #fff; background: #fc3" size="mini">
|
||||
|
||||
</el-tag>
|
||||
</el-form-item>
|
||||
<el-form-item label="60%~90%">
|
||||
<el-tag style="width: 33px; color: #fff; background: #c00" size="mini">
|
||||
|
||||
</el-tag>
|
||||
</el-form-item>
|
||||
<el-form-item label=">60%"></el-form-item>
|
||||
</el-form>
|
||||
</el-col>
|
||||
<el-table
|
||||
stripe
|
||||
:data="tableData"
|
||||
border
|
||||
v-loading="loading"
|
||||
:style="'width: 100%;height:' + tableheight + 'px'"
|
||||
:height="tableheight + 'px'"
|
||||
row-key="id"
|
||||
id="rebateSetTable"
|
||||
default-expand-all
|
||||
highlight-current-row
|
||||
:header-cell-style="{
|
||||
//background:'#5E95E8',
|
||||
//color:'#FFFFFF',
|
||||
height: '25px',
|
||||
top: '0px',
|
||||
padding: '0px'
|
||||
}"
|
||||
:row-style="{ height: '25px' }"
|
||||
:cell-style="{ padding: '0px' }"
|
||||
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
|
||||
>
|
||||
<el-table-column prop="name" label="拓扑"></el-table-column>
|
||||
<!-- <el-table-column prop="info" label="工程信息" align="center">
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.info==null">/</span>
|
||||
<span v-if="scope.row.info !==null">{{scope.row.info}}</span>
|
||||
</template>
|
||||
</el-table-column> -->
|
||||
<el-table-column prop="comFlag" label="通讯状态" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-tag v-if="scope.row.comFlag == 1" style="color: #fff; background: #396">正常</el-tag>
|
||||
<el-tag v-if="scope.row.comFlag == 0" style="color: #fff; background: #c00">中断</el-tag>
|
||||
<span v-if="scope.row.comFlag == 2">/</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="integrity" label="终端在线率(%)" align="center">
|
||||
<template slot-scope="scope">
|
||||
<el-tag
|
||||
v-if="scope.row.integrity >= 90 && scope.row.integrity !== 3.14159"
|
||||
style="color: #fff; background: #396"
|
||||
>
|
||||
{{ scope.row.integrity }}
|
||||
</el-tag>
|
||||
<el-tag
|
||||
v-if="scope.row.integrity < 60 && scope.row.integrity !== 3.14159"
|
||||
style="color: #fff; background: #c00"
|
||||
>
|
||||
{{ scope.row.integrity }}
|
||||
</el-tag>
|
||||
<el-tag
|
||||
v-if="
|
||||
scope.row.integrity < 90 && scope.row.integrity >= 60 && scope.row.integrity !== 3.14159
|
||||
"
|
||||
style="color: #fff; background: #fc3"
|
||||
>
|
||||
{{ scope.row.integrity }}
|
||||
</el-tag>
|
||||
<el-tag v-if="scope.row.integrity === 3.14159" style="color: #fff; background: #ccc">
|
||||
暂无数据
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { getheight } from '@/assets/commjs/common'
|
||||
import api from '@/api/energy/sysconfig'
|
||||
import timepicker from '../../components/TimePicker/index4'
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
device: 1,
|
||||
loading: true,
|
||||
tableheight: undefined,
|
||||
tableData: [],
|
||||
tablename: 'tab1',
|
||||
treenode: '',
|
||||
interval: 4,
|
||||
formData: {},
|
||||
formInline: {
|
||||
user: '',
|
||||
region: ''
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
timepicker
|
||||
},
|
||||
created() {},
|
||||
mounted() {
|
||||
this.device = window.devicePixelRatio
|
||||
this.tableheight = window.sessionStorage.getItem('appheight') - 65
|
||||
},
|
||||
methods: {
|
||||
//时间格式转化
|
||||
dateFormat(dateData1, dateData2) {
|
||||
var timearr = []
|
||||
var date = new Date(dateData1)
|
||||
var y = date.getFullYear()
|
||||
var m = date.getMonth() + 1
|
||||
m = m < 10 ? '0' + m : m
|
||||
var d = date.getDate()
|
||||
d = d < 10 ? '0' + d : d
|
||||
var h = date.getHours()
|
||||
h = h < 10 ? '0' + h : h
|
||||
var f = date.getMinutes()
|
||||
f = f < 10 ? '0' + f : f
|
||||
var s = date.getSeconds()
|
||||
s = s < 10 ? '0' + s : s
|
||||
this.formData.startTime = y + '-' + m + '-' + d
|
||||
timearr.push(this.formData.startTime)
|
||||
var date = new Date(dateData2)
|
||||
var y = date.getFullYear()
|
||||
var m = date.getMonth() + 1
|
||||
m = m < 10 ? '0' + m : m
|
||||
var d = date.getDate()
|
||||
d = d < 10 ? '0' + d : d
|
||||
var h = date.getHours()
|
||||
h = h < 10 ? '0' + h : h
|
||||
var f = date.getMinutes()
|
||||
f = f < 10 ? '0' + f : f
|
||||
var s = date.getSeconds()
|
||||
s = s < 10 ? '0' + s : s
|
||||
this.formData.endTime = y + '-' + m + '-' + d
|
||||
timearr.push(this.formData.endTime)
|
||||
return timearr
|
||||
},
|
||||
querfromdata(data, timehbValue, interval) {
|
||||
this.interval = interval
|
||||
this.loading = true
|
||||
this.timeValue = data
|
||||
console.log('日期' + this.timeValue)
|
||||
this.timehuanbiValue = timehbValue
|
||||
console.log('环比' + this.timehuanbiValue)
|
||||
this.periodBeginTime = this.timehuanbiValue[0]
|
||||
this.periodEndTime = this.timehuanbiValue[1]
|
||||
console.log('开始' + this.periodBeginTime)
|
||||
console.log('结束' + this.periodEndTime)
|
||||
this.ping = this.periodBeginTime + '至' + this.periodEndTime
|
||||
this.dateFormat(this.timeValue[0], this.timeValue[1])
|
||||
// this.time = this.formData.searchBeginTime+'至'+this.formData.searchEndTime
|
||||
api.getOnlineRateTree(this.formData).then(res => {
|
||||
if (res.code === 'A0000') {
|
||||
this.tableData = res.data
|
||||
this.loading = false
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped></style>
|
||||
@@ -0,0 +1,23 @@
|
||||
<template>
|
||||
<div>
|
||||
光伏分析
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data(){
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
created(){
|
||||
|
||||
},
|
||||
mounted(){
|
||||
|
||||
},
|
||||
methods:{
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
588
src/views/energy-system/deviceCenter/device.vue
Normal file
588
src/views/energy-system/deviceCenter/device.vue
Normal file
@@ -0,0 +1,588 @@
|
||||
<template>
|
||||
<div class="ui-container">
|
||||
<el-card class="box-card" style="height: 100%">
|
||||
<el-row :gutter="5">
|
||||
<!--左侧列表区-->
|
||||
<el-col :span="5">
|
||||
<energyTree
|
||||
@eleMenuData="getTreeText"
|
||||
:dataTree="dataTree"
|
||||
ref="energyTree"
|
||||
></energyTree>
|
||||
</el-col>
|
||||
<!--右侧内容区-->
|
||||
<el-col :span="19">
|
||||
<div class="grid-content bg-purple-light right-top pad">
|
||||
<img src="../../../assets/login/logo.png" class="gr-img" />
|
||||
|
||||
<el-button
|
||||
class="el-icon-edit gr-but2"
|
||||
type="primary"
|
||||
@click="editClick"
|
||||
>设备模板分组</el-button
|
||||
>
|
||||
<el-descriptions
|
||||
title="设备基本信息"
|
||||
size="small"
|
||||
class="gr-des text"
|
||||
>
|
||||
<el-descriptions-item label="设备名称">
|
||||
<el-tag size="mini" type="warning">{{ devInfo.name }}</el-tag>
|
||||
</el-descriptions-item>
|
||||
<el-descriptions-item label="设备编号">{{
|
||||
devInfo.did
|
||||
}}</el-descriptions-item>
|
||||
<el-descriptions-item label="所属网关">{{
|
||||
devInfo.netDevName
|
||||
}}</el-descriptions-item>
|
||||
<el-descriptions-item label="地址">{{
|
||||
devInfo.address
|
||||
}}</el-descriptions-item>
|
||||
<el-descriptions-item label="建单时间">{{
|
||||
devInfo.createTime
|
||||
}}</el-descriptions-item>
|
||||
|
||||
<el-descriptions-item label="设备状态">{{
|
||||
devInfo.state == 0 ? "离线" : "在线"
|
||||
}}</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</div>
|
||||
<!--tab标签区域-->
|
||||
<el-row>
|
||||
<el-col :span="24" style="margin-top: 5px">
|
||||
<div class="grid-content bg-purple-light">
|
||||
<el-tabs
|
||||
v-model="activeName"
|
||||
type="border-card"
|
||||
@tab-click="handleClick"
|
||||
:style="'height:' + mainHeight1"
|
||||
>
|
||||
<el-tab-pane
|
||||
:label="item.id"
|
||||
:name="item.anotherName"
|
||||
v-for="(item, index) in tabList"
|
||||
:key="index"
|
||||
>
|
||||
<span slot="label"
|
||||
><i class="el-icon-s-platform"></i
|
||||
>{{ item.anotherName }}</span
|
||||
>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-table
|
||||
stripe
|
||||
:data="listdata"
|
||||
border
|
||||
:style="
|
||||
'width: 100%;height:' +
|
||||
mainHeight * 1.7 +
|
||||
'px;overflow-y:auto'
|
||||
"
|
||||
>
|
||||
<el-table-column
|
||||
prop="anotherName"
|
||||
align="center"
|
||||
label="数据名称"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span>{{
|
||||
(scope.row.phase === "M" || scope.row.phase === "T"
|
||||
? "总"
|
||||
: scope.row.phase + "相") + scope.row.anotherName
|
||||
}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- <el-table-column prop="box" 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>
|
||||
<el-pagination
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="pageData.pageNum"
|
||||
:page-sizes="[16, 32, 48, 64]"
|
||||
:page-size="pageData.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="pageData.total"
|
||||
>
|
||||
</el-pagination>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-card>
|
||||
|
||||
<!--新增/修改-->
|
||||
<el-dialog
|
||||
:close-on-click-modal="false"
|
||||
:title="title"
|
||||
:visible.sync="dialogVisible"
|
||||
width="40%"
|
||||
:destroy-on-close="true"
|
||||
>
|
||||
<el-dialog
|
||||
:close-on-click-modal="false"
|
||||
width="30%"
|
||||
title="新增组"
|
||||
:visible.sync="innerVisible"
|
||||
append-to-body
|
||||
>
|
||||
<el-form :inline="true" :model="formInline" class="demo-form-inline">
|
||||
<el-form-item label="组名称">
|
||||
<el-input v-model="formInline.name" placeholder="组名称"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button type="primary" class="primary" @click="groupOnSubmit"
|
||||
>确认</el-button
|
||||
>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-dialog>
|
||||
|
||||
<el-row>
|
||||
<el-form :model="form" ref="form" label-width="80px">
|
||||
<el-form-item label="网关名称:" prop="pid">
|
||||
<el-select disabled v-model="form.pid" placeholder="请选择">
|
||||
<el-option
|
||||
v-for="item in netDevList"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="设备名称:" prop="name">
|
||||
<el-input readonly v-model="form.name"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="设备编号:" prop="name">
|
||||
<el-input readonly v-model="form.did"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
|
||||
<el-row>
|
||||
<div class="buttons">
|
||||
<el-button type="success" @click="addGroup">新增分组</el-button>
|
||||
{{ " 数据集名称: " + this.activeName }}
|
||||
</div>
|
||||
<el-tree
|
||||
:data="groupData"
|
||||
:props="defaultProps"
|
||||
node-key="id"
|
||||
default-expand-all
|
||||
style="height: 50vh; overflow-y: auto"
|
||||
draggable
|
||||
:highlight-current="true"
|
||||
@allow-drop="allowDrop"
|
||||
@node-drag-end="test"
|
||||
@allow-drag="allowDrag"
|
||||
>
|
||||
</el-tree>
|
||||
</el-row>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import energyTree from "../../components/tree/energyTree";
|
||||
import { getappheight, getheight } from "../../../assets/commjs/common";
|
||||
import { listNetDev } from "@/api/energy/netDev";
|
||||
import {
|
||||
getEnergyTree,
|
||||
getEnergyDevInfoById,
|
||||
getDevDetailInfoById,
|
||||
getTabTemplateById,
|
||||
getGroupDetailList,
|
||||
addGroupArr,
|
||||
} from "@/api/energy/logicDev";
|
||||
import pagination from "../../components/pagination/index";
|
||||
|
||||
export default {
|
||||
components: { energyTree, pagination },
|
||||
data() {
|
||||
return {
|
||||
groupData: [],
|
||||
|
||||
dialogVisible: false, //设备操作弹窗
|
||||
innerVisible: false,
|
||||
formInline: { name: "" },
|
||||
|
||||
title: "",
|
||||
form: {
|
||||
pid: "", //联网设备id
|
||||
name: "",
|
||||
did: "", //编号
|
||||
},
|
||||
netDevList: [],
|
||||
|
||||
filterText: "",
|
||||
mainHeight: undefined,
|
||||
mainHeight1: undefined,
|
||||
devInfo: {
|
||||
name: "",
|
||||
did: "",
|
||||
netDevName: "",
|
||||
address: "",
|
||||
createTime: "",
|
||||
position: "",
|
||||
state: "",
|
||||
},
|
||||
device: 1,
|
||||
pageData: {
|
||||
pageNum: 1,
|
||||
pageSize: 16,
|
||||
total: 0,
|
||||
},
|
||||
dataTree: [],
|
||||
defaultProps: {
|
||||
children: "children",
|
||||
label: "name",
|
||||
},
|
||||
tabList: [],
|
||||
listdata: [],
|
||||
|
||||
activeName: "",
|
||||
activeId: "",
|
||||
|
||||
devId: "", //点击树的节点id
|
||||
|
||||
boxData: [], //盒子
|
||||
monitorList: [],
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
filterText(val) {
|
||||
this.$refs.tree.filter(val);
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.getTree();
|
||||
},
|
||||
mounted() {
|
||||
this.mainHeight = getheight();
|
||||
this.device = window.devicePixelRatio;
|
||||
if (this.device == 1) {
|
||||
this.mainHeight1 = getheight() * 1.95 + "px";
|
||||
}
|
||||
if (this.device == 1.25) {
|
||||
this.mainHeight1 = getheight() * 1.97 + "px";
|
||||
}
|
||||
if (this.device == 1.5) {
|
||||
this.mainHeight1 = getheight() * 1.93 + "px";
|
||||
}
|
||||
// this.mainHeight1 = (this.mainHeight - 255) + 'px'
|
||||
},
|
||||
methods: {
|
||||
addGroup() {
|
||||
this.innerVisible = true;
|
||||
},
|
||||
|
||||
allowDrop(draggingNode, dropNode, type) {
|
||||
console.log(dropNode);
|
||||
if (dropNode.data.level === 2) {
|
||||
return type !== "inner";
|
||||
} else {
|
||||
// 不同级进行处理
|
||||
return true;
|
||||
}
|
||||
},
|
||||
allowDrag(draggingNode) {
|
||||
return draggingNode.level == 2;
|
||||
},
|
||||
groupOnSubmit() {
|
||||
let obj = {
|
||||
id: "cvf",
|
||||
pid: "ggg",
|
||||
name: this.formInline.name,
|
||||
level: 1,
|
||||
children: [],
|
||||
};
|
||||
this.groupData.push(obj);
|
||||
this.formInline.name = "";
|
||||
this.innerVisible = false;
|
||||
|
||||
console.log(this.groupData);
|
||||
},
|
||||
|
||||
filterNode(value, data) {
|
||||
if (!value) return true;
|
||||
return data.label.indexOf(value) !== -1;
|
||||
},
|
||||
getTreeText(data, level) {
|
||||
if (level === 3) {
|
||||
this.devId = data.pid;
|
||||
} else if (level === 2) {
|
||||
this.devId = data.id;
|
||||
}
|
||||
this.getDeviceInfo();
|
||||
this.getTabTemplateById();
|
||||
},
|
||||
|
||||
//分页
|
||||
handleSizeChange(val) {
|
||||
this.pageData.pageSize = val;
|
||||
this.getTabTemplateById();
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
this.pageData.pageNum = val;
|
||||
this.getTabTemplateById();
|
||||
},
|
||||
|
||||
currentPage4() {
|
||||
return 1;
|
||||
},
|
||||
cancel() {},
|
||||
submitForm() {
|
||||
let msg = { setId: this.activeId, data: [] };
|
||||
|
||||
this.groupData.forEach((item) => {
|
||||
if (item.children.length != 0) {
|
||||
let ids = [];
|
||||
item.children.forEach((i) => {
|
||||
ids.push(i.id);
|
||||
});
|
||||
let obj = { name: item.name, id: item.id, children: ids };
|
||||
msg.data.push(obj);
|
||||
} else {
|
||||
let obj = { name: item.name, id: item.id, children: [] };
|
||||
msg.data.push(obj);
|
||||
}
|
||||
});
|
||||
|
||||
this.addGroupArr(msg);
|
||||
},
|
||||
|
||||
addGroupArr(data) {
|
||||
addGroupArr(data).then((response) => {
|
||||
if (response.code === "A0000") {
|
||||
this.getGroupDetailList();
|
||||
this.innerVisible = false;
|
||||
this.$message.success("重新分组成功");
|
||||
} else {
|
||||
this.$message.error("重新分组失败");
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
//获取所有网关设备
|
||||
getNetDevList() {
|
||||
listNetDev({}).then((response) => {
|
||||
this.netDevList = response.data.records;
|
||||
});
|
||||
},
|
||||
//获取设备树
|
||||
getTree() {
|
||||
getEnergyTree().then((response) => {
|
||||
if (response.code == "A0000") {
|
||||
this.dataTree = response.data;
|
||||
if (this.dataTree.length !== 0) {
|
||||
if (this.dataTree[0].children.length !== 0) {
|
||||
let id = this.dataTree[0].children[0].id;
|
||||
this.devId = id;
|
||||
this.getDeviceInfo();
|
||||
this.getTabTemplateById();
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
//获取点击的设备详情
|
||||
getDeviceInfo() {
|
||||
getEnergyDevInfoById(this.devId).then((response) => {
|
||||
this.devInfo = response.data;
|
||||
});
|
||||
},
|
||||
//获取点击的设备数据详情
|
||||
getDeviceDetailInfo() {
|
||||
getDevDetailInfoById(
|
||||
this.activeId,
|
||||
this.pageData.pageNum,
|
||||
this.pageData.pageSize
|
||||
).then((response) => {
|
||||
this.listdata = response.data.records;
|
||||
this.pageData.pageNum = response.data.current;
|
||||
this.pageData.pageSize = response.data.size;
|
||||
this.pageData.total = response.data.total;
|
||||
});
|
||||
},
|
||||
//获取tab模板
|
||||
getTabTemplateById() {
|
||||
getTabTemplateById(this.devId).then((response) => {
|
||||
if (response.data.length !== 0) {
|
||||
this.tabList = response.data;
|
||||
|
||||
this.activeName = this.tabList[0].anotherName;
|
||||
this.activeId = this.tabList[0].id;
|
||||
this.getDeviceDetailInfo();
|
||||
} else {
|
||||
this.tabList = [];
|
||||
this.listdata = [];
|
||||
}
|
||||
});
|
||||
},
|
||||
editClick() {
|
||||
if (this.tabList.length > 0 && this.listdata.length > 0) {
|
||||
this.title = "编辑设备信息";
|
||||
this.dialogVisible = true;
|
||||
this.getNetDevList();
|
||||
this.getGroupDetailList();
|
||||
this.form.name = this.devInfo.name;
|
||||
this.form.pid = this.devInfo.pid;
|
||||
this.form.did = this.devInfo.did;
|
||||
|
||||
//加载分组信息
|
||||
} else {
|
||||
this.$message.warning("当前设备模板缺失");
|
||||
}
|
||||
},
|
||||
|
||||
getGroupDetailList() {
|
||||
getGroupDetailList(this.activeId).then((response) => {
|
||||
if (response.code === "A0000") {
|
||||
response.data.forEach((item) => {
|
||||
if (item.children.length !== 0) {
|
||||
item.children.forEach((it) => {
|
||||
if (it.phase !== "M" && it.phase !== null && it.phase !== "T") {
|
||||
it.name = it.phase + "相" + it.name;
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
console.log(response.data);
|
||||
this.groupData = response.data;
|
||||
} else {
|
||||
this.groupData = [];
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
handleClick(tab, event) {
|
||||
this.listdata = [];
|
||||
this.activeId = tab.label;
|
||||
|
||||
this.getDeviceDetailInfo();
|
||||
},
|
||||
|
||||
test() {
|
||||
console.log(66666);
|
||||
console.log(this.groupData);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.ui-container {
|
||||
padding: 30px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.conent {
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
.el-popup-parent--hidden {
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
|
||||
.bg-purple-dark {
|
||||
background: #e8ecf3;
|
||||
}
|
||||
|
||||
.bg-purple {
|
||||
background: #d3dce6;
|
||||
}
|
||||
|
||||
.grid-content {
|
||||
border-radius: 4px;
|
||||
min-height: 36px;
|
||||
}
|
||||
.pad {
|
||||
padding: 0.5%;
|
||||
}
|
||||
.text {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.buttons {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
color: rgb(31, 162, 223);
|
||||
}
|
||||
.right-top {
|
||||
border-style: solid hidden hidden hidden;
|
||||
color: rgb(7, 131, 161);
|
||||
border: 1.5px solid rgb(7, 131, 161);
|
||||
}
|
||||
|
||||
.gr-img {
|
||||
width: 1.5vw;
|
||||
height: 3vh;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.gr-but1 {
|
||||
float: right;
|
||||
margin-top: 5px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.gr-but2 {
|
||||
float: right;
|
||||
margin-top: 5px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.gr-des {
|
||||
padding: 10px;
|
||||
font-size: 24px;
|
||||
color: rgb(7, 131, 161);
|
||||
}
|
||||
.el-dialog .el-dialog__body {
|
||||
max-height: 90vh;
|
||||
}
|
||||
.el-tree {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
color: #000;
|
||||
}
|
||||
::v-deep .el-dialog .el-dialog__body {
|
||||
max-height: 90vh;
|
||||
}
|
||||
|
||||
::v-deep .el-tree-node__content:hover {
|
||||
background-color: #4ba6d0;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
::v-deep
|
||||
.el-tree--highlight-current
|
||||
.el-tree-node.is-current
|
||||
> .el-tree-node__content {
|
||||
// 设置颜色
|
||||
background-color: rgba(
|
||||
5,
|
||||
74,
|
||||
101,
|
||||
0.5
|
||||
); // 透明度为0.2的skyblue，作者比较喜欢的颜色
|
||||
color: rgba(7, 234, 250, 0.991); // 节点的字体颜色
|
||||
font-weight: bold; // 字体加粗
|
||||
}
|
||||
</style>
|
||||
|
||||
2261
src/views/energy-system/deviceCenter/devicejk.vue
Normal file
2261
src/views/energy-system/deviceCenter/devicejk.vue
Normal file
File diff suppressed because it is too large
Load Diff
683
src/views/energy-system/deviceCenter/dictManage.vue
Normal file
683
src/views/energy-system/deviceCenter/dictManage.vue
Normal file
@@ -0,0 +1,683 @@
|
||||
<template>
|
||||
<div class="ui-container">
|
||||
<el-form :model="queryParam" ref="queryForm" :inline="true">
|
||||
<el-form-item label="过滤筛选:" prop="searchValue">
|
||||
<el-input
|
||||
v-model="queryParam.searchValue"
|
||||
placeholder=""
|
||||
clearable
|
||||
size="small"
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="接入网络方式" prop="netType">
|
||||
<el-select v-model="queryParam.netType" placeholder="请选择接入网络方式" clearable size="small">
|
||||
<el-option
|
||||
v-for="dict in netTypeList"
|
||||
:key="dict.id"
|
||||
:label="dict.name"
|
||||
:value="dict.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>-->
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-search"
|
||||
size="mini"
|
||||
@click="handleQuery"
|
||||
>搜索</el-button
|
||||
>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
|
||||
>重置</el-button
|
||||
>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item style="float: right; margin-right: 20px">
|
||||
<el-button
|
||||
@click="handleAdd()"
|
||||
type="primary"
|
||||
size="mini"
|
||||
icon="el-icon-plus"
|
||||
>新增字典</el-button
|
||||
>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row>
|
||||
<el-table
|
||||
stripe
|
||||
id="deviceTable"
|
||||
ref="multipleTable"
|
||||
:data="tableData"
|
||||
@header-click="sort"
|
||||
v-loading="loading"
|
||||
border
|
||||
:header-cell-style="{
|
||||
//background:'#5E95E8',
|
||||
//color:'#FFFFFF',
|
||||
height: '25px',
|
||||
top: '0px',
|
||||
padding: '0px',
|
||||
}"
|
||||
:row-style="{ height: '25px' }"
|
||||
:cell-style="{ padding: '0px' }"
|
||||
style="top: 5px"
|
||||
>
|
||||
<el-table-column
|
||||
align="center"
|
||||
sortable
|
||||
prop="name"
|
||||
label="表名称"
|
||||
column-key="date"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
sortable
|
||||
prop="anotherName"
|
||||
label="表别名"
|
||||
></el-table-column>
|
||||
|
||||
<el-table-column
|
||||
align="center"
|
||||
sortable
|
||||
prop="updateTime"
|
||||
label="修改时间"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span type="primary" size="small">{{
|
||||
scope.row.updateTime == null ? "/" : scope.row.updateTime
|
||||
}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column align="center" fixed="right" label="操作" width="380">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
@click="handleClick(scope.row)"
|
||||
type="primary"
|
||||
icon="el-icon-search"
|
||||
size="mini"
|
||||
>查看</el-button
|
||||
>
|
||||
<el-button
|
||||
@click="EditClick(scope.row)"
|
||||
type="primary"
|
||||
size="mini"
|
||||
icon="el-icon-edit"
|
||||
>编辑</el-button
|
||||
>
|
||||
<el-button
|
||||
@click="DeleteClick(scope.row)"
|
||||
type="danger"
|
||||
size="mini"
|
||||
icon="el-icon-delete"
|
||||
>删除</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-row>
|
||||
|
||||
<el-row style="margin-top: 10px; text-align: right">
|
||||
<el-pagination
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="pageData.pageNum"
|
||||
:page-sizes="[10, 20, 25, 30, 50]"
|
||||
:page-size="pageData.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="pageData.total"
|
||||
>
|
||||
</el-pagination>
|
||||
</el-row>
|
||||
|
||||
<!--新增/修改-->
|
||||
<el-dialog :close-on-click-modal="false"
|
||||
:title="title"
|
||||
:visible.sync="open"
|
||||
width="20%"
|
||||
|
||||
center
|
||||
@close="cancel()"
|
||||
>
|
||||
<el-form :model="form" ref="form" :inline="true" label-width="80px">
|
||||
<el-form-item label="名称:" prop="name">
|
||||
<el-input
|
||||
style="width: 200px"
|
||||
v-model="form.name"
|
||||
placeholder="请填写名称"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="别名:" prop="anotherName">
|
||||
<el-input
|
||||
style="width: 200px"
|
||||
v-model="form.anotherName"
|
||||
placeholder="请填写别名"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button :v-if="dialogFormVisible" @click="cancel">取 消</el-button>
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog :close-on-click-modal="false"
|
||||
title="字典信息"
|
||||
:visible.sync="openTable"
|
||||
width="90%"
|
||||
heigth="80%"
|
||||
|
||||
center
|
||||
>
|
||||
<el-form :model="queryParamDia" ref="queryFormDia" :inline="true">
|
||||
<el-form-item label="过滤筛选:" prop="searchValue">
|
||||
<el-input
|
||||
v-model="queryParamDia.searchValue"
|
||||
placeholder="请输入字典名称或别名"
|
||||
clearable
|
||||
size="small"
|
||||
@keyup.enter.native="handleQueryDia"
|
||||
/>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-search"
|
||||
size="mini"
|
||||
@click="handleQueryDia"
|
||||
>搜索</el-button
|
||||
>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQueryDia"
|
||||
>重置</el-button
|
||||
>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item style="float: right; margin-right: 20px">
|
||||
<el-button
|
||||
@click="handleAddDia()"
|
||||
type="primary"
|
||||
size="mini"
|
||||
icon="el-icon-plus"
|
||||
>新增字段</el-button
|
||||
>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-row>
|
||||
<el-table
|
||||
stripe
|
||||
id="deviceTable"
|
||||
ref="multipleTable"
|
||||
:data="tableDataDia"
|
||||
@header-click="sort"
|
||||
v-loading="loading"
|
||||
border
|
||||
:header-cell-style="{
|
||||
//background:'#5E95E8',
|
||||
//color:'#FFFFFF',
|
||||
height: '25px',
|
||||
top: '0px',
|
||||
padding: '0px',
|
||||
}"
|
||||
:row-style="{ height: '25px' }"
|
||||
:cell-style="{ padding: '0px' }"
|
||||
style="top: 5px"
|
||||
>
|
||||
<el-table-column
|
||||
align="center"
|
||||
sortable
|
||||
prop="name"
|
||||
label="表名称"
|
||||
column-key="date"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
sortable
|
||||
prop="anotherName"
|
||||
label="表别名"
|
||||
></el-table-column>
|
||||
|
||||
<el-table-column
|
||||
align="center"
|
||||
sortable
|
||||
prop="updateTime"
|
||||
label="修改时间"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span type="primary" size="small">{{
|
||||
scope.row.updateTime == null ? "/" : scope.row.updateTime
|
||||
}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column
|
||||
align="center"
|
||||
fixed="right"
|
||||
label="操作"
|
||||
width="280"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
@click="EditClickDia(scope.row)"
|
||||
type="primary"
|
||||
size="mini"
|
||||
icon="el-icon-edit"
|
||||
>编辑</el-button
|
||||
>
|
||||
<el-button
|
||||
@click="DeleteClickDia(scope.row)"
|
||||
type="danger"
|
||||
size="mini"
|
||||
icon="el-icon-delete"
|
||||
>删除</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-row>
|
||||
|
||||
<el-row style="margin-top: 10px; text-align: right">
|
||||
<el-pagination
|
||||
@size-change="handleSizeChangeDia"
|
||||
@current-change="handleCurrentChangeDia"
|
||||
:current-page="pageDataDia.pageNum"
|
||||
:page-sizes="[10, 20, 25, 30, 50]"
|
||||
:page-size="pageDataDia.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="pageDataDia.total"
|
||||
>
|
||||
</el-pagination>
|
||||
</el-row>
|
||||
|
||||
<el-dialog :close-on-click-modal="false"
|
||||
width="30%"
|
||||
:title="title"
|
||||
:visible.sync="innerVisible"
|
||||
|
||||
append-to-body
|
||||
>
|
||||
<el-form
|
||||
:model="formDia"
|
||||
ref="formDia"
|
||||
:inline="true"
|
||||
label-width="80px"
|
||||
>
|
||||
<el-form-item label="名称:" prop="name">
|
||||
<el-input
|
||||
style="width: 200px"
|
||||
v-model="formDia.name"
|
||||
placeholder="请填写名称"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="别名:" prop="anotherName">
|
||||
<el-input
|
||||
style="width: 200px"
|
||||
v-model="formDia.anotherName"
|
||||
placeholder="请填写别名"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button :v-if="dialogFormVisible" @click="cancelDia"
|
||||
>取 消</el-button
|
||||
>
|
||||
<el-button type="primary" @click="submitFormDia">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getList, addDict, updateDict, deleteDict } from "@/api/energy/dict.js";
|
||||
|
||||
export default {
|
||||
name: "dictManage",
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
|
||||
/*netTypeList:[{id:1,name:'4G'},{id:2,name:'无线'}],*/
|
||||
// 表格数据
|
||||
tableData: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
|
||||
dialogFormVisible: true,
|
||||
|
||||
// 重新渲染表格状态
|
||||
refreshTable: true,
|
||||
// 查询参数
|
||||
queryParam: {
|
||||
searchValue: undefined,
|
||||
pid: 0,
|
||||
pageNum: 1,
|
||||
pageSize: 20,
|
||||
},
|
||||
pageData: {
|
||||
pageNum: 1,
|
||||
pageSize: 20,
|
||||
total: 0,
|
||||
},
|
||||
// 表单参数
|
||||
options: [
|
||||
{ value: 0, label: "表字段" },
|
||||
{ label: "表名称", value: 1 },
|
||||
{ label: "数据集", value: 2 },
|
||||
],
|
||||
form: {
|
||||
id: "",
|
||||
name: "",
|
||||
anotherName: "",
|
||||
pid: 0,
|
||||
},
|
||||
classList: [],
|
||||
|
||||
formType: 0,
|
||||
|
||||
formDia: {
|
||||
id: "",
|
||||
name: "",
|
||||
anotherName: "",
|
||||
pid: "",
|
||||
},
|
||||
tableDataDia: [],
|
||||
openTable: false,
|
||||
|
||||
pageDataDia: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
total: 0,
|
||||
},
|
||||
queryParamDia: {
|
||||
searchValue: undefined,
|
||||
pid: undefined,
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
diaPid: undefined,
|
||||
|
||||
innerVisible: false,
|
||||
|
||||
// 表单校验
|
||||
rules: {
|
||||
name: [{ required: true, message: "名称不能为空", trigger: "blur" }],
|
||||
anotherName: [
|
||||
{ required: true, message: "别名不能为空", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
/** 查询网关列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
this.queryParam.pageNum = this.pageData.pageNum;
|
||||
this.queryParam.pageSize = this.pageData.pageSize;
|
||||
getList(this.queryParam).then((response) => {
|
||||
this.tableData = response.data.records;
|
||||
this.pageData.total = response.data.total;
|
||||
this.pageData.pageSize = response.data.size;
|
||||
this.pageData.pageNum = response.data.current;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false;
|
||||
this.reset();
|
||||
},
|
||||
|
||||
cancelDia() {
|
||||
this.open = false;
|
||||
this.resetDia();
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.resetForm("form");
|
||||
},
|
||||
|
||||
resetDia() {
|
||||
this.resetForm("formDia");
|
||||
},
|
||||
resetForm(form) {
|
||||
if (this.$refs[form]) {
|
||||
this.$refs[form].resetFields();
|
||||
}
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.getList();
|
||||
},
|
||||
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm");
|
||||
this.handleQuery();
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.open = true;
|
||||
this.formType = 0; //新增
|
||||
this.title = "新增字典数据";
|
||||
this.form.name = "";
|
||||
this.form.anotherName = "";
|
||||
this.form.pid = this.diaPid;
|
||||
},
|
||||
|
||||
//新增字段的
|
||||
handleAddDia() {
|
||||
this.innerVisible = true;
|
||||
this.formType = 0; //新增
|
||||
this.title = "新增字段数据";
|
||||
this.formDia.name = "";
|
||||
this.formDia.anotherName = "";
|
||||
this.formDia.pid = this.diaPid;
|
||||
},
|
||||
|
||||
/** 提交按钮 */
|
||||
submitForm: function () {
|
||||
this.$refs["form"].validate((valid) => {
|
||||
if (valid) {
|
||||
if (this.formType == 1) {
|
||||
updateDict(this.form).then((response) => {
|
||||
if (response.code == "A0000") {
|
||||
this.$message({ message: "修改成功", type: "success" });
|
||||
this.open = false;
|
||||
this.getList();
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.form.pid = 0;
|
||||
addDict(this.form).then((response) => {
|
||||
if (response.code == "A0000") {
|
||||
this.$message({ message: "新增成功", type: "success" });
|
||||
this.open = false;
|
||||
this.getList();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
submitFormDia: function () {
|
||||
this.$refs["formDia"].validate((valid) => {
|
||||
if (valid) {
|
||||
if (this.formType == 1) {
|
||||
updateDict(this.formDia).then((response) => {
|
||||
if (response.code == "A0000") {
|
||||
this.$message({ message: "修改成功", type: "success" });
|
||||
this.innerVisible = false;
|
||||
this.getListDia();
|
||||
}
|
||||
});
|
||||
} else {
|
||||
addDict(this.formDia).then((response) => {
|
||||
if (response.code == "A0000") {
|
||||
this.$message({ message: "新增成功", type: "success" });
|
||||
this.innerVisible = false;
|
||||
this.getListDia();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
//点击获取字典类型表头字段等属性
|
||||
sort(column, event) {
|
||||
this.orderBy = column.order;
|
||||
this.sortBy = column.property;
|
||||
console.log(this.orderBy + "=============" + this.sortBy);
|
||||
this.getList();
|
||||
},
|
||||
|
||||
//查看表下字段集
|
||||
handleClick(row) {
|
||||
this.openTable = true;
|
||||
this.queryParamDia.pid = row.id;
|
||||
this.diaPid = row.id;
|
||||
this.resetDia();
|
||||
this.getListDia();
|
||||
},
|
||||
getListDia() {
|
||||
this.loading = true;
|
||||
this.queryParamDia.pageNum = this.pageDataDia.pageNum;
|
||||
this.queryParamDia.pageSize = this.pageDataDia.pageSize;
|
||||
getList(this.queryParamDia).then((response) => {
|
||||
this.tableDataDia = response.data.records;
|
||||
this.pageDataDia.total = response.data.total;
|
||||
this.pageDataDia.pageSize = response.data.size;
|
||||
this.pageDataDia.pageNum = response.data.current;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQueryDia() {
|
||||
this.getListDia();
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQueryDia() {
|
||||
this.resetForm("queryForm");
|
||||
this.handleQuery();
|
||||
},
|
||||
//详情修改
|
||||
EditClick(row) {
|
||||
this.formType = 1;
|
||||
this.open = true;
|
||||
this.title = row.name + "详情修改";
|
||||
this.dialogFormVisible = true;
|
||||
|
||||
this.form.id = row.id;
|
||||
this.form.name = row.name;
|
||||
this.form.anotherName = row.anotherName;
|
||||
},
|
||||
|
||||
EditClickDia(row) {
|
||||
this.formType = 1;
|
||||
this.innerVisible = true;
|
||||
this.title = row.name + "详情修改";
|
||||
this.dialogFormVisible = true;
|
||||
|
||||
this.formDia.id = row.id;
|
||||
this.formDia.name = row.name;
|
||||
this.formDia.anotherName = row.anotherName;
|
||||
},
|
||||
//详情删除
|
||||
DeleteClick(row) {
|
||||
this.$confirm("确认删除" + row.name + "吗?", "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
})
|
||||
.then(() => {
|
||||
deleteDict(row.id).then((response) => {
|
||||
if ((response.code = "A0000")) {
|
||||
this.$message({
|
||||
type: "success",
|
||||
message: "删除成功!",
|
||||
});
|
||||
this.getList();
|
||||
}
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
this.$message({
|
||||
type: "info",
|
||||
message: "已取消删除",
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
DeleteClickDia(row) {
|
||||
this.$confirm("确认删除" + row.name + "吗?", "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
})
|
||||
.then(() => {
|
||||
deleteDict(row.id).then((response) => {
|
||||
if ((response.code = "A0000")) {
|
||||
this.$message({
|
||||
type: "success",
|
||||
message: "删除成功!",
|
||||
});
|
||||
this.getListDia();
|
||||
}
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
this.$message({
|
||||
type: "info",
|
||||
message: "已取消删除",
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
//分页
|
||||
handleSizeChange(val) {
|
||||
this.pageData.pageSize = val;
|
||||
this.getList();
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
this.pageData.pageNum = val;
|
||||
this.getList();
|
||||
},
|
||||
|
||||
//分页
|
||||
handleSizeChangeDia(val) {
|
||||
this.pageDataDia.pageSize = val;
|
||||
this.getListDia();
|
||||
},
|
||||
handleCurrentChangeDia(val) {
|
||||
this.pageDataDia.pageNum = val;
|
||||
this.getListDia();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.ui-container {
|
||||
padding: 30px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
580
src/views/energy-system/deviceCenter/netDev.vue
Normal file
580
src/views/energy-system/deviceCenter/netDev.vue
Normal file
@@ -0,0 +1,580 @@
|
||||
<template>
|
||||
<div class="ui-container">
|
||||
<el-form :model="queryParam" ref="queryForm" :inline="true">
|
||||
<el-form-item label="过滤筛选:" prop="searchValue">
|
||||
<el-input
|
||||
v-model="queryParam.searchValue"
|
||||
placeholder="请输入网关名称或编码ID"
|
||||
clearable
|
||||
size="small"
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="接入网络方式" prop="netType">
|
||||
<el-select v-model="queryParam.netType" placeholder="请选择接入网络方式" clearable size="small">
|
||||
<el-option
|
||||
v-for="dict in netTypeList"
|
||||
:key="dict.id"
|
||||
:label="dict.name"
|
||||
:value="dict.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>-->
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-search"
|
||||
size="mini"
|
||||
@click="handleQuery"
|
||||
>搜索</el-button
|
||||
>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
|
||||
>重置</el-button
|
||||
>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item style="float: right; margin-right: 20px">
|
||||
<el-button
|
||||
@click="handleAdd()"
|
||||
type="primary"
|
||||
size="mini"
|
||||
icon="el-icon-plus"
|
||||
>新增网关</el-button
|
||||
>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-row>
|
||||
<el-table
|
||||
stripe
|
||||
id="deviceTable"
|
||||
ref="multipleTable"
|
||||
:data="tableData"
|
||||
@header-click="sort"
|
||||
v-loading="loading"
|
||||
border
|
||||
:header-cell-style="{
|
||||
//background:'#5E95E8',
|
||||
//color:'#FFFFFF',
|
||||
height: '25px',
|
||||
top: '0px',
|
||||
padding: '0px',
|
||||
}"
|
||||
:row-style="{ height: '25px' }"
|
||||
:cell-style="{ padding: '0px' }"
|
||||
style="top: 5px"
|
||||
>
|
||||
<el-table-column
|
||||
align="center"
|
||||
sortable
|
||||
prop="name"
|
||||
label="名称"
|
||||
column-key="date"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
sortable
|
||||
prop="ndid"
|
||||
label="网关ID"
|
||||
></el-table-column>
|
||||
<el-table-column align="center" sortable prop="address" label="工程信息"
|
||||
>/</el-table-column
|
||||
>
|
||||
|
||||
<el-table-column
|
||||
align="center"
|
||||
sortable
|
||||
prop="netType"
|
||||
label="接入网络方式"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span type="primary" size="small">{{
|
||||
scope.row.netType == null ? "/" : scope.row.netType
|
||||
}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
sortable
|
||||
prop="version"
|
||||
label="更新时间"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<span type="primary" size="small">{{
|
||||
scope.row.updateTime == null ? "/" : scope.row.updateTime
|
||||
}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column align="center" fixed="right" label="操作" width="380">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
@click="handleClick(scope.row)"
|
||||
type="primary"
|
||||
icon="el-icon-search"
|
||||
size="mini"
|
||||
>查看</el-button
|
||||
>
|
||||
<el-button
|
||||
@click="EditClick(scope.row)"
|
||||
type="primary"
|
||||
size="mini"
|
||||
icon="el-icon-edit"
|
||||
>编辑</el-button
|
||||
>
|
||||
<el-button
|
||||
@click="DeleteClick(scope.row)"
|
||||
type="danger"
|
||||
size="mini"
|
||||
icon="el-icon-delete"
|
||||
>删除</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-row>
|
||||
|
||||
<el-row style="margin-top: 10px; text-align: right">
|
||||
<el-pagination
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="pageData.pageNum"
|
||||
:page-sizes="[10, 20, 25, 30, 50]"
|
||||
:page-size="pageData.pageSize"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="pageData.total"
|
||||
>
|
||||
</el-pagination>
|
||||
</el-row>
|
||||
|
||||
<!--新增/修改-->
|
||||
<el-dialog
|
||||
:close-on-click-modal="false"
|
||||
:title="title"
|
||||
:visible.sync="open"
|
||||
width="20%"
|
||||
|
||||
>
|
||||
<el-form
|
||||
:model="form"
|
||||
ref="form"
|
||||
:rules="rules"
|
||||
:inline="true"
|
||||
label-width="80px"
|
||||
>
|
||||
<el-form-item label="名称:" prop="name">
|
||||
<el-input style="width: 250px" v-model="form.name"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="网关ID:" prop="ndid">
|
||||
<el-input style="width: 250px" v-model="form.ndid"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="排序:" prop="sort">
|
||||
<el-input style="width: 250px" v-model="form.sort"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button :v-if="dialogFormVisible" @click="cancel">取 消</el-button>
|
||||
<el-button type="primary" @click="submitForm">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog
|
||||
:close-on-click-modal="false"
|
||||
:title="title"
|
||||
:visible.sync="openInfo"
|
||||
width="80%"
|
||||
|
||||
>
|
||||
<el-form
|
||||
:model="formInfo"
|
||||
ref="formInfo"
|
||||
:inline="true"
|
||||
label-width="180px"
|
||||
>
|
||||
<el-form-item label="联网设备名称:" prop="name">
|
||||
<el-input
|
||||
readOnly
|
||||
style="width: 250px"
|
||||
v-model="formInfo.name"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="联网设备ID:" prop="ndid">
|
||||
<el-input
|
||||
readOnly
|
||||
style="width: 250px"
|
||||
v-model="formInfo.ndid"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="版本信息" prop="versionId">
|
||||
<el-input
|
||||
readOnly
|
||||
style="width: 250px"
|
||||
v-model="formInfo.versionId"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="接入网络方式" prop="netType">
|
||||
<el-input
|
||||
readOnly
|
||||
style="width: 250px"
|
||||
v-model="formInfo.netType"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="设备厂商信息" prop="msgInfo">
|
||||
<el-input
|
||||
readOnly
|
||||
style="width: 250px"
|
||||
v-model="formInfo.msgInfo"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="CPU核心数" prop="cpuCore">
|
||||
<el-input
|
||||
readOnly
|
||||
style="width: 250px"
|
||||
v-model="formInfo.cpuCore"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="CPU主频（单位GHz）" prop="cpuFreq">
|
||||
<el-input
|
||||
readOnly
|
||||
style="width: 250px"
|
||||
v-model="formInfo.cpuFreq"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="CPU架构" prop="arch">
|
||||
<el-input
|
||||
readOnly
|
||||
style="width: 250px"
|
||||
v-model="formInfo.arch"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="CPU监控阈值（单位%）" prop="cpuLmt">
|
||||
<el-input
|
||||
readOnly
|
||||
style="width: 250px"
|
||||
v-model="formInfo.cpuLmt"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="物理内存（单位MB）" prop="memPhy">
|
||||
<el-input
|
||||
readOnly
|
||||
style="width: 250px"
|
||||
v-model="formInfo.memPhy"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<!-- <el-form-item label="虚拟内存（单位MB）" prop="memVirt">
|
||||
<el-input readOnly style="width: 250px" v-model="formInfo.memVirt "></el-input>
|
||||
</el-form-item>
|
||||
|
||||
|
||||
<el-form-item label="内存监控阈值（单位%）" prop="memLmt">
|
||||
<el-input readOnly style="width: 250px" v-model="formInfo.memLmt"></el-input>
|
||||
</el-form-item>-->
|
||||
|
||||
<el-form-item label="磁盘空间（单位MB）" prop="diskPhy">
|
||||
<el-input
|
||||
readOnly
|
||||
style="width: 250px"
|
||||
v-model="formInfo.diskPhy"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<!-- <el-form-item label="存储监控阈值（单位%）" prop="diskLmt">
|
||||
<el-input readOnly style="width: 250px" v-model="formInfo.diskLmt"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
|
||||
<el-form-item label="已使用磁盘空间（单位MB）" prop="diskUsePhy">
|
||||
<el-input readOnly style="width: 250px" v-model="formInfo.diskUsePhy"></el-input>
|
||||
</el-form-item>-->
|
||||
|
||||
<el-form-item label="操作系统名称" prop="osName">
|
||||
<el-input
|
||||
readOnly
|
||||
style="width: 250px"
|
||||
v-model="formInfo.osName"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="操作系统版本" prop="osVersion">
|
||||
<el-input
|
||||
readOnly
|
||||
style="width: 250px"
|
||||
v-model="formInfo.osVersion"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="应用程序版本号" prop="appVersion">
|
||||
<el-input
|
||||
readOnly
|
||||
style="width: 250px"
|
||||
v-model="formInfo.appVersion"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="应用程序发布日期" prop="appDate">
|
||||
<el-input
|
||||
readOnly
|
||||
style="width: 250px"
|
||||
v-model="formInfo.appDate"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="应用程序校验码" prop="appCheck">
|
||||
<el-input
|
||||
readOnly
|
||||
style="width: 250px"
|
||||
v-model="formInfo.appCheck"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="是否支持远程升级程序" prop="softUpdate">
|
||||
<el-input
|
||||
readOnly
|
||||
style="width: 250px"
|
||||
v-model="formInfo.softUpdate"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
listNetDev,
|
||||
addNetDev,
|
||||
updateNetDev,
|
||||
delNetDev,
|
||||
getNetDevInfo,
|
||||
} from "@/api/energy/netDev.js";
|
||||
|
||||
export default {
|
||||
name: "netDev",
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
|
||||
/*netTypeList:[{id:1,name:'4G'},{id:2,name:'无线'}],*/
|
||||
// 表格数据
|
||||
tableData: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
open: false,
|
||||
openInfo: false, //只用于查看的dialog
|
||||
|
||||
formInfo: {},
|
||||
|
||||
dialogFormVisible: true,
|
||||
|
||||
// 重新渲染表格状态
|
||||
refreshTable: true,
|
||||
// 查询参数
|
||||
queryParam: {
|
||||
searchValue: undefined,
|
||||
},
|
||||
pageData: {
|
||||
pageNum: 1,
|
||||
pageSize: 20,
|
||||
total: 0,
|
||||
},
|
||||
// 表单参数
|
||||
form: {
|
||||
id: "",
|
||||
name: "",
|
||||
ndid: "",
|
||||
sort: 0,
|
||||
},
|
||||
formType: 0,
|
||||
// 表单校验
|
||||
rules: {
|
||||
name: [{ required: true, message: "名称不能为空", trigger: "blur" }],
|
||||
ndId: [{ required: true, message: "网关id不能为空", trigger: "blur" }],
|
||||
sort: [
|
||||
{ required: true, message: "排序字段不可为空", trigger: "blur" },
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
created() {
|
||||
this.getList();
|
||||
},
|
||||
methods: {
|
||||
/** 查询网关列表 */
|
||||
getList() {
|
||||
this.loading = true;
|
||||
listNetDev(this.queryParam).then((response) => {
|
||||
this.tableData = response.data.records;
|
||||
this.pageData.total = response.data.total;
|
||||
this.pageData.pageSize = response.data.size;
|
||||
this.pageData.pageNum = response.data.current;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false;
|
||||
this.reset();
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
id: "",
|
||||
name: "",
|
||||
ndid: "",
|
||||
};
|
||||
this.resetForm("form");
|
||||
},
|
||||
resetForm(form) {
|
||||
if (this.$refs[form]) {
|
||||
this.$refs[form].resetFields();
|
||||
}
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
handleQuery() {
|
||||
this.getList();
|
||||
},
|
||||
/** 重置按钮操作 */
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm");
|
||||
this.handleQuery();
|
||||
},
|
||||
/** 新增按钮操作 */
|
||||
handleAdd() {
|
||||
this.reset();
|
||||
this.open = true;
|
||||
this.formType = 0; //新增
|
||||
this.title = "新增网关设备";
|
||||
},
|
||||
|
||||
/** 修改按钮操作 */
|
||||
handleUpdate(row) {
|
||||
this.formType = 1;
|
||||
this.reset();
|
||||
updateNetDev(row.id).then((response) => {
|
||||
this.form = response.data;
|
||||
this.open = true;
|
||||
this.title = "修改网关设备";
|
||||
});
|
||||
this.getList();
|
||||
},
|
||||
/** 提交按钮 */
|
||||
submitForm: function () {
|
||||
this.$refs["form"].validate((valid) => {
|
||||
if (valid) {
|
||||
console.log(this.form.id);
|
||||
if (this.formType == 1) {
|
||||
updateNetDev(this.form).then((response) => {
|
||||
this.$message({ message: "修改成功", type: "success" });
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
} else {
|
||||
addNetDev(this.form).then((response) => {
|
||||
this.$message({ message: "新增成功", type: "success" });
|
||||
this.open = false;
|
||||
this.getList();
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
//点击获取字典类型表头字段等属性
|
||||
sort(column, event) {
|
||||
this.orderBy = column.order;
|
||||
this.sortBy = column.property;
|
||||
console.log(this.orderBy + "=============" + this.sortBy);
|
||||
this.queryData();
|
||||
},
|
||||
//查看操作
|
||||
handleClick(row) {
|
||||
this.title = "联网设备详情";
|
||||
this.openInfo = true;
|
||||
this.getNetDevInfo(row.id);
|
||||
},
|
||||
|
||||
//获取网关详细信息
|
||||
getNetDevInfo(id) {
|
||||
getNetDevInfo(id).then((response) => {
|
||||
if ((response.code = "A0000")) {
|
||||
this.formInfo = response.data;
|
||||
}
|
||||
});
|
||||
},
|
||||
//详情修改
|
||||
EditClick(row) {
|
||||
this.formType = 1;
|
||||
this.open = true;
|
||||
this.title = row.name + "详情修改";
|
||||
this.dialogFormVisible = true;
|
||||
|
||||
this.form.id = row.id;
|
||||
this.form.name = row.name;
|
||||
this.form.ndid = row.ndid;
|
||||
},
|
||||
//详情删除
|
||||
DeleteClick(row) {
|
||||
this.$confirm("确认删除" + row.name + "吗?", "提示", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning",
|
||||
})
|
||||
.then(() => {
|
||||
let ids = [];
|
||||
ids.push(row.id);
|
||||
delNetDev(ids).then((response) => {
|
||||
if ((response.code = "A0000")) {
|
||||
this.$message({
|
||||
type: "success",
|
||||
message: "删除成功!",
|
||||
});
|
||||
this.getList();
|
||||
}
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
this.$message({
|
||||
type: "info",
|
||||
message: "已取消删除",
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
//分页
|
||||
handleSizeChange(val) {
|
||||
this.pageData.pageSize = val;
|
||||
this.getList();
|
||||
},
|
||||
handleCurrentChange(val) {
|
||||
this.pageData.pageNum = val;
|
||||
this.getList();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.ui-container {
|
||||
padding: 30px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
340
src/views/energy-system/echarts.vue
Normal file
340
src/views/energy-system/echarts.vue
Normal file
@@ -0,0 +1,340 @@
|
||||
<template>
|
||||
<div style="overflow: hidden">
|
||||
<el-row :gutter="10" style="padding: 0px 10px 0px 0px">
|
||||
<div>
|
||||
<el-col :span="12">
|
||||
<el-card
|
||||
:style="
|
||||
'height:' +
|
||||
(mainHeight - 30) / 2 +
|
||||
'px;margin-top: 10px; margin-left: 10px'
|
||||
"
|
||||
>
|
||||
<div
|
||||
:style="'height:' + (mainHeight - 160) / 2 + 'px'"
|
||||
id="test1"
|
||||
></div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-card
|
||||
:style="
|
||||
'height:' +
|
||||
(mainHeight - 30) / 2 +
|
||||
'px;margin-top: 10px; margin-left: 10px'
|
||||
"
|
||||
>
|
||||
<div
|
||||
:style="'height:' + (mainHeight - 160) / 2 + 'px'"
|
||||
id="test2"
|
||||
></div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="12" :gutter="10">
|
||||
<el-card
|
||||
:style="
|
||||
'height:' +
|
||||
(mainHeight - 30) / 2 +
|
||||
'px;margin-top: 10px; margin-left: 10px'
|
||||
"
|
||||
>
|
||||
<div
|
||||
:style="'height:' + (mainHeight - 160) / 2 + 'px'"
|
||||
id="test3"
|
||||
></div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="12" :gutter="10">
|
||||
<el-card
|
||||
:style="
|
||||
'height:' +
|
||||
(mainHeight - 30) / 2 +
|
||||
'px;margin-top: 10px; margin-left: 10px'
|
||||
"
|
||||
>
|
||||
<div
|
||||
:style="'height:' + (mainHeight - 160) / 2 + 'px'"
|
||||
id="test4"
|
||||
></div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</div>
|
||||
<div id="fullScreen" :class="{ show: isFull, hide: !isFull }"></div>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import echarts from "echarts";
|
||||
import $ from "jquery";
|
||||
import FileSaver from "file-saver";
|
||||
import XLSX from "xlsx";
|
||||
import json2csv from "json2csv";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
mainHeight: undefined,
|
||||
mainHeight1: undefined,
|
||||
isFull: false, //false为放大，true为缩小
|
||||
targetList: [],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
drawChart(elementId) {
|
||||
var self = this;
|
||||
self.elementId = elementId;
|
||||
let element = document.getElementById(elementId);
|
||||
let echarts = require("echarts");
|
||||
self.charts = echarts.init(element);
|
||||
let base = +new Date(1968, 9, 3);
|
||||
let oneDay = 24 * 3600 * 1000;
|
||||
var date = [];
|
||||
let data = [Math.random() * 300];
|
||||
let data1 = [Math.random() * 300];
|
||||
let data2 = [Math.random() * 300];
|
||||
for (let i = 1; i < 200000; i++) {
|
||||
var now = new Date((base += oneDay));
|
||||
date.push(
|
||||
[now.getFullYear(), now.getMonth() + 1, now.getDate()].join("/")
|
||||
);
|
||||
data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
|
||||
}
|
||||
for (let i = 50; i < 200000; i++) {
|
||||
data1.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
|
||||
}
|
||||
for (let i = 100; i < 200000; i++) {
|
||||
data2.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
|
||||
}
|
||||
var option = {
|
||||
tooltip: {
|
||||
trigger: "axis",
|
||||
},
|
||||
title: {
|
||||
left: "center",
|
||||
text: "历史曲线图",
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
boundaryGap: false,
|
||||
data: date,
|
||||
},
|
||||
legend: {
|
||||
data: ["A相", "B相", "C相"],
|
||||
left: "20%",
|
||||
},
|
||||
grid: {
|
||||
left: "3%",
|
||||
right: "4%",
|
||||
bottom: "15%",
|
||||
containLabel: true,
|
||||
},
|
||||
yAxis: {
|
||||
type: "value",
|
||||
boundaryGap: [0, "100%"],
|
||||
axisLine: {
|
||||
show: true,
|
||||
},
|
||||
},
|
||||
dataZoom: [
|
||||
{
|
||||
type: "inside",
|
||||
start: 0,
|
||||
end: 100,
|
||||
},
|
||||
{
|
||||
start: 0,
|
||||
end: 100,
|
||||
},
|
||||
],
|
||||
toolbox: {
|
||||
show: true,
|
||||
feature: {
|
||||
saveAsImage: { show: true },
|
||||
dataZoom: {
|
||||
yAxisIndex: "none",
|
||||
},
|
||||
//restore: {},
|
||||
mark: { show: true },
|
||||
|
||||
dataView: {
|
||||
show: true,
|
||||
right: 100,
|
||||
title: "数据视图",
|
||||
lang: ["数据视图", "关闭", "导出Excel", "导出CVS"],
|
||||
contentToOption: function () {
|
||||
let wb = XLSX.utils.table_to_book(
|
||||
document.querySelector("#tableExcel")
|
||||
);
|
||||
let wbout = XLSX.write(wb, {
|
||||
bookType: "xlsx",
|
||||
bookSST: true,
|
||||
type: "array",
|
||||
});
|
||||
try {
|
||||
FileSaver.saveAs(
|
||||
new Blob([wbout], { type: "application/octet-stream" }),
|
||||
"数据表.xlsx"
|
||||
);
|
||||
} catch (e) {
|
||||
if (typeof console !== "undefined") console.log(e, wbout);
|
||||
}
|
||||
return wbout;
|
||||
},
|
||||
// 将数据视图展示为table
|
||||
optionToContent: function (opt) {
|
||||
var seriesData1 = opt.series[0].data;
|
||||
var seriesData2 = opt.series[1].data;
|
||||
var seriesData3 = opt.series[2].data;
|
||||
var tdHeads =
|
||||
'<td style="padding: 0 ">日期</td>' +
|
||||
'<td style="padding: 0 ">A相</td>' +
|
||||
'<td style="padding: 0 ">B相</td>' +
|
||||
'<td style="padding: 0 ">C相</td>';
|
||||
var table =
|
||||
'<table id="tableExcel" border="1" class="table-bordered table-d" style="width:100%;text-align:center" ><tbody><tr>' +
|
||||
tdHeads +
|
||||
" </tr>";
|
||||
for (var i = 0; i < date.length; i++) {
|
||||
table +=
|
||||
"<td>" +
|
||||
date[i] +
|
||||
"</td>" +
|
||||
"<td>" +
|
||||
seriesData1[i] +
|
||||
"</td>" +
|
||||
"<td>" +
|
||||
seriesData2[i] +
|
||||
"</td>" +
|
||||
"<td>" +
|
||||
seriesData3[i] +
|
||||
"</td>" +
|
||||
"</tr>";
|
||||
}
|
||||
table += "</tbody></table>";
|
||||
return table;
|
||||
},
|
||||
},
|
||||
// dataView : {show: true, readOnly: false},
|
||||
magicType: { show: true, type: ["line", "bar"] },
|
||||
myTool1: {
|
||||
show: true,
|
||||
title: self.isFull == true ? "取消全屏" : "全屏",
|
||||
icon: "path://M641.750109 384.100028l205.227128-204.519-0.704035 115.89966c-0.282433 9.611915 7.489578 18.09103 17.101493 17.808598l12.297071 0c9.611915-0.283456 17.667382-5.936199 17.808598-15.689331l0.565888-172.57752c0-0.14224 0.282433-9.187243 0.282433-9.187243 0.14224-4.804423-0.99056-9.187243-4.100388-12.297071-3.109828-3.109828-7.347339-5.086855-12.297071-4.946662l-8.763594 0.14224c-0.141216 0-0.278339 0-0.420579 0.14224L697.581696 98.166787c-9.611915 0.283456-17.667382 8.200776-17.808598 17.950837l0 12.297071c1.416256 11.44875 10.458189 18.092054 20.070104 17.808598l112.789832 0.283456-204.66124 203.814965c-9.329483 9.329483-9.329483 24.449855 0 33.778314 9.329483 9.470699 24.452925 9.470699 33.782408 0L641.750109 384.100028zM383.095141 576.889893 177.726797 780.705881l0.707105-115.338888c0.283456-9.607822-7.492648-18.086937-17.104563-17.808598l-13.001105 0c-9.611915 0.283456-17.667382 5.937223-17.808598 15.690354l-0.565888 172.718737c0 0.14224-0.282433 9.187243-0.282433 9.187243-0.14224 4.808516 0.99056 9.187243 4.096295 12.297071 3.109828 3.109828 7.351432 5.086855 12.297071 4.946662l8.762571-0.14224c0.14224 0 0.283456 0 0.425695-0.14224l171.873486 0.708128c9.607822-0.283456 17.667382-8.196683 17.808598-17.950837L344.93503 832.575226c-1.415232-11.44875-10.461259-18.092054-20.074198-17.808598L212.069977 814.483172 416.59 610.671277c9.329483-9.329483 9.329483-24.453948 0-33.782408C407.40685 567.41817 392.424624 567.41817 383.095141 576.889893L383.095141 576.889893zM894.047276 835.967486l-0.424672-172.718737c-0.283456-9.612938-8.200776-15.406898-17.809621-15.690354l-12.296047 0c-9.612938-0.278339-17.243733 8.200776-17.105586 17.808598l0.708128 115.903753L641.750109 576.889893c-9.329483-9.329483-24.452925-9.329483-33.782408 0-9.325389 9.328459-9.325389 24.452925 0 33.782408L812.490795 814.483172l-112.789832 0.283456c-9.611915-0.283456-18.515702 6.502088-20.073174 17.808598l0 12.297071c0.282433 9.611915 8.200776 17.667382 17.808598 17.950837l171.166381-0.708128c0.141216 0 0.282433 0.14224 0.424672 0.14224l8.763594 0.14224c4.803399 0.141216 9.187243-1.694595 12.296047-4.946662 3.109828-3.109828 4.238534-7.488555 4.097318-12.297071 0 0-0.14224-9.046027-0.14224-9.187243L894.047276 835.968509zM212.216309 146.506748l112.789832-0.283456c9.607822 0.283456 18.512632-6.502088 20.070104-17.808598L345.076246 116.116601c-0.283456-9.611915-8.196683-17.667382-17.808598-17.950837l-172.011632 0.708128c-0.14224 0-0.283456-0.14224-0.425695-0.14224l-8.761548-0.14224c-4.808516-0.141216-9.187243 1.694595-12.297071 4.946662-3.109828 3.109828-4.242627 7.488555-4.096295 12.297071 0 0 0.282433 9.046027 0.282433 9.187243l0.420579 172.718737c0.14224 9.608845 8.200776 15.406898 17.808598 15.686261l13.005198 0c9.611915 0.282433 17.242709-8.196683 17.10047-17.808598l-0.564865-115.334795 205.231221 203.958228c9.324366 9.329483 24.448832 9.329483 33.777291 0 9.329483-9.329483 9.329483-24.452925 0-33.782408L212.216309 146.506748 212.216309 146.506748zM212.216309 146.506748",
|
||||
onclick: function () {
|
||||
let elementId = self.elementId;
|
||||
if (!self.isFull) {
|
||||
elementId = "fullScreen";
|
||||
}
|
||||
setTimeout(() => {
|
||||
self.$nextTick(() => {
|
||||
self.drawChart(elementId);
|
||||
});
|
||||
}, 10);
|
||||
|
||||
self.isFull = !self.isFull;
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "A相",
|
||||
type: "line",
|
||||
symbol: "none",
|
||||
sampling: "lttb",
|
||||
itemStyle: {
|
||||
color: "red",
|
||||
},
|
||||
// areaStyle: {
|
||||
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
// {
|
||||
// offset: 0,
|
||||
// color: 'rgb(255, 158, 68)'
|
||||
// },
|
||||
// {
|
||||
// offset: 1,
|
||||
// color: 'rgb(255, 70, 131)'
|
||||
// }
|
||||
// ])
|
||||
// },
|
||||
data: data,
|
||||
},
|
||||
{
|
||||
name: "B相",
|
||||
type: "line",
|
||||
symbol: "none",
|
||||
sampling: "lttb",
|
||||
itemStyle: {
|
||||
color: "green",
|
||||
},
|
||||
// areaStyle: {
|
||||
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
// {
|
||||
// offset: 0,
|
||||
// color: 'rgb(255, 158, 68)'
|
||||
// },
|
||||
// {
|
||||
// offset: 1,
|
||||
// color: 'rgb(255, 70, 131)'
|
||||
// }
|
||||
// ])
|
||||
// },
|
||||
data: data1,
|
||||
},
|
||||
{
|
||||
name: "C相",
|
||||
type: "line",
|
||||
symbol: "none",
|
||||
sampling: "lttb",
|
||||
itemStyle: {
|
||||
color: "yellow",
|
||||
},
|
||||
// areaStyle: {
|
||||
// color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
// {
|
||||
// offset: 0,
|
||||
// color: 'rgb(255, 158, 68)'
|
||||
// },
|
||||
// {
|
||||
// offset: 1,
|
||||
// color: 'rgb(255, 70, 131)'
|
||||
// }
|
||||
// ])
|
||||
// },
|
||||
data: data2,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
self.charts.setOption(option)
|
||||
window.echartsArr.push(self.charts);
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.mainHeight = window.sessionStorage.getItem("mainHeight");
|
||||
this.mainHeight1 = this.mainHeight - 305 + "px";
|
||||
},
|
||||
mounted() {
|
||||
this.drawChart("test1");
|
||||
this.drawChart("test2");
|
||||
this.drawChart("test3");
|
||||
this.drawChart("test4");
|
||||
|
||||
// this.drawChart('fullScreen');
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style>
|
||||
.show {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 999;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.hide {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
253
src/views/energy-system/electricenergy.vue
Normal file
253
src/views/energy-system/electricenergy.vue
Normal file
@@ -0,0 +1,253 @@
|
||||
<template>
|
||||
<div class="cent">
|
||||
<h3 class="p3" v-if="flag1">监测点详细信息</h3>
|
||||
<img v-show="false" src="../../assets/zz.png" style="width:50px;height:50px"/>
|
||||
<embed id="embedSvg" @mouseover="dd" v-if="flag"
|
||||
:style="'width:100%;height:'+(mainHeight-5)+'px'"
|
||||
type="image/svg+xml"
|
||||
:src="url"
|
||||
></embed>
|
||||
<div v-if="flag1">
|
||||
|
||||
<!-- <embed id="embedSvg"
|
||||
style="width:100%;height:90vh"
|
||||
type="image/svg+xml"
|
||||
:src="url2"
|
||||
></embed> -->
|
||||
|
||||
<el-row :gutter="20" style="padding:10px">
|
||||
<el-button type="primary" class="el-icon-refresh-left back" @click="back">返 回</el-button>
|
||||
<el-col :span="6">
|
||||
<div class="grid-content bg-purple">
|
||||
<img src="../../assets/zzxq.png" style="height:75vh"/>
|
||||
<h3>{{cedian.name}}</h3>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="18">
|
||||
<div class="grid-content bg-purple-light">
|
||||
<el-row :gutter="5" >
|
||||
<el-col
|
||||
v-for="(item,index) in cedian.kjsj"
|
||||
:key="index"
|
||||
:span="6" style="margin-top:5px">
|
||||
<el-card class="box-card kj">
|
||||
<div slot="header" class="clearfix name">
|
||||
<span>{{item.name}}</span>
|
||||
</div>
|
||||
<img src="../../assets/login/logo.png" style="width:50px;height:50px;float:left"/>
|
||||
<div class="text item" style="margin-left:30%;font-size:36px;color:rgb(93, 255, 17)">
|
||||
{{item.value}}
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20" style="margin-top:10px;color:rgb(11, 157, 194)">
|
||||
<el-col :span="12">
|
||||
<div class="grid-content bg-purple" style="text-align: center;">
|
||||
<h3 v-for="(item,index) in cezhi.dy" style="margin-right:15%">{{item.name}}:<span style="margin-left:10%;color:#000">{{item.value}}</span><span style="margin-left:10%;">{{item.dw}}</span></h3>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<div class="grid-content bg-purple">
|
||||
<h3 v-for="(item,index) in cezhi.dl" style="margin-right:15%">{{item.name}}:<span style="margin-left:10%;color:#000">{{item.value}}</span><span style="margin-left:10%;">{{item.dw}}</span></h3>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import $ from 'jquery'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
mainHeight:undefined,
|
||||
flag:true,
|
||||
flag1:false,
|
||||
url:require('../../assets/layout/99.svg'),
|
||||
url2:require('../../assets/layout/yct.svg'),
|
||||
cedian:{
|
||||
name:'1#-1路配电出线柜',
|
||||
kjsj:[{
|
||||
name:'L1有功',
|
||||
value:'1056W'
|
||||
},{
|
||||
name:'L2有功',
|
||||
value:'1056W'
|
||||
},{
|
||||
name:'L3有功',
|
||||
value:'1056W'
|
||||
},{
|
||||
name:'L4有功',
|
||||
value:'1056W'
|
||||
},{
|
||||
name:'L1功率因素',
|
||||
value:'0.85'
|
||||
},{
|
||||
name:'L2功率因素',
|
||||
value:'0.85'
|
||||
},{
|
||||
name:'L3功率因素',
|
||||
value:'0.85'
|
||||
},{
|
||||
name:'L4功率因素',
|
||||
value:'0.85'
|
||||
},{
|
||||
name:'总净有功电度',
|
||||
value:'1056kW/h'
|
||||
},{
|
||||
name:'总正向有功电度',
|
||||
value:'1098kW/h'
|
||||
}]
|
||||
},
|
||||
cezhi:{
|
||||
dy:[{
|
||||
name:'L1电压有效值',
|
||||
value:455,
|
||||
dw:'V'
|
||||
},{
|
||||
name:'L2电压有效值',
|
||||
value:455,
|
||||
dw:'V'
|
||||
},{
|
||||
name:'L3电压有效值',
|
||||
value:455,
|
||||
dw:'V'
|
||||
},{
|
||||
name:'L1基波有效值',
|
||||
value:455,
|
||||
dw:'W'
|
||||
},{
|
||||
name:'L2基波有功值',
|
||||
value:455,
|
||||
dw:'W'
|
||||
},{
|
||||
name:'L3基波有效值',
|
||||
value:455,
|
||||
dw:'W'
|
||||
}],
|
||||
dl:[{
|
||||
name:'L1电流有效值',
|
||||
value:455,
|
||||
dw:'A'
|
||||
},{
|
||||
name:'L2电流有效值',
|
||||
value:455,
|
||||
dw:'A'
|
||||
},{
|
||||
name:'L3电流有效值',
|
||||
value:455,
|
||||
dw:'A'
|
||||
},{
|
||||
name:'总基波有功值',
|
||||
value:455,
|
||||
dw:'W'
|
||||
},{
|
||||
name:'总基波净有功电度',
|
||||
value:455,
|
||||
dw:'kW/h'
|
||||
},{
|
||||
name:'总基波正向有功电度',
|
||||
value:455,
|
||||
dw:'kW/h'
|
||||
}]
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
onload(){
|
||||
|
||||
},
|
||||
mounted(){
|
||||
this.mainHeight = window.sessionStorage.getItem('mainHeight')
|
||||
},
|
||||
updated(){
|
||||
|
||||
},
|
||||
methods:{
|
||||
dd(){
|
||||
this.$nextTick(()=> { this.intit()})
|
||||
},
|
||||
intit(){
|
||||
var embedSvg = document.getElementById("embedSvg")
|
||||
embedSvg = embedSvg.getSVGDocument().getElementById('svg')
|
||||
console.log("SVG DOM: ", embedSvg)
|
||||
var id=''
|
||||
for(var i=1;i<=14;i++){
|
||||
id = 'zz'+i
|
||||
var obj = embedSvg.getElementById(id)
|
||||
obj.innerHTML="点我跳转详情";
|
||||
obj.addEventListener('click', this.showMsg, false);
|
||||
console.log("svg-dom: ", obj)
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
showMsg(){
|
||||
this.flag1=true
|
||||
this.flag=false
|
||||
|
||||
//alert(9999999)
|
||||
},
|
||||
back(){
|
||||
this.flag=true
|
||||
this.flag1=false
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.cent {
|
||||
cursor:pointer;
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
|
||||
}
|
||||
.p3 {
|
||||
margin:0 auto;color:rgb(7, 209, 245)
|
||||
}
|
||||
.kj {
|
||||
background-image: linear-gradient(#2ca2b4, #064e60);
|
||||
color:#fff;
|
||||
opacity:0.8;
|
||||
}
|
||||
.name {
|
||||
height:30px;
|
||||
background:#064e60;
|
||||
padding:5px
|
||||
}
|
||||
.clearfix .name span {
|
||||
line-height:15px;color:#fff;font-size:18px
|
||||
}
|
||||
.bg-purple-dark {
|
||||
background: #f8f9fb;
|
||||
}
|
||||
.bg-purple {
|
||||
background: #eef0f0;
|
||||
}
|
||||
.bg-purple-light {
|
||||
/* background: #e5e9f2; */
|
||||
|
||||
}
|
||||
.right-top {
|
||||
border-style:solid hidden hidden hidden;
|
||||
color:rgb(7, 131, 161);
|
||||
border:1.5px solid rgb(7, 131, 161)
|
||||
}
|
||||
.el-card__header {
|
||||
padding:0px 0px;
|
||||
border-bottom: 1px solid #EBEEF5;
|
||||
-webkit-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.back {
|
||||
float:right;
|
||||
margin-bottom:10px;
|
||||
margin-right:10px
|
||||
}
|
||||
</style>
|
||||
1168
src/views/energy-system/operationalCenter/airManage.vue
Normal file
1168
src/views/energy-system/operationalCenter/airManage.vue
Normal file
File diff suppressed because one or more lines are too long
1169
src/views/energy-system/operationalCenter/airManageReadOnly.vue
Normal file
1169
src/views/energy-system/operationalCenter/airManageReadOnly.vue
Normal file
File diff suppressed because one or more lines are too long
13428
src/views/energy-system/operationalCenter/dataBind.vue
Normal file
13428
src/views/energy-system/operationalCenter/dataBind.vue
Normal file
File diff suppressed because one or more lines are too long
2969
src/views/energy-system/operationalCenter/fourFloor.vue
Normal file
2969
src/views/energy-system/operationalCenter/fourFloor.vue
Normal file
File diff suppressed because one or more lines are too long
1640
src/views/energy-system/operationalCenter/oneFloor.vue
Normal file
1640
src/views/energy-system/operationalCenter/oneFloor.vue
Normal file
File diff suppressed because one or more lines are too long
2622
src/views/energy-system/operationalCenter/threeFloor.vue
Normal file
2622
src/views/energy-system/operationalCenter/threeFloor.vue
Normal file
File diff suppressed because one or more lines are too long
2636
src/views/energy-system/operationalCenter/twoFloor.vue
Normal file
2636
src/views/energy-system/operationalCenter/twoFloor.vue
Normal file
File diff suppressed because one or more lines are too long
2624
src/views/energy-system/operationalCenter/yunCaiManage.vue
Normal file
2624
src/views/energy-system/operationalCenter/yunCaiManage.vue
Normal file
File diff suppressed because one or more lines are too long
2624
src/views/energy-system/operationalCenter/yunCaiManageReadOnly.vue
Normal file
2624
src/views/energy-system/operationalCenter/yunCaiManageReadOnly.vue
Normal file
File diff suppressed because one or more lines are too long
502
src/views/energy-system/system/loadconfiguration.vue
Normal file
502
src/views/energy-system/system/loadconfiguration.vue
Normal file
@@ -0,0 +1,502 @@
|
||||
<template>
|
||||
<div style="padding: 0.5%">
|
||||
<!-- <el-col :span="12">
|
||||
<el-button type="primary" @click="Add" >新增</el-button>
|
||||
</el-col> -->
|
||||
<el-col :span="24" style="margin-top: 0.5%">
|
||||
<el-table stripe :data="tableData" border style="width: 100%">
|
||||
<el-table-column
|
||||
align="center"
|
||||
prop="num"
|
||||
label="序号"
|
||||
width="80"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
prop="loadName"
|
||||
label="负荷名称"
|
||||
></el-table-column>
|
||||
<el-table-column align="center" prop="flag" label="是否参与总负荷计算">
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.flag == 1">是</span>
|
||||
<span v-if="scope.row.flag == 0">否</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="操作" width="200">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
@click="handleClick(scope.row)"
|
||||
type="primary"
|
||||
size="small"
|
||||
>绑定用能监测点</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
<el-dialog
|
||||
:close-on-click-modal="false"
|
||||
title="新增"
|
||||
:visible.sync="dialogVisible2"
|
||||
width="25%"
|
||||
:before-close="handleClose"
|
||||
>
|
||||
<el-form ref="form" :model="form" label-width="80px">
|
||||
<el-form-item label="序号">
|
||||
<el-input v-model="form.num" style="width: 80%"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="负荷名称">
|
||||
<el-input v-model="form.name" style="width: 80%"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogVisible2 = false">取 消</el-button>
|
||||
<el-button type="primary" @click="dialogVisible2 = false"
|
||||
>确 定</el-button
|
||||
>
|
||||
</span>
|
||||
</el-dialog>
|
||||
<el-dialog
|
||||
:close-on-click-modal="false"
|
||||
title="空调负荷配置"
|
||||
:visible.sync="dialogVisible"
|
||||
width="50%"
|
||||
:before-close="handleClose"
|
||||
>
|
||||
<div class="box">
|
||||
<!-- lazy -->
|
||||
<!-- :lazyFn="lazyFn" -->
|
||||
<tree-transfer
|
||||
ref="wl-tree-transfer"
|
||||
filter
|
||||
draggable
|
||||
high-light
|
||||
check-strictly
|
||||
:mode="mode"
|
||||
:title="title"
|
||||
:button_text="['绑定', '解绑']"
|
||||
:to_data="toData"
|
||||
:from_data="fromData"
|
||||
:filterNode="filterNode"
|
||||
:defaultProps="defaultProps"
|
||||
:defaultCheckedKeys="defaultCheckedKeys"
|
||||
:defaultExpandedKeys="arr2"
|
||||
@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="SubmitEvent">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import api from "@/api/energy/sysconfig";
|
||||
import treeTransfer from "el-tree-transfer";
|
||||
export default {
|
||||
computed: {
|
||||
title() {
|
||||
if (this.mode == "transfer") {
|
||||
return ["未绑定监测点", "已绑定监测点"];
|
||||
} else {
|
||||
return ["通讯录", "收件人", "抄送人", "密送人"];
|
||||
}
|
||||
},
|
||||
},
|
||||
components: { treeTransfer },
|
||||
// props: ["cascaderData"], // 班级的树形结构数据
|
||||
data() {
|
||||
const generateData = (_) => {
|
||||
const data = [];
|
||||
for (let i = 1; i <= 15; i++) {
|
||||
data.push({
|
||||
key: i,
|
||||
label: `指标 ${i}`,
|
||||
disabled: i % 2 === 0,
|
||||
children: [],
|
||||
});
|
||||
}
|
||||
return data;
|
||||
};
|
||||
return {
|
||||
form: {
|
||||
num: "",
|
||||
name: "",
|
||||
},
|
||||
dialogVisible2: false,
|
||||
dialogVisible: false,
|
||||
tableData: [],
|
||||
arr2: [],
|
||||
rowId: "",
|
||||
// cascaderData:[{
|
||||
// nodeCode:'0',
|
||||
// label:'国际幼儿园',
|
||||
// children:[{
|
||||
// nodeCode:'01',
|
||||
// label:'双语幼儿园',
|
||||
// children:[{
|
||||
// nodeCode:'001',
|
||||
// label:'小小班',
|
||||
// children:[{
|
||||
// nodeCode:'0001',
|
||||
// label:'1班',
|
||||
// children:[]
|
||||
// },{
|
||||
// nodeCode:'0002',
|
||||
// label:'2班',
|
||||
// children:[]
|
||||
// },{
|
||||
// nodeCode:'0003',
|
||||
// label:'3班',
|
||||
// children:[]
|
||||
// }]
|
||||
// },{
|
||||
// nodeCode:'002',
|
||||
// label:'亲子班',
|
||||
// children:[{
|
||||
// nodeCode:'0002',
|
||||
// label:'1班',
|
||||
// children:[]
|
||||
// }]
|
||||
// }]
|
||||
// },{
|
||||
// nodeCode:'02',
|
||||
// label:'PYP幼儿园',
|
||||
// children:[{
|
||||
// nodeCode:'003',
|
||||
// label:'大班',
|
||||
// children:[]
|
||||
// },{
|
||||
// nodeCode:'004',
|
||||
// label:'小班',
|
||||
// children:[]
|
||||
// }]
|
||||
// }]
|
||||
// }],
|
||||
data: generateData(),
|
||||
value: [1],
|
||||
value4: [1],
|
||||
renderFunc(h, option) {
|
||||
return (
|
||||
<span>
|
||||
{option.key} - {option.label}
|
||||
</span>
|
||||
);
|
||||
},
|
||||
mode: "transfer", // transfer addressList
|
||||
defaultProps: {
|
||||
label: "name",
|
||||
children: "children",
|
||||
/* disabled(data) {
|
||||
return data.id === 2;
|
||||
}, */
|
||||
},
|
||||
fromData: [], // 穿梭框 - 源数据 - 树形
|
||||
toData: [], // 穿梭框 - 目标数据 - 树形
|
||||
fromArray: [
|
||||
{
|
||||
id: "1",
|
||||
name: "1",
|
||||
pid: "0",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "2",
|
||||
pid: "0",
|
||||
},
|
||||
{
|
||||
id: "1-1",
|
||||
name: "1-1",
|
||||
pid: "1",
|
||||
},
|
||||
{
|
||||
id: "1-2",
|
||||
name: "1-2",
|
||||
pid: "1",
|
||||
},
|
||||
{
|
||||
id: "1-1-1",
|
||||
name: "1-1-1",
|
||||
pid: "1-1",
|
||||
},
|
||||
{
|
||||
id: "1-1-1-1",
|
||||
name: "1-1-1-1",
|
||||
pid: "1-1-1",
|
||||
},
|
||||
{
|
||||
id: "2-1",
|
||||
name: "2-1",
|
||||
pid: "2",
|
||||
},
|
||||
{
|
||||
id: "2-2",
|
||||
name: "2-2",
|
||||
pid: "2",
|
||||
},
|
||||
],
|
||||
toArray: [],
|
||||
defaultCheckedKeys: [], // 左侧默认选中数据
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
mounted() {
|
||||
this.getqueryData();
|
||||
},
|
||||
methods: {
|
||||
//绑定监测点
|
||||
handleClick(row) {
|
||||
this.dialogVisible = true;
|
||||
this.rowId = row.loadId;
|
||||
var p = {
|
||||
loadId: row.loadId,
|
||||
loadName: row.loadName,
|
||||
};
|
||||
api.getEleLoadSetTree(p).then((res) => {
|
||||
if (res.code === "A0000") {
|
||||
for (var i = 0; i < res.data.noBinds.length; i++) {
|
||||
res.data.noBinds[i].pid = 0;
|
||||
}
|
||||
this.fromData = res.data.noBinds;
|
||||
if (res.data.binds.length > 0) {
|
||||
for (var j = 0; i < res.data.binds.length; j++) {
|
||||
res.data.binds[j].pid = j;
|
||||
}
|
||||
this.toData = res.data.binds;
|
||||
} else {
|
||||
this.toData = [];
|
||||
}
|
||||
this.toData.forEach((m) => {
|
||||
m.children.forEach((n) => {
|
||||
this.arr2.push(n.id);
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
handleChange(value, direction, movedKeys) {
|
||||
console.log(value, direction, movedKeys);
|
||||
},
|
||||
handleClose() {
|
||||
this.dialogVisible = false;
|
||||
this.dialogVisible2 = false;
|
||||
},
|
||||
Add() {
|
||||
this.dialogVisible2 = true;
|
||||
},
|
||||
//获取列表
|
||||
getqueryData() {
|
||||
api.getEleLoadSetDetail().then((res) => {
|
||||
if (res.code === "A0000") {
|
||||
var arr = [];
|
||||
var data = res.data;
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
var map = {
|
||||
num: i + 1,
|
||||
loadId: data[i].loadId,
|
||||
loadName: data[i].loadName,
|
||||
flag: data[i].flag,
|
||||
};
|
||||
arr.push(map);
|
||||
}
|
||||
this.tableData = arr;
|
||||
}
|
||||
});
|
||||
},
|
||||
//提交绑定
|
||||
SubmitEvent() {
|
||||
this.dialogVisible = false;
|
||||
var arr = [];
|
||||
this.toData.forEach((m) => {
|
||||
m.children.forEach((n) => {
|
||||
n.children.forEach((d) => {
|
||||
arr.push(d.lineId);
|
||||
});
|
||||
});
|
||||
});
|
||||
var p = {
|
||||
id: this.rowId,
|
||||
ids: arr,
|
||||
};
|
||||
api.getEleLoadSetTreeAdd(p).then((res) => {
|
||||
if (res.code === "A0000") {
|
||||
this.$message.success("绑定成功");
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 获取选中
|
||||
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);
|
||||
},
|
||||
// 左侧源数据选中事件
|
||||
leftCheckChange(nodeObj, treeObj, checkAll) {
|
||||
console.log(nodeObj);
|
||||
console.log(treeObj);
|
||||
console.log(checkAll);
|
||||
},
|
||||
// 右侧目标数据选中事件
|
||||
rightCheckChange(nodeObj, treeObj, checkAll) {
|
||||
console.log(nodeObj);
|
||||
console.log(treeObj);
|
||||
console.log(checkAll);
|
||||
},
|
||||
// 自定义节点 仅树形结构支持
|
||||
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="less" scoped>
|
||||
::v-deep .el-transfer-panel__list {
|
||||
height: 20vh;
|
||||
overflow: auto;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.title {
|
||||
padding: 40px 0;
|
||||
}
|
||||
.box {
|
||||
width: 600px;
|
||||
margin: 0 auto;
|
||||
//height:50vh;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.btn {
|
||||
border: 1px solid #ebeef5;
|
||||
padding: 5px 10px;
|
||||
background-color: #f5f7fa;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.my-title-right {
|
||||
float: right;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
wl-transfer .el-tree {
|
||||
min-width: 100%;
|
||||
margin-bottom: 5px;
|
||||
|
||||
// height: 50vh;
|
||||
display: inline-block !important;
|
||||
}
|
||||
::v-deep .el-tree {
|
||||
position: relative;
|
||||
cursor: default;
|
||||
background: #f5f7fa;
|
||||
color: #000608;
|
||||
height: 22vh;
|
||||
overflow: auto;
|
||||
}
|
||||
::v-deep .wl-transfer .transfer-main {
|
||||
padding: 0px 10px 10px;
|
||||
height: 50vh;
|
||||
box-sizing: border-box;
|
||||
overflow: auto;
|
||||
}
|
||||
::v-deep .wl-transfer .transfer-title {
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
padding: 0 15px;
|
||||
height: 40px;
|
||||
margin-top: -2px;
|
||||
line-height: 40px;
|
||||
color: #333;
|
||||
font-size: 16px;
|
||||
background-color: #f5f7fa;
|
||||
}
|
||||
</style>
|
||||
142
src/views/energy-system/system/rateconfiguration.vue
Normal file
142
src/views/energy-system/system/rateconfiguration.vue
Normal file
@@ -0,0 +1,142 @@
|
||||
<template>
|
||||
<div style="padding: 0.5%">
|
||||
<!-- <el-col :span="12">
|
||||
<el-button type="primary" @click="Add" >新增</el-button>
|
||||
</el-col> -->
|
||||
<el-col :span="24" style="margin-top: 0.5%">
|
||||
<el-table :data="tableData" border style="width: 100%">
|
||||
<el-table-column
|
||||
align="center"
|
||||
prop="num"
|
||||
label="序号"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
prop="rateTypeName"
|
||||
label="费率类型"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
prop="rateTypeTime"
|
||||
label="时间段(时)"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
prop="rate"
|
||||
label="电费(元/kW/h)"
|
||||
></el-table-column>
|
||||
<el-table-column align="center" label="操作">
|
||||
<template slot-scope="scope">
|
||||
<el-button @click="edit(scope.row)" type="primary" size="mini"
|
||||
>配置</el-button
|
||||
>
|
||||
<!-- <el-button type="primary" size="small">删除</el-button> -->
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
<el-dialog
|
||||
:close-on-click-modal="false"
|
||||
title="配置"
|
||||
:visible.sync="dialogVisible"
|
||||
width="25%"
|
||||
:before-close="handleClose"
|
||||
>
|
||||
<el-form ref="form" :model="form" label-width="80px">
|
||||
<el-form-item label="费率类型">
|
||||
<el-input v-model="form.rateTypeName" style="width: 80%"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="时间段">
|
||||
<el-time-select
|
||||
style="width: 40%"
|
||||
placeholder="起始时间"
|
||||
v-model="startTime"
|
||||
:picker-options="{ start: '00:00', end: '24:00' }"
|
||||
></el-time-select>
|
||||
<el-time-select
|
||||
style="width: 40%"
|
||||
placeholder="结束时间"
|
||||
v-model="endTime"
|
||||
:picker-options="{ start: '00:00', end: '24:00' }"
|
||||
></el-time-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="电费">
|
||||
<el-input v-model="form.rate" style="width: 80%"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||
<el-button type="primary" @click="submint">确 定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import api from "@/api/energy/sysconfig";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
form: {
|
||||
rateTypeId: "",
|
||||
rateTypeName: "",
|
||||
rateTypeTime: "",
|
||||
rate: "",
|
||||
},
|
||||
tableData: [],
|
||||
startTime: "",
|
||||
endTime: "",
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
mounted() {
|
||||
this.queryData();
|
||||
},
|
||||
methods: {
|
||||
//查询获取列表详情
|
||||
queryData() {
|
||||
api.getEleRateDetail().then((res) => {
|
||||
if (res.code === "A0000") {
|
||||
var arr = [];
|
||||
var data = res.data;
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
var map = {
|
||||
num: i + 1,
|
||||
rateTypeId: data[i].rateTypeId,
|
||||
rateTypeName: data[i].rateTypeName,
|
||||
rateTypeTime: data[i].rateTypeTime,
|
||||
rate: data[i].rate,
|
||||
};
|
||||
arr.push(map);
|
||||
}
|
||||
this.tableData = arr;
|
||||
}
|
||||
});
|
||||
},
|
||||
edit(row) {
|
||||
this.dialogVisible = true;
|
||||
this.form.rateTypeId = row.rateTypeId;
|
||||
this.form.rateTypeName = row.rateTypeName;
|
||||
var str = row.rateTypeTime;
|
||||
var str1 = str.split("-");
|
||||
this.startTime = str1[0];
|
||||
this.endTime = str1[1];
|
||||
this.form.rate = row.rate;
|
||||
},
|
||||
submint() {
|
||||
var data = {
|
||||
id: this.form.rateTypeId,
|
||||
rate: this.form.rate,
|
||||
time: this.startTime + "-" + this.endTime,
|
||||
};
|
||||
api.add(data).then((res) => {
|
||||
if (res.code == "A0000") {
|
||||
this.$message.success("配置成功");
|
||||
this.dialogVisible = false;
|
||||
this.queryData();
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
434
src/views/energy-system/system/typeconfiguration.vue
Normal file
434
src/views/energy-system/system/typeconfiguration.vue
Normal file
@@ -0,0 +1,434 @@
|
||||
<template>
|
||||
<div style="padding: 0.5%">
|
||||
<!-- <el-col :span="12">
|
||||
<el-button type="primary" >新增</el-button>
|
||||
</el-col> -->
|
||||
<el-col :span="24" style="margin-top: 0.5%">
|
||||
<el-table :data="tableData" border style="width: 100%">
|
||||
<el-table-column
|
||||
align="center"
|
||||
prop="num"
|
||||
label="序号"
|
||||
width="0"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
align="center"
|
||||
prop="statisticalName"
|
||||
label="统计类型"
|
||||
></el-table-column>
|
||||
<el-table-column align="center" label="操作">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
@click="handleClick(scope.row)"
|
||||
type="primary"
|
||||
size="small"
|
||||
>绑定用能指标</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-col>
|
||||
<el-dialog
|
||||
:close-on-click-modal="false"
|
||||
title="电度统计指标配置"
|
||||
:visible.sync="dialogVisible"
|
||||
width="50%"
|
||||
:before-close="handleClose"
|
||||
>
|
||||
<!-- <el-transfer
|
||||
style="text-align: left; display: inline-block; overflow: auto;"
|
||||
v-model="value"
|
||||
filterable
|
||||
:render-content="renderFunc"
|
||||
:titles="['未绑定指标', '已绑定指标']"
|
||||
:button-texts="['解绑', '绑定']"
|
||||
:format="{
|
||||
noChecked: '${total}',
|
||||
hasChecked: '${checked}/${total}'
|
||||
}"
|
||||
@change="handleChange"
|
||||
:data="zbdata">
|
||||
</el-transfer> -->
|
||||
<div class="box">
|
||||
<!-- lazy -->
|
||||
<!-- :lazyFn="lazyFn" -->
|
||||
<tree-transfer
|
||||
ref="wl-tree-transfer"
|
||||
filter
|
||||
draggable
|
||||
high-light
|
||||
check-strictly
|
||||
: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>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import treeTransfer from "el-tree-transfer";
|
||||
import api from "@/api/energy/sysconfig";
|
||||
export default {
|
||||
computed: {
|
||||
title() {
|
||||
if (this.mode == "transfer") {
|
||||
return ["未绑定监测点", "已绑定监测点"];
|
||||
} else {
|
||||
return ["通讯录", "收件人", "抄送人", "密送人"];
|
||||
}
|
||||
},
|
||||
},
|
||||
components: { treeTransfer },
|
||||
data() {
|
||||
// const generateData = _ => {
|
||||
// const data = [];
|
||||
// for (var i=0;i<this.zbdata.length;i++) {
|
||||
// this.zbdata.push({
|
||||
// key: this.zbdata[i].id,
|
||||
// label: this.zbdata[i].name,
|
||||
// // disabled: i % 2 === 0
|
||||
// });
|
||||
// }
|
||||
// return data;
|
||||
// };
|
||||
return {
|
||||
mode: "transfer", // transfer addressList
|
||||
defaultProps: {
|
||||
label: "name",
|
||||
children: "children",
|
||||
/* disabled(data) {
|
||||
return data.id === 2;
|
||||
}, */
|
||||
},
|
||||
fromData: [], // 穿梭框 - 源数据 - 树形
|
||||
toData: [], // 穿梭框 - 目标数据 - 树形
|
||||
fromArray: [
|
||||
{
|
||||
id: "1",
|
||||
name: "1",
|
||||
pid: "0",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "2",
|
||||
pid: "0",
|
||||
},
|
||||
{
|
||||
id: "1-1",
|
||||
name: "1-1",
|
||||
pid: "1",
|
||||
},
|
||||
{
|
||||
id: "1-2",
|
||||
name: "1-2",
|
||||
pid: "1",
|
||||
},
|
||||
{
|
||||
id: "1-1-1",
|
||||
name: "1-1-1",
|
||||
pid: "1-1",
|
||||
},
|
||||
{
|
||||
id: "1-1-1-1",
|
||||
name: "1-1-1-1",
|
||||
pid: "1-1-1",
|
||||
},
|
||||
{
|
||||
id: "2-1",
|
||||
name: "2-1",
|
||||
pid: "2",
|
||||
},
|
||||
{
|
||||
id: "2-2",
|
||||
name: "2-2",
|
||||
pid: "2",
|
||||
},
|
||||
],
|
||||
toArray: [],
|
||||
defaultCheckedKeys: [], // 左侧默认选中数据
|
||||
dialogVisible: false,
|
||||
tableData: [],
|
||||
zbdata: [],
|
||||
bindId: [],
|
||||
// value: ['64592326d968dd07ffc0437befcfa026','100f4fadcf9a5e43b2b7b4161094cf1c'],
|
||||
rowId: "",
|
||||
renderFunc(h, option) {
|
||||
return <span>{option.label}</span>;
|
||||
},
|
||||
};
|
||||
},
|
||||
created() {},
|
||||
mounted() {
|
||||
this.queryData();
|
||||
},
|
||||
methods: {
|
||||
//获取指标树触发事件
|
||||
handleClick(row) {
|
||||
this.dialogVisible = true;
|
||||
this.rowId = row.statisticalId;
|
||||
var data = {
|
||||
statisticalId: row.statisticalId,
|
||||
statisticalName: row.statisticalName,
|
||||
};
|
||||
api.getEleStatisticalTree(data).then((res) => {
|
||||
if (res.code == "A0000") {
|
||||
// var data = res.data
|
||||
var noBinds = res.data.noBinds;
|
||||
var binds = res.data.binds;
|
||||
var arrL = [];
|
||||
var arrR = [];
|
||||
if (noBinds !== null && binds !== null) {
|
||||
for (var j = 0; j < binds.length; j++) {
|
||||
var p = {
|
||||
id: binds[j].id,
|
||||
pid: 0,
|
||||
name: binds[j].name,
|
||||
};
|
||||
arrR.push(p);
|
||||
}
|
||||
this.toData = arrR;
|
||||
for (var i = 0; i < noBinds.length; i++) {
|
||||
var p = {
|
||||
id: noBinds[i].id,
|
||||
pid: 0,
|
||||
name: noBinds[i].name,
|
||||
};
|
||||
arrL.push(p);
|
||||
}
|
||||
this.fromData = arrL;
|
||||
} else {
|
||||
this.fromData = [];
|
||||
this.toData = [];
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
handleChange(value, direction, movedKeys) {
|
||||
console.log(value, direction, movedKeys);
|
||||
console.log(movedKeys);
|
||||
},
|
||||
handleClose() {
|
||||
this.dialogVisible = false;
|
||||
},
|
||||
//获取列表数据
|
||||
queryData() {
|
||||
api.getEleStatisticalDetail().then((res) => {
|
||||
if (res.code == "A0000") {
|
||||
var arr = [];
|
||||
var data = res.data;
|
||||
for (var i = 0; i < data.length; i++) {
|
||||
var map = {
|
||||
num: i + 1,
|
||||
statisticalId: data[i].statisticalId,
|
||||
statisticalName: data[i].statisticalName,
|
||||
};
|
||||
arr.push(map);
|
||||
}
|
||||
this.tableData = arr;
|
||||
}
|
||||
});
|
||||
},
|
||||
//提交绑定
|
||||
submint() {
|
||||
this.dialogVisible = true;
|
||||
this.toData.forEach((item) => {
|
||||
this.bindId.push(item.id);
|
||||
});
|
||||
|
||||
var data = {
|
||||
id: this.rowId,
|
||||
ids: this.bindId,
|
||||
};
|
||||
api.getEleStatisticalAdd(data).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);
|
||||
},
|
||||
// 左侧源数据选中事件
|
||||
leftCheckChange(nodeObj, treeObj, checkAll) {
|
||||
console.log(nodeObj);
|
||||
console.log(treeObj);
|
||||
console.log(checkAll);
|
||||
},
|
||||
// 右侧目标数据选中事件
|
||||
rightCheckChange(nodeObj, treeObj, checkAll) {
|
||||
console.log(nodeObj);
|
||||
console.log(treeObj);
|
||||
console.log(checkAll);
|
||||
},
|
||||
// 自定义节点 仅树形结构支持
|
||||
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="less" scoped>
|
||||
::v-deep .el-transfer-panel__list {
|
||||
height: 20vh;
|
||||
overflow: auto;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.title {
|
||||
padding: 40px 0;
|
||||
}
|
||||
.box {
|
||||
width: 600px;
|
||||
margin: 0 auto;
|
||||
//height:50vh;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.btn {
|
||||
border: 1px solid #ebeef5;
|
||||
padding: 5px 10px;
|
||||
background-color: #f5f7fa;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.my-title-right {
|
||||
float: right;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
wl-transfer .el-tree {
|
||||
min-width: 100%;
|
||||
margin-bottom: 5px;
|
||||
|
||||
// height: 50vh;
|
||||
display: inline-block !important;
|
||||
}
|
||||
::v-deep .el-tree {
|
||||
position: relative;
|
||||
cursor: default;
|
||||
background: #f5f7fa;
|
||||
color: #000608;
|
||||
height: 22vh;
|
||||
overflow: auto;
|
||||
}
|
||||
::v-deep .wl-transfer .transfer-main {
|
||||
padding: 0px 10px 10px;
|
||||
height: 50vh;
|
||||
box-sizing: border-box;
|
||||
overflow: auto;
|
||||
}
|
||||
::v-deep .wl-transfer .transfer-title {
|
||||
border-bottom: 1px solid #ebeef5;
|
||||
padding: 0 15px;
|
||||
height: 40px;
|
||||
margin-top: -2px;
|
||||
line-height: 40px;
|
||||
color: #333;
|
||||
font-size: 16px;
|
||||
background-color: #f5f7fa;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user