<template>
<div id="pagetwo">
<div class="form">
<el-input
v-model="searchStr"
placeholder="请输入站点编号或站点名称"
clearable
@change="handleChangeSearch"
></el-input>
<el-date-picker
v-model="startDate"
value-format="yyyy-MM-dd"
:picker-options="pickerOptionsStart"
type="date"
:clearable="true"
placeholder="请选择开始日期"
/>
<el-date-picker
v-model="endDate"
value-format="yyyy-MM-dd"
:picker-options="pickerOptionsEnd"
type="date"
:clearable="true"
placeholder="请选择结束日期"
/>
<el-button
type="primary"
icon="el-icon-search"
@click="search"
v-has="'Search'"
>查询</el-button
>
<el-button
type="primary"
icon="el-icon-circle-plus-outline"
@click="addform('ruleForm')"
v-has="'m11-2-1'"
>添加站点</el-button
>
</div>
<el-table :data="listExtend" style="width: 100%; height: calc(100% - 82px)">
<el-table-column
type="index"
label="序号"
width="70"
></el-table-column>
<el-table-column
prop="stCode"
label="站点编号"
max-width="120"
show-overflow-tooltip
></el-table-column>
<el-table-column
prop="stName"
label="站点名称"
show-overflow-tooltip
max-width="150"
></el-table-column>
<el-table-column label="站点类型" width="120">
<template slot-scope="scope">
<div>
<span v-if="scope.row.stationType == 0">水质站</span>
<span v-if="scope.row.stationType == 1">水位站</span>
<span v-if="scope.row.stationType == 2">流量站</span>
</div>
</template></el-table-column
>
<el-table-column
prop="createTime"
label="站点安装时间"
max-width="180"
show-overflow-tooltip
></el-table-column>
<el-table-column
prop="person"
label="安装人"
width="120"
></el-table-column>
<el-table-column label="关联设备" width="80">
<template slot-scope="scope">
<el-button type="text" size="small" v-if="scope.row.equips.length" @click="handleClick('look',scope.row)">查看设备</el-button>
<span v-else>-</span>
</template>
</el-table-column>
<el-table-column
prop="tt"
label="首次数据接入时间"
max-width="180"
show-overflow-tooltip
></el-table-column>
<el-table-column label="操作" width="80">
<template slot-scope="scope">
<el-button
type="text"
size="small"
@click="EditFZ(scope.$index, scope.row)"
style="margin: 0 10px"
v-has="'m11-2-2'"
>修改</el-button
>
</template>
</el-table-column>
</el-table>
<!-- 新增/修改的弹出框 -->
<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
v-model="ruleForm.platformCode"
placeholder="请选择所属项目"
>
<el-option
class="selectOption"
v-for="item in projectList"
:key="item.id"
:label="item.key"
:value="item.value"
></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(0, 0, 0, 0.8)"
: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="dialogInfo.width"
:bt-loading="dialogInfo.btLoading"
:bt-list="dialogInfo.btList"
@handleClick="handleClick"
>
<page-table
tabIndex
:api-url="deviceTableInfo.url"
:refresh="deviceTableInfo.refresh"
:data.sync="deviceTableInfo.data"
:query="deviceFilterInfo.query"
:init-curpage="deviceTableInfo.initCurpage"
:field-list="deviceTableInfo.fieldList"
:handle="deviceTableInfo.handle"
@handleClick="handleClick"
/>
</page-dialog>
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="currentPage"
:page-sizes="[10, 20, 30, 40]"
:page-size="PageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="AllTotal"
>
</el-pagination>
</div>
</template>
<script>
import axios from "axios";
export default {
name: "StatisticalReport",
data() {
return {
loadingdelet: undefined,
loading: false,
timer: null,
dialogImageUrl: "",
dialogVisible: false,
PageSize: 10,
AllTotal: 0,
currentPage: 1,
title: "站点管理",
listExtend: [], // 站点管理的返回数据
siteTypeList: [], //弹框里面站点类型列表
searchStr: "",
file: [],
startDate: "",
endDate: "",
pickerOptionsStart: {
//结束时间不能大于开始时间
disabledDate: time => {
if (this.endDate) {
return time.getTime() > new Date(this.endDate).getTime();
}
}
},
pickerOptionsEnd: {
disabledDate: time => {
return time.getTime() < new Date(this.startDate).getTime();
}
},
List: [],
ledlist: [],
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}
]
},
//设备搜索相关
deviceFilterInfo: {
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: "", event: "search", show: true},
{type: "button", label: "添加设备", btType: "primary", icon: "", event: "create", show: true, has: "m11-3-1"}
]
},
//设备表格相关
deviceTableInfo: {
url: '', //接口地址
refresh: 1,
initCurpage: 1,
data: [],
fieldList: [
{ label: "设备编号", value: "equipNo", minWidth: 100, tooltip: true },
{ label: "设备描述", value: "equipDesc", minWidth: 150, tooltip: true },
{ label: "设备厂家", value: "equipFactory", minWidth: 150, tooltip: true },
{ label: "联系人", value: "contactName", width: 100 },
{ label: "电话", value: "contactMobile", width: 120 },
],
handle: {
fixed: "right",
label: "操作",
width: "80",
btList: [
{ label: "解绑", size: "small", type: "text", event: "remove", show: true, has: 'm11-3-3' }
]
}
},
//需要进行操作的站点Code
needHandleSiteCode: "",
};
},
mounted() {
this.getsyscityList();
this.getlistExtend();
this.getsityType();
this.getCurrentUserProject(); //获取当前用户所绑定的项目
},
watch: {
"ruleForm.area": {
handler(newVal, oldVal) {
if (this.$refs.cascader) {
let children = this.$refs.cascader.getCheckedNodes();
// console.log(children);
if (
children.length &&
children[0].children &&
children[0].children.length < 1
) {
// console.log(9999);
this.$refs.cascader.dropDownVisible = false;
}
}
},
deep: true // 深度监听
},
dialogVisible: {
handler(newVal, oldval) {
if (oldval) {
this.dialogImageUrl = "";
}
}
},
"dialogInfo.visible"(val) {
if(!val) {
this.deviceTableInfo.data = [];
this.dialogInfo.btLoading = false;
}
}
},
methods: {
//将空的children置为undefined,避免在没有下一级数据的情况下显示暂无数据
removeEmptyChild(arr) {
arr.forEach(item => {
if (!item.children || item.children.length < 1) {
item.children = undefined;
} else {
this.removeEmptyChild(item.children);
}
});
return arr;
},
handleChangeSearch() {
this.currentPage = 1;
this.getlistExtend();
},
//上传头像
fileChange(file) {
// console.log(file.size, file.raw.type);
// const isJPG = file.raw.type === "image/jpeg";
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]);
}
})
.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();
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;
},
// 获取站点列表
async getlistExtend() {
const { data } = await this.$http.post(this.nozzle.listExtend, {
current: this.currentPage,
data: {
searchStr: this.searchStr,
startDate: this.startDate,
endDate: this.endDate
},
size: this.PageSize
});
this.listExtend = data.data.list;
this.AllTotal = data.data.total;
},
// 搜索查询按钮
search() {
this.currentPage = 1;
this.getlistExtend();
},
deleteRow(index, rows) {
rows.splice(index, 1);
},
// 弹框提交表单按钮
saveOru(formName) {
this.$refs[formName].validate(valid => {
if (valid) {
this.$http
.post(this.nozzle.saveOrupdate, {
data: this.ruleForm
})
.then(res => {
this.yzaddflag = false;
});
}
});
},
// 弹框取消表单按钮
resetField(formName) {
this.yzaddflag = false;
this.$refs[formName].resetFields();
},
visiblechange(visible) {
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();
};
});
}, 1000);
} else {
clearInterval(this.timer);
}
},
// 添加站点
addform(formName) {
this.yzaddflag = true;
// 获取地区列表
this.title = "新增站点";
},
// 操作里面的修改弹窗
EditFZ(index, rows) {
// 获取地区列表
for (let key in rows) {
if (key === "stationType") {
rows[key] = rows[key].toString();
}
this.ruleForm[key] = rows[key];
}
this.yzaddflag = true;
this.title = "修改站点";
this.FenZuflag2type = 2;
this.AddFZInput = rows.groupName;
this.ClickID = rows.id;
},
// 获取地区列表数据
async getsyscityList() {
const { data } = await this.$http.post(this.nozzle.syscity);
let arr = this.removeEmptyChild(data.data);
this.syscityList = data.data;
},
//获取站点类型列表
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
}
})
}
})
},
//点击事件
handleClick(event, data, index){
switch(event) {
//查看关联设备
case "look":
this.dialogInfo.visible = true;
this.dialogInfo.type = event;
this.deviceTableInfo.data = data.equips;
this.needHandleSiteCode = data.stCode;
break;
//解绑设备与站点
case "remove":
this.$confirm("此操作将解除设备和站点的绑定关系, 是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning"
}).then(res =>{
const params = {
data: {
siteCode: this.needHandleSiteCode,
equipNos: [data.equipNo]
}
}
this.$http.post(this.nozzle.sysEquipRemoveBatch,params).then(res =>{
if(res.data.code === 1 || res.data.code === 200) {
this.deviceTableInfo.data.splice(index,1);
this.getlistExtend();
}
this.$message({
message: res.data.msg,
type: res.data.code === 1 ? 'success' : 'error',
showClose: true,
})
}).catch(e =>{
message(e);
})
}).catch(() =>{})
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();
// this.getlistExtend();
},
handleChange(value) {
// 取选中数组的最后一项的id
this.ruleForm.area = value.slice(-1)[0];
},
handleSizeChange(val) {
this.PageSize = val;
this.getlistExtend();
},
handleCurrentChange(val) {
this.currentPage = val;
this.getlistExtend();
}
},
destroyed() {
clearInterval(this.timer);
}
};
</script>
<style lang="scss" scoped>
/deep/ .el-pagination .el-pager li.active {
background-color: #409eff !important;
cursor: default;
}
.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 {
height: 50px;
line-height: 50px;
text-align: center;
font-size: 16px;
}
.tableSection {
padding: 10px;
background: rgba(270, 255, 255, 0.05);
}
/deep/ .el-dialog .el-dialog__body {
text-align: left;
}
.el-dialog .selectInput {
width: 30% !important;
}
.el-dialog .selectInput .el-select-dropdown__empty {
width: 100% !important;
}
</style>
