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.
563 lines
16 KiB
Vue
563 lines
16 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="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
|
|
>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="towername"
|
|
label="杆塔名称"
|
|
show-overflow-tooltip
|
|
>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="displayName"
|
|
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="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
|
|
>
|
|
<template slot-scope="scope">
|
|
{{
|
|
scope.row.lastHeartbeat == null
|
|
? ""
|
|
: $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
|
|
>
|
|
<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
|
|
><template slot-scope="scope"
|
|
>{{ scope.row.batteryCapacity }} /
|
|
{{ scope.row.batteryVoltage }}V</template
|
|
>
|
|
</el-table-column>
|
|
<el-table-column
|
|
prop="signalStrength4g"
|
|
label="4G信号强度"
|
|
show-overflow-tooltip
|
|
>
|
|
</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="580">
|
|
<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>
|
|
<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>
|
|
<imageCapture ref="imageCaptureref"></imageCapture>
|
|
<videoCapture ref="videoCaptureref"></videoCapture>
|
|
<pictureTags ref="picturetagsref"></pictureTags>
|
|
<gps-position ref="gpsdialog_ref"></gps-position>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import {
|
|
getTerminalJoggle,
|
|
deleteTerminalJoggle,
|
|
resetTerminalApi,
|
|
setTermGPSJoggle,
|
|
} from "@/utils/api/index";
|
|
import moment from "moment";
|
|
import addPhotoDialog from "./components/addPhotoDialog.vue";
|
|
import imageCapture from "./components/imageCapture.vue";
|
|
import videoCapture from "./components/videoCapture.vue";
|
|
import pictureTags from "./components/pictureTags.vue";
|
|
import gpsPosition from "./components/gpsPosition.vue";
|
|
export default {
|
|
components: {
|
|
addPhotoDialog,
|
|
imageCapture,
|
|
videoCapture,
|
|
pictureTags,
|
|
gpsPosition,
|
|
},
|
|
data() {
|
|
return {
|
|
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",
|
|
};
|
|
},
|
|
methods: {
|
|
////获取拍照装置列表数据
|
|
terminalList() {
|
|
this.loading = true;
|
|
getTerminalJoggle({
|
|
pageindex: this.page,
|
|
pagesize: this.pageSize,
|
|
})
|
|
.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);
|
|
},
|
|
//装置复位
|
|
handleDeviceReset(data) {
|
|
this.$confirm("此操作将复位装置, 是否继续?", "提示", {
|
|
confirmButtonText: "确定",
|
|
cancelButtonText: "取消",
|
|
type: "warning",
|
|
})
|
|
.then(() => {
|
|
resetTerminalApi({ cmId: data.cmdid })
|
|
.then((res) => {
|
|
if (res.code == 200) {
|
|
this.$message({
|
|
showClose: true,
|
|
message: "装置已复位",
|
|
type: "success",
|
|
});
|
|
} else {
|
|
this.$message({
|
|
showClose: true,
|
|
message: res.msg,
|
|
type: "error",
|
|
});
|
|
}
|
|
})
|
|
.catch((err) => {});
|
|
})
|
|
.catch(() => {
|
|
this.$message({
|
|
showClose: true,
|
|
type: "info",
|
|
message: "已取消删除",
|
|
});
|
|
});
|
|
},
|
|
//获取GPS位置
|
|
handleShowGPS(data) {
|
|
this.$refs.gpsdialog_ref.display();
|
|
this.$refs.gpsdialog_ref.getgpsData(data);
|
|
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({
|
|
message: "关闭GPS",
|
|
type: "success",
|
|
showClose: true,
|
|
});
|
|
} else {
|
|
this.$message({
|
|
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);
|
|
},
|
|
|
|
// //新建弹窗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({
|
|
type: "success",
|
|
message: "删除成功!",
|
|
showClose: true,
|
|
});
|
|
})
|
|
.catch(() => {
|
|
this.$message({
|
|
type: "info",
|
|
message: "已取消删除",
|
|
showClose: true,
|
|
});
|
|
});
|
|
},
|
|
//点击分页
|
|
handleCurrentChange(val) {
|
|
this.page = val;
|
|
this.terminalList(); //刷新
|
|
},
|
|
//每页条数
|
|
handleSizeChange(val) {
|
|
this.pageSize = val;
|
|
this.terminalList();
|
|
},
|
|
},
|
|
created() {
|
|
this.terminalList();
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="less">
|
|
.photoGraphicDevice {
|
|
width: calc(100% - 32px);
|
|
height: calc(100% - 32px);
|
|
padding: 16px 16px;
|
|
background: @color-white;
|
|
.photoBox {
|
|
border: 1px solid #dddddd;
|
|
height: calc(100% - 32px);
|
|
padding: 16px;
|
|
border-radius: 4px;
|
|
}
|
|
.photoGraphicBtnGroup {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.photoGraphicTable {
|
|
margin-top: 16px;
|
|
height: calc(100% - 48px);
|
|
}
|
|
.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>
|