wangxingyuan
8 months ago
5 changed files with 701 additions and 152 deletions
Split View
Diff Options
-
+58 -1src/api/point/site_management.js
-
BINsrc/assets/video/1.mp4
-
+1 -1src/components/videoPlayer/index.vue
-
+455 -0src/views/point/components/site_VideoDialog.vue
-
+187 -150src/views/point/site_management.vue
+ 58
- 1
src/api/point/site_management.js
View File
BIN
src/assets/video/1.mp4
View File
+ 1
- 1
src/components/videoPlayer/index.vue
View File
+ 455
- 0
src/views/point/components/site_VideoDialog.vue
View File
| @ -0,0 +1,455 @@ | |||
| <template> | |||
| <el-dialog | |||
| :title="pointDialogDataName" | |||
| :visible.sync="pointDialogShow" | |||
| width="70%" | |||
| :before-close="bindingMonitorPointClose" | |||
| > | |||
| <el-row :gutter="20"> | |||
| <el-col :span="5"> | |||
| <div class="bindingMonitorPointTree"> | |||
| <el-tree | |||
| :data="dialogPointTree" | |||
| :props="defaultPropsMonitor" | |||
| @node-click="handleMonitor" | |||
| ></el-tree> | |||
| </div> | |||
| </el-col> | |||
| <el-col :span="13"> | |||
| <div class="bindingMonitorPointDiv"> | |||
| <videoPlayer /> | |||
| </div> | |||
| </el-col> | |||
| <el-col :span="6"> | |||
| <div style="background: #eee; padding: 5px"> | |||
| {{ $t("site_management.PTZ") }} | |||
| </div> | |||
| <div class="PTZ-content"> | |||
| <img src="@/assets/images/PTZImg.png" alt="" class="PTZImg" /> | |||
| <div class="r-ti2-pos"> | |||
| <div @click="ptzBtn('UP', 'UP_STOP')"></div> | |||
| <div @click="ptzBtn('UP_RIGHT', 'UP_RIGHT_STOP')"></div> | |||
| <div @click="ptzBtn('RIGHT', 'RIGHT_STOP')"></div> | |||
| <div @click="ptzBtn('DOWN_RIGHT', 'DOWN_RIGHT_STOP')"></div> | |||
| <div @click="ptzBtn('DOWN', 'DOWN_STOP')"></div> | |||
| <div @click="ptzBtn('DOWN_LEFT', 'DOWN_LEFT_STOP')"></div> | |||
| <div @click="ptzBtn('LEFT', 'LEFT_STOP')"></div> | |||
| <div @click="ptzBtn('UP_LEFT', 'UP_LEFT_STOP')"></div> | |||
| </div> | |||
| </div> | |||
| <div class="r-ti3"> | |||
| <div class="r-ti3-d1"> | |||
| <img src="@/assets/images/searchImg.png" alt="" /> | |||
| <div class="r-ti3-d2"> | |||
| <div @click="ptzBtn('ZOOM_OUT', 'ZOOM_OUT_STOP')"></div> | |||
| <div @click="ptzBtn('ZOOM_IN', 'ZOOM_IN_STOP')"></div> | |||
| </div> | |||
| </div> | |||
| <div class="r-ti3-d1"> | |||
| <img src="@/assets/images/r2Img.png" alt="" /> | |||
| <div class="r-ti3-d2"> | |||
| <div @click="fiBtn('nearfocus', 'nearfocusstop')"></div> | |||
| <div @click="fiBtn('farfocus', 'farfocusstop')"></div> | |||
| </div> | |||
| </div> | |||
| <div class="r-ti3-d1"> | |||
| <img src="@/assets/images/r3Img.png" alt="" /> | |||
| <div class="r-ti3-d2"> | |||
| <div @click="fiBtn('apertureoff', 'apertureoffstop')"></div> | |||
| <div @click="fiBtn('apertureon', 'apertureonstop')"></div> | |||
| </div> | |||
| </div> | |||
| </div> | |||
| <div class="r-ti4"> | |||
| <div style="display: flex"> | |||
| <el-select | |||
| v-model="presetDotNum" | |||
| :placeholder="$t('site_management.PleaseSelectAPresetPoint')" | |||
| @change="presetDotBtn" | |||
| > | |||
| <el-option | |||
| :label="item.dictLabel" | |||
| :value="item.dictValue" | |||
| v-for="item in listByEqIdAndChanneData" | |||
| :key="item.dictValue" | |||
| > | |||
| </el-option> | |||
| </el-select> | |||
| <img | |||
| src="@/assets/images/playImg.png" | |||
| @click="editPresetDot1" | |||
| title="编辑预置点名称" | |||
| /> | |||
| <img src="@/assets/images/addImg.png" alt="" /> | |||
| <el-popover | |||
| placement="top" | |||
| width="300" | |||
| v-model="popovervisible" | |||
| trigger="click" | |||
| > | |||
| <el-input placeholder="请输入内容" v-model="newpresetName"/> | |||
| <div class="popover-footer"> | |||
| <el-button size="mini" type="primary" @click="popovervisibleShow">取消</el-button> | |||
| <el-button size="mini" type="primary" @click="setPresetDot1">确定</el-button> | |||
| </div> | |||
| </el-popover> | |||
| </div> | |||
| <div style="display: flex; margin-top: 20px"> | |||
| <el-input | |||
| v-model="presetName" | |||
| :placeholder="$t('site_management.PleaseEnterTheContent')" | |||
| ></el-input> | |||
| <img | |||
| src="@/assets/images/setImg.png" | |||
| alt="" | |||
| title="编辑预置点名称" | |||
| /> | |||
| </div> | |||
| </div> | |||
| </el-col> | |||
| </el-row> | |||
| <el-table | |||
| :data="bindingMonitorPointTableData" | |||
| style="width: 100%" | |||
| @header-click="clickFun" | |||
| > | |||
| <el-table-column | |||
| prop="date" | |||
| :label="$t('site_management.ActionType')" | |||
| align="center" | |||
| > | |||
| </el-table-column> | |||
| <el-table-column | |||
| prop="name" | |||
| :label="$t('site_management.RecordingDuration')" | |||
| align="center" | |||
| > | |||
| </el-table-column> | |||
| <el-table-column | |||
| prop="address" | |||
| :label="$t('site_management.NumberOfPhotosTaken')" | |||
| align="center" | |||
| > | |||
| </el-table-column> | |||
| <el-table-column | |||
| prop="address" | |||
| :label="$t('site_management.PhotoInterval')" | |||
| align="center" | |||
| > | |||
| </el-table-column> | |||
| <el-table-column | |||
| align="center" | |||
| :render-header="(h, obj) => renderHeader(h, obj, $t('share.addTo'))" | |||
| > | |||
| <template slot-scope="scope"> | |||
| <span>{{ $t("share.delete") }}</span> | |||
| </template> | |||
| </el-table-column> | |||
| </el-table> | |||
| </el-dialog> | |||
| </template> | |||
| <script> | |||
| import videoPlayer from "@/components/videoPlayer/index.vue"; | |||
| import { | |||
| vl, | |||
| listByEqIdAndChannelId, | |||
| realtime, | |||
| PZT, | |||
| fi, | |||
| goto, | |||
| presetDotDistribute | |||
| } from "@/api/point/site_management"; | |||
| export default { | |||
| components: { videoPlayer }, | |||
| props: ["pointDialogDataName", "pointDialogShow"], | |||
| data() { | |||
| return { | |||
| bindingMonitorPointTitle: "绑定可见光检测点", | |||
| bindingMonitorPointDialogVisible: true, | |||
| dialogPointTree: [], | |||
| defaultPropsMonitor: { | |||
| children: "children", | |||
| label: "name", | |||
| }, | |||
| listByEqIdAndChanneData: [], | |||
| bindingMonitorPointTableData: [], | |||
| presetDotNum: "", | |||
| PZTData: {}, | |||
| presetName: "", | |||
| popovervisible: true, | |||
| newpresetName:'' | |||
| }; | |||
| }, | |||
| methods: { | |||
| bindingMonitorPointClose() { | |||
| this.bindingMonitorPointDialogVisible = false; | |||
| }, | |||
| // 绑定可见光监测点点击树事件 | |||
| handleMonitor(e) { | |||
| if (e.eqpbookId) { | |||
| this.PZTData = e; | |||
| listByEqIdAndChannelId({ | |||
| channelCode: e.channelCode, | |||
| patroldeviceCode: e.patroldeviceCode, | |||
| }).then((res) => { | |||
| if (res.code == 200) { | |||
| this.listByEqIdAndChanneData = res.data; | |||
| } | |||
| }); | |||
| realtime({ | |||
| patroldeviceCode: e.patroldeviceCode, | |||
| channelCode: e.channelCode, | |||
| }).then((res) => { | |||
| if (res.code == 200) { | |||
| // this.bindingMonitorPointTableData=res.data; | |||
| console.log(res, 1111); | |||
| } | |||
| }); | |||
| } | |||
| }, | |||
| renderHeader(h, { column, $index }, type) { | |||
| let that = this; | |||
| return h("div", [ | |||
| // 列名称 | |||
| h("span", column.label), | |||
| // 按钮 | |||
| h( | |||
| "el-button", | |||
| { | |||
| props: { | |||
| type: "text", | |||
| size: "small", | |||
| }, | |||
| style: "margin-left: 5px;", | |||
| on: { | |||
| click: function () { | |||
| that.clickButton(type); | |||
| }, | |||
| }, | |||
| }, | |||
| this.$t("share.addTo") | |||
| ), | |||
| ]); | |||
| }, | |||
| clickButton(type) { | |||
| console.log("我点击了" + type + "的列"); | |||
| }, | |||
| clickFun() {}, | |||
| init() { | |||
| vl().then((res) => { | |||
| if (res.code == 200) { | |||
| this.dialogPointTree = res.data; | |||
| } | |||
| }); | |||
| }, | |||
| ptzBtn(start, stop) { | |||
| let startData = { | |||
| speed: 5, | |||
| patroldeviceCode: this.PZTData.patroldeviceCode, | |||
| channelCode: this.PZTData.channelCode, | |||
| ptzControlType: start, | |||
| }; | |||
| let stopData = { | |||
| speed: 5, | |||
| patroldeviceCode: this.PZTData.patroldeviceCode, | |||
| channelCode: this.PZTData.channelCode, | |||
| ptzControlType: stop, | |||
| }; | |||
| if (startData.patroldeviceCode && startData.channelCode) { | |||
| PZT(startData).then((res) => { | |||
| if (res.code) { | |||
| console.log(res, "start"); | |||
| } | |||
| }); | |||
| PZT(stopData).then((res) => { | |||
| if (res.code) { | |||
| console.log(res, "stop"); | |||
| } | |||
| }); | |||
| } | |||
| }, | |||
| fiBtn(start, stop) { | |||
| let startData = { | |||
| speed: 5, | |||
| patroldeviceCode: this.PZTData.patroldeviceCode, | |||
| channelCode: this.PZTData.channelCode, | |||
| ptzControlType: start, | |||
| }; | |||
| let stopData = { | |||
| speed: 5, | |||
| patroldeviceCode: this.PZTData.patroldeviceCode, | |||
| channelCode: this.PZTData.channelCode, | |||
| ptzControlType: stop, | |||
| }; | |||
| if (startData.patroldeviceCode && startData.channelCode) { | |||
| fi(startData).then((res) => { | |||
| if (res.code) { | |||
| console.log(res, "start"); | |||
| } | |||
| }); | |||
| fi(stopData).then((res) => { | |||
| if (res.code) { | |||
| console.log(res, "stop"); | |||
| } | |||
| }); | |||
| } | |||
| }, | |||
| presetDotBtn(value) { | |||
| this.listByEqIdAndChanneData.forEach((item) => { | |||
| if (item.dictValue == this.presetDotNum) { | |||
| this.presetName = item.dictLabel; | |||
| } | |||
| }); | |||
| }, | |||
| // 编辑预置点名称 | |||
| editPresetDot1() { | |||
| let data = { | |||
| patroldeviceCode: this.PZTData.patroldeviceCode, | |||
| channelCode: this.PZTData.channelCode, | |||
| presetDotNum: this.presetDotNum, | |||
| name: this.presetName, | |||
| }; | |||
| goto(data).then((res) => { | |||
| if (res.code == 200) { | |||
| this.$message({ | |||
| message: res.msg, | |||
| type: "success", | |||
| }); | |||
| } else { | |||
| this.$message.error(res.msg); | |||
| } | |||
| }); | |||
| }, | |||
| popovervisibleShow(){ | |||
| this.popovervisible=false; | |||
| this.newpresetName=""; | |||
| }, | |||
| setPresetDot1(){ | |||
| } | |||
| }, | |||
| mounted() { | |||
| this.init(); | |||
| }, | |||
| }; | |||
| </script> | |||
| <style lang="scss" scoped> | |||
| .bindingMonitorPointTree { | |||
| width: 100%; | |||
| height: 37vh; | |||
| overflow-y: scroll; | |||
| } | |||
| .bindingMonitorPointDiv { | |||
| width: 100%; | |||
| height: 40vh; | |||
| // background: red; | |||
| } | |||
| .PTZ-content { | |||
| width: 170px; | |||
| margin: 10px auto; | |||
| position: relative; | |||
| img { | |||
| width: 100%; | |||
| } | |||
| } | |||
| .r-ti2-pos { | |||
| position: absolute; | |||
| top: 0; | |||
| left: 0; | |||
| width: 100%; | |||
| height: 100%; | |||
| div { | |||
| position: absolute; | |||
| z-index: 999; | |||
| width: 20px; | |||
| height: 15px; | |||
| cursor: pointer; | |||
| } | |||
| div:first-child { | |||
| top: 32px; | |||
| left: 75px; | |||
| } | |||
| div:nth-child(2) { | |||
| top: 50px; | |||
| left: 102px; | |||
| } | |||
| div:nth-child(3) { | |||
| top: 77px; | |||
| right: 30px; | |||
| } | |||
| div:nth-child(4) { | |||
| bottom: 56px; | |||
| left: 102px; | |||
| } | |||
| div:nth-child(5) { | |||
| bottom: 36px; | |||
| left: 75px; | |||
| } | |||
| div:nth-child(6) { | |||
| bottom: 56px; | |||
| right: 100px; | |||
| } | |||
| div:nth-child(7) { | |||
| bottom: 80px; | |||
| left: 30px; | |||
| } | |||
| div:nth-child(8) { | |||
| top: 50px; | |||
| right: 102px; | |||
| } | |||
| } | |||
| .r-ti3 { | |||
| width: 100%; | |||
| display: flex; | |||
| padding-top: 10px; | |||
| -webkit-box-pack: justify; | |||
| justify-content: space-between; | |||
| } | |||
| .r-ti3-d1 { | |||
| width: 76px; | |||
| position: relative; | |||
| img { | |||
| width: 100%; | |||
| } | |||
| .r-ti3-d2 { | |||
| position: absolute; | |||
| top: 0; | |||
| left: 0; | |||
| width: 100%; | |||
| height: 100%; | |||
| div:first-child { | |||
| width: 50%; | |||
| height: 100%; | |||
| position: absolute; | |||
| top: 0; | |||
| left: 0; | |||
| cursor: pointer; | |||
| } | |||
| div:nth-child(2) { | |||
| width: 50%; | |||
| height: 100%; | |||
| position: absolute; | |||
| top: 0; | |||
| right: 0; | |||
| cursor: pointer; | |||
| } | |||
| } | |||
| } | |||
| .r-ti4 { | |||
| padding-top: 20px; | |||
| img { | |||
| width: 24px; | |||
| height: 24px; | |||
| position: relative; | |||
| top: 6px; | |||
| cursor: pointer; | |||
| } | |||
| } | |||
| .popover-footer{ | |||
| width: 100%; | |||
| margin-top: 20px; | |||
| display: flex; | |||
| justify-content: flex-end; | |||
| } | |||
| </style> | |||