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.

806 lines
23 KiB
Vue

<template>
<div class="photoGraphicDevice">
<div class="photoBox">
<div class="photoGraphicBtnGroup">
<h4>拍照装置管理</h4>
<el-button type="primary" icon="el-icon-plus" @click="handleAddPhoto()"
>新增</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="请输入线路/杆塔/设备编号"
></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="photoGraphicTable">
<el-table
ref="multipleTable"
:data="terminalTableData"
stripe
tooltip-effect="dark"
style="width: 100%"
height="calc(100% - 40px)"
@selection-change="handleSelectionChange"
@row-click="handleRowClick"
v-loading="loading"
>
<!-- <el-table-column
prop="cmdid"
label="电压等级"
show-overflow-tooltip
>
</el-table-column> -->
<el-table-column
prop="lineName"
label="线路名称"
show-overflow-tooltip
min-width="120"
>
</el-table-column>
<el-table-column
prop="towerName"
label="杆塔名称"
show-overflow-tooltip
min-width="150"
>
</el-table-column>
<el-table-column
prop="equipName"
label="设备名称"
show-overflow-tooltip
min-width="150"
>
</el-table-column>
<el-table-column
prop="cmdId"
label="设备编号"
show-overflow-tooltip
min-width="150"
>
</el-table-column>
<!-- <el-table-column
prop="cmdid"
label="SIM卡号"
show-overflow-tooltip
>
</el-table-column>
<el-table-column
prop="cmdid"
label="网络类型"
show-overflow-tooltip
>
</el-table-column>
<el-table-column
prop="cmdid"
label="状态"
show-overflow-tooltip
>
</el-table-column>
<el-table-column
prop="cmdid"
label="装置型号"
show-overflow-tooltip
>
</el-table-column>
<el-table-column
prop="cmdid"
label="装置厂家"
show-overflow-tooltip
>
</el-table-column>
<el-table-column
prop="cmdid"
label="规约版本"
show-overflow-tooltip
>
</el-table-column>
<el-table-column
prop="cmdid"
label="投运日期"
show-overflow-tooltip
:formatter="dateFormat"
>
</el-table-column> -->
<el-table-column
prop="lastHeartbeat"
label="最后一次心跳时间"
show-overflow-tooltip
min-width="150"
>
<template slot-scope="scope">
{{
scope.row.lastHeartbeat == null || scope.row.lastHeartbeat == 0
? ""
: $moment(scope.row.lastHeartbeat * 1000).format(
"yy-MM-DD HH:mm:ss"
)
}}</template
>
</el-table-column>
<el-table-column
prop="bootTime"
label="装置上次启动时间"
show-overflow-tooltip
min-width="150"
>
<template slot-scope="scope"
>{{
scope.row.bootTime == null
? ""
: $moment(scope.row.bootTime * 1000).format(
"yy-MM-DD HH:mm:ss"
)
}}
</template>
</el-table-column>
<el-table-column
label="电量/电压"
show-overflow-tooltip
min-width="80"
><template slot-scope="scope"
>{{ scope.row.batteryCapacity }} /
{{
scope.row.batteryVoltage.toFixed(1) == 0.0
? 0
: scope.row.batteryVoltage.toFixed(1)
}}V</template
>
</el-table-column>
<el-table-column
prop="signalStrength4g"
label="4G信号强度"
show-overflow-tooltip
min-width="90"
>
</el-table-column>
<!-- <el-table-column
prop="cmdid"
label=" 连续工作时间
剩余运行内存
剩余存储内存"
show-overflow-tooltip
>
</el-table-column> -->
<!-- <el-table-column
prop="updateTime"
label="修改时间"
:show-overflow-tooltip="true"
:formatter="dateFormat"
>
</el-table-column> -->
<!-- <el-table-column
prop="createTime"
label="创建时间"
:show-overflow-tooltip="true"
:formatter="dateFormat"
>
</el-table-column> -->
<el-table-column
fixed="right"
label="操作"
width="520"
v-if="roleUser != 2"
>
<template slot-scope="scope">
<el-button
@click.native.stop="handleRevisePhoto(scope.row)"
type="text"
>修改</el-button
>
<el-button
type="text"
@click.native.stop="handlepicture(scope.row)"
>图片标记</el-button
>
<el-button
type="text"
@click.native.stop="handleDeviceReset(scope.row)"
>装置复位</el-button
>
<el-button
type="text"
@click.native.stop="handleImageCapture(scope.row)"
>图像参数</el-button
>
<el-button
type="text"
@click.native.stop="handleVideoCapture(scope.row)"
>视频参数</el-button
>
<el-button
type="text"
@click.native.stop="handleShowGPS(scope.row)"
>获取GPS位置</el-button
>
<!-- <el-select
class="dropgps"
v-model="gpsvalue"
placeholder="请选择"
popper-class="gpsdropbox"
@change="gpsChange(scope.row)"
>
<el-option
v-for="item in gpsOptions"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select> -->
<el-dropdown
class="dropgps"
trigger="click"
@command="
(command) => {
handleCommand(command, scope.row);
}
"
>
<span class="el-dropdown-link">
GPS开关<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown" class="gpsdropStyle">
<el-dropdown-item command="open">开启GPS</el-dropdown-item>
<el-dropdown-item command="close">关闭GPS</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<!-- <el-button
type="text"
class="deleteText"
@click.native.stop="handleDelete(scope.row)"
>删除</el-button
> -->
</template>
</el-table-column>
<el-table-column fixed="right" label="操作" width="320" v-else>
<template slot-scope="scope">
<el-button
@click.native.stop="handleRevisePhoto(scope.row)"
type="text"
>修改</el-button
>
<el-button
type="text"
@click.native.stop="handlepicture(scope.row)"
>图片标记</el-button
>
<el-button
type="text"
@click.native.stop="handleShowGPS(scope.row)"
>获取GPS位置</el-button
>
<el-dropdown
class="dropgps"
trigger="click"
@command="
(command) => {
handleCommand(command, scope.row);
}
"
>
<span class="el-dropdown-link">
GPS开关<i class="el-icon-arrow-down el-icon--right"></i>
</span>
<el-dropdown-menu slot="dropdown" class="gpsdropStyle">
<el-dropdown-item command="open">开启GPS</el-dropdown-item>
<el-dropdown-item command="close">关闭GPS</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
<!-- <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>
<addPhotoDialog
:photoDialogTitle="photoDialogTitle"
ref="addPhotoDialogref"
></addPhotoDialog>
<imageCapturebak ref="imageCaptureref"></imageCapturebak>
<videoCapturebak ref="videoCaptureref"></videoCapturebak>
<pictureTags ref="picturetagsref"></pictureTags>
<gps-position ref="gpsdialog_ref"></gps-position>
<parameterSetDialog ref="parameterSetref"></parameterSetDialog>
<baseInfor ref="baseInfor_ref"></baseInfor>
<workStatus ref="workStatus_ref"></workStatus>
<runStatus ref="runStatus_ref"></runStatus>
<gpsSite ref="gpsSite_ref"></gpsSite>
</div>
</template>
<script>
import {
getTerminalJoggle,
deleteTerminalJoggle,
resetTerminalApi,
setTermGPSJoggle,
getSearchInfo,
} from "@/utils/api/index";
import moment from "moment";
import addPhotoDialog from "./components/addPhotoDialog.vue";
import imageCapturebak from "./components/imageCapturebak.vue";
import videoCapturebak from "./components/videoCapturebak.vue";
import pictureTags from "./components/pictureTags.vue";
import gpsPosition from "./components/gpsPosition.vue";
import parameterSetDialog from "./components/parameterSetDialog.vue";
import baseInfor from "./components/baseInfor.vue";
import workStatus from "./components/workStatus.vue";
import runStatus from "./components/runStatus.vue";
import gpsSite from "./components/gpsSite.vue";
export default {
components: {
addPhotoDialog,
imageCapturebak,
videoCapturebak,
pictureTags,
gpsPosition,
parameterSetDialog,
baseInfor,
workStatus,
runStatus,
gpsSite,
},
data() {
return {
dyOptions: [{ id: -1, name: "全部" }], //电压数据
xlOptions: [{ id: -1, name: "全部" }], //线路数据
gtOptions: [{ id: -1, name: "全部" }], //杆塔数据
formdata: {
dyId: -1,
lineId: -1,
towerId: -1,
search: "",
},
roleUser: "",
terminalTableData: [], //表格数据
photoDialog: false, //新增弹窗
photoDialogTitle: "", //弹窗标题
deleteArr: [], //删除数组
multipleSelection: [], //当前选中数组
formphotoInfo: {}, //弹窗传值
page: 1, // 当前页数
pageSize: 20, // 每页数量
total: 0, //总条数
loading: true,
gpsOptions: [
{
value: "1",
label: "GPS关闭",
},
{
value: "2",
label: "GPS开启",
},
],
gpsvalue: "1",
};
},
created() {
this.getSearchdy();
this.terminalList();
this.roleUser = localStorage.getItem("role");
console.log(this.roleUser);
},
methods: {
//获取电压信息
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.terminalList();
},
//重置
onReset() {
this.formdata = {};
this.getSearchdy();
this.page = 1;
this.pageSize = 20;
this.terminalList();
},
////获取拍照装置列表数据
terminalList() {
this.loading = true;
this.$set(this.formdata, "pageindex", this.page);
this.$set(this.formdata, "pagesize", this.pageSize);
getTerminalJoggle(this.formdata)
.then((res) => {
console.log(res);
this.terminalTableData = res.data.list;
this.total = res.data.total;
this.loading = false;
})
.catch((err) => {
console.log(err); //代码错误、请求失败捕获
});
},
//点击行选中当前行
handleRowClick(row, column, event) {
this.$refs.multipleTable.toggleRowSelection(row);
},
//获取选中的行
handleSelectionChange(val) {
this.multipleSelection = val;
},
//时间转化
dateFormat(row, column) {
var date = row[column.property];
if (date == undefined) {
return "";
}
return moment(date).format("YYYY-MM-DD HH:mm:ss");
},
// 新建弹窗
handleAddPhoto() {
this.photoDialogTitle = "新增";
this.$refs.addPhotoDialogref.display();
this.$refs.addPhotoDialogref.getdataform(null);
},
//handleResive 修改线路数据
handleRevisePhoto(data) {
this.photoDialogTitle = "修改";
this.$refs.addPhotoDialogref.display();
this.$refs.addPhotoDialogref.getdataform(data);
console.log(data);
},
//装置复位
handleDeviceReset(data) {
this.$confirm("此操作将复位装置, 是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
resetTerminalApi({ cmId: data.cmdId })
.then((res) => {
if (res.code == 200) {
this.$message({
duration: 1500,
showClose: true,
message: "装置已复位",
type: "success",
});
} else {
this.$message({
duration: 1500,
showClose: true,
message: res.msg,
type: "error",
});
}
})
.catch((err) => {});
})
.catch(() => {
// this.$message({
// duration: 1500,
// showClose: true,
// type: "info",
// message: "已取消删除",
// });
});
},
//获取GPS位置
handleShowGPS(data) {
// this.$refs.gpsdialog_ref.display();
// this.$refs.gpsdialog_ref.getgpsData(data);
this.$refs.gpsdialog_ref.display(data);
this.$refs.gpsdialog_ref.getgpssql();
console.log(data);
},
//切换gps开启关闭
changeGPS(val, row) {
console.log(val, row);
setTermGPSJoggle({ gpsstatus: val, cmdId: row.cmdId })
.then((res) => {
console.log(res);
if (val == 0) {
this.$message({
duration: 1500,
message: "关闭GPS",
type: "success",
showClose: true,
});
} else {
this.$message({
duration: 1500,
message: "成功开启GPS",
type: "success",
showClose: true,
});
}
})
.catch((err) => {
console.log(err); //代码错误、请求失败捕获
});
},
handleCommand(command, row) {
console.log(command, row);
switch (command) {
case "open": //开启
this.changeGPS(1, row);
break;
case "close": //关闭
this.changeGPS(0, row);
break;
}
},
//
// gpsChange(val) {
// console.log(val);
// },
//图像采集参数
handleImageCapture(data) {
this.$refs.imageCaptureref.display();
this.$refs.imageCaptureref.getSingleAccess(data);
this.$refs.imageCaptureref.getRatio();
},
//视频采集参数
handleVideoCapture(data) {
this.$refs.videoCaptureref.display();
this.$refs.videoCaptureref.getSingleAccess(data);
this.$refs.videoCaptureref.getRatio();
},
//线缆绘制
handlepicture(data) {
console.log(data);
this.$refs.picturetagsref.display(data);
},
//数据查询
handleSearchCommand(command, row) {
console.log(command, row);
switch (command) {
case "info":
this.$refs.baseInfor_ref.display();
break;
case "workStatus":
this.$refs.workStatus_ref.display();
break;
case "runStatus":
this.$refs.runStatus_ref.display();
break;
case "GPS":
this.$refs.gpsSite_ref.display();
break;
default:
break;
}
},
//参数配置
handleParameterSet(data) {
this.$refs.parameterSetref.display(data);
},
// //新建弹窗handleAddPhoto
// handleAddPhoto() {
// this.photoDialog = true;
// this.photoDialogTitle = "新增";
// },
// //修改弹窗handleRevisePhoto
// handleRevisePhoto(data) {
// this.photoDialog = true;
// this.photoDialogTitle = "修改";
// this.formphotoInfo = Object.assign({}, data);
// },
//删除数据
handleDelete(data) {
console.log(data);
this.deleteArr.push({
termid: data.id,
});
console.log(this.deleteArr);
this.$confirm("确定要删除记录吗,同时删除关联关系?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
// 行设置向后台请求删除数据
deleteTerminalJoggle({ list: this.deleteArr }).then((res) => {
console.log(res);
this.terminalList(); //刷新
});
this.$message({
duration: 1500,
type: "success",
message: "删除成功!",
showClose: true,
});
})
.catch(() => {
// this.$message({
// duration: 1500,
// type: "info",
// message: "已取消删除",
// showClose: true,
// });
});
},
//点击分页
handleCurrentChange(val) {
this.page = val;
this.terminalList(); //刷新
},
//每页条数
handleSizeChange(val) {
this.pageSize = val;
this.terminalList();
},
},
};
</script>
<style lang="less">
.photoGraphicDevice {
width: calc(100% - 24px);
height: calc(100% - 24px);
padding: 12px 12px;
background: @color-white;
.photoBox {
border: 1px solid #dddddd;
height: calc(100% - 24px);
padding: 12px;
border-radius: 4px;
.searchBox {
.ml10 {
margin-left: 10px;
}
.el-form {
.dybox {
.el-form-item__content {
width: 120px;
}
}
.xlbox {
.el-form-item__content {
width: 160px;
}
}
}
}
}
.photoGraphicBtnGroup {
display: flex;
justify-content: space-between;
align-items: center;
}
.searchBox {
margin-top: 8px;
}
.photoGraphicTable {
// margin-top: 16px;
//margin-top: 36px;
height: calc(100% - 94px);
}
.dropgps {
color: @color-primary;
margin-left: 16px;
// margin-right: 16px;
cursor: pointer;
font-size: 12px;
width: 80px;
.el-input__inner {
padding: 0px;
border: none;
color: @color-primary;
font-size: 12px;
background-color: transparent;
}
}
}
.gpsdropbox {
.el-select-dropdown__item {
line-height: 27px;
padding: 0 15px;
font-size: 12px;
height: 27px;
}
}
</style>