<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
>
</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-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>
<!--关联设备弹窗-->
<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="">
<<<<<<< HEAD
<el-input v-model="deviceRelatedQuery.searchStr" placeholder="请输入设备名称/厂家" clearable></el-input>
=======
<el-input
v-model="deviceRelatedQuery.searchStr"
placeholder="请输入设备编号/厂家"
clearable
></el-input>
>>>>>>> ad620ef3af4de08b199e1d1c6c52489a965e9a0a
</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>
</div>
</template>
<script>
import axios from "axios";
import { mapGetters } from "vuex";
export default {
data() {
return {
//站点搜索相关
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,
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: 100, 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,
ruleForm: {
id: "", //站点ID
stName: "", //站点名称
stCode: "", //站点编号
tt: "",
area: "", //所属区域
constructionStatus: "",
faultStatus: "",
taskStatus: "",
platformCode: "",
lat: "", //维度
lon: "", //经度
isPush: "",
createTime: "",
coordinateSystem: "",
status: "",
offlineTime: "",
stationType: "", //站点类型
// stationTypeName: "", //站点名称
coordinateSystem: "", //坐标系（经纬度所对应的的坐标系）
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"
}
]
},
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: {
//上传头像
fileChange(file) {
this.loading = true;
const isLt1M = file.size / 1024 / 1024 < 1;
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("上传图片大小不能超过 1MB!");
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;
// 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].toString();
}
this.projectObj = {
value: data.platformCode
};
this.ruleForm[key] = data[key];
}
this.syscityList = this.removeEmptyChild(this.allCity);
this.yzaddflag = 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: "",
coordinateSystem: "",
status: "",
offlineTime: "",
stationType: "", //站点类型
// stationTypeName: "",
coordinateSystem: "", //坐标系（经纬度所对应的的坐标系）
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>
.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>
