You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
407 lines
11 KiB
Vue
407 lines
11 KiB
Vue
<template>
|
|
<div class="towerinfobox">
|
|
<div class="deviceBox">
|
|
<div class="deviceBtnGroup">
|
|
<h4>杆塔信息管理</h4>
|
|
<el-button
|
|
type="primary"
|
|
icon="el-icon-plus"
|
|
@click.native.stop="handleAdddevice()"
|
|
>新增</el-button
|
|
>
|
|
</div>
|
|
<div class="searchBox">
|
|
<el-form :inline="true" :model="formdata" class="demo-form-inline">
|
|
<!-- <el-form-item label="电压等级" class="dybox">
|
|
<el-select v-model="formdata.dyId" @change="getSearchxl">
|
|
<el-option
|
|
v-for="item in dyOptions"
|
|
:key="item.id"
|
|
:label="item.name"
|
|
:value="item.id"
|
|
></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="线路名称" class="xlbox">
|
|
<el-select
|
|
v-model="formdata.lineId"
|
|
@change="getSearchgt"
|
|
filterable
|
|
>
|
|
<el-option
|
|
v-for="item in xlOptions"
|
|
:key="item.id"
|
|
:label="item.name"
|
|
:value="item.id"
|
|
></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="杆塔名称">
|
|
<el-select v-model="formdata.towerId" filterable>
|
|
<el-option
|
|
v-for="item in gtOptions"
|
|
:key="item.id"
|
|
:label="item.name"
|
|
:value="item.id"
|
|
></el-option>
|
|
</el-select>
|
|
</el-form-item> -->
|
|
<el-form-item>
|
|
<el-input
|
|
v-model="formdata.search"
|
|
placeholder="请输入线路/杆塔/地址"
|
|
clearable
|
|
></el-input>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary" @click="onSubmit">查询</el-button>
|
|
<el-button type="primary" @click="onReset">重置</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
</div>
|
|
<div class="deviceTable">
|
|
<el-table
|
|
ref="multipleTable"
|
|
:data="tableDate"
|
|
tooltip-effect="dark"
|
|
stripe
|
|
style="width: 100%"
|
|
height="calc(100% - 40px)"
|
|
@selection-change="handleSelectionChange"
|
|
@row-click="handleRowClick"
|
|
v-loading="loading"
|
|
highlight-current-row
|
|
:row-key="getRowKeys"
|
|
>
|
|
<!-- <el-table-column type="index" width="55"> </el-table-column>
|
|
<el-table-column type="selection" width="55"> </el-table-column> -->
|
|
<template slot="empty">
|
|
<el-empty :image-size="160" description="暂无数据"></el-empty>
|
|
</template>
|
|
<!-- <el-table-column
|
|
prop="dyLevelname"
|
|
label="电压等级"
|
|
show-overflow-tooltip
|
|
>
|
|
<template slot-scope="scope">
|
|
{{
|
|
scope.row.dyLevelname
|
|
}}
|
|
</template>
|
|
</el-table-column> -->
|
|
<el-table-column
|
|
prop="lineName"
|
|
label="线路名称"
|
|
show-overflow-tooltip
|
|
>
|
|
<template slot-scope="scope">
|
|
<el-link @click.native.stop="handleResive(scope.row)">{{
|
|
scope.row.lineName
|
|
}}</el-link>
|
|
</template>
|
|
</el-table-column>
|
|
<!-- <el-table-column
|
|
prop="lineId"
|
|
label="线路编号"
|
|
show-overflow-tooltip
|
|
></el-table-column> -->
|
|
<el-table-column prop="name" label="杆塔名称" show-overflow-tooltip>
|
|
<template slot-scope="scope">
|
|
<el-link @click.native.stop="handleResive(scope.row)">{{
|
|
scope.row.name
|
|
}}</el-link>
|
|
</template></el-table-column
|
|
>
|
|
<el-table-column
|
|
prop="termcount"
|
|
label="已绑定数量"
|
|
show-overflow-tooltip
|
|
></el-table-column>
|
|
<el-table-column
|
|
prop="address"
|
|
label="杆塔地址"
|
|
show-overflow-tooltip
|
|
></el-table-column>
|
|
|
|
<el-table-column prop="order" label="排序号" width="100">
|
|
<template slot-scope="scope">
|
|
{{ scope.row.order == null ? 0 : scope.row.order }}
|
|
</template>
|
|
</el-table-column>
|
|
|
|
<el-table-column fixed="right" label="操作" width="200">
|
|
<template slot-scope="scope">
|
|
<el-button
|
|
@click.native.stop="handleResive(scope.row)"
|
|
type="text"
|
|
>修改</el-button
|
|
>
|
|
<el-button
|
|
type="text"
|
|
class="deleteText"
|
|
@click.native.stop="handleDelete(scope.row)"
|
|
>删除</el-button
|
|
>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<div class="pageNation">
|
|
<el-pagination
|
|
@current-change="handleCurrentChange"
|
|
@size-change="handleSizeChange"
|
|
:current-page="page"
|
|
:page-size="pageSize"
|
|
layout="sizes, prev, pager, next, jumper,total"
|
|
:total="total"
|
|
background
|
|
>
|
|
</el-pagination>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 新增时间表 -->
|
|
<addDialog :title="title" ref="addDialogref"></addDialog>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import { getTowerListApi, delTowerApi, getSearchInfo } from "@/utils/api/index";
|
|
import addDialog from "./components/addDialog.vue";
|
|
|
|
export default {
|
|
name: "towerInformation",
|
|
components: {
|
|
addDialog,
|
|
},
|
|
data() {
|
|
return {
|
|
title: "", //弹窗标题
|
|
tableDate: [],
|
|
//multipleSelection: [], //获取当前选中
|
|
page: 1, // 当前页数
|
|
pageSize: 20, // 每页数量
|
|
total: 0, //总条数
|
|
loading: true,
|
|
dyOptions: [{ id: -1, name: "全部" }], //电压数据
|
|
xlOptions: [{ id: -1, name: "全部" }], //线路数据
|
|
gtOptions: [{ id: -1, name: "全部" }], //杆塔数据
|
|
|
|
formdata: {
|
|
dyId: -1,
|
|
lineId: -1,
|
|
towerId: -1,
|
|
search: "",
|
|
},
|
|
};
|
|
},
|
|
created() {
|
|
var that = this;
|
|
document.onkeydown = function (e) {
|
|
var key = window.event.keyCode;
|
|
if (key === 13) {
|
|
that.onSubmit(); // 触发事件
|
|
}
|
|
};
|
|
console.log(this.$route.query);
|
|
this.formdata.search = this.$route.query.name;
|
|
console.log(this.formdata.search);
|
|
},
|
|
mounted() {
|
|
this.getSearchdy();
|
|
this.deviceList();
|
|
},
|
|
|
|
methods: {
|
|
getRowKeys(row) {
|
|
return row.id;
|
|
},
|
|
//点击线路跳转
|
|
handleLineLink(val) {
|
|
console.log(val);
|
|
this.$router.push({
|
|
path: "/lineInformation",
|
|
query: { lineName: val.lineName, name: val.name },
|
|
});
|
|
},
|
|
//点击线路跳转
|
|
handletowerLink(val) {
|
|
console.log(val);
|
|
this.$router.push({
|
|
path: "/photographicDevice",
|
|
query: { lineName: val.lineName, name: val.name },
|
|
});
|
|
},
|
|
//获取电压信息
|
|
getSearchdy() {
|
|
getSearchInfo({ type: 1 })
|
|
.then((res) => {
|
|
this.dyOptions = [{ id: -1, name: "全部" }];
|
|
this.dyOptions = this.dyOptions.concat(res.data.list);
|
|
this.formdata.dyId = this.dyOptions[0].id;
|
|
this.getSearchxl();
|
|
})
|
|
.catch((err) => {});
|
|
},
|
|
//获取线路数据
|
|
getSearchxl() {
|
|
getSearchInfo({ type: 2, id: this.formdata.dyId })
|
|
.then((res) => {
|
|
this.xlOptions = [{ id: -1, name: "全部" }];
|
|
this.xlOptions = this.xlOptions.concat(res.data.list);
|
|
this.formdata.lineId = this.xlOptions[0].id;
|
|
this.getSearchgt();
|
|
})
|
|
.catch((err) => {});
|
|
},
|
|
//获取杆塔数据
|
|
getSearchgt() {
|
|
getSearchInfo({ type: 3, id: this.formdata.lineId })
|
|
.then((res) => {
|
|
this.gtOptions = [{ id: -1, name: "全部" }];
|
|
this.gtOptions = this.gtOptions.concat(res.data.list);
|
|
this.formdata.towerId = this.gtOptions[0].id;
|
|
})
|
|
.catch((err) => {});
|
|
},
|
|
//查询
|
|
onSubmit() {
|
|
this.page = 1;
|
|
this.deviceList();
|
|
},
|
|
//重置
|
|
onReset() {
|
|
this.formdata = {};
|
|
this.page = 1;
|
|
this.pageSize = 20;
|
|
this.deviceList();
|
|
},
|
|
//获取数据列表
|
|
deviceList() {
|
|
this.loading = true;
|
|
this.$set(this.formdata, "pageindex", this.page);
|
|
this.$set(this.formdata, "pagesize", this.pageSize);
|
|
getTowerListApi(this.formdata)
|
|
.then((res) => {
|
|
this.tableDate = res.data.list;
|
|
this.total = res.data.total;
|
|
this.loading = false;
|
|
})
|
|
.catch((err) => {});
|
|
},
|
|
//点击行选中
|
|
handleRowClick(row, column, event) {
|
|
this.$refs.multipleTable.toggleRowSelection(row);
|
|
},
|
|
//获取选中的行
|
|
handleSelectionChange(val) {
|
|
this.multipleSelection = val;
|
|
},
|
|
|
|
// 新建
|
|
handleAdddevice() {
|
|
this.title = "新增";
|
|
this.$refs.addDialogref.display();
|
|
this.$refs.addDialogref.getdataform(null);
|
|
},
|
|
|
|
//修改
|
|
handleResive(data) {
|
|
this.title = "修改";
|
|
this.$refs.addDialogref.display();
|
|
this.$refs.addDialogref.getdataform(data);
|
|
},
|
|
|
|
//删除数据
|
|
handleDelete(data) {
|
|
let deleteArr = [];
|
|
deleteArr.push(data.id);
|
|
console.log("aaaaaaaaaaaaaaaaaaaaaaaaaaa", deleteArr);
|
|
this.$confirm("确定要删除记录吗,同时删除关联关系?", "提示", {
|
|
confirmButtonText: "确定",
|
|
cancelButtonText: "取消",
|
|
type: "warning",
|
|
})
|
|
.then(() => {
|
|
delTowerApi({ list: deleteArr }).then((res) => {
|
|
if (res.code == 200) {
|
|
this.$message({
|
|
duration: 1500,
|
|
showClose: true,
|
|
type: "success",
|
|
message: "删除成功!",
|
|
});
|
|
this.deviceList(); //刷新
|
|
} else {
|
|
this.$message({
|
|
duration: 1500,
|
|
showClose: true,
|
|
type: "error",
|
|
message: "删除失败!",
|
|
});
|
|
}
|
|
});
|
|
})
|
|
.catch(() => {
|
|
this.$message({
|
|
duration: 1500,
|
|
showClose: true,
|
|
type: "info",
|
|
message: "已取消删除",
|
|
});
|
|
});
|
|
},
|
|
//点击分页
|
|
handleCurrentChange(val) {
|
|
this.page = val;
|
|
this.deviceList();
|
|
},
|
|
//每页条数
|
|
handleSizeChange(val) {
|
|
this.pageSize = val;
|
|
this.deviceList();
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="less">
|
|
.towerinfobox {
|
|
width: calc(100% - 24px);
|
|
height: calc(100% - 24px);
|
|
padding: 12px 12px;
|
|
background: #fff;
|
|
|
|
.deviceBox {
|
|
border: 1px solid #dddddd;
|
|
height: calc(100% - 24px);
|
|
padding: 12px;
|
|
border-radius: 4px;
|
|
.searchBox {
|
|
margin-top: 8px;
|
|
.ml10 {
|
|
margin-left: 10px;
|
|
}
|
|
.el-form {
|
|
.dybox {
|
|
.el-form-item__content {
|
|
width: 120px;
|
|
}
|
|
}
|
|
.xlbox {
|
|
.el-form-item__content {
|
|
width: 160px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.deviceBtnGroup {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
.deviceTable {
|
|
height: calc(100% - 94px);
|
|
//background: #fcc;
|
|
}
|
|
}
|
|
</style>
|