youhua
fanluyan
5 months ago
parent
87d8afbe95
commit
70de54a652
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,872 @@
|
||||
<template>
|
||||
<div class="photoGraphicDevice">
|
||||
<div class="photoBox">
|
||||
<div class="photoGraphicBtnGroup">
|
||||
<h4>拍照装置管理</h4>
|
||||
<div>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-plus"
|
||||
@click="handleAddPhoto()"
|
||||
>新增</el-button
|
||||
>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-document"
|
||||
@click="handleExport()"
|
||||
>导出</el-button
|
||||
>
|
||||
</div>
|
||||
</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="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> -->
|
||||
<template slot="empty">
|
||||
<el-empty :image-size="160" description="暂无数据"></el-empty>
|
||||
</template>
|
||||
<el-table-column
|
||||
prop="lineName"
|
||||
label="线路名称"
|
||||
show-overflow-tooltip
|
||||
min-width="120"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-link @click.native.stop="handleRevisePhoto(scope.row)">{{
|
||||
scope.row.lineName
|
||||
}}</el-link>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="towerName"
|
||||
label="杆塔名称"
|
||||
show-overflow-tooltip
|
||||
min-width="150"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-link @click.native.stop="handleRevisePhoto(scope.row)">{{
|
||||
scope.row.towerName
|
||||
}}</el-link>
|
||||
</template>
|
||||
</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="protocolName"
|
||||
label="规约名称"
|
||||
show-overflow-tooltip
|
||||
min-width="90"
|
||||
v-if="roleUser != 2"
|
||||
/>
|
||||
<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="540"
|
||||
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="340" 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,
|
||||
getTerminalListExcel,
|
||||
} 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.roleUser = localStorage.getItem("role");
|
||||
console.log(this.roleUser);
|
||||
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.terminalList();
|
||||
},
|
||||
methods: {
|
||||
//点击线路跳转
|
||||
handleLineLink(val) {
|
||||
console.log(val);
|
||||
this.$router.push({
|
||||
path: "/lineInformation",
|
||||
query: { lineName: val.lineName, name: val.towerName },
|
||||
});
|
||||
},
|
||||
//点击杆塔跳转
|
||||
handletowerLink(val) {
|
||||
console.log(val);
|
||||
this.$router.push({
|
||||
path: "/towerInformation",
|
||||
query: { lineName: val.lineName, name: val.towerName },
|
||||
});
|
||||
},
|
||||
//获取电压信息
|
||||
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);
|
||||
},
|
||||
//导出
|
||||
handleExport() {
|
||||
window.location.href = "/api/api/getTerminalListExcel";
|
||||
},
|
||||
|
||||
//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>
|
||||
@ -1,51 +0,0 @@
|
||||
<template>
|
||||
<div>
|
||||
<p>视频监控页面</p>
|
||||
<p>Remaining time: {{ remainingTime }}</p>
|
||||
<el-button @click="toggleCountdown">{{ isrRuning ? '暂停' : '开始' }}</el-button>
|
||||
</div>
|
||||
</template>
|
||||
<style lang="less">
|
||||
p {
|
||||
font-size: 20px;
|
||||
color: @color-white;
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
totalTime: 15,
|
||||
remainingTime: 15,
|
||||
isrRuning: false,
|
||||
timer: null
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
startCountdown() {
|
||||
console.log('开始倒计时');
|
||||
this.timer = setInterval(() => {
|
||||
if (this.remainingTime <= 0) {
|
||||
clearInterval(this.timer);
|
||||
this.remainingTime = this.totalTime;
|
||||
this.startCountdown();
|
||||
} else {
|
||||
this.remainingTime--;
|
||||
}
|
||||
}, 1000);
|
||||
},
|
||||
pauseCountdown() {
|
||||
console.log('暂停倒计时');
|
||||
clearInterval(this.timer);
|
||||
},
|
||||
toggleCountdown() {
|
||||
if (this.isrRuning) {
|
||||
this.pauseCountdown();
|
||||
} else {
|
||||
this.startCountdown();
|
||||
}
|
||||
this.isrRuning = !this.isrRuning;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -1,240 +0,0 @@
|
||||
<template>
|
||||
<div class="echartsPage">
|
||||
<div class="echart-top">
|
||||
<el-card class="box-card">
|
||||
<div id="echart1" style="width: 100%; height: 100%"></div>
|
||||
</el-card>
|
||||
<el-card class="box-card">
|
||||
<div id="echart2" style="width: 100%; height: 100%"></div>
|
||||
</el-card>
|
||||
</div>
|
||||
<div class="echart-top">
|
||||
<el-card class="box-card">
|
||||
<div id="echart3" style="width: 100%; height: 100%"></div>
|
||||
</el-card>
|
||||
<el-card class="box-card">
|
||||
<div id="echart4" style="width: 100%; height: 100%"></div>
|
||||
</el-card>
|
||||
</div>
|
||||
<!-- <el-card>
|
||||
<el-tabs type="border-card" v-model="tabName" @tab-click="handleClick"
|
||||
><el-tab-pane label="用户管理" name="用户管理"></el-tab-pane
|
||||
><el-tab-pane label="配置管理" name="配置管理"></el-tab-pane></el-tabs
|
||||
></el-card> -->
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: "",
|
||||
data() {
|
||||
return {
|
||||
tabName: "配置管理",
|
||||
myChart1: "",
|
||||
myChart2: "",
|
||||
myChart3: "",
|
||||
myChart4: "",
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.init();
|
||||
},
|
||||
watch: {
|
||||
"$store.state.collapse"(val) {
|
||||
console.log(val);
|
||||
setTimeout(() => {
|
||||
//echarts得重绘方法
|
||||
this.myChart1.resize();
|
||||
this.myChart2.resize();
|
||||
this.myChart3.resize();
|
||||
this.myChart4.resize();
|
||||
}, 300);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
this.getEchart1();
|
||||
this.getEchart2();
|
||||
this.getEchart3();
|
||||
this.getEchart4();
|
||||
},
|
||||
handleClick(value) {
|
||||
console.log("value", value);
|
||||
if (value.name === "用户管理") {
|
||||
this.getEchart1();
|
||||
this.getEchart2();
|
||||
} else {
|
||||
this.getEchart3();
|
||||
}
|
||||
},
|
||||
getEchart1() {
|
||||
this.$nextTick(() => {
|
||||
this.$echarts.init(document.getElementById("echart1")).dispose();
|
||||
this.myChart1 = this.$echarts.init(document.getElementById("echart1"));
|
||||
let option = {
|
||||
title: {
|
||||
text: "装置数量统计",
|
||||
},
|
||||
legend: { top: "bottom" },
|
||||
toolbox: {
|
||||
show: true,
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: "面积模式",
|
||||
type: "pie",
|
||||
radius: [50, 120],
|
||||
center: ["50%", "50%"],
|
||||
roseType: "area",
|
||||
itemStyle: { borderRadius: 8 },
|
||||
data: [
|
||||
{ value: 40, name: "rose 1" },
|
||||
{ value: 38, name: "rose 2" },
|
||||
{ value: 32, name: "rose 3" },
|
||||
{ value: 30, name: "rose 4" },
|
||||
{ value: 28, name: "rose 5" },
|
||||
{ value: 26, name: "rose 6" },
|
||||
{ value: 22, name: "rose 7" },
|
||||
{ value: 18, name: "rose 8" },
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
this.myChart1.setOption(option);
|
||||
window.addEventListener("resize", () => {
|
||||
this.myChart1.resize();
|
||||
});
|
||||
});
|
||||
},
|
||||
getEchart2() {
|
||||
this.$nextTick(() => {
|
||||
this.$echarts.init(document.getElementById("echart2")).dispose();
|
||||
this.myChart2 = this.$echarts.init(document.getElementById("echart2"));
|
||||
let option = {
|
||||
title: {
|
||||
text: "隐患分类统计",
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
|
||||
},
|
||||
yAxis: { type: "value" },
|
||||
series: [
|
||||
{
|
||||
data: [120, 200, 150, 80, 70, 110, 130],
|
||||
type: "bar",
|
||||
showBackground: true,
|
||||
backgroundStyle: { color: "rgba(180, 180, 180, 0.2)" },
|
||||
},
|
||||
],
|
||||
};
|
||||
this.myChart2.setOption(option);
|
||||
window.addEventListener("resize", () => {
|
||||
this.myChart2.resize();
|
||||
});
|
||||
});
|
||||
},
|
||||
getEchart3() {
|
||||
this.$nextTick(() => {
|
||||
this.$echarts.init(document.getElementById("echart3")).dispose();
|
||||
this.myChart3 = this.$echarts.init(document.getElementById("echart3"));
|
||||
let option = {
|
||||
title: {
|
||||
text: "装置信息统计",
|
||||
},
|
||||
xAxis: {
|
||||
type: "category",
|
||||
boundaryGap: false,
|
||||
data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
|
||||
},
|
||||
yAxis: { type: "value" },
|
||||
series: [
|
||||
{
|
||||
data: [820, 932, 901, 934, 1290, 1330, 1320],
|
||||
type: "line",
|
||||
areaStyle: {},
|
||||
},
|
||||
],
|
||||
};
|
||||
this.myChart3.setOption(option);
|
||||
window.addEventListener("resize", () => {
|
||||
this.myChart3.resize();
|
||||
});
|
||||
});
|
||||
},
|
||||
getEchart4() {
|
||||
this.$nextTick(() => {
|
||||
this.$echarts.init(document.getElementById("echart4")).dispose();
|
||||
this.myChart4 = this.$echarts.init(document.getElementById("echart4"));
|
||||
let option = {
|
||||
title: {
|
||||
text: "装置在线统计",
|
||||
},
|
||||
tooltip: {
|
||||
trigger: "item",
|
||||
},
|
||||
legend: {
|
||||
top: "5%",
|
||||
left: "center",
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: "pie",
|
||||
radius: ["40%", "70%"],
|
||||
avoidLabelOverlap: false,
|
||||
itemStyle: {
|
||||
borderRadius: 10,
|
||||
borderColor: "#fff",
|
||||
borderWidth: 2,
|
||||
},
|
||||
label: {
|
||||
show: false,
|
||||
position: "center",
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: 40,
|
||||
fontWeight: "bold",
|
||||
},
|
||||
},
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
data: [
|
||||
{ value: 1048, name: "在线" },
|
||||
{ value: 735, name: "离线" },
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
this.myChart4.setOption(option);
|
||||
window.addEventListener("resize", () => {
|
||||
this.myChart4.resize();
|
||||
});
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="less">
|
||||
.echartsPage {
|
||||
height: calc(100% - 32px);
|
||||
padding: 16px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
.echart-top {
|
||||
display: flex;
|
||||
height: 48%;
|
||||
justify-content: space-between;
|
||||
|
||||
.el-card {
|
||||
width: 48%;
|
||||
height: 100%;
|
||||
.el-card__body {
|
||||
height: calc(100% - 40px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue