<template>
<div id="pagetwo" class="page-data">
<!--搜素框-->
<div class="page-filter">
<page-filter
:query.sync="siteFilterInfo.query"
:filter-list="siteFilterInfo.list"
@handleClick="handleClick"
/>
</div>
<div class="page-content">
<!--表格-->
<div class="h-100">
<page-table
tabIndex
pagination
:api-url="siteTableInfo.url"
:refresh="siteTableInfo.refresh"
:data.sync="siteTableInfo.data"
:query="siteFilterInfo.query"
:page-query="siteTableInfo.pageQuery"
:list-type-info="listTypeInfo"
:init-curpage="siteTableInfo.initCurpage"
:field-list="siteTableInfo.fieldList"
:handle="siteTableInfo.handle"
@handleClick="handleClick"
>
<!-- 自定义插槽显示状态 -->
<template v-slot:col-equips="scope">
<el-button
type="text"
size="small"
@click="handleClick('look', scope.row)"
>查看设备</el-button
>
<el-button
type="text"
size="small"
@click="handleClick('config', scope.row)"
>修复因子</el-button
>
<!-- <el-button
type="text"
size="small"
@click="handleClick('updateconfig', scope.row)" v-if="!isconfigadd"
>修改因子</el-button
> -->
</template>
</page-table>
</div>
</div>
<!-- 新增/修改的弹出框 -->
<el-dialog
:visible.sync="yzaddflag"
width="1000px"
true
:title="title"
@close="closedialog('ruleForm')"
>
<div>
<el-form
:model="ruleForm"
:rules="rules"
ref="ruleForm"
label-width="110px"
>
<el-form-item label="站点名称" prop="stName" style="width: 100%">
<el-input
size="small"
v-model="ruleForm.stName"
class="selectInput"
></el-input>
<span
>站点名称命名规则 "[项目名称]"
+安装位置关键标识，例如[武昌]湖北大学东门监测站点</span
>
</el-form-item>
<el-form-item label="站点类型" prop="stationType">
<el-select
class="selectInput"
size="small"
v-model="ruleForm.stationType"
placeholder="请选择站点类型"
>
<el-option
class="selectOption"
v-for="item in siteTypeList"
:key="item.code"
:label="item.name"
:value="item.code"
></el-option>
</el-select>
<span>按实际设备类型选择站点类型</span>
</el-form-item>
<el-form-item label="所属项目" prop="platformCode">
<el-select
class="selectInput"
size="small"
filterable
value-key="value"
@change="handleChange"
v-model="projectObj"
placeholder="请选择所属项目"
>
<el-option
class="selectOption"
v-for="item in projectList"
:key="item.id"
:label="item.key"
:value="item"
></el-option>
</el-select>
</el-form-item>
<!-- <el-form-item label="所属区域" prop="area">
<el-cascader
ref="cascader"
popper-class="form-cascader"
class="selectInput"
v-model="ruleForm.area"
:options="syscityList"
filterable
placeholder="请选择所属区域"
:props="syscityListProps"
@change="handleChange"
@visible-change="visiblechange"
></el-cascader>
</el-form-item> -->
<el-form-item label="站点安装定位" required>
<el-col :span="7">
<el-form-item prop="coordinateSystem"
><el-input
size="small"
v-model="ruleForm.coordinateSystem"
></el-input
></el-form-item>
</el-col>
<el-col :span="1"> 经度</el-col>
<el-col :span="5">
<el-form-item prop="lon"
><el-input size="small" v-model="ruleForm.lon"></el-input
></el-form-item>
</el-col>
<el-col :span="1"> 纬度</el-col>
<el-col :span="5">
<el-form-item prop="lat"
><el-input size="small" v-model="ruleForm.lat"></el-input
></el-form-item>
</el-col>
<!-- 坐标拾取 -->
<el-col :span="5">
<el-button type="primary" @click="pickLngLat()"
>坐标拾取</el-button
>
</el-col>
<!-- 坐标拾取 -->
</el-form-item>
<el-form-item label="站点安装位置" prop="address">
<el-input
size="small"
v-model="ruleForm.address"
class="selectInput"
></el-input>
<span
>按实际安装位置填写，可填入地图定位软件显示的中文名或自行输入</span
>
</el-form-item>
<el-form-item label="安装负责人" prop="person" style="width: 100%">
<el-input
size="small"
v-model="ruleForm.person"
class="selectInput"
></el-input>
<span>填写安装负责人</span>
</el-form-item>
<el-form-item label="现场安装图片" prop="height">
<!-- 点击上传按钮 -->
<el-upload
v-loading="loading"
element-loading-text="正在上传图片..."
element-loading-spinner="el-icon-loading"
element-loading-background="rgba(255, 255, 255, 0.3)"
:auto-upload="false"
multiple
action="#"
:on-change="fileChange"
>
<i class="el-icon-plus">添加图片</i>
</el-upload>
<!-- 渲染服务器返回给我们的图片列表 -->
<div class="imglist">
<div
class="imgbox"
v-for="(item, index) in ruleForm.fileList"
:key="index"
>
<img
class="imgtype"
:src="item.fileAbbreviatedCloudStorageKey"
@click="handlePictureCardPreview(item)"
/>
<span class="deleteSpan" @click="deleteImg(item.fileNo)"
><span class="deletex">x</span></span
>
</div>
</div>
<!-- 点击图片预览大图的效果 -->
<el-dialog :visible.sync="dialogVisible" append-to-body>
<img width="100%" :src="dialogImageUrl" alt="" />
</el-dialog>
</el-form-item>
</el-form>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="resetField('ruleForm')">取消</el-button>
<el-button type="primary" @click="saveOru('ruleForm')">保存</el-button>
</span>
</el-dialog>
<!-- 配置因子的弹出框 -->
<el-dialog
:visible.sync="configtrue"
width="1000px"
true
:title="title"
>
<div>
<el-form
:model="configForm"
:rules="rules1"
ref="configForm"
label-width="110px"
>
<el-form-item label="规则引擎：" prop="ruleId">
<el-select
class="selectInput"
size="small"
v-model="configForm.ruleId"
placeholder="请选择规则引擎"
>
<el-option
class="selectOption"
v-for="item in ruleList"
:key="item.ruleId"
:label="item.ruleName"
:value="item.ruleId"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="关联雨量站：" prop="referRainStationSt">
<el-select
class="selectInput"
size="small"
v-model="configForm.referRainStationSt"
multiple
placeholder="请选择关联雨量站"
>
<el-option
class="selectOption"
v-for="item in yulianglist"
:key="item.stCode"
:label="item.stName"
:value="item.stCode"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="关联雨水管网：" prop="referRainPipeSt">
<el-select
class="selectInput"
size="small"
v-model="configForm.referRainPipeSt"
multiple
placeholder="请选择关联雨水管网"
>
<el-option
class="selectOption"
v-for="item in guanwanglist"
:key="item.stCode"
:label="item.stName"
:value="item.stCode"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="是否启用：" prop="isEnable">
<el-select
class="selectInput"
size="small"
v-model="configForm.isEnable"
placeholder="请选择是否启用"
>
<el-option
v-for="item in delFlagoptions"
:key="item.value"
:label="item.lable"
:value="item.value"
></el-option>
</el-select>
</el-form-item>
<hr style="margin-bottom: 20px" />
<el-row class="basicB m-t-24">
<div
v-for="(items, indexs) in configForm.siteRepairPropertyConfigList"
:key="indexs + 1199"
class="clear"
>
<el-col :span="5" class="p-r-10 p-l-22">
<el-form-item label="修复因子：">
<el-select
v-model="items.property"
placeholder="请选择修复因子"
>
<el-option
v-for="(item, index) in xiufulist"
:key="index + 1099"
:label="item.name"
:value="item.code"
>
</el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="正常范围：">
<el-input
v-model.trim="items.minValue"
placeholder="最小值"
type="number"
></el-input>
</el-form-item>
</el-col>
<el-col :span="1"> <span> </span> </el-col>
<el-col :span="2">
<el-input
v-model.trim="items.maxValue"
placeholder="最大值"
type="number"
>
</el-input>
</el-col>
<el-col :span="10" class="l-h-40">
<el-form-item label="是否启用：" prop="isEnable">
<el-select class="selectInput" v-model="items.isEnable">
<el-option
class="selectOption"
label="启用"
value="1"
></el-option>
<el-option
class="selectOption"
label="禁用"
value="0"
></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :span="1" class="text-right m-t-10">
<i
@click="deleteIcons(indexs)"
class="iconfont icon-qiyong deleteIcon"
></i>
</el-col>
</div>
</el-row>
</el-form>
</div>
<span slot="footer" class="dialog-footer">
<el-button @click="resetField('configForm')">取消</el-button>
<el-button @click="filterCondition">新增修复因子</el-button>
<el-button
type="primary"
@click="configcreate('configForm', isconfigadd)"
v-if="isconfigadd"
>保存</el-button
>
<el-button
type="primary"
@click="configcreate('configForm', isconfigadd)"
v-if="!isconfigadd"
>修改</el-button
>
</span>
</el-dialog>
<!--关联设备弹窗-->
<page-dialog
class="page-data-dialog"
:title="dialogInfo.title[dialogInfo.type]"
:visible.sync="dialogInfo.visible"
width="80%"
:bt-loading="dialogInfo.btLoading"
:bt-list="dialogInfo.btList"
@handleClick="handleClick"
>
<template v-if="dialogInfo.type === 'look'">
<div class="page-filter">
<el-form
:inline="true"
:model="deviceRelatedQuery"
ref="deviceRelatedQuery"
size="medium"
>
<el-form-item label="">
<el-input
v-model="deviceRelatedQuery.searchStr"
placeholder="请输入设备编号/厂家"
clearable
></el-input>
</el-form-item>
<el-form-item>
<el-button
type="primary"
icon="el-icon-search"
size="medium"
@click="handleClick('deviceSearch')"
>查询</el-button
>
</el-form-item>
</el-form>
</div>
<div class="page-content">
<el-row :gutter="20" class="h-100">
<el-col :span="10" class="h-100 flex flex-d">
<div class="table-title">未关联设备列表</div>
<page-table
class="flex-1"
checkBox
pagination
type="unRelated"
:api-url="deviceTableInfo.url"
:refresh="deviceTableInfo.refresh"
:data.sync="unRelatedDeviceTableInfo.data"
:query="unRelatedDeviceTableInfo.query"
:init-curpage="deviceTableInfo.initCurpage"
:field-list="deviceTableInfo.fieldList"
@handleClick="handleClick"
@handleEvent="handleEvent"
/>
</el-col>
<el-col :span="4" class="h-100">
<div class="btn-group">
<el-button
type="primary"
size="small"
icon="el-icon-d-arrow-right"
:disabled="isCanInsertDevice"
@click="handleClick('insert')"
>添加</el-button
>
<el-button
type="primary"
size="small"
icon="el-icon-d-arrow-left"
:disabled="isCanRemoveDevice"
@click="handleClick('remove')"
>移除</el-button
>
</div>
</el-col>
<el-col :span="10" class="h-100 flex flex-d">
<div class="table-title">已关联设备列表</div>
<page-table
class="flex-1"
checkBox
pagination
type="isRelated"
:api-url="deviceTableInfo.url"
:refresh="deviceTableInfo.refresh"
:data.sync="isRelatedDeviceTableInfo.data"
:query="isRelatedDeviceTableInfo.query"
:init-curpage="deviceTableInfo.initCurpage"
:field-list="deviceTableInfo.fieldList"
@handleClick="handleClick"
@handleEvent="handleEvent"
/>
</el-col>
</el-row>
</div>
</template>
</page-dialog>
<el-dialog
title="坐标拾取"
:visible.sync="dialogFormVisible"
:append-to-body="true"
:before-close="handleDialogClose"
customClass="addDialog"
>
<markMap
ref="markMap"
v-on:SendLngLat="SendLngLat"
style="height: 600px; width: 1050px"
/>
</el-dialog>
</div>
</template>
<script>
import axios from "axios";
import { mapGetters } from "vuex";
import markMap from "./markMap.vue";
export default {
components: {
markMap,
},
data() {
return {
dialogFormVisible: false,
//站点搜索相关
siteFilterInfo: {
query: {
searchStr: "",
startDate: "",
endDate: "",
},
list: [
{
type: "input",
label: "站点名称/编号",
value: "searchStr",
hideLabel: true,
},
{
type: "date",
label: "开始时间",
value: "startDate",
dateType: "date",
datePickerOptions: "pickerOptionsStart",
hideLabel: true,
},
{
type: "date",
label: "结束时间",
value: "endDate",
dateType: "date",
datePickerOptions: "pickerOptionsEnd",
hideLabel: true,
},
{
type: "button",
label: "查询",
btType: "primary",
icon: "el-icon-search",
event: "search",
show: true,
},
{
type: "button",
label: "添加站点",
btType: "primary",
icon: "el-icon-circle-plus-outline",
event: "create",
show: true,
disabled: true,
has: "m11-2-1"
}
]
},
//站点表格相关
siteTableInfo: {
url: this.nozzle.listExtend, //接口地址
refresh: 1,
initCurpage: 1,
data: [],
fieldList: [
{ label: "站点编号", value: "stCode", minWidth: 120, tooltip: true },
{ label: "站点名称", value: "stName", minWidth: 120, tooltip: true },
{ label: "站点类型", value: "stationTypeName", width: 120 },
{
label: "站点安装时间",
value: "createTime",
minWidth: 120,
tooltip: true,
},
{ label: "安装人", value: "person", width: 100 },
{ label: "关联设备", value: "equips", width: 150, type: "slot" },
{
label: "首次数据接入时间",
value: "tt",
minWidth: 150,
tooltip: true,
},
],
handle: {
fixed: "right",
label: "操作",
width: "80",
btList: [
{
label: "修改",
size: "small",
type: "text",
event: "update",
show: true,
has: "m11-2-2",
},
],
},
},
//列表相关
listTypeInfo: {},
loadingdelet: undefined,
loading: false,
timer: null,
dialogImageUrl: "",
dialogVisible: false,
title: "站点管理",
siteTypeList: [], //弹框里面站点类型列表
yzaddflag: false,
configtrue: false,//配置因子弹窗
isconfigadd: true, //修改/新增判断按钮
ruleList: [],//规则下拉框
yulianglist: [],//雨量站下拉框
guanwanglist: [],//雨水管网下拉框
xiufulist: [],//修复因子下拉框
delFlagoptions: [
{ value: "0", lable: "禁用" },
{ value: "1", lable: "启用" },
],
configForm: {
ruleId: "", //规则引擎
st: "", //站点编号
isEnable: "", // 是否启用（0否 1是）
referRainStationSt: [], //关联雨量站点(可多选，用,隔开)
referRainPipeSt: [], //关联雨水管网(可多选，用,隔开)
siteRepairPropertyConfigList: [
{
property: "", //修复因子
isEnable: "", //是否启用（0否 1是）
minValue: 0, //正常范围最小值
maxValue: 0, // 正常范围最大值
},
],
},
ruleForm: {
id: "", //站点ID
stName: "", //站点名称
stCode: "", //站点编号
tt: "",
area: "", //所属区域
constructionStatus: "",
faultStatus: "",
taskStatus: "",
platformCode: "",
lat: "", //维度
lon: "", //经度
isPush: "",
createTime: "",
status: "",
offlineTime: "",
stationType: "", //站点类型
// stationTypeName: "", //站点名称
coordinateSystem: "WGS84坐标系", //坐标系（经纬度所对应的的坐标系）
address: "", //站点安装位置
person: "", //安装负责人
fileList: [], //现场安装图片
},
rules: {
// area: [
// {
// required: true,
// message: "请选择所属区域",
// trigger: "change"
// }
// ],
stationType: [
{
required: true,
message: "请选择站点类型",
trigger: "change",
},
],
platformCode: [
{
required: true,
message: "请选择所属项目",
trigger: "change",
},
],
stName: [
{
required: true,
message: "请填写站点名称",
trigger: "blur",
},
],
lon: [
{
required: true,
message: "请填写经度",
trigger: "blur",
},
],
lat: [
{
required: true,
message: "请填写纬度",
trigger: "blur",
},
],
coordinateSystem: [
{
required: true,
message: "请填写站点坐标系",
trigger: "blur",
},
],
address: [
{
required: true,
message: "请填写站点安装位置",
trigger: "blur",
},
],
person: [
{
required: true,
message: "请填写安装负责人",
trigger: "blur",
},
],
},
rules1: {
ruleId: [
{
required: true,
message: "请选择规则引擎",
trigger: "blur"
}
],
referRainStationSt: [
{
required: true,
message: "请选择雨量站",
trigger: "blur",
},
],
isEnable: [
{
required: true,
message: "请选择是否启用",
trigger: "blur"
}
],
},
value: [],
// 站点管理/所属区域数组
syscityList: [],
syscityListProps: { checkStrictly: true, value: "id", label: "name" },
//当前用户权限内的项目数据
projectList: [],
//弹窗相关
dialogInfo: {
title: {
look: "",
},
width: "60%",
visible: false,
btLoading: false,
type: "",
btList: [
{ label: "关闭", type: "", icon: "", event: "close", show: true },
],
},
//设备表格通用相关
deviceTableInfo: {
url: this.nozzle.sysEquipRelatedList, //接口地址
refresh: 1,
initCurpage: 1,
fieldList: [
{
label: "设备名称",
value: "equipDesc",
minWidth: 100,
tooltip: true,
},
{
label: "设备厂家",
value: "equipFactory",
minWidth: 150,
tooltip: true,
},
],
},
//已关联设备表格相关
isRelatedDeviceTableInfo: {
data: [],
query: {
sign: "",
},
selectList: [],
},
//未关联设备表格相关
unRelatedDeviceTableInfo: {
data: [],
query: {
sign: "unbound",
},
selectList: [],
},
//设备关联过滤相关
deviceRelatedQuery: {
searchStr: "",
siteCode: "",
},
//选中的项目对象
projectObj: {},
};
},
mounted() {
this.siteTableInfo.refresh = Math.random();
this.getsityType();
this.getCurrentUserProject(); //获取当前用户所绑定的项目
},
computed: {
//移除按钮是否可点击
isCanRemoveDevice() {
return this.isRelatedDeviceTableInfo.selectList.length ? false : true;
},
//添加按钮是否可点击
isCanInsertDevice() {
return this.unRelatedDeviceTableInfo.selectList.length ? false : true;
},
...mapGetters(["allDept", "allRole", "allCity"]),
},
watch: {
"ruleForm.area": {
handler(newVal, oldVal) {
if (this.$refs.cascader) {
let children = this.$refs.cascader.getCheckedNodes();
if (
children.length &&
children[0].children &&
children[0].children.length < 1
) {
this.$refs.cascader.dropDownVisible = false;
}
}
},
deep: true, // 深度监听
},
dialogVisible: {
handler(newVal, oldval) {
if (oldval) {
this.dialogImageUrl = "";
}
},
},
"dialogInfo.visible"(val) {
if (!val) {
this.deviceTableInfo.data = [];
this.deviceRelatedQuery.searchStr = "";
this.dialogInfo.btLoading = false;
}
},
"deviceRelatedQuery.searchStr"(val) {
Object.assign(
this.isRelatedDeviceTableInfo.query,
this.deviceRelatedQuery
);
Object.assign(
this.unRelatedDeviceTableInfo.query,
this.deviceRelatedQuery
);
},
platformCode(val) {
console.log(777, val);
this.ruleForm.platformCode = val;
},
},
methods: {
filterCondition() {
/**
* 添加过滤条件
*/
this.configForm.siteRepairPropertyConfigList.push({
property: "", //修复因子
isEnable: "", //是否启用（0否 1是）
minValue: 0, //正常范围最小值
maxValue: 0, // 正常范围最大值
});
},
deleteIcons(index) {
// 删除过滤条件
this.configForm.siteRepairPropertyConfigList.splice(index, 1);
},
// 保存配置因子
configcreate(form, isadd) {
this.configForm.referRainStationSt = this.configForm.referRainStationSt.toString();
this.configForm.referRainPipeSt = this.configForm.referRainPipeSt.toString();
let httpurl = "";
if (isadd == true) {
httpurl = this.nozzle.siterepairconfigcreate;
} else {
httpurl = this.nozzle.siterepairconfigmodify;
}
this.$refs[form].validate((valid) => {
if (valid) {
this.$http.post(httpurl, this.configForm).then((res) => {
console.log(res);
if (res.data.code === 200) {
this.configtrue = false;
// this.isconfigadd=false
this.siteTableInfo.refresh = Math.random();
}
this.$message({
message: res.data.message,
type: res.data.code === 200 ? "success" : "error",
showClose: true,
});
});
}else{
console.log("完善信息")
}
})
},
//响应地图组件的确定，拾取坐标
SendLngLat(lonlat) {
this.dialogFormVisible = false;
this.ruleForm.lon = lonlat[0];
this.ruleForm.lat = lonlat[1];
},
//坐标拾取地图控件打开
pickLngLat() {
this.dialogFormVisible = true;
},
//监听面板直接叉叉掉事件
handleDialogClose() {
this.dialogFormVisible = false;
},
//上传头像
fileChange(file) {
this.loading = true;
const isLt1M = file.size / 1024 / 1024 < 5;
if (file.raw.type != "image/jpeg" && file.raw.type != "image/png") {
this.loading = false;
this.$message.error("上传图片只能是JPG或PNG格式!");
return;
}
if (!isLt1M) {
this.loading = false;
this.$message.error("上传图片大小不能超过 5MB!");
return;
}
var formdata = new FormData();
formdata.append("files", file.raw);
formdata.append("siteNo", this.ruleForm.stCode);
formdata.append("username", "admin");
let config = {
headers: { "Content-Type": "multipart/form-data" },
};
axios
.post(this.nozzle.upload, formdata, config)
.then((res) => {
if (res.data.code == 1) {
this.loading = false;
this.$message({
message: "上传图片成功！",
type: "success",
});
this.ruleForm.fileList.push(res.data.data[0]);
this.siteTableInfo.refresh = Math.random();
}
})
.catch((res) => {
this.loading = false;
this.$message({
message: "服务器问题！请重试！",
type: "warning",
});
});
},
// 删除图片按钮
deleteImg(fileNo) {
this.$confirm("此操作将永久删除该图片文件,无法撤回!是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
let fileNos = [];
fileNos.push(fileNo);
const loadingdelet = this.$loading({
lock: true,
text: "正在删除....",
spinner: "el-icon-loading",
background: "rgba(0, 0, 0, 0.7)",
});
this.$http
.post(this.nozzle.delete, {
data: {
siteNo: this.ruleForm.stCode,
fileNos: fileNos,
},
})
.then((res) => {
loadingdelet.close();
if (res.data.code === 1) {
this.siteTableInfo.refresh = Math.random();
}
this.$message({
type: res.data.code === 1 ? "success" : "error",
message: res.data.msg,
});
this.ruleForm.fileList = this.ruleForm.fileList.filter((item) => {
return item.fileNo != fileNo;
});
})
.catch((res) => {
loadingdelet.close();
this.$message({
type: "info",
message: "删除失败,请重试！",
});
});
})
.catch(() => {
loadingdelet.close();
this.$message({
type: "info",
message: "已取消删除",
});
});
},
// 点击图片显示图片预览大图
handlePictureCardPreview(file) {
this.dialogImageUrl = file.fileCloudStorageKey;
this.dialogVisible = true;
},
// 弹框提交表单按钮
saveOru(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
this.$http
.post(this.nozzle.saveOrupdate, {
data: this.ruleForm,
})
.then((res) => {
if (res.data.code === 1) {
this.siteTableInfo.refresh = Math.random();
this.yzaddflag = false;
}
this.$message({
message: res.data.msg,
type: res.data.code === 1 ? "success" : "error",
showClose: true,
});
});
}
});
},
// 弹框取消表单按钮
resetField(formName) {
this.yzaddflag = false;
this.configtrue = false;
this.$refs["configForm"].resetFields();
// console.log(9999,this.$refs[formName]);
// this.$refs[formName].resetFields();
this.closedialog();
},
visiblechange(visible) {
let that = this;
if (visible) {
this.timer = setInterval(() => {
NodeList.prototype.forEach = Array.prototype.forEach;
document
.querySelectorAll(".el-cascader-node__label")
.forEach((el) => {
el.onclick = function () {
if (this.previousElementSibling)
this.previousElementSibling.click();
};
el.ondblclick = function () {
if (Array.isArray(that.$refs.cascader)) {
that.$refs.cascader[0].dropDownVisible = false;
} else {
that.$refs.cascader.dropDownVisible = false;
}
};
});
}, 1000);
} else {
clearInterval(this.timer);
}
},
//获取站点类型列表
async getsityType() {
const { data } = await this.$http.post(this.nozzle.sityType, {
data: {
siteType: "site_type",
},
});
this.siteTypeList = data.data;
},
//获取当前用户所绑定的项目
getCurrentUserProject() {
this.$http
.post(this.nozzle.sysPlatformList, {
current: 0,
size: 0,
data: { searchStr: "", startDate: "", endDate: "" },
})
.then((res) => {
if (res.data.code === 1) {
this.projectList = res.data.data.list.map((item) => {
return {
id: item.id,
key: item.name,
value: item.platformCode,
areaId: item.area,
};
});
}
});
},
//表格checkbox选择事件
handleEvent(event, data) {
switch (event) {
case "isRelated":
this.isRelatedDeviceTableInfo.selectList = data;
break;
case "unRelated":
this.unRelatedDeviceTableInfo.selectList = data;
break;
}
},
//点击事件
handleClick(event, data, index) {
switch (event) {
//站点搜索
case "search":
this.siteTableInfo.initCurpage = Math.random();
this.siteTableInfo.refresh = Math.random();
break;
//添加站点
case "create":
this.yzaddflag = true;
this.title = "新增站点";
this.syscityList = this.removeEmptyChild(this.allCity);
break;
//编辑站点
case "update":
this.title = "修改站点";
for (let key in data) {
if (key === "stationType") {
data[key] = data[key] ? data[key].toString() : "";
}
this.projectObj = {
value: data.platformCode,
};
this.ruleForm[key] = data[key];
}
this.syscityList = this.removeEmptyChild(this.allCity);
this.yzaddflag = true;
break;
//配置因子
case "config":
this.title = "修复因子";
(this.configForm = {
ruleId: "", //规则引擎
st: "", //站点编号
isEnable: "", // 是否启用（0否 1是）
referRainStationSt: [], //关联雨量站点(可多选，用,隔开)
referRainPipeSt: [], //关联雨水管网(可多选，用,隔开)
siteRepairPropertyConfigList: [
{
property: "", //修复因子
isEnable: "", //是否启用（0否 1是）
minValue: 0, //正常范围最小值
maxValue: 0, // 正常范围最大值
},
],
}),
console.log(index);
this.configForm.st = data.stCode;
this.$http.get(this.nozzle.ruleEngineselectAll).then((res) => {
console.log(res);
if (res.data.code === 200) {
this.ruleList = res.data.data.list;
console.log(this.ruleList);
}
});
this.$http.post(this.nozzle.siteinfolist, { type: 3 }).then((res) => {
console.log(res);
if (res.data.code === 200) {
this.yulianglist = res.data.data;
console.log(this.yulianglist);
}
});
this.$http.post(this.nozzle.siteinfolist, { type: 8 }).then((res) => {
console.log(res);
if (res.data.code === 200) {
this.guanwanglist = res.data.data;
console.log(this.guanwanglist);
}
});
this.$http
.post(this.nozzle.listsitesupportedproperty + "/" + data.stCode)
.then((res) => {
console.log(res);
if (res.data.code === 200) {
this.xiufulist = res.data.data;
console.log(this.xiufulist);
}
});
this.$http
.post(this.nozzle.siteconfigdetail_by_st + "/" + data.stCode)
.then((res) => {
console.log(res);
if (res.data.code === 200) {
if (res.data.data) {
// 修改
this.isconfigadd = false;
this.configForm.ruleId = res.data.data.ruleId;
this.configForm.referRainStationSt = res.data.data.referRainStationSt.split(
","
);
this.configForm.referRainPipeSt = res.data.data.referRainPipeSt.split(
","
);
this.configForm.isEnable = String(res.data.data.isEnable);
this.configForm.siteRepairPropertyConfigList =
res.data.data.siteRepairPropertyConfigList;
this.configForm.id = res.data.data.id;
this.configForm.siteRepairPropertyConfigList.forEach(
(item) => {
item.isEnable = String(item.isEnable);
}
);
} else {
//新增
this.isconfigadd = true;
}
}
});
this.configtrue = true;
break;
//查看关联设备
case "look":
this.dialogInfo.type = event;
this.deviceRelatedQuery.siteCode = data.stCode;
this.dialogInfo.visible = true;
setTimeout(() => {
Object.assign(
this.isRelatedDeviceTableInfo.query,
this.deviceRelatedQuery
);
Object.assign(
this.unRelatedDeviceTableInfo.query,
this.deviceRelatedQuery
);
this.deviceTableInfo.refresh = Math.random();
}, 0);
break;
//关联设备搜索
case "deviceSearch":
this.deviceTableInfo.initCurpage = Math.random();
this.deviceTableInfo.refresh = Math.random();
break;
//添加设备到站点
case "insert":
const insertEquipNoArr = this.unRelatedDeviceTableInfo.selectList.map(
(item) => item.equipNo
);
const insertData = {
siteCode: this.unRelatedDeviceTableInfo.query.siteCode,
equipNos: insertEquipNoArr,
};
this.$http
.post(this.nozzle.sysEquipInsertBatch, { data: insertData })
.then((res) => {
if (res.data.code === 1) {
this.deviceRelatedQuery.searchStr = "";
this.deviceTableInfo.refresh = Math.random();
this.deviceTableInfo.initCurpage = Math.random();
}
this.$message({
message: res.data.msg,
type: res.data.code === 1 ? "success" : "error",
showClose: true,
});
});
break;
//解绑设备与站点
case "remove":
const removeEquipNoArr = this.isRelatedDeviceTableInfo.selectList.map(
(item) => item.equipNo
);
const removeData = {
siteCode: this.isRelatedDeviceTableInfo.query.siteCode,
equipNos: removeEquipNoArr,
};
this.$http
.post(this.nozzle.sysEquipRemoveBatch, { data: removeData })
.then((res) => {
if (res.data.code === 1) {
this.deviceRelatedQuery.searchStr = "";
this.deviceTableInfo.refresh = Math.random();
this.deviceTableInfo.initCurpage = Math.random();
}
this.$message({
message: res.data.msg,
type: res.data.code === 1 ? "success" : "error",
showClose: true,
});
})
.catch((e) => {
console.log(e);
});
break;
//关闭
case "close":
setTimeout(() => {
this.dialogInfo.visible = false;
}, 0);
break;
}
},
// 关闭弹框后做的操作
closedialog(formName) {
this.$refs["ruleForm"].resetFields();
this.ruleForm = {
id: "", //站点ID
stName: "", //站点名称
stCode: "", //站点编号
tt: "",
area: "", //所属区域
constructionStatus: "",
faultStatus: "",
taskStatus: "",
platformCode: "",
lat: "", //维度
lon: "", //经度
isPush: "",
createTime: "",
status: "",
offlineTime: "",
stationType: "", //站点类型
// stationTypeName: "",
coordinateSystem: "WGS84", //坐标系（经纬度所对应的的坐标系）
address: "", //站点安装位置
person: "", //安装负责人
fileList: [], //现场安装图片
};
// this.$refs.cascader.$refs.panel.activePath = [];
// this.$refs.cascader.$refs.panel.clearCheckedNodes();
},
handleChange(data) {
// 取选中数组的最后一项的id
this.ruleForm.platformCode = data.value;
this.ruleForm.area = data.areaId;
},
//将空的children置为undefined,避免在没有下一级数据的情况下显示暂无数据
removeEmptyChild(arr) {
arr.forEach((item) => {
if (!item.children || item.children.length < 1) {
item.children = undefined;
} else {
this.removeEmptyChild(item.children);
}
});
return arr;
},
},
destroyed() {
clearInterval(this.timer);
},
};
</script>
<style lang="scss" scoped>
.addDialog {
width: 1050px;
height: 650px;
}
.imgtype {
width: 150px;
height: 100px;
}
/deep/ .el-upload-list {
display: none;
}
.imgbox {
display: inline-block;
margin: 0 20px 20px 0;
position: relative;
}
.deleteSpan {
position: absolute;
display: inline-block;
right: -6px;
top: -8px;
cursor: pointer;
background: var(--white);
color: var(--white);
width: 15px;
height: 15px;
border-radius: 13px;
text-align: center;
}
.deletex {
color: var(--black);
position: absolute;
top: -12px;
left: 4px;
}
.form {
display: flex;
align-items: center;
justify-content: flex-start;
height: 50px;
text-align: left;
color: var(--white);
font-size: 14px;
box-sizing: border-box;
padding-left: 10px;
}
.form .el-input {
width: 200px;
margin: 0 10px;
}
.title,
.table-title {
@include hl(30px, 30px);
color: #409eff;
text-align: center;
font-size: 16px;
margin-bottom: 10px;
}
.tableSection {
padding: 10px;
background: rgba(270, 255, 255, 0.05);
}
/deep/ .el-dialog .el-dialog__body {
text-align: left;
padding-bottom: 0;
}
.el-dialog .selectInput {
width: 30% !important;
}
.el-dialog .selectInput .el-select-dropdown__empty {
width: 100% !important;
}
.btn-group {
height: 100%;
@include fdaj(center, center);
/deep/ .el-button + .el-button {
margin-left: 0;
margin-top: 10px;
}
}
</style>
