0017
/
smart-power-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

提交：1. 统计分析 功能模块前端代码(只对接能源统计接口); 2. 整改部分页面使用弹窗选择表格 的组件

This commit is contained in:
23688nl 2022-10-20 16:26:12 +08:00
parent dceb330503
commit 6d2ba906c6
9 changed files with 1833 additions and 1426 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/api/iot/staistics.js Normal file
View File

@ -0,0 +1,9 @@
import request from '@/utils/request'
export function projectEnergy(query) {
return request({
url: '/iot/stat/projectEnergy',
method: 'get',
params: query
})
}

19
src/components/EDialogTableInput/src/main.vue
View File

@ -2,13 +2,16 @@
<div class="e-dialog-table-select">
<div @click="openTableSelectDialog">
<el-input
v-if="type === 'input' || !type"
:placeholder="'点击选择' + title"
v-model="value"
class="input-with-select"
:clearable="pclearable"
:disabled="disabled"
:size="psize"
suffix-icon="el-icon-caret-bottom"
/>
<el-button :disabled="disabled" type="primary" :size="psize" v-if="type === 'button'" @click="openTableSelectDialog">{{ '点击选择' + title }}</el-button>
</div>
<el-dialog
:title="'请选择__' + title"
@ -17,6 +20,7 @@
top="10vh"
class="select-table-dialog"
:close-on-click-modal="false"
append-to-body
>
<e-dynamic-table
v-if="selectTableShow"
@ -90,9 +94,7 @@ export default {
type: String,
default: "",
},
value: {
type: String,
},
value: String,
localKey: {
type: String,
default: "ZF_RECENT_KEY",
@ -125,6 +127,8 @@ export default {
};
},
},
type: String,
disabled: Boolean,
},
data() {
return {
@ -165,9 +169,13 @@ export default {
this.$emit("input", result[this.showFileName] || '');
this.$emit('change', result);
this.selectResult = null;
this.$forceUpdate();
},
// 开启 筛选表格
openTableSelectDialog() {
if(this.disabled) {
return;
}
this.selectResult = null;
this.selectTableShow = true;
},
@ -212,5 +220,10 @@ export default {
padding: 10px 20px;
}
}
.select-table-dialog {
.el-dialog__body {
padding: 10px 20px;
}
}
</style>

597
src/views/iot/device/index.vue
View File

@ -14,17 +14,6 @@
v-show="showSearch"
label-width="68px"
>
<!-- <el-form-item label="所属型号" prop="modelId">
<el-select v-model="queryParams.modelId" placeholder="所属型号" clearable size="small" @change="handleQuery">
<el-option
:label="doct.modelName"
v-for="doct in queryModelOpt"
:key="doct.modelId"
:value="doct.modelId"
/>
</el-select>
</el-form-item>-->
<el-form-item label="型号名称" prop="modelName">
<el-input
v-model="queryParams.modelName"
@ -262,10 +251,15 @@
>
<el-form ref="form" :model="form" :rules="rules" label-width="100px">
<el-form-item label="所属型号：" prop="modelId">
<el-input
<e-dialog-table-input
:table="selectModelTable"
:refurbishFun="listModel"
showFileName="modelName"
fileName="modelId,modelName,deviceType,prodKey"
v-model="form.modelName"
placeholder="点击选择型号"
@focus="openModelTableSelectDialog()"
title="型号"
psize="small"
@change="handleModelDialogEvent"
/>
</el-form-item>
@ -291,10 +285,15 @@
prop="parentId"
v-if="form.deviceType === 'MINIATURE_BREAKER'"
>
<el-input
<e-dialog-table-input
:table="selectDeviceTable"
:refurbishFun="listDevice"
showFileName="deviceName"
fileName="deviceId,deviceName"
v-model="form.parentName"
placeholder="点击选择父设备"
@focus="openTableSelectDialog()"
title="设备"
psize="small"
@change="handleDeviceDialogEvent"
/>
</el-form-item>
@ -330,7 +329,14 @@
/>
</el-form-item>
<el-form-item label="设备标签：" v-if="form.deviceType !== 'VIDEO_CONTROLLER' &&　form.deviceType !== 'GATEWAY_CONTROLLER'" prop="deviceTag">
<el-form-item
label="设备标签："
v-if="
form.deviceType !== 'VIDEO_CONTROLLER' &&
form.deviceType !== 'GATEWAY_CONTROLLER'
"
prop="deviceTag"
>
<el-select
v-model="form.deviceTag"
filterable
@ -364,41 +370,6 @@
<el-button size="mini" @click="cancel">取 消</el-button>
</div>
</el-dialog>
<el-dialog
title="选择"
:visible.sync="selectTableShow"
width="75%"
top="10vh"
class="select-table-dialog"
:close-on-click-modal="false"
>
<select-table-wrap
v-if="selectTableShow"
:tableOption="tableSelectOption.tableOpt"
:queryOption="tableSelectOption.queryOpt"
:tableList="tableSelectOption.tableList"
@parentGetList="childGetList($event)"
:otherOption="tableSelectOption.otherOption"
@returnEvent="returnEvent($event)"
/>
<div slot="footer" class="dialog-footer">
<el-button size="mini" type="primary" @click="resuleClick"
>确 定</el-button
>
<el-button
size="mini"
@click="
() => {
selectTableShow = false;
}
"
>取 消</el-button
>
</div>
</el-dialog>
<div
:class="
componectVal === 'GatewayDetail'
@ -427,10 +398,10 @@ import {
disassociateChild,
} from "@/api/iot/device";
import { listModel, getModel } from "@/api/iot/model";
import SelectTableWrap from "@/components/SelectTable/index";
import DetailsWrap from "./profile/details";
import ParamWrap from "@/components/ParamWrap/deviceParam";
import GatewayDetail from "@/views/profile/DeviceDetailsView/index";
import EDialogTableInput from "@/components/EDialogTableInput";
const deviceStatusOpt = {
ONLINE: "在线",
OFFLINE: "离线",
@ -442,24 +413,216 @@ const lineTypeOpt = {
BRANCH: "支路",
};
const selectModelTable = {
otherOption: {
tableType: "model",
},
queryOption: {
disable: false,
labelWidth: "68px",
params: {
protocolType: "",
modelName: "",
},
inline: true,
queryChilds: [
{
style: "",
placeholder: "型号名称",
clearable: true,
label: "型号名称",
type: "input",
key: "modelName",
size: "small",
value: "",
},
{
style: "",
placeholder: "协议类型",
clearable: true,
label: "协议类型",
type: "select",
key: "protocolType",
size: "small",
value: "",
options: [
// {
// key: "IOTOS",
// label: "iot平台",
// value: "IOTOS"
// },
// {
// key: "ONENET",
// label: "ONENET",
// value: "ONENET"
// },
{
key: "OFFICIAL",
label: "官方平台",
value: "OFFICIAL",
},
],
optionKey: {
key: "key",
label: "label",
value: "value",
},
},
],
},
tableOption: {
loading: false,
rowKey: "deviceId",
selection: false,
maxHeight: "45vh",
childs: [
{
style: "",
label: "厂商名称",
type: "",
prop: "vendorName",
align: "left",
width: "200",
"show-overflow-tooltip": false,
tempType: "span",
},
{
style: "",
label: "型号名称",
type: "",
prop: "modelName",
align: "left",
width: "200",
"show-overflow-tooltip": false,
tempType: "span",
},
{
style: "",
label: "设备类型",
type: "",
prop: "deviceTypeName",
align: "left",
width: "120",
"show-overflow-tooltip": false,
tempType: "span",
},
{
style: "",
label: "产品PK",
type: "",
prop: "prodKey",
align: "left",
width: "",
"show-overflow-tooltip": false,
tempType: "span",
},
{
style: "",
label: "产品密钥",
type: "",
prop: "prodSecret",
align: "left",
width: "",
"show-overflow-tooltip": false,
tempType: "span",
},
],
},
};
const selectDeviceTable = {
otherOption: {
tableType: "device",
},
queryOption: {
disable: false,
labelWidth: "68px",
params: {
deviceName: "",
deviceType: "GATEWAY_CONTROLLER",
},
inline: true,
queryChilds: [
{
style: "",
placeholder: "设备名称",
clearable: true,
label: "设备名称",
type: "input",
key: "deviceName",
size: "small",
value: "",
},
],
},
tableOption: {
loading: false,
rowKey: "deviceId",
selection: false,
maxHeight: "45vh",
childs: [
{
style: "",
label: "所属型号",
type: "",
prop: "modelName",
align: "left",
width: "",
"show-overflow-tooltip": false,
tempType: "span",
},
{
style: "",
label: "设备名称",
type: "",
prop: "deviceName",
align: "left",
width: "",
"show-overflow-tooltip": false,
tempType: "span",
},
{
style: "",
label: "设备Key",
type: "",
prop: "deviceKey",
align: "left",
width: "",
"show-overflow-tooltip": false,
tempType: "span",
},
{
style: "",
label: "创建时间",
type: "time",
prop: "createTime",
align: "center",
width: "160",
"show-overflow-tooltip": false,
tempType: "span",
},
],
tableList: {
type: Array,
},
},
};
export default {
name: "systemDevice",
components: {
SelectTableWrap,
DetailsWrap,
ParamWrap,
GatewayDetail,
EDialogTableInput,
},
data() {
return {
deviceStatusOpt,
selectModelTable,
selectDeviceTable,
lineTypeOpt,
sourceId: "",
componectVal: "",
selectTableShow: false,
tableSelectOption: {},
selectResult: {},
queryModelOpt: [],
// 遮罩层
loading: true,
// 选中数组
@ -519,7 +682,7 @@ export default {
],
deviceTag: [
{ required: true, message: "设备标签不能为空", trigger: "change" },
]
],
},
deviceTypeList: {},
deviceTagList: [],
@ -530,6 +693,20 @@ export default {
this.init();
},
methods: {
listModel,
listDevice,
handleModelDialogEvent(e) {
this.getModelInfoById(e.modelId);
this.form.modelId = e.modelId;
this.form.modelName = e.modelName;
this.form.deviceType = e.deviceType;
this.form.prodKey = e.prodKey;
this.deviceTypeChange(this.form.deviceType);
},
handleDeviceDialogEvent(e) {
this.form.parentId = e.deviceId;
this.form.parentName = e.deviceName;
},
// 字典状态字典翻译
statusFormat(row, column) {
return this.selectDictLabel(this.deviceTagList, row.deviceTag);
@ -542,7 +719,6 @@ export default {
this.deviceTagList = response.data;
});
this.getDeviceTypeList();
this.initGetModelList();
this.getList();
},
sortChange(column) {
@ -572,309 +748,12 @@ export default {
}
this.componectVal = "";
},
// 打开厂商选择窗口 ——表格
openModelTableSelectDialog() {
this.selectResult = {};
this.tableSelectOption = {
otherOption: {
tableType: "model",
},
queryOpt: {
disable: false,
labelWidth: "68px",
params: {
protocolType: "",
modelName: "",
},
page: {
pageSize: 10,
pageNum: 1,
total: 0,
},
inline: true,
queryChilds: [
{
style: "",
placeholder: "型号名称",
clearable: true,
label: "型号名称",
type: "input",
key: "modelName",
size: "small",
value: "",
},
{
style: "",
placeholder: "协议类型",
clearable: true,
label: "协议类型",
type: "select",
key: "protocolType",
size: "small",
value: "",
options: [
// {
// key: "IOTOS",
// label: "iot平台",
// value: "IOTOS"
// },
// {
// key: "ONENET",
// label: "ONENET",
// value: "ONENET"
// },
{
key: "OFFICIAL",
label: "官方平台",
value: "OFFICIAL",
},
],
optionKey: {
key: "key",
label: "label",
value: "value",
},
},
],
},
tableOpt: {
loading: false,
rowKey: "deviceId",
selection: false,
maxHeight: "45vh",
childs: [
{
style: "",
label: "厂商名称",
type: "",
prop: "vendorName",
align: "left",
width: "200",
"show-overflow-tooltip": false,
tempType: "span",
},
{
style: "",
label: "型号名称",
type: "",
prop: "modelName",
align: "left",
width: "200",
"show-overflow-tooltip": false,
tempType: "span",
},
{
style: "",
label: "设备类型",
type: "",
prop: "deviceTypeName",
align: "left",
width: "120",
"show-overflow-tooltip": false,
tempType: "span",
},
{
style: "",
label: "产品PK",
type: "",
prop: "prodKey",
align: "left",
width: "",
"show-overflow-tooltip": false,
tempType: "span",
},
{
style: "",
label: "产品密钥",
type: "",
prop: "prodSecret",
align: "left",
width: "",
"show-overflow-tooltip": false,
tempType: "span",
},
],
tableList: {
type: Array,
},
},
tableList: [],
};
this.selectTableShow = true;
},
// 打开设备选择窗口 ——表格
openTableSelectDialog() {
this.selectResult = {};
this.tableSelectOption = {
otherOption: {
tableType: "device",
},
queryOpt: {
disable: false,
labelWidth: "68px",
params: {
deviceName: "",
deviceType: "GATEWAY_CONTROLLER",
// parentId: '0'
},
page: {
pageSize: 10,
pageNum: 1,
total: 0,
},
inline: true,
queryChilds: [
{
style: "",
placeholder: "设备名称",
clearable: true,
label: "设备名称",
type: "input",
key: "deviceName",
size: "small",
value: "",
},
],
},
tableOpt: {
loading: false,
rowKey: "deviceId",
selection: false,
maxHeight: "45vh",
childs: [
{
style: "",
label: "所属型号",
type: "",
prop: "modelName",
align: "left",
width: "",
"show-overflow-tooltip": false,
tempType: "span",
},
{
style: "",
label: "设备名称",
type: "",
prop: "deviceName",
align: "left",
width: "",
"show-overflow-tooltip": false,
tempType: "span",
},
{
style: "",
label: "设备Key",
type: "",
prop: "deviceKey",
align: "left",
width: "",
"show-overflow-tooltip": false,
tempType: "span",
},
{
style: "",
label: "创建时间",
type: "time",
prop: "createTime",
align: "center",
width: "160",
"show-overflow-tooltip": false,
tempType: "span",
},
],
tableList: {
type: Array,
},
},
tableList: [],
};
this.selectTableShow = true;
},
// 查询回调
childGetList(data) {
if (data.otherOption.tableType === "device") {
this.deviceChildList(data);
} else if (data.otherOption.tableType === "model") {
this.modelChildList(data);
}
},
initGetModelList() {
listModel({
pageNum: 1,
pageSize: 99999,
}).then((response) => {
this.queryModelOpt = response.rows;
});
},
modelChildList(data) {
listModel(Object.assign(data.page, data.param, { selected: 1 })).then(
(response) => {
this.tableSelectOption.tableList = response.rows;
this.tableSelectOption.queryOpt.page.total = Number(response.total);
}
);
},
deviceChildList(data) {
listDevice(Object.assign(data.page, data.param, { selected: 1 })).then(
(response) => {
this.tableSelectOption.tableList = response.rows;
this.tableSelectOption.queryOpt.page.total = Number(response.total);
}
);
},
// 根据 型号id 获取 型号详情
getModelInfoById(modelId) {
getModel(modelId).then((res) => {
this.$refs.paramWrap.setList(res.data.paramList || []);
});
},
// 点击或者双击数据回调
returnEvent(data) {
if (data.type === "dblclick") {
if (data.otherOption.tableType === "device") {
this.form.parentId = data.value.deviceId;
this.form.parentName = data.value.deviceName;
} else if (data.otherOption.tableType === "model") {
this.getModelInfoById(data.value.modelId);
this.form.modelId = data.value.modelId;
this.form.modelName = data.value.modelName;
this.form.deviceType = data.value.deviceType;
this.form.prodKey = data.value.prodKey;
this.deviceTypeChange(this.form.deviceType);
}
this.selectTableShow = false;
} else if (data.type === "click") {
this.selectResult = {};
if (data.otherOption.tableType === "device") {
this.selectResult.parentId = data.value.deviceId;
this.selectResult.parentName = data.value.deviceName;
} else if (data.otherOption.tableType === "model") {
this.selectResult.modelId = data.value.modelId;
this.selectResult.modelName = data.value.modelName;
this.selectResult.deviceType = data.value.deviceType;
// this.selectResult.paramList = data.value.paramList;
this.selectResult.prodKey = data.value.prodKey;
}
this.selectResult.tableType = data.otherOption.tableType;
}
},
// 点击确定按钮
resuleClick() {
if (this.selectResult.tableType === "device") {
this.form.parentId = this.selectResult.parentId;
this.form.parentName = this.selectResult.parentName;
} else if (this.selectResult.tableType === "model") {
this.form.modelId = this.selectResult.modelId;
this.form.prodKey = this.selectResult.prodKey;
this.form.modelName = this.selectResult.modelName;
this.form.deviceType = this.selectResult.deviceType;
this.deviceTypeChange(this.form.deviceType);
this.getModelInfoById(this.selectResult.modelId);
// this.$refs.paramWrap.setList(this.selectResult.paramList || []);
}
this.selectTableShow = false;
},
deviceTypeChange(val) {
if (val !== "MINIATURE_BREAKER") {
this.form.parentId = 0;
@ -916,7 +795,7 @@ export default {
paramList: [],
deviceKey: "",
lineType: undefined,
deviceTag: '',
deviceTag: "",
};
this.resetForm("form");
},

674
src/views/iot/project/index.vue
View File

@ -1,6 +1,10 @@
<template>
<div class="app-container iot-project">
<component :is="componectVal" :sourceId="sourceId" @linkToTable="linkToTable"></component>
<component
:is="componectVal"
:sourceId="sourceId"
@linkToTable="linkToTable"
></component>
<div v-show="componectVal === ''">
<el-form
@ -20,7 +24,12 @@
/>
</el-form-item>
<el-form-item label="项目类型" prop="industry">
<el-select v-model="queryParams.industry" placeholder="请选择项目类型" clearable size="small">
<el-select
v-model="queryParams.industry"
placeholder="请选择项目类型"
clearable
size="small"
>
<el-option
v-for="dict in projectTypeOptions"
:key="dict.dictValue"
@ -30,8 +39,16 @@
</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-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>
@ -44,15 +61,19 @@
size="mini"
@click="handleAdd"
v-hasPermi="['iot:project:add']"
>新增</el-button>
>新增</el-button
>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
<right-toolbar
:showSearch.sync="showSearch"
@queryTable="getList"
></right-toolbar>
</el-row>
<el-table
v-loading="loading"
:data="projectList"
:default-sort="{prop: 'createTime', order: 'descending'}"
:default-sort="{ prop: 'createTime', order: 'descending' }"
@sort-change="sortChange"
>
<el-table-column
@ -62,7 +83,12 @@
:index="indexFormatter"
width="80px"
></el-table-column>
<el-table-column label="项目名称" width="200px" align="left" prop="projectName" />
<el-table-column
label="项目名称"
width="200px"
align="left"
prop="projectName"
/>
<el-table-column
label="项目类型"
align="center"
@ -70,8 +96,13 @@
:formatter="statusFormat"
prop="industry"
/>
<el-table-column label="行政区划" align="left" width="250" prop="regionalismFullName" />
<el-table-column label="项目地址" align="left" prop="projectAddress" >
<el-table-column
label="行政区划"
align="left"
width="250"
prop="regionalismFullName"
/>
<el-table-column label="项目地址" align="left" prop="projectAddress">
<template slot-scope="scope">
<span class="lay-table-textarea" :title="scope.row.projectAddress">
{{ scope.row.projectAddress }}
@ -97,21 +128,24 @@
type="text"
icon="el-icon-search"
@click="handleDetails(scope.row)"
>详情</el-button>
>详情</el-button
>
<el-button
size="mini"
type="text"
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['iot:project:edit']"
>修改</el-button>
>修改</el-button
>
<el-button
size="mini"
type="text"
icon="el-icon-delete"
@click="handleDelete(scope.row)"
v-hasPermi="['iot:project:remove']"
>删除</el-button>
>删除</el-button
>
</template>
</el-table-column>
</el-table>
@ -125,23 +159,37 @@
/>
<!-- 添加或修改项目对话框 -->
<dialog-template :title="title" :visible="open" @close="open = false"
<dialog-template
:title="title"
:visible="open"
@close="open = false"
class="eldialog-wrap"
width="720px"
>
<el-form ref="form" :model="form" :rules="rules" label-width="100px" slot="dialog-center">
<el-form
ref="form"
:model="form"
:rules="rules"
label-width="100px"
slot="dialog-center"
>
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="项目名称:" prop="projectName">
<el-input v-model="form.projectName" placeholder="请输入项目名称" />
<el-input
v-model="form.projectName"
placeholder="请输入项目名称"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="项目类型:" prop="industry">
<el-select v-model="form.industry" style="width: 100%;" placeholder="请选择项目类型">
<el-select
v-model="form.industry"
style="width: 100%"
placeholder="请选择项目类型"
>
<el-option
v-for="dict in projectTypeOptions"
:key="dict.dictValue"
@ -153,11 +201,19 @@
</el-col>
</el-row>
<el-form-item label="电价合同:" >
<el-input v-model="form.contractName" suffix-icon="el-icon-caret-bottom" @focus="inputFocusContract()" placeholder="请输入电价合同" />
<el-form-item label="电价合同:">
<e-dialog-table-input
:table="selectPriceTable"
:refurbishFun="listContract"
showFileName="contractName"
fileName="contractId,contractName"
v-model="form.contractName"
title="合同"
psize="small"
@change="handleProiceDialogEvent"
/>
</el-form-item>
<el-form-item label="行政区划" prop="regionalismId">
<!-- <el-input v-model="form.regionalismId" placeholder="请输入行政区划代码" /> -->
<treeselect
@ -173,13 +229,21 @@
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="项目经度" prop="projectLng">
<el-input v-model="form.projectLng" disabled placeholder="请输入项目经度" />
<el-input
v-model="form.projectLng"
disabled
placeholder="请输入项目经度"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="项目纬度" prop="projectLat">
<el-input v-model="form.projectLat" disabled placeholder="请输入项目纬度" />
<el-input
v-model="form.projectLat"
disabled
placeholder="请输入项目纬度"
/>
</el-form-item>
</el-col>
</el-row>
@ -200,24 +264,28 @@
trigger="manual"
v-model="visible"
>
<i slot="reference" class="el-icon-map-location" @click="mapClick"></i>
<i
slot="reference"
class="el-icon-map-location"
@click="mapClick"
></i>
<!-- 地图模块选择和设置 -->
<slot>
<el-row>
<el-col :span="7">
<span>经度：{{mapForm.lng}}</span>
<span>经度：{{ mapForm.lng }}</span>
</el-col>
<el-col :span="7">
<span>纬度：{{mapForm.lat}}</span>
<span>纬度：{{ mapForm.lat }}</span>
</el-col>
<el-col :span="10">
<span>地址：{{mapForm.address}}</span>
<span>地址：{{ mapForm.address }}</span>
</el-col>
</el-row>
<shop-location
v-if="visible === true"
style="height: 300px;"
style="height: 300px"
:mapCenter="mapCenter"
:draggable="true"
@mapEvent="mapEvent"
@ -234,7 +302,9 @@
margin-top: 5px;
"
>
<el-button type="primary" @click="mapSureClick">确 定</el-button>
<el-button type="primary" @click="mapSureClick"
>确 定</el-button
>
<el-button @click="visible = false">取 消</el-button>
</div>
</slot>
@ -247,60 +317,54 @@
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="联系方式1" prop="contacts1">
<el-input v-model="form.contacts1" placeholder="请输入联系方式1" />
<el-input
v-model="form.contacts1"
placeholder="请输入联系方式1"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="联系方式2" prop="contacts2">
<el-input v-model="form.contacts2" placeholder="请输入联系方式2" />
<el-input
v-model="form.contacts2"
placeholder="请输入联系方式2"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="联系方式3" prop="contacts3">
<el-input v-model="form.contacts3" placeholder="请输入联系方式3" />
<el-input
v-model="form.contacts3"
placeholder="请输入联系方式3"
/>
</el-form-item>
</el-col>
</el-row>
<el-form-item label="总路设备:" >
<el-input v-model="form.projectDeviceName" suffix-icon="el-icon-caret-bottom" @focus="openTableSelectDialog()" placeholder="请输入总路设备" />
<el-form-item label="总路设备:">
<e-dialog-table-input
:table="selectDeviceTable"
:refurbishFun="listDevice"
showFileName="deviceName"
fileName="deviceId,deviceName"
v-model="form.projectDeviceName"
title="设备"
psize="small"
@change="handleDeviceDialogEvent"
/>
</el-form-item>
</el-form>
<div slot="dialog-footer" class="dialog-footer">
<el-button size="mini" type="primary" @click="submitForm">确 定</el-button>
<el-button size="mini" type="primary" @click="submitForm"
>确 定</el-button
>
<el-button size="mini" @click="cancel">取 消</el-button>
</div>
</dialog-template>
</div>
<el-dialog
title="选择"
:visible.sync="selectTableShow"
width="75%"
top="10vh"
class="select-table-dialog"
:close-on-click-modal="false"
>
<select-table-wrap
v-if="selectTableShow"
:tableOption="tableSelectOption.tableOpt"
:queryOption="tableSelectOption.queryOpt"
:tableList="tableSelectOption.tableList"
@parentGetList="childGetList($event)"
:otherOption="tableSelectOption.otherOption"
@returnEvent="returnEvent($event)"
/>
<div slot="footer" class="dialog-footer">
<el-button size="mini" type="primary" @click="resultClick">确 定</el-button>
<el-button size="mini" @click="() =>{selectTableShow = false}">取 消</el-button>
</div>
</el-dialog>
<!-- <div class="to-home-wrap2" @click="linkToTable" v-show="componectVal !== ''">
<el-button icon="el-icon-d-arrow-left" title="返回列表" circle>返回列表</el-button>
</div> -->
@ -314,25 +378,172 @@ import {
delProject,
addProject,
updateProject,
exportProject
exportProject,
} from "@/api/iot/project";
import {
listDevice
} from "@/api/iot/device";
import {
listContract
} from "@/api/iot/contract";
import { listDevice } from "@/api/iot/device";
import { listContract } from "@/api/iot/contract";
import { listRegionalism } from "@/api/system/regionalism";
import { initMap, gjzCode } from "@/utils/latlngFromAddress.js";
import ShopLocation from "@/components/Amap/components/shopLocation/index";
import DetailsWrap from "./profile/details";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import SelectTableWrap from "@/components/SelectTable/index";
import DialogTemplate from "@/components/DialogTemplate/index";
import EDialogTableInput from "@/components/EDialogTableInput";
/////、、、、、、、、、、、、、、、、、、、、
import DetailsWrapNew from './profileV2/details'
import EDetailsWrap from "./profileV2/details";
const selectDeviceTable = {
otherOption: {
tableType: "device",
},
queryOption: {
disable: false,
labelWidth: "68px",
params: {
deviceName: "",
parentId: 0,
deviceType: "MINIATURE_BREAKER",
},
inline: true,
queryChilds: [
{
style: "",
placeholder: "设备名称",
clearable: true,
label: "设备名称",
type: "input",
key: "deviceName",
size: "small",
value: "",
},
],
},
tableOption: {
loading: false,
rowKey: "deviceId",
selection: false,
maxHeight: "45vh",
childs: [
{
style: "",
label: "所属型号",
type: "",
prop: "modelName",
align: "left",
width: "",
"show-overflow-tooltip": false,
tempType: "span",
},
{
style: "",
label: "设备名称",
type: "",
prop: "deviceName",
align: "left",
width: "",
"show-overflow-tooltip": false,
tempType: "span",
},
{
style: "",
label: "设备Key",
type: "",
prop: "deviceKey",
align: "left",
width: "",
"show-overflow-tooltip": false,
tempType: "span",
},
{
style: "",
label: "创建时间",
type: "time",
prop: "createTime",
align: "center",
width: "160",
"show-overflow-tooltip": false,
tempType: "span",
},
],
},
};
const selectPriceTable = {
otherOption: {
tableType: "project",
},
queryOption: {
disable: false,
labelWidth: "68px",
params: {
contractName: "",
modelCode: "",
},
page: {
pageSize: 10,
pageNum: 1,
total: 0,
},
inline: true,
queryChilds: [
{
style: "",
placeholder: "合同名称",
clearable: true,
label: "合同名称",
type: "input",
key: "contractName",
size: "small",
value: "",
},
],
},
tableOption: {
loading: false,
rowKey: "deviceId",
selection: false,
maxHeight: "45vh",
childs: [
{
style: "",
label: "合同名称",
type: "",
prop: "contractName",
align: "left",
width: "",
"show-overflow-tooltip": false,
tempType: "span",
},
{
style: "",
label: "计价类型",
type: "",
prop: "contractType",
align: "left",
width: "",
"show-overflow-tooltip": false,
tempType: "strType",
option: {
PEAK_VALLEY: "峰谷时段计价",
LADDER: "阶梯计价",
},
},
{
style: "",
label: "状态",
type: "",
prop: "status",
align: "left",
width: "",
"show-overflow-tooltip": false,
tempType: "text1",
},
],
},
};
export default {
name: "Project",
@ -340,12 +551,14 @@ export default {
ShopLocation,
Treeselect,
DetailsWrap,
SelectTableWrap,
DetailsWrapNew,
DialogTemplate
EDetailsWrap,
DialogTemplate,
EDialogTableInput,
},
data() {
return {
selectPriceTable,
selectDeviceTable,
selectTableShow: false,
tableSelectOption: {},
selectResult: {},
@ -377,35 +590,35 @@ export default {
projectAddress: null,
projectStatus: null,
orderByColumn: "createTime",
isAsc: "desc"
isAsc: "desc",
},
// 表单参数
form: {},
// 表单校验
rules: {
projectName: [
{ required: true, message: "项目名称不能为空", trigger: "blur" }
{ required: true, message: "项目名称不能为空", trigger: "blur" },
],
industry: [
{ required: true, message: "项目类型不能为空", trigger: "blur" }
{ required: true, message: "项目类型不能为空", trigger: "blur" },
],
regionalismId: [
{ required: true, message: "行政区划不能为空", trigger: "change" }
{ required: true, message: "行政区划不能为空", trigger: "change" },
],
projectAddress: [
{ required: true, message: "项目地址不能为空", trigger: "change" }
{ required: true, message: "项目地址不能为空", trigger: "change" },
],
projectLng: [
{ required: true, message: "经度不能为空", trigger: "change" }
{ required: true, message: "经度不能为空", trigger: "change" },
],
projectLat: [
{ required: true, message: "纬度不能为空", trigger: "change" }
]
{ required: true, message: "纬度不能为空", trigger: "change" },
],
},
projectTypeOptions: [],
mapCenter: {
lng: 119.459889,
lat: 25.98974
lat: 25.98974,
},
baiduMapKey: "N05AG95Umzs3fouk6WpFqtGxcDlw0fRn",
zoom: 15,
@ -417,255 +630,36 @@ export default {
regionalismOption: [],
componectVal: "",
sourceId: "",
userType: ''
userType: "",
};
},
created() {
if (this.$route.query['projectId']) {
this.handleDetails(this.$route.query)
if (this.$route.query["projectId"]) {
this.handleDetails(this.$route.query);
}
this.getDicts("project_industry").then(response => {
this.getDicts("project_industry").then((response) => {
this.projectTypeOptions = response.data;
});
this.getList();
this.getTreeselect();
},
methods: {
// 打开设备选择窗口 ——表格
openTableSelectDialog() {
this.selectResult = {};
this.tableSelectOption = {
otherOption: {
tableType: "device"
listContract,
listDevice,
handleProiceDialogEvent(e) {
this.form.contractId = e.contractId;
this.form.contractName = e.contractName;
this.$forceUpdate();
},
queryOpt: {
disable: false,
labelWidth: "68px",
params: {
deviceName: "",
modelId: "",
parentId: 0,
deviceType: "MINIATURE_BREAKER"
},
page: {
pageSize: 10,
pageNum: 1,
total: 0
},
inline: true,
queryChilds: [
{
style: "",
placeholder: "设备名称",
clearable: true,
label: "设备名称",
type: "input",
key: "deviceName",
size: "small",
value: ""
}
]
},
tableOpt: {
loading: false,
rowKey: "deviceId",
selection: false,
maxHeight: "45vh",
childs: [
{
style: "",
label: "所属型号",
type: "",
prop: "modelName",
align: "left",
width: "",
"show-overflow-tooltip": false,
tempType: "span"
},
{
style: "",
label: "设备名称",
type: "",
prop: "deviceName",
align: "left",
width: "",
"show-overflow-tooltip": false,
tempType: "span"
},
{
style: "",
label: "设备Key",
type: "",
prop: "deviceKey",
align: "left",
width: "",
"show-overflow-tooltip": false,
tempType: "span"
},
{
style: "",
label: "创建时间",
type: "time",
prop: "createTime",
align: "center",
width: "160",
"show-overflow-tooltip": false,
tempType: "span"
}
],
tableList: {
type: Array
}
},
tableList: []
};
this.selectTableShow = true;
},
// 开启 电价合同选择的 弹窗
inputFocusContract() {
this.selectResult = {};
this.tableSelectOption = {
otherOption: {
tableType: "model"
},
queryOpt: {
disable: false,
labelWidth: "68px",
params: {
contractName: "",
modelCode: ""
},
page: {
pageSize: 10,
pageNum: 1,
total: 0
},
inline: true,
queryChilds: [
{
style: "",
placeholder: "合同名称",
clearable: true,
label: "合同名称",
type: "input",
key: "contractName",
size: "small",
value: ""
}
]
},
tableOpt: {
loading: false,
rowKey: "deviceId",
selection: false,
maxHeight: "45vh",
childs: [
{
style: "",
label: "合同名称",
type: "",
prop: "contractName",
align: "left",
width: "",
"show-overflow-tooltip": false,
tempType: "span"
},
{
style: "",
label: "计价类型",
type: "",
prop: "contractType",
align: "left",
width: "",
"show-overflow-tooltip": false,
tempType: "strType",
option: {
PEAK_VALLEY: "峰谷时段计价",
LADDER: "阶梯计价"
}
},
{
style: "",
label: "状态",
type: "",
prop: "status",
align: "left",
width: "",
"show-overflow-tooltip": false,
tempType: "text1"
}
],
tableList: {
type: Array
}
},
tableList: []
};
this.selectTableShow = true;
},
// 查询回调
childGetList(data) {
if (data.otherOption.tableType === "device") {
this.deviceChildList(data);
} else if (data.otherOption.tableType === "model") {
this.getListContract(data);
}
},
// 电价合同查询
getListContract(data) {
listContract(Object.assign(data.page, data.param, { selected: 1 })).then(
response => {
this.tableSelectOption.tableList = response.rows;
this.tableSelectOption.queryOpt.page.total = Number(response.total);
}
);
},
deviceChildList(data) {
listDevice(Object.assign(data.page, data.param, { selected: 1 })).then(
response => {
this.tableSelectOption.tableList = response.rows;
this.tableSelectOption.queryOpt.page.total = Number(response.total);
}
);
},
// 点击或者双击数据回调
returnEvent(data) {
if (data.type === "dblclick") {
if (data.otherOption.tableType === "device") {
this.form.projectDevice = data.value.deviceId;
this.form.projectDeviceName = data.value.deviceName;
} else if (data.otherOption.tableType === "model") {
this.form.contractId = data.value.contractId;
this.form.contractName = data.value.contractName;
}
this.selectTableShow = false;
} else if (data.type === "click") {
this.selectResult = {};
if (data.otherOption.tableType === "device") {
this.selectResult.projectDevice = data.value.deviceId;
this.selectResult.projectDeviceName = data.value.deviceName;
} else if (data.otherOption.tableType === "model") {
this.selectResult.contractId = data.value.contractId;
this.selectResult.contractName = data.value.contractName;
}
this.selectResult.tableType = data.otherOption.tableType;
}
},
// 点击确定按钮
resultClick() {
if (this.selectResult.tableType === "device") {
this.form.projectDevice = this.selectResult.projectDevice;
this.form.projectDeviceName = this.selectResult.projectDeviceName;
} else if (this.selectResult.tableType === "model") {
this.form.contractId = this.selectResult.contractId;
this.form.contractName = this.selectResult.contractName;
}
this.selectTableShow = false;
handleDeviceDialogEvent(e) {
this.form.projectDevice = e.deviceId;
this.form.projectDeviceName = e.deviceName;
this.$forceUpdate();
},
sortChange(column) {
const sort = {
isAsc: column.order === "descending" ? "desc" : "asc",
orderByColumn: column.prop
orderByColumn: column.prop,
};
this.queryParams = Object.assign(this.queryParams, sort);
this.handleQuery();
@ -677,12 +671,12 @@ export default {
},
handleDetails(row) {
this.sourceId = row.projectId;
this.componectVal = "DetailsWrapNew";
this.componectVal = "EDetailsWrap";
},
// 跳转详情页
linkToTable() {
if (this.$route.query['projectId']) {
this.$router.push('/project/project')
if (this.$route.query["projectId"]) {
this.$router.push("/project/project");
}
this.componectVal = "";
},
@ -692,12 +686,12 @@ export default {
},
/** 查询行政区划下拉树结构 */
getTreeselect() {
listRegionalism().then(response => {
listRegionalism().then((response) => {
this.regionalismOption = [];
const data = {
regionalismId: 0,
regionalismName: "中国",
children: []
children: [],
};
data.children = this.handleTree(
response.data,
@ -715,13 +709,13 @@ export default {
return {
id: node.regionalismId,
label: node.regionalismName,
children: node.children
children: node.children,
};
},
regionalismChange(val) {
this.mapCenter = {
lng: val.stationLng,
lat: val.stationLat
lat: val.stationLat,
};
this.form.projectLng = val.stationLng;
this.form.projectLat = val.stationLat;
@ -751,7 +745,7 @@ export default {
} else {
this.mapCenter = {
lng: 119.459889,
lat: 25.98974
lat: 25.98974,
};
this.mapForm.lng = 119.459889;
this.mapForm.lat = 25.98974;
@ -774,7 +768,7 @@ export default {
gjzCode(this.form.projectAddress, this, {
form: "form",
lat: "shopLat",
lng: "shopLng"
lng: "shopLng",
});
}
},
@ -782,7 +776,7 @@ export default {
/** 查询项目列表 */
getList() {
this.loading = true;
listProject(this.queryParams).then(response => {
listProject(this.queryParams).then((response) => {
this.projectList = response.rows;
this.total = response.total;
this.loading = false;
@ -802,7 +796,7 @@ export default {
projectAddress: null,
projectLng: null,
projectLat: null,
projectDevice: '',
projectDevice: "",
};
this.resetForm("form");
},
@ -818,7 +812,7 @@ export default {
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.projectId);
this.ids = selection.map((item) => item.projectId);
this.single = selection.length !== 1;
this.multiple = !selection.length;
},
@ -832,7 +826,7 @@ export default {
handleUpdate(row) {
this.reset();
const projectId = row.projectId || this.ids;
getProject(projectId).then(response => {
getProject(projectId).then((response) => {
this.form = response.data;
this.open = true;
this.title = "修改项目";
@ -840,16 +834,16 @@ export default {
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate(valid => {
this.$refs["form"].validate((valid) => {
if (valid) {
if (this.form.projectId != null) {
updateProject(this.form).then(response => {
updateProject(this.form).then((response) => {
this.msgSuccess("修改成功");
this.open = false;
this.getList();
});
} else {
addProject(this.form).then(response => {
addProject(this.form).then((response) => {
this.msgSuccess("新增成功");
this.open = false;
this.getList();
@ -864,9 +858,9 @@ export default {
this.$confirm("是否删除该选项?", "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
type: "warning",
})
.then(function() {
.then(function () {
return delProject(projectIds);
})
.then(() => {
@ -880,16 +874,16 @@ export default {
this.$confirm("是否确认导出所有项目数据项?", "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
type: "warning",
})
.then(function() {
.then(function () {
return exportProject(queryParams);
})
.then(response => {
.then((response) => {
this.download(response.msg);
});
}
}
},
},
};
</script>
<style lang="scss">

311
src/views/iot/statistics/chain/index.vue Normal file
View File

@ -0,0 +1,311 @@
<template>
<div class="app-container el-compared-container">
<el-form
:model="queryParams"
ref="queryForm"
:inline="true"
label-width="68px"
>
<el-form-item label="项目名称" prop="projectName">
<e-dialog-table-input
:table="selectTable"
:refurbishFun="listProject"
showFileName="projectName"
fileName="projectId,projectName"
v-model="queryParams.projectName"
:preference="true"
title="项目"
psize="small"
@change="handleDialogEvent"
/>
</el-form-item>
<el-form-item label="时间" prop="time">
<el-date-picker v-model="time" type="month" placeholder="选择年">
</el-date-picker>
</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>
<div class="main-echarts">
<e-echarts-bar
ref="echartsLineTrend"
:styles="echartsOption.styles"
:colorList="echartsOption.colorList"
:eId="echartsOption.eId"
:option="resultOption"
></e-echarts-bar>
</div>
<div class="main-table">
<el-table v-loading="loading" :data="tableList">
<el-table-column
type="index"
label="序号"
align="center"
:index="
(val) => {
return val + 1 + (queryParams.pageNum - 1) * queryParams.pageSize;
}
"
width="80px"
></el-table-column>
<el-table-column label="项目名称" align="left" prop="projectName" />
<el-table-column label="日期" align="left" prop="projectName" />
<el-table-column label="本期用量" align="center" prop="industry" />
<el-table-column label="同期用量" align="center" prop="electric">
<template slot-scope="scope">
<span class="lay-table-textarea">{{
Number(scope.row.electric).toFixed(2) || "--"
}}</span>
</template>
</el-table-column>
<el-table-column label="增长值" align="center" prop="coal">
<template slot-scope="scope">
<span class="lay-table-textarea">{{
Number(scope.row.coal).toFixed(2) || "--"
}}</span>
</template>
</el-table-column>
<el-table-column label="增长率" align="center" prop="coal">
<template slot-scope="scope">
<span class="lay-table-textarea">{{
Number(scope.row.coal).toFixed(2) || "--"
}}</span>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total > 0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
</div>
</div>
</template>
<script>
import { listProject } from "@/api/iot/project";
import EDialogTableInput from "@/components/EDialogTableInput";
import EEchartsBar from "@/components/Echarts/EEchartsBar";
const selectTable = {
otherOption: {
tableType: "project",
},
queryOption: {
disable: false,
labelWidth: "68px",
params: {
projectName: "",
},
inline: true,
queryChilds: [
{
style: "",
placeholder: "项目名称",
clearable: true,
label: "项目名称",
type: "input",
key: "projectName",
size: "small",
value: "",
},
],
},
tableOption: {
loading: false,
rowKey: "projectId",
selection: false,
maxHeight: "45vh",
childs: [
{
style: "",
label: "项目名称",
type: "",
prop: "projectName",
align: "left",
width: "200",
"show-overflow-tooltip": false,
tempType: "span",
},
{
style: "",
label: "行政区划",
type: "",
prop: "regionalismFullName",
align: "left",
width: "200",
"show-overflow-tooltip": false,
tempType: "span",
},
{
style: "",
label: "项目地址",
type: "",
prop: "projectAddress",
align: "left",
width: "",
"show-overflow-tooltip": false,
tempType: "span",
},
{
style: "",
label: "创建时间",
type: "",
prop: "createTime",
align: "left",
width: "160",
"show-overflow-tooltip": false,
tempType: "span",
},
],
},
};
export default {
name: "StatisticsCompared",
components: {
EDialogTableInput,
EEchartsBar,
},
data() {
return {
selectTable,
total: 0,
queryParams: {
projectName: "",
pageNum: 1,
pageSize: 10,
},
time: "",
resultOption: {
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
},
grid: {
left: "3%",
right: "2%",
bottom: "2%",
top: '2%',
containLabel: true,
},
xAxis: [
{
type: "category",
data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
axisTick: {
alignWithLabel: true,
},
},
],
yAxis: [
{
type: "value",
name: "Kwh",
position: "left",
alignTicks: true,
axisLine: {
show: true,
lineStyle: {
color: "#1890FF",
},
},
axisLabel: {
formatter: "{value}",
},
},
],
series: [
{
name: "去年",
type: "bar",
barWidth: "30%",
data: [
2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4,
3.3,
],
},
{
name: "同期",
type: "bar",
barWidth: "30%",
data: [
2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0,
2.3,
],
},
],
},
echartsOption: {
styles: "width: 100%; height: 100%;",
colorList: ["#1890FF", "#EE6666", "#FFCC00"],
eId: "statisticsComparedEchartsBar",
},
loading: false,
tableList: [],
};
},
created() {
this.time = new Date();
this.getList();
},
methods: {
listProject,
updateEcharts() {
if (this.$refs.echartsLineTrend) {
this.$refs.echartsLineTrend.updateEchart();
}
},
handleDialogEvent(e) {
this.handleQuery();
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.time = this.parseTime(new Date(), "{y}:01:01 00:00:00");
this.handleQuery();
},
getList() {
// console.log(this.time)
// console.log('compared-getList:', Object.assign(this.queryParams, {
// time: this.parseTime(this.time, '{y}:01:01 00:00:00')
// }))
},
},
};
</script>
<style lang="scss">
.el-compared-container {
.main-echarts {
height: 350px;
width: 100%;
margin: 10px 0;
}
.main-table {
width: 100%;
margin-top: 20px;
}
}
</style>

312
src/views/iot/statistics/compared/index.vue Normal file
View File

@ -0,0 +1,312 @@
<template>
<div class="app-container el-compared-container">
<el-form
:model="queryParams"
ref="queryForm"
:inline="true"
label-width="68px"
>
<el-form-item label="项目名称" prop="projectName">
<e-dialog-table-input
:table="selectTable"
:refurbishFun="listProject"
type="input"
showFileName="projectName"
fileName="projectId,projectName"
v-model="queryParams.projectName"
:preference="true"
title="项目"
psize="small"
@change="handleDialogEvent"
/>
</el-form-item>
<el-form-item label="时间" prop="time">
<el-date-picker v-model="time" type="year" placeholder="选择年">
</el-date-picker>
</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>
<div class="main-echarts">
<e-echarts-bar
ref="echartsLineTrend"
:styles="echartsOption.styles"
:colorList="echartsOption.colorList"
:eId="echartsOption.eId"
:option="resultOption"
></e-echarts-bar>
</div>
<div class="main-table">
<el-table v-loading="loading" :data="tableList">
<el-table-column
type="index"
label="序号"
align="center"
:index="
(val) => {
return val + 1 + (queryParams.pageNum - 1) * queryParams.pageSize;
}
"
width="80px"
></el-table-column>
<el-table-column label="项目名称" align="left" prop="projectName" />
<el-table-column label="日期" align="left" prop="projectName" />
<el-table-column label="本期用量" align="center" prop="industry" />
<el-table-column label="同期用量" align="center" prop="electric">
<template slot-scope="scope">
<span class="lay-table-textarea">{{
Number(scope.row.electric).toFixed(2) || "--"
}}</span>
</template>
</el-table-column>
<el-table-column label="增长值" align="center" prop="coal">
<template slot-scope="scope">
<span class="lay-table-textarea">{{
Number(scope.row.coal).toFixed(2) || "--"
}}</span>
</template>
</el-table-column>
<el-table-column label="增长率" align="center" prop="coal">
<template slot-scope="scope">
<span class="lay-table-textarea">{{
Number(scope.row.coal).toFixed(2) || "--"
}}</span>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total > 0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
</div>
</div>
</template>
<script>
import { listProject } from "@/api/iot/project";
import EDialogTableInput from "@/components/EDialogTableInput";
import EEchartsBar from "@/components/Echarts/EEchartsBar";
const selectTable = {
otherOption: {
tableType: "project",
},
queryOption: {
disable: false,
labelWidth: "68px",
params: {
projectName: "",
},
inline: true,
queryChilds: [
{
style: "",
placeholder: "项目名称",
clearable: true,
label: "项目名称",
type: "input",
key: "projectName",
size: "small",
value: "",
},
],
},
tableOption: {
loading: false,
rowKey: "projectId",
selection: false,
maxHeight: "45vh",
childs: [
{
style: "",
label: "项目名称",
type: "",
prop: "projectName",
align: "left",
width: "200",
"show-overflow-tooltip": false,
tempType: "span",
},
{
style: "",
label: "行政区划",
type: "",
prop: "regionalismFullName",
align: "left",
width: "200",
"show-overflow-tooltip": false,
tempType: "span",
},
{
style: "",
label: "项目地址",
type: "",
prop: "projectAddress",
align: "left",
width: "",
"show-overflow-tooltip": false,
tempType: "span",
},
{
style: "",
label: "创建时间",
type: "",
prop: "createTime",
align: "left",
width: "160",
"show-overflow-tooltip": false,
tempType: "span",
},
],
},
};
export default {
name: "StatisticsCompared",
components: {
EDialogTableInput,
EEchartsBar,
},
data() {
return {
selectTable,
total: 0,
queryParams: {
projectName: "",
pageNum: 1,
pageSize: 10,
},
time: "",
resultOption: {
tooltip: {
trigger: "axis",
axisPointer: {
type: "shadow",
},
},
grid: {
left: "3%",
right: "2%",
bottom: "2%",
top: '2%',
containLabel: true,
},
xAxis: [
{
type: "category",
data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
axisTick: {
alignWithLabel: true,
},
},
],
yAxis: [
{
type: "value",
name: "Kwh",
position: "left",
alignTicks: true,
axisLine: {
show: true,
lineStyle: {
color: "#1890FF",
},
},
axisLabel: {
formatter: "{value}",
},
},
],
series: [
{
name: "去年",
type: "bar",
barWidth: "30%",
data: [
2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4,
3.3,
],
},
{
name: "同期",
type: "bar",
barWidth: "30%",
data: [
2.6, 5.9, 9.0, 26.4, 28.7, 70.7, 175.6, 182.2, 48.7, 18.8, 6.0,
2.3,
],
},
],
},
echartsOption: {
styles: "width: 100%; height: 100%;",
colorList: ["#1890FF", "#EE6666", "#FFCC00"],
eId: "statisticsComparedEchartsBar",
},
loading: false,
tableList: [],
};
},
created() {
this.time = new Date();
this.getList();
},
methods: {
listProject,
updateEcharts() {
if (this.$refs.echartsLineTrend) {
this.$refs.echartsLineTrend.updateEchart();
}
},
handleDialogEvent(e) {
this.handleQuery();
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.time = this.parseTime(new Date(), "{y}:01:01 00:00:00");
this.handleQuery();
},
getList() {
console.log(this.queryParams)
// console.log('compared-getList:', Object.assign(this.queryParams, {
// time: this.parseTime(this.time, '{y}:01:01 00:00:00')
// }))
},
},
};
</script>
<style lang="scss">
.el-compared-container {
.main-echarts {
height: 350px;
width: 100%;
margin: 10px 0;
}
.main-table {
width: 100%;
margin-top: 20px;
}
}
</style>

153
src/views/iot/statistics/energy/index.vue Normal file
View File

@ -0,0 +1,153 @@
<template>
<div class="app-container">
<el-form
:model="queryParams"
ref="queryForm"
:inline="true"
label-width="68px"
>
<el-form-item label="项目名称" prop="projectName">
<el-input
v-model="queryParams.projectName"
placeholder="请输入项目名称"
clearable
size="small"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<el-form-item label="时间" prop="time">
<el-date-picker
v-model="time"
size="small"
type="datetimerange"
range-separator="至"
class="form-input"
start-placeholder="开始时间"
end-placeholder="结束时间"
@change="timeChange"
placeholder="选择时间范围"
></el-date-picker>
</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>
<el-table
v-loading="loading"
:data="tableList"
>
<!-- :default-sort="{prop: 'createTime', order: 'descending'}"
@sort-change="sortChange" -->
<el-table-column
type="index"
label="序号"
align="center"
:index="(val) => {
return ( val + 1 + (queryParams.pageNum - 1) * queryParams.pageSize )
}"
width="80px"
></el-table-column>
<el-table-column label="项目ID" align="left" prop="projectName" />
<el-table-column label="项目名称" align="left" prop="projectName" />
<el-table-column label="电用量 (kwh)" align="center" prop="electric" >
<template slot-scope="scope">
<span class="lay-table-textarea">{{ Number(scope.row.electric).toFixed(2) || '--' }}</span>
</template>
</el-table-column>
<el-table-column label="水用量 (吨)" align="center" prop="electric" >
<template slot-scope="scope">
<span class="lay-table-textarea">{{ Number(scope.row.electric).toFixed(2) || '--' }}</span>
</template>
</el-table-column>
<el-table-column label="气用量 (m³)" align="center" prop="electric" >
<template slot-scope="scope">
<span class="lay-table-textarea">{{ Number(scope.row.electric).toFixed(2) || '--' }}</span>
</template>
</el-table-column>
<el-table-column label="碳排放 (吨)" align="center" prop="coal" >
<template slot-scope="scope">
<span class="lay-table-textarea">{{ Number(scope.row.coal).toFixed(2) || '--' }}</span>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total > 0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
</div>
</template>
<script>
import { projectEnergy } from '@/api/iot/staistics'
export default {
name: 'EStatisticsEnergy',
data() {
return {
total: 0,
queryParams: {
projectName: '',
pageNum: 1,
pageSize: 10,
ed: '',
sd: ''
},
time: [],
loading: false,
tableList: []
}
},
created() {
this.getList();
},
methods: {
timeChange(val) {
if (val) {
this.queryParams.sd = this.parseTime(val[0], '{y}:{m}:{d} {h}:{i}:{s}');
this.queryParams.ed = this.parseTime(val[1], '{y}:{m}:{d} {h}:{i}:{s}');
} else {
this.queryParams.sd = "";
this.queryParams.ed = "";
}
this.handleQuery();
},
sortChange(column) {
const sort = {
isAsc: column.order === "descending" ? "desc" : "asc",
orderByColumn: column.prop
};
this.queryParams = Object.assign(this.queryParams, sort);
this.handleQuery();
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.queryParams.sd = "";
this.queryParams.ed = "";
this.time = [];
this.handleQuery();
},
getList() {
this.loading = true;
projectEnergy(Object.assign(this.queryParams)).then(res => {
this.tableList = res.rows;
this.total = res.total;
this.loading = false;
})
},
},
}
</script>

651
src/views/iot/video/camera/index.vue
View File

@ -12,6 +12,7 @@
ref="querySelectInput"
@EventResult="eventResult($event)"
></select-input>
</el-form-item>
<el-form-item label="摄像头名称" prop="videoName">
<el-input
@ -31,22 +32,6 @@
@keyup.enter.native="handleQuery"
/>
</el-form-item>
<!-- <el-form-item label="状态" prop="videoStatus">
<el-select
v-model="queryParams.videoStatus"
placeholder="请选择站点状态"
size="mini"
clearable
>
<el-option
v-for="dict in statusOptions"
:key="dict.dictValue"
:label="dict.dictLabel"
:value="dict.dictValue"
/>
</el-select>
</el-form-item> -->
<el-form-item>
<el-button
type="primary"
@ -117,7 +102,12 @@
width="200"
prop="deviceName"
/>
<el-table-column label="站点名称" align="left" width="210" prop="siteName" />
<el-table-column
label="站点名称"
align="left"
width="210"
prop="siteName"
/>
<el-table-column label="站点通道" align="left" width="200" prop="devId" />
<el-table-column
@ -126,13 +116,11 @@
width="200"
prop="devChannel"
/>
<el-table-column
label="摄像头地址"
prop="videoAddress"
align="left"
>
<el-table-column label="摄像头地址" prop="videoAddress" align="left">
<template slot-scope="scope">
<span class="lay-table-textarea">{{ scope.row.videoAddress || '--'}}</span>
<span class="lay-table-textarea">{{
scope.row.videoAddress || "--"
}}</span>
</template>
</el-table-column>
@ -222,26 +210,32 @@
<el-row :gutter="20">
<el-col :span="12">
<el-form-item label="摄像头名称" prop="videoName">
<el-input
<e-dialog-table-input
:disabled="tempType === 'distri'"
:table="selectDevieTable"
:refurbishFun="unbindVideoDev"
showFileName="deviceName"
fileName="deviceKey,deviceName"
v-model="form.videoName"
type="text"
maxlength="30"
placeholder="请输入摄像头名称"
suffix-icon="el-icon-arrow-down"
@focus="openTableSelectDeviceDialog()"
title="摄像头设备"
psize="small"
@change="handleDeviceDialogEvent"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="站点名称" prop="siteName">
<el-input
v-model="form.siteName"
<e-dialog-table-input
:disabled="tempType === 'distri'"
placeholder="点击选择站点"
suffix-icon="el-icon-arrow-down"
@focus="openTableSelectDialog()"
:table="selectSiteTable"
:refurbishFun="listSite"
showFileName="siteName"
fileName="recordId,devId,siteLng,siteLat,siteAddress,siteName"
v-model="form.siteName"
title="站点"
psize="small"
@change="handleSiteDialogEvent"
/>
</el-form-item>
</el-col>
@ -292,23 +286,6 @@
<el-input v-model="form.sortNum" placeholder="请输入排序" />
</el-form-item>
</el-col>
<!-- <el-col :span="12">
<el-form-item label="服务类型" prop="serverType">
<el-select
:disabled="tempType === 'distri'"
v-model="form.serverType"
placeholder="请选择服务类型"
style="width: 100%"
>
<el-option
v-for="(itemKey, itemVal) in serverTypeOpt"
:key="itemKey"
:label="itemKey"
:value="itemVal"
/>
</el-select>
</el-form-item>
</el-col> -->
</el-row>
<el-row :gutter="20">
@ -424,47 +401,6 @@
</el-form-item>
</el-col>
</el-row>
<!-- <el-row :gutter="20">
<el-col :span="24">
<el-form-item label="分配角色">
<el-select
style="width: 100%"
v-model="roleIds"
multiple
placeholder="请选择"
>
<el-option
v-for="item in roleOptions"
:key="item.roleId"
:label="item.roleName"
:value="item.roleId"
></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row> -->
<!-- <el-row :gutter="20">
<el-col :span="24">
<el-form-item label="选择用户" prop="videoLat">
<el-select
v-model="form.tenantId"
style="width: 100%"
filterable
placeholder="请选择"
>
<el-option
v-for="item in tenantList"
:key="item.tenantId"
:label="item.tenantName"
:value="item.tenantId"
>
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-row> -->
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="primary" size="mini" @click="submitForm"
@ -474,40 +410,6 @@
</div>
</el-dialog>
<el-dialog
:title="selectDialogTitle"
:visible.sync="selectTableShow"
width="75%"
top="10vh"
class="select-table-dialog"
:close-on-click-modal="false"
>
<select-table-wrap
v-if="selectTableShow"
:tableOption="tableSelectOption.tableOpt"
:queryOption="tableSelectOption.queryOpt"
:tableList="tableSelectOption.tableList"
@parentGetList="childGetList($event)"
:otherOption="tableSelectOption.otherOption"
@returnEvent="returnEvent($event)"
/>
<div slot="footer" class="dialog-footer">
<el-button size="mini" type="primary" @click="resuleClick"
>确 定</el-button
>
<el-button
size="mini"
@click="
() => {
selectTableShow = false;
}
"
>取 消</el-button
>
</div>
</el-dialog>
<!-- 摄像头导入对话框 -->
<el-dialog
:title="upload.title"
@ -557,19 +459,23 @@
</template>
<script>
import { listInfo, getInfo, delInfo, addInfo, updateInfo, unbindVideoDev } from "@/api/video/camera";
import {
listInfo,
getInfo,
delInfo,
addInfo,
updateInfo,
unbindVideoDev,
} from "@/api/video/camera";
import { getUser } from "@/api/system/user";
import { listSite } from "@/api/iot/site";
import { initMap, gjzCode } from "@/utils/latlngFromAddress";
import { listTenant } from "@/api/system/tenant";
import SelectTableWrap from "@/components/SelectTable/index";
import ShopLocation from "@/components/Amap/components/shopLocation/index";
import SelectInput from "../profile/SelectInput/index";
import EDialogTableInput from "@/components/EDialogTableInput";
import { getToken } from "@/utils/auth";
// import {
// listDevice,
// } from "@/api/iot/device";
const joinTypeOpt = {
CAMERA: "摄像头直连",
@ -580,17 +486,179 @@ const serverTypeOpt = {
QI_NIU: "七牛",
};
const selectDevieTable = {
otherOption: {
tableType: "device",
},
queryOption: {
disable: false,
labelWidth: "68px",
params: {
deviceName: "",
deviceType: "VIDEO_MONITOR",
},
inline: true,
queryChilds: [
{
style: "",
placeholder: "设备名称",
clearable: true,
label: "设备名称",
type: "input",
key: "deviceName",
size: "small",
value: "",
},
],
},
tableOption: {
loading: false,
rowKey: "recordId",
selection: false,
maxHeight: "45vh",
childs: [
{
style: "",
label: "设备名称",
type: "",
prop: "deviceName",
align: "center",
width: "200",
"show-overflow-tooltip": false,
tempType: "span",
},
{
style: "",
label: "站点通道",
type: "",
prop: "deviceId",
align: "center",
width: "",
"show-overflow-tooltip": false,
tempType: "tagStatus",
},
{
style: "",
label: "设备Key",
type: "",
prop: "deviceKey",
align: "left",
width: "200",
"show-overflow-tooltip": false,
tempType: "span",
},
{
style: "",
label: "设备类型",
type: "",
prop: "deviceTypeName",
align: "left",
width: "120",
"show-overflow-tooltip": false,
tempType: "span",
},
{
style: "",
label: "创建时间",
type: "",
prop: "createTime",
align: "center",
width: "",
"show-overflow-tooltip": false,
tempType: "span",
},
],
},
};
const selectSiteTable = {
otherOption: {
tableType: "site",
},
queryOption: {
disable: false,
labelWidth: "68px",
params: {
siteName: "",
siteStatus: "0",
},
inline: true,
queryChilds: [
{
style: "",
placeholder: "站点名称",
clearable: true,
label: "站点名称",
type: "input",
key: "siteName",
size: "small",
value: "",
},
],
},
tableOption: {
loading: false,
rowKey: "recordId",
selection: false,
maxHeight: "45vh",
childs: [
{
style: "",
label: "站点名称",
type: "",
prop: "siteName",
align: "left",
width: "",
"show-overflow-tooltip": false,
tempType: "span",
},
{
style: "",
label: "项目名称",
type: "",
prop: "projectName",
align: "left",
width: "",
"show-overflow-tooltip": false,
tempType: "span",
},
{
style: "",
label: "状态",
type: "",
prop: "siteStatus",
align: "center",
width: "",
"show-overflow-tooltip": false,
tempType: "tagStatus",
},
{
style: "",
label: "创建时间",
type: "",
prop: "createTime",
align: "center",
width: "",
"show-overflow-tooltip": false,
tempType: "span",
},
],
},
};
export default {
name: "Info",
components: {
SelectTableWrap,
ShopLocation,
SelectInput,
EDialogTableInput,
},
data() {
return {
joinTypeOpt,
serverTypeOpt,
selectDevieTable,
selectSiteTable,
// 遮罩层
loading: true,
// 选中数组
@ -669,15 +737,23 @@ export default {
trigger: "blur",
},
],
siteName: [{ required: true, message: "站点不能为空, 请选择", trigger: "blur" }],
videoProtocol: [{ required: true, message: "接入协议不能为空", trigger: "blur" }],
videoLng: [{ required: true, message: "经度不能为空", trigger: "blur" }],
videoLat: [{ required: true, message: "纬度不能为空", trigger: "blur" }],
siteName: [
{ required: true, message: "站点不能为空, 请选择", trigger: "blur" },
],
videoProtocol: [
{ required: true, message: "接入协议不能为空", trigger: "blur" },
],
videoLng: [
{ required: true, message: "经度不能为空", trigger: "blur" },
],
videoLat: [
{ required: true, message: "纬度不能为空", trigger: "blur" },
],
// serverType: [{ required: true, message: "服务类型不能为空", trigger: "blur" }],
joinType: [{ required: true, message: "接入方式不能为空", trigger: "blur" }],
joinType: [
{ required: true, message: "接入方式不能为空", trigger: "blur" },
],
},
selectTableShow: false,
tableSelectOption: {},
selectResult: {},
// 地图 弹窗
visible: false,
@ -700,17 +776,28 @@ export default {
dictValue: "GUN_MACHINE",
},
],
// 角色列表
roleOptions: [],
roleIds: [],
selectDialogTitle: ''
selectDialogTitle: "",
};
},
created() {
this.getList();
this.getRole();
},
methods: {
unbindVideoDev,
listSite,
handleDeviceDialogEvent(e) {
this.form.videoName = e.deviceName;
this.form.devChannel = e.deviceKey;
},
handleSiteDialogEvent(e) {
this.form.siteId = e.recordId;
this.form.devId = e.devId;
this.form.videoLng = e.siteLng;
this.form.videoLat = e.siteLat;
this.form.videoAddress = e.siteAddress;
this.form.siteName = e.siteName;
},
eventResult(...data) {
this.queryParams.siteId = data[0].val;
this.getList();
@ -734,7 +821,7 @@ export default {
this.mapForm.lng = data.lng;
this.mapForm.lat = data.lat;
this.mapForm.address = data.address;
console.log('map-event--', data)
console.log("map-event--", data);
this.$forceUpdate();
},
// 使用地图方式定位
@ -777,269 +864,6 @@ export default {
});
}
},
/**
* 选择摄像头设备
*/
openTableSelectDeviceDialog() {
this.selectResult = {};
this.selectDialogTitle = '选择设备'
this.tableSelectOption = {
otherOption: {
tableType: "device",
},
queryOpt: {
disable: false,
labelWidth: "68px",
params: {
deviceName: "",
deviceType: "VIDEO_MONITOR",
},
page: {
pageSize: 10,
pageNum: 1,
total: 0,
},
inline: true,
queryChilds: [
{
style: "",
placeholder: "设备名称",
clearable: true,
label: "设备名称",
type: "input",
key: "deviceName",
size: "small",
value: "",
},
],
},
tableOpt: {
loading: false,
rowKey: "recordId",
selection: false,
maxHeight: "45vh",
childs: [
{
style: "",
label: "设备名称",
type: "",
prop: "deviceName",
align: "center",
width: "200",
"show-overflow-tooltip": false,
tempType: "span",
},
{
style: "",
label: "站点通道",
type: "",
prop: "deviceId",
align: "center",
width: "",
"show-overflow-tooltip": false,
tempType: "tagStatus",
},
{
style: "",
label: "设备Key",
type: "",
prop: "deviceKey",
align: "left",
width: "200",
"show-overflow-tooltip": false,
tempType: "span",
},
{
style: "",
label: "设备类型",
type: "",
prop: "deviceTypeName",
align: "left",
width: "120",
"show-overflow-tooltip": false,
tempType: "span",
},
{
style: "",
label: "创建时间",
type: "",
prop: "createTime",
align: "center",
width: "",
"show-overflow-tooltip": false,
tempType: "span",
},
],
tableList: {
type: Array,
},
},
tableList: [],
};
this.selectTableShow = true;
},
// 开启 筛选表格
openTableSelectDialog() {
this.selectResult = {};
this.selectDialogTitle = '选择站点'
this.tableSelectOption = {
otherOption: {
tableType: "site",
},
queryOpt: {
disable: false,
labelWidth: "68px",
params: {
siteName: "",
siteStatus: "0",
},
page: {
pageSize: 10,
pageNum: 1,
total: 0,
},
inline: true,
queryChilds: [
{
style: "",
placeholder: "站点名称",
clearable: true,
label: "站点名称",
type: "input",
key: "siteName",
size: "small",
value: "",
},
],
},
tableOpt: {
loading: false,
rowKey: "recordId",
selection: false,
maxHeight: "45vh",
childs: [
{
style: "",
label: "站点名称",
type: "",
prop: "siteName",
align: "left",
width: "",
"show-overflow-tooltip": false,
tempType: "span",
},
{
style: "",
label: "项目名称",
type: "",
prop: "projectName",
align: "left",
width: "",
"show-overflow-tooltip": false,
tempType: "span",
},
{
style: "",
label: "状态",
type: "",
prop: "siteStatus",
align: "center",
width: "",
"show-overflow-tooltip": false,
tempType: "tagStatus",
},
{
style: "",
label: "创建时间",
type: "",
prop: "createTime",
align: "center",
width: "",
"show-overflow-tooltip": false,
tempType: "span",
},
],
tableList: {
type: Array,
},
},
tableList: [],
};
this.selectTableShow = true;
},
// 查询回调
childGetList(data) {
if (data.otherOption.tableType === "site") {
this.getSiteChildList(data);
} else if (data.otherOption.tableType === "device") {
this.getDeviceChildList(data);
}
},
// 查詢 设备列表 接口
getDeviceChildList(data) {
unbindVideoDev(Object.assign(JSON.parse(JSON.stringify(data.page)), JSON.parse(JSON.stringify(data.param)))).then(res => {
this.tableSelectOption.tableList = res.rows;
this.tableSelectOption.queryOpt.page.total = Number(res.total);
})
},
// 查询站点列表接口
getSiteChildList(data) {
listSite(data.page, data.param).then((response) => {
this.tableSelectOption.tableList = response.rows;
this.tableSelectOption.queryOpt.page.total = Number(response.total);
});
},
// 点击或者双击数据回调
returnEvent(data) {
this.selectResult = {};
if (data.type === "dblclick") {
if (data.otherOption.tableType === "site") {
this.form.siteId = data.value.recordId;
this.form.devId = data.value.devId;
this.form.videoLng = data.value.siteLng;
this.form.videoLat = data.value.siteLat;
this.form.videoAddress = data.value.siteAddress;
this.form.siteName = data.value.siteName;
} else if (data.otherOption.tableType === "device") {
this.form.videoName = data.value.deviceName;
this.form.devChannel = data.value.deviceKey;
// this.form.device = data.value.deviceKey;
}
this.selectTableShow = false;
} else if (data.type === "click") {
if (data.otherOption.tableType === "site") {
this.selectResult = {
siteId: data.value.recordId,
devId: data.value.devId,
videoLng: data.value.videoLng,
videoLat: data.value.videoLat,
videoAddress: data.value.siteAddress,
siteName: data.value.siteName,
};
} else if (data.otherOption.tableType === "device") {
this.selectResult = {
videoName: data.value.deviceName,
devChannel: data.value.deviceKey,
}
}
this.selectResult.tableType = data.otherOption.tableType;
}
},
// 点击确定按钮
resuleClick() {
if (this.selectResult.tableType === "site") {
this.form.siteId = this.selectResult.siteId;
this.form.devId = this.selectResult.devId;
this.form.videoLng = this.selectResult.videoLng;
this.form.videoLat = this.selectResult.videoLat;
this.form.videoAddress = this.selectResult.videoAddress;
this.form.siteName = this.selectResult.siteName;
} else if (this.selectResult.tableType === "device") {
this.form.videoName = this.selectResult.videoName;
this.form.devChannel = this.selectResult.deviceKey;
}
this.selectTableShow = false;
},
/** 查询监控详情列表 */
getList() {
this.loading = true;
@ -1086,7 +910,7 @@ export default {
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
if(this.$refs.querySelectInput) {
if (this.$refs.querySelectInput) {
this.$refs.querySelectInput.close();
}
this.handleQuery();
@ -1130,7 +954,7 @@ export default {
this.tempType = "distri";
this.reset();
// this.getTenantList();
const recordId = row.recordId
const recordId = row.recordId;
getInfo(recordId).then((response) => {
this.form = response.data;
this.open = true;
@ -1236,13 +1060,6 @@ export default {
}
});
},
/** 查询角色 */
getRole() {
getUser().then((res) => {
this.roleOptions = res.roles;
this.roleOptions.splice(0, 1);
});
},
},
};
</script>

567
src/views/iot/video/site/index.vue
View File

@ -1,6 +1,11 @@
<template>
<div class="app-container video-site">
<el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
<el-form
:model="queryParams"
ref="queryForm"
:inline="true"
label-width="68px"
>
<el-form-item label="站点名称" prop="siteName">
<el-input
v-model="queryParams.siteName"
@ -10,30 +15,6 @@
/>
</el-form-item>
<!-- <el-form-item label="行政区划" prop="regionalismId">
<treeselect
:disable-branch-nodes="true"
v-model="queryParams.regionalismId"
:options="regionalismOption"
:normalizer="normalizer"
placeholder="行政区划"
style="width: 200px"
/>
</el-form-item> -->
<!-- <el-form-item label="站点状态" prop="siteStatus">
<el-select
v-model="queryParams.siteStatus"
placeholder="请选择站点状态"
clearable
>
<el-option
v-for="dict in statusOptions"
:key="dict.dictValue"
:label="dict.dictLabel"
:value="dict.dictValue"
/>
</el-select>
</el-form-item> -->
<el-form-item>
<el-button type="primary" icon="el-icon-search" @click="handleQuery"
>搜索</el-button
@ -53,17 +34,6 @@
>新增</el-button
>
</el-col>
<!-- <el-col :span="1.5">
<el-button
type="danger"
icon="el-icon-delete"
size="mini"
:disabled="multiple"
@click="handleDelete"
v-hasPermi="['iot:site:remove']"
>删除</el-button
>
</el-col> -->
</el-row>
<el-table
@ -71,7 +41,6 @@
:data="siteList"
@selection-change="handleSelectionChange"
>
<!-- <el-table-column type="selection" width="55" align="center" /> -->
<el-table-column
type="index"
label="序号"
@ -80,36 +49,48 @@
width="80px"
></el-table-column>
<el-table-column label="站点名称" align="left" width="200" prop="siteName" />
<!-- <el-table-column
label="行政区划"
<el-table-column
label="站点名称"
align="left"
width="180"
prop="regionalismFullName"
/> -->
<el-table-column label="项目名称" align="left" width="150" prop="projectName" />
<el-table-column label="站点地址" align="left" prop="siteAddress" >
width="200"
prop="siteName"
/>
<el-table-column
label="项目名称"
align="left"
width="150"
prop="projectName"
/>
<el-table-column label="站点地址" align="left" prop="siteAddress">
<template slot-scope="scope">
<span :title="scope.row.siteAddress" class="lay-table-textarea">{{ scope.row.siteAddress || '--'}}</span>
<span :title="scope.row.siteAddress" class="lay-table-textarea">{{
scope.row.siteAddress || "--"
}}</span>
</template>
</el-table-column>
<!-- <el-table-column label="站点状态" align="center" width="100" prop="siteStatus">
<template slot-scope="scope">
<div class="list-row">
<span class="notice-item" :class="noticeState(scope.row.siteStatus)"></span>
<span
class="notice-text"
v-text="scope.row.siteStatus === '1' ? '在线' : '离线'"
></span>
</div>
</template>
</el-table-column> -->
<el-table-column label="接入协议" align="left" width="100" prop="videoProtocol" />
<el-table-column
label="接入协议"
align="left"
width="100"
prop="videoProtocol"
/>
<el-table-column label="站点通道" align="left" width="200" prop="devId" />
<el-table-column label="设备编码" align="left" width="150" prop="devCode" />
<el-table-column label="创建时间" align="center" prop="createTime" width="160">
<el-table-column
label="设备编码"
align="left"
width="150"
prop="devCode"
/>
<el-table-column
label="创建时间"
align="center"
prop="createTime"
width="160"
>
<template slot-scope="scope">
<span>{{ parseTime(scope.row.createTime, "{y}-{m}-{d} {h}:{i}:{s}") }}</span>
<span>{{
parseTime(scope.row.createTime, "{y}-{m}-{d} {h}:{i}:{s}")
}}</span>
</template>
</el-table-column>
<el-table-column
@ -161,10 +142,15 @@
<el-row :gutter="20" v-show="tempType !== 'distri'">
<el-col :span="24">
<el-form-item label="所属项目" prop="projectName">
<el-input
<e-dialog-table-input
:table="selectProjectTable"
:refurbishFun="listProject"
showFileName="projectName"
fileName="projectId,projectName,projectLat,projectLng,projectAddress"
v-model="form.projectName"
placeholder="点击选择厂商"
@focus="handleOpenTableSelect()"
title="项目"
psize="small"
@change="handleDialogEvent"
/>
</el-form-item>
</el-col>
@ -201,14 +187,6 @@
<el-row :gutter="20" v-show="tempType !== 'distri'">
<el-col :span="12">
<el-form-item label="启用https" prop="https">
<!-- <el-switch
v-model="form.https"
active-color="#13ce66"
inactive-color="#ff4949"
:active-value="true"
:inactive-value="false"
>
</el-switch> -->
<el-switch
size="mini"
v-model="form.https"
@ -240,31 +218,26 @@
</el-select>
</el-form-item>
</el-col>
<!-- <el-col :span="24">
<el-form-item label="行政区划" prop="regionalismId">
<treeselect
:disabled="tempType === 'distri'"
@select="regionalismChange"
:disable-branch-nodes="true"
v-model="form.regionalismId"
:options="regionalismOption"
:normalizer="normalizer"
placeholder="请选择上级行政区划"
/>
</el-form-item>
</el-col> -->
</el-row>
<el-row :gutter="20" v-show="tempType !== 'distri'">
<el-col :span="12">
<el-form-item label="站点经度" prop="siteLng">
<el-input v-model="form.siteLng" disabled placeholder="请输入站点经度" />
<el-input
v-model="form.siteLng"
disabled
placeholder="请输入站点经度"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="站点纬度" prop="siteLat">
<el-input v-model="form.siteLat" disabled placeholder="请输入站点纬度" />
<el-input
v-model="form.siteLat"
disabled
placeholder="请输入站点纬度"
/>
</el-form-item>
</el-col>
</el-row>
@ -324,7 +297,9 @@
margin-top: 5px;
"
>
<el-button type="primary" @click="mapSureClick">确 定</el-button>
<el-button type="primary" @click="mapSureClick"
>确 定</el-button
>
<el-button @click="visible = false">取 消</el-button>
</div>
</slot>
@ -334,14 +309,22 @@
</el-col>
</el-row>
<el-form-item label="站点通道" prop="devId" v-show="tempType !== 'distri'">
<el-form-item
label="站点通道"
prop="devId"
v-show="tempType !== 'distri'"
>
<el-input
v-model="form.devId"
:disabled="tempType === 'distri'"
placeholder="请输入站点通道"
/>
</el-form-item>
<el-form-item label="设备编码" prop="devCode" v-show="tempType !== 'distri'">
<el-form-item
label="设备编码"
prop="devCode"
v-show="tempType !== 'distri'"
>
<el-input
v-model="form.devCode"
:disabled="tempType === 'distri'"
@ -363,17 +346,26 @@
<!-- <template> -->
<el-col :span="12">
<el-form-item label="七牛访问秘钥" prop="qnAccessKey">
<el-input v-model="form.qnAccessKey" placeholder="请输入七牛访问秘钥" />
<el-input
v-model="form.qnAccessKey"
placeholder="请输入七牛访问秘钥"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="七牛秘钥" prop="qnSecretKey">
<el-input v-model="form.qnSecretKey" placeholder="请输入七牛秘钥" />
<el-input
v-model="form.qnSecretKey"
placeholder="请输入七牛秘钥"
/>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="七牛空间ID" prop="qnNamespaceId">
<el-input v-model="form.qnNamespaceId" placeholder="请输入七牛空间ID" />
<el-input
v-model="form.qnNamespaceId"
placeholder="请输入七牛空间ID"
/>
</el-form-item>
</el-col>
<el-col :span="12">
@ -423,194 +415,45 @@
</el-row>
</el-form>
<div slot="footer" class="dialog-footer form-button-div">
<el-button type="primary" size="mini" @click="submitForm">确 定</el-button>
<el-button type="primary" size="mini" @click="submitForm"
>确 定</el-button
>
<el-button size="mini" @click="cancel">取 消</el-button>
</div>
</el-dialog>
</div>
<el-dialog
title="选择"
:visible.sync="selectTableShow"
width="75%"
top="10vh"
class="select-table-dialog"
:close-on-click-modal="false"
>
<select-table-wrap
v-if="selectTableShow"
:tableOption="tableSelectOption.tableOpt"
:queryOption="tableSelectOption.queryOpt"
:tableList="tableSelectOption.tableList"
@parentGetList="childGetList($event)"
:otherOption="tableSelectOption.otherOption"
@returnEvent="returnEvent($event)"
/>
<div slot="footer" class="dialog-footer">
<el-button size="mini" type="primary" @click="resuleClick"
>确 定</el-button
>
<el-button
size="mini"
@click="
() => {
selectTableShow = false;
}
"
>取 消</el-button
>
</div>
</el-dialog>
</div>
</template>
<script>
import { listSite, getSite, delSite, addSite, updateSite } from "@/api/iot/site";
import {
listProject
} from "@/api/iot/project";
listSite,
getSite,
delSite,
addSite,
updateSite,
} from "@/api/iot/site";
import { listProject } from "@/api/iot/project";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { initMap, gjzCode } from "@/utils/latlngFromAddress";
import ShopLocation from "@/components/Amap/components/shopLocation/index";
import SelectTableWrap from "@/components/SelectTable/index";
import { serviceApiDesc } from '@/config/dvr.config'
import EDialogTableInput from "@/components/EDialogTableInput";
import { serviceApiDesc } from "@/config/dvr.config";
const serverTypeOpt = {
SRS: "SRS",
QI_NIU: "七牛",
M7S:"M7S"
M7S: "M7S",
};
export default {
name: "Site",
components: {
Treeselect,
ShopLocation,
SelectTableWrap,
},
data() {
return {
serverTypeOpt,
serviceApiDesc,
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 总条数
total: 0,
// 站点监控表格数据
siteList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
siteName: undefined,
regionalismId: undefined,
siteStatus: undefined,
createTime: undefined,
updateTime: undefined,
},
// 表单参数
form: {},
// 表单校验
rules: {
devId: [
{ required: true, message: "站点通道不能为空", trigger: "blur" },
{
pattern: /^[0-9]{20}$/,
message: "格式不正确; 纯数字 组合20个字符",
},
],
devCode: [
{ required: true, message: "设备编码不能为空", trigger: "blur" },
{
pattern: /^[A-Z a-z]{1}[A-Z a-z 0-9 \- ]{5,45}$/,
message: "格式不正确; (a-Z , 0-9) 组合 6 - 45个字符",
},
],
projectName: [{ required: true, message: "项目名称不能为空", trigger: "change" }],
siteName: [{ required: true, message: "站点名称不能为空", trigger: "blur" }],
videoProtocol: [{ required: true, message: "接入协议不能为空", trigger: "blur" }],
serverType: [{ required: true, message: "服务类型不能为空", trigger: "blur" }],
siteLng: [{ required: true, message: "经度不能为空", trigger: "blur" }],
siteLat: [{ required: true, message: "纬度不能为空", trigger: "blur" }],
qnAccessKey: [
{ required: true, message: "七牛访问秘钥不能为空", trigger: "blur" },
],
qnSecretKey: [{ required: true, message: "七牛秘钥不能为空", trigger: "blur" }],
qnNamespaceId: [
{ required: true, message: "七牛空间ID不能为空", trigger: "blur" },
],
qnHost: [{ required: true, message: "七牛host不能为空", trigger: "blur" }],
qnPort: [{ required: true, message: "七牛port不能为空", trigger: "blur" }],
m7sHost: [{ required: true, message: "ip地址不能为空", trigger: "blur" }],
m7sPort: [{ required: true, message: "端口不能为空", trigger: "blur" }],
m7sVersion: [{ required: true, message: "服务版本不能为空", trigger: "blur" }]
},
// 地图 弹窗
visible: false,
BMap: null,
mapCenter: {
lng: 119.459889,
lat: 25.98974,
},
zoom: 15,
mapForm: {},
// 行政划分树选项
regionalismOption: [],
// 状态数据字典
videoProtocolOptions: [],
statusOptions: [
{
dictValue: "0",
dictLabel: "离线",
},
{
dictValue: "1",
dictLabel: "在线",
},
],
tenantList: [],
tempType: "",
selectTableShow: false,
tableSelectOption: {},
selectResult: {},
};
},
created() {
this.getDicts("video_protocol").then((response) => {
this.videoProtocolOptions = response.data;
});
this.getList();
// this.getRegionalisTree();
},
methods: {
indexFormatter(val) {
return (
val + 1 + (this.queryParams.pageNum - 1) * this.queryParams.pageSize
);
},
// 打开 表单选择 弹窗
handleOpenTableSelect() {
this.selectResult = {};
this.tableSelectOption = {
const selectProjectTable = {
otherOption: {
tableType: "project",
},
queryOpt: {
queryOption: {
disable: false,
labelWidth: "68px",
params: {
projectName: '',
projectName: "",
},
page: {
pageSize: 10,
@ -631,7 +474,7 @@ export default {
},
],
},
tableOpt: {
tableOption: {
loading: false,
rowKey: "projectId",
selection: false,
@ -678,62 +521,151 @@ export default {
tempType: "span",
},
],
tableList: {
type: Array,
},
};
export default {
name: "Site",
components: {
Treeselect,
ShopLocation,
EDialogTableInput,
},
tableList: [],
data() {
return {
serverTypeOpt,
serviceApiDesc,
selectProjectTable,
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 总条数
total: 0,
// 站点监控表格数据
siteList: [],
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
siteName: undefined,
regionalismId: undefined,
siteStatus: undefined,
createTime: undefined,
updateTime: undefined,
},
// 表单参数
form: {},
// 表单校验
rules: {
devId: [
{ required: true, message: "站点通道不能为空", trigger: "blur" },
{
pattern: /^[0-9]{20}$/,
message: "格式不正确; 纯数字 组合20个字符",
},
],
devCode: [
{ required: true, message: "设备编码不能为空", trigger: "blur" },
{
pattern: /^[A-Z a-z]{1}[A-Z a-z 0-9 \- ]{5,45}$/,
message: "格式不正确; (a-Z , 0-9) 组合 6 - 45个字符",
},
],
projectName: [
{ required: true, message: "项目名称不能为空", trigger: "change" },
],
siteName: [
{ required: true, message: "站点名称不能为空", trigger: "blur" },
],
videoProtocol: [
{ required: true, message: "接入协议不能为空", trigger: "blur" },
],
serverType: [
{ required: true, message: "服务类型不能为空", trigger: "blur" },
],
siteLng: [{ required: true, message: "经度不能为空", trigger: "blur" }],
siteLat: [{ required: true, message: "纬度不能为空", trigger: "blur" }],
qnAccessKey: [
{ required: true, message: "七牛访问秘钥不能为空", trigger: "blur" },
],
qnSecretKey: [
{ required: true, message: "七牛秘钥不能为空", trigger: "blur" },
],
qnNamespaceId: [
{ required: true, message: "七牛空间ID不能为空", trigger: "blur" },
],
qnHost: [
{ required: true, message: "七牛host不能为空", trigger: "blur" },
],
qnPort: [
{ required: true, message: "七牛port不能为空", trigger: "blur" },
],
m7sHost: [
{ required: true, message: "ip地址不能为空", trigger: "blur" },
],
m7sPort: [{ required: true, message: "端口不能为空", trigger: "blur" }],
m7sVersion: [
{ required: true, message: "服务版本不能为空", trigger: "blur" },
],
},
// 地图 弹窗
visible: false,
BMap: null,
mapCenter: {
lng: 119.459889,
lat: 25.98974,
},
zoom: 15,
mapForm: {},
// 行政划分树选项
regionalismOption: [],
// 状态数据字典
videoProtocolOptions: [],
statusOptions: [
{
dictValue: "0",
dictLabel: "离线",
},
{
dictValue: "1",
dictLabel: "在线",
},
],
tenantList: [],
tempType: "",
selectTableShow: false,
tableSelectOption: {},
selectResult: {},
};
this.selectTableShow = true;
},
// 查询回调
childGetList(data) {
if (data.otherOption.tableType === "project") {
this.handleQueryProject(data);
}
created() {
this.getDicts("video_protocol").then((response) => {
this.videoProtocolOptions = response.data;
});
this.getList();
},
// 查询项目列表
handleQueryProject(data) {
listProject(Object.assign(data.page, data.param, { selected: 1 })).then(
(response) => {
this.tableSelectOption.tableList = response.rows;
this.tableSelectOption.queryOpt.page.total = Number(response.total);
}
methods: {
listProject,
indexFormatter(val) {
return (
val + 1 + (this.queryParams.pageNum - 1) * this.queryParams.pageSize
);
},
// 点击或者双击数据回调
returnEvent(data) {
this.selectResult = {};
if (data.type === "dblclick") {
if (data.otherOption.tableType === "project") {
this.form.projectId = data.value.projectId;
this.form.projectName = data.value.projectName;
this.form.siteLat = data.value.projectLat;
this.form.siteLng = data.value.projectLng;
this.form.siteAddress = data.value.projectAddress;
}
this.selectTableShow = false;
} else if (data.type === "click") {
if (data.otherOption.tableType === "project") {
this.selectResult.projectId = data.value.projectId;
this.selectResult.projectName = data.value.projectName;
this.selectResult.siteLat = data.value.projectLat;
this.selectResult.siteLng = data.value.projectLng;
this.selectResult.siteAddress = data.value.projectAddress;
}
this.selectResult.tableType = data.otherOption.tableType;
}
},
// 点击确定按钮
resuleClick() {
if (this.selectResult.tableType === "project") {
this.form.projectId = this.selectResult.projectId;
this.form.projectName = this.selectResult.projectName;
this.form.siteLat = this.selectResult.projectLat;
this.form.siteLng = this.selectResult.projectLng;
this.form.siteAddress = this.selectResult.projectAddress;
}
this.selectTableShow = false;
handleDialogEvent(e) {
this.form.projectId = e.projectId;
this.form.projectName = e.projectName;
this.form.siteLat = e.projectLat;
this.form.siteLng = e.projectLng;
this.form.siteAddress = e.projectAddress;
},
noticeState(state) {
let className = "";
@ -818,19 +750,6 @@ export default {
children: node.children,
};
},
/** 查询行政区划下拉树结构 */
// getRegionalisTree() {
// listRegionalism().then((response) => {
// this.regionalismOption = [];
// const data = {
// regionalismId: 0,
// regionalismName: "中国",
// children: [],
// };
// data.children = this.handleTree(response.data, "regionalismId", "parentId");
// this.regionalismOption.push(data);
// });
// },
// 行政区划 下拉变化
regionalismChange(val) {
this.mapCenter = {
@ -877,7 +796,7 @@ export default {
updateBy: undefined,
updateTime: undefined,
remark: undefined,
m7sVersion: 'v3',
m7sVersion: "v3",
https: false,
serverType: "M7S",
};
@ -961,8 +880,8 @@ export default {
return delSite(recordIds);
})
.then((data) => {
if (data.msg === 'ok') {
this.msgSuccess('删除成功');
if (data.msg === "ok") {
this.msgSuccess("删除成功");
} else {
this.msgError(data.msg);
}