From 5ab8c7186a5588bfee1cb0e4343da865e3c9959c Mon Sep 17 00:00:00 2001
From: fanluyan <754122931@qq.com>
Date: Wed, 25 Sep 2024 09:49:14 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BA=91=E5=8F=B0=E6=B7=BB=E5=8A=A0=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD=EF=BC=8C=E5=AE=9E=E7=8E=B0=E4=B8=8A=E4=B8=8B=E5=B7=A6?=
 =?UTF-8?q?=E5=8F=B3=EF=BC=8C=E4=BF=9D=E5=AD=98=E9=A2=84=E7=BD=AE=E4=BD=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/utils/api/index.js                        |  28 +
 .../components/carouselChart.vue              |   2 +-
 .../components/parameterArea.vue              |   4 +-
 .../components/ptzDevice/index.vue            |  22 +
 .../components/ptzDevice/ptzDraw.vue          | 615 ++++++++++++++++++
 src/views/realTimeSearch/index.vue            |   8 +
 6 files changed, 677 insertions(+), 2 deletions(-)
 create mode 100644 src/views/realTimeMonitor/components/ptzDevice/index.vue
 create mode 100644 src/views/realTimeMonitor/components/ptzDevice/ptzDraw.vue

diff --git a/src/utils/api/index.js b/src/utils/api/index.js
index 0daa626..da29936 100644
--- a/src/utils/api/index.js
+++ b/src/utils/api/index.js
@@ -1023,3 +1023,31 @@ export function updateSimcardApi(data) {
     data,
   });
 }
+
+//查询预置位接口
+export function getPresetApi(data) {
+  return request({
+    url: "/xymanager/preset/list",
+    method: "get",
+    params: data,
+  });
+}
+//保存
+export function savePresetApi(data) {
+  return request({
+    url: "/xymanager/preset/save",
+    method: "post",
+    data,
+  });
+}
+//删除
+export function deletePresetApi(data) {
+  return request({
+    url: "/xymanager/preset/delete",
+    method: "post",
+    params: data,
+    headers: {
+      "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
+    },
+  });
+}
diff --git a/src/views/realTimeMonitor/components/carouselChart.vue b/src/views/realTimeMonitor/components/carouselChart.vue
index 7941e61..5112350 100644
--- a/src/views/realTimeMonitor/components/carouselChart.vue
+++ b/src/views/realTimeMonitor/components/carouselChart.vue
@@ -233,7 +233,7 @@ export default {
       ],
       picLoading: true,
       currentPicPath: "", //大图
-      mediaType: "", //判断图片类型是视频还是图片
+      mediaType: 0, //判断图片类型是视频还是图片
       activeSmall: 0, //索引选中小图,
       currentPage: 0,
       srcList: [],
diff --git a/src/views/realTimeMonitor/components/parameterArea.vue b/src/views/realTimeMonitor/components/parameterArea.vue
index cc2e1cd..3ba289e 100644
--- a/src/views/realTimeMonitor/components/parameterArea.vue
+++ b/src/views/realTimeMonitor/components/parameterArea.vue
@@ -123,6 +123,7 @@
             <el-dropdown-item command="faultInfo">故障信息报</el-dropdown-item>
           </el-dropdown-menu>
         </el-dropdown>
+        <ptzDevice v-if="areaData.hasPan == 1"></ptzDevice>
       </div>
       <div class="setfocalLength" v-if="areaData.protocol == '65286'">
         <h3>焦距调节</h3>
@@ -185,7 +186,7 @@ import gpsButton from "./gpsButton.vue";
 import uploadpic from "./uploadpic.vue";
 import parameterSetDialog from "../../photographicDevice/components/parameterSetDialog.vue";
 import setAppButton from "./setAppButton.vue";
-
+import ptzDevice from "./ptzDevice/index.vue";
 import baseInfor from "../../photographicDevice/components/baseInfor.vue";
 import workStatus from "../../photographicDevice/components/workStatus.vue";
 import runStatus from "../../photographicDevice/components/runStatus.vue";
@@ -211,6 +212,7 @@ export default {
     parameterSetDialog,
     uploadpic,
     setChannelButton,
+    ptzDevice,
     setAppButton,
     baseInfor,
     workStatus,
diff --git a/src/views/realTimeMonitor/components/ptzDevice/index.vue b/src/views/realTimeMonitor/components/ptzDevice/index.vue
new file mode 100644
index 0000000..6a6adb2
--- /dev/null
+++ b/src/views/realTimeMonitor/components/ptzDevice/index.vue
@@ -0,0 +1,22 @@
+<template>
+  <div class="yuntaiBox">
+    <el-button type="primary" @click="handleSetptz">云台设置 </el-button>
+    <ptzDraw ref="ptzDrawer_ref"></ptzDraw>
+  </div>
+</template>
+<script>
+import ptzDraw from "./ptzDraw.vue";
+export default {
+  components: { ptzDraw },
+  data() {
+    return {};
+  },
+  methods: {
+    handleSetptz() {
+      console.log("设置云台");
+      this.$refs.ptzDrawer_ref.display();
+    },
+  },
+};
+</script>
+<style lang="less"></style>
diff --git a/src/views/realTimeMonitor/components/ptzDevice/ptzDraw.vue b/src/views/realTimeMonitor/components/ptzDevice/ptzDraw.vue
new file mode 100644
index 0000000..02b65a5
--- /dev/null
+++ b/src/views/realTimeMonitor/components/ptzDevice/ptzDraw.vue
@@ -0,0 +1,615 @@
+<template>
+  <div class="drawDialog">
+    <el-drawer
+      :title="`云台设置${this.areaData.name}`"
+      :visible.sync="ptzdrawer"
+      direction="rtl"
+    >
+      <div class="ytDraw">
+        <div class="ytTop">
+          <div class="cirle">
+            <div class="ybg1">
+              <div class="ybg2" @click="openPower(powerOn)">
+                <b v-if="powerOn">关闭</b>
+                <b v-else>开启</b>
+              </div>
+              <div class="arrowtop" @click="handleTop">
+                <i class="el-icon-arrow-up"></i>
+              </div>
+              <div class="arrowright" @click="handleRight">
+                <i class="el-icon-arrow-right"></i>
+              </div>
+              <div class="arrowbottom" @click="handleBottom">
+                <i class="el-icon-arrow-down"></i>
+              </div>
+              <div class="arrowleft" @click="handleLeft">
+                <i class="el-icon-arrow-left"></i>
+              </div>
+            </div>
+          </div>
+          <div class="controlBox">
+            <div class="sf gnbtn">
+              <h3><i class="el-icon-full-screen"></i>缩放</h3>
+              <div class="grop">
+                <el-button
+                  type="primary"
+                  icon="el-icon-plus"
+                  @click="sfAdd"
+                ></el-button>
+                <el-button
+                  type="primary"
+                  icon="el-icon-minus"
+                  @click="sfMin"
+                ></el-button>
+              </div>
+            </div>
+            <div class="gq gnbtn">
+              <h3><i class="el-icon-orange"></i>光圈</h3>
+              <div class="grop">
+                <el-button
+                  type="primary"
+                  icon="el-icon-plus"
+                  @click="gqAdd"
+                ></el-button>
+                <el-button
+                  type="primary"
+                  icon="el-icon-minus"
+                  @click="gqMin"
+                ></el-button>
+              </div>
+            </div>
+            <div class="jj gnbtn">
+              <h3><i class="el-icon-view"></i>焦距</h3>
+              <div class="grop">
+                <el-button
+                  type="primary"
+                  icon="el-icon-plus"
+                  @click="jjAdd"
+                ></el-button>
+                <el-button
+                  type="primary"
+                  icon="el-icon-minus"
+                  @click="jjMin"
+                ></el-button>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="speedBox">
+          <span class="label">速度</span>
+          <el-slider v-model="speedVal"></el-slider>
+          <span class="label">{{ speedVal }}%</span>
+        </div>
+        <div class="btnfungrop">
+          <el-button type="primary" icon="el-icon-camera">主动拍照</el-button>
+          <el-button type="primary" icon="el-icon-c-scale-to-original"
+            >开启雨刷</el-button
+          >
+          <el-button type="primary" icon="el-icon-sunny">镜头除雾</el-button>
+          <el-button
+            type="primary"
+            icon="el-icon-mobile-phone"
+            @click="savePreset"
+            >保存预置位</el-button
+          >
+        </div>
+        <div class="presetList">
+          <h3>预置位</h3>
+          <div class="presetTable">
+            <el-table
+              :data="tableData"
+              height="calc(100% )"
+              border
+              style="width: 100%"
+            >
+              <el-table-column prop="name" label="预置位"> </el-table-column>
+              <el-table-column label="操作">
+                <template slot-scope="scope">
+                  <el-button
+                    @click.native.stop="handleSet(scope.row)"
+                    type="primary"
+                    icon="el-icon-setting"
+                  ></el-button>
+                  <el-button
+                    @click.native.stop="handlePlay(scope.row)"
+                    type="primary"
+                    icon="el-icon-video-play"
+                  ></el-button>
+                  <el-button
+                    type="danger"
+                    icon="el-icon-delete"
+                    @click.native.stop="handleDelete(scope.row)"
+                  ></el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+      </div>
+    </el-drawer>
+    <el-dialog
+      title="设置预置位"
+      :visible.sync="prestDialogShow"
+      :close-on-click-modal="false"
+      width="480px"
+    >
+      <el-form :model="presetform" :rules="rules" ref="ruleForm">
+        <el-form-item label="预置位名称" prop="name">
+          <el-input v-model="presetform.name" autocomplete="off"></el-input>
+        </el-form-item>
+        <el-form-item label="预置位号" prop="presetVal">
+          <el-input
+            v-model.number="presetform.presetVal"
+            autocomplete="off"
+          ></el-input>
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="prestDialogShow = false">取 消</el-button>
+        <el-button type="primary" @click="commitPrest">确 定</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import {
+  getTermStatus,
+  setTermCamera,
+  getTermCameraRequest,
+  getPresetApi,
+  savePresetApi,
+  deletePresetApi,
+} from "@/utils/api/index";
+export default {
+  data() {
+    var checkpreset = (rule, value, callback) => {
+      if (!value) {
+        return callback(new Error("预置位号不能为空"));
+      }
+      setTimeout(() => {
+        if (!Number.isInteger(value)) {
+          callback(new Error("请输入数字值"));
+        } else {
+          if (value <= 0 || value > 254) {
+            callback(new Error("预置位号为[1~254]"));
+          } else {
+            callback();
+          }
+        }
+      }, 500);
+    };
+    return {
+      powerOn: false, //电源默认关闭
+      ptzdrawer: false,
+      speedVal: 50,
+      prestDialogShow: false, //保存预置位弹窗
+      presetform: {
+        name: "",
+        presetVal: 1,
+      },
+      tableData: [],
+      statusTimer: null,
+      statusNum: 0,
+      termId: null,
+      fucType: 0, //点击某个按钮ctrl
+      presetNum: 0, //默认预置位 0
+      rules: {
+        name: [
+          { required: true, message: "请输入预置位名称", trigger: "blur" },
+        ],
+        presetVal: [{ validator: checkpreset, trigger: "blur" }],
+      },
+    };
+  },
+  computed: {
+    areaData() {
+      return this.$store.state.currentData;
+    },
+  },
+  methods: {
+    display() {
+      console.log(this.areaData);
+      this.termId = this.areaData.id;
+      this.ptzdrawer = true;
+      this.getPresetList();
+    },
+    getPresetList() {
+      getPresetApi({
+        termId: this.termId,
+      })
+        .then((res) => {
+          console.log(res);
+          this.tableData = res.data;
+        })
+        .catch((err) => {});
+    },
+    //开启电源
+    openPower(val) {
+      console.log(val);
+      this.powerOn = !this.powerOn;
+      if (val) {
+        //开启
+        this.fucType = 9;
+        this.presetNum = 0;
+        console.log("点击了关闭");
+      } else {
+        //关闭
+        this.fucType = 0;
+        this.presetNum = 0;
+        console.log("点击了开启");
+      }
+
+      this.termstatusFun();
+    },
+    //控制上下左右
+    handleTop() {
+      console.log("我点击了向上移动一个单位");
+      this.fucType = 2;
+      this.presetNum = 0;
+      this.termstatusFun();
+    },
+    handleBottom() {
+      console.log("我点击了向下移动一个单位");
+      this.fucType = 3;
+      this.presetNum = 0;
+      this.termstatusFun();
+    },
+    handleLeft() {
+      console.log("我点击了向左移动一个单位");
+      this.fucType = 4;
+      this.presetNum = 0;
+      this.termstatusFun();
+    },
+    handleRight() {
+      console.log("我点击了向右移动一个单位");
+      this.fucType = 5;
+      this.presetNum = 0;
+      this.termstatusFun();
+    },
+    //控制缩放
+    sfAdd() {
+      console.log("sf增加");
+    },
+    sfMin() {
+      console.log("sf减少");
+    },
+    //控制光圈
+    gqAdd() {
+      console.log("gq增加");
+    },
+    gqMin() {
+      console.log("gq减少");
+    },
+    //控制焦距
+    jjAdd() {
+      console.log("jj增加");
+      this.fucType = 6;
+      this.presetNum = 0;
+      this.termstatusFun();
+    },
+    jjMin() {
+      console.log("jj减少");
+      this.fucType = 7;
+      this.presetNum = 0;
+      this.termstatusFun();
+    },
+    //保存预置位
+    savePreset() {
+      this.prestDialogShow = true;
+      console.log("点击保存预置位");
+    },
+    commitPrest() {
+      console.log(this.presetform);
+      this.fucType = 8;
+      this.presetNum = this.presetform.presetVal;
+      this.termstatusFun();
+      //一秒后调用保存接口
+      setTimeout(() => {
+        savePresetApi({
+          name: this.presetform.name,
+          presetNo: this.presetform.presetVal,
+          termId: this.termId,
+        })
+          .then((res) => {
+            console.log(res);
+            if (res.code == "200") {
+              this.prestDialogShow = false;
+              this.getPresetList();
+            }
+          })
+          .catch((err) => {});
+      }, 1000);
+    },
+    //点击预置位
+    handleSet(val) {
+      console.log(val);
+      this.prestDialogShow = true;
+      this.presetform.name = val.name;
+      this.presetform.presetVal = val.presetNo;
+    },
+    handlePlay(val) {
+      console.log(val);
+      this.fucType = 1;
+      this.presetNum = val.presetNo;
+      this.termstatusFun();
+    },
+    handleDelete(val) {
+      console.log(val);
+      deletePresetApi({
+        presetNo: val.presetNo,
+        termId: val.termId,
+      })
+        .then((res) => {
+          console.log(res);
+          if (res.code == "200") {
+            // this.prestDialogShow = false;
+            this.getPresetList();
+          }
+        })
+        .catch((err) => {});
+    },
+    //获取设备状态
+    termstatusFun() {
+      // act=cameractrl --cmdid=XYYFV11-HENA-0003 --channel=1 --preset=0 --ctrl=2
+      getTermStatus({ termId: this.termId }).then((res) => {
+        console.log(res);
+        if (res.data.isonline) {
+          let params = [
+            {
+              name: "act",
+              value: "cameractrl",
+            },
+            {
+              name: "channel",
+              value: 1,
+            },
+            {
+              name: "preset",
+              value: this.presetNum,
+            },
+            {
+              name: "ctrl",
+              value: this.fucType,
+            },
+          ];
+          this.setTermFn(params);
+        } else {
+          this.picLoading = false;
+          this.$message({
+            duration: 1500,
+            showClose: true,
+            message: "装置下线，发送指令失败",
+            type: "error",
+          });
+        }
+      });
+    },
+    //下发命令
+    setTermFn(val) {
+      setTermCamera({
+        termId: this.termId,
+        list: val,
+      })
+        .then((res) => {
+          console.log(res);
+          this.$message({
+            duration: 1500,
+            showClose: true,
+            message: "命令执行成功",
+            type: "success",
+          });
+          // this.getctrlStatus(res.data);
+          // clearInterval(this.statusTimer);
+          // this.statusTimer = null;
+          // this.statusTimer = window.setInterval(() => {
+          //   this.getctrlStatus(res.data);
+          //   this.statusNum++;
+          // }, 5000);
+        })
+        .catch((err) => {});
+    },
+    // getctrlStatus(val) {
+    //   getTermCameraRequest({ requestid: val.requestId })
+    //     .then((res) => {
+    //       console.log(res);
+    //       if (this.statusNum >= 5) {
+    //         clearInterval(this.statusTimer);
+    //         this.statusTimer = null;
+    //         this.statusNum = 0;
+    //         this.$message({
+    //           duration: 1500,
+    //           showClose: true,
+    //           message: "下发指令超时，请重试！",
+    //           type: "warning",
+    //         });
+    //       }
+    //     })
+    //     .catch((err) => {});
+    // },
+  },
+};
+</script>
+<style lang="less">
+.drawDialog {
+  .el-drawer.rtl {
+    width: 340px !important;
+  }
+  .el-drawer__header {
+    padding-top: 16px;
+    margin-bottom: 16px;
+  }
+  .ytDraw {
+    //display: flex;
+    padding: 12px;
+    height: 100%;
+    .ytTop {
+      display: flex;
+      height: 200px;
+      margin-bottom: 12px;
+      .cirle {
+        width: 200px;
+        height: 200px;
+        //background: #fcc;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        .ybg1 {
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          width: 90%;
+          height: 90%;
+          //background: #128071;
+          border-radius: 100%;
+          overflow: hidden;
+          position: relative;
+          box-shadow: 0 0 5px rgba(18, 128, 113, 0.5),
+            /* 上方阴影 */ 0 0 5px rgba(18, 128, 113, 0.5),
+            /* 右侧阴影 */ 0 0 5px rgba(18, 128, 113, 0.5),
+            /* 下方阴影 */ 0 0 5px rgba(18, 128, 113, 0.5); /* 左侧阴影 */
+          .ybg2 {
+            width: 30%;
+            height: 30%;
+            border-radius: 50%;
+            background-color: #16ad99ba;
+            border: 2px solid rgba(18, 128, 113, 0.5);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            &:hover {
+              background-color: #0cf1d3ba;
+            }
+            b {
+              font-size: 14px;
+              font-weight: normal;
+            }
+          }
+          .arrowtop {
+            position: absolute;
+            top: 0px;
+            cursor: pointer;
+            &:hover {
+              background: #e7e4e48c;
+              i {
+                color: #169e8c;
+              }
+            }
+          }
+          .arrowright {
+            position: absolute;
+            right: 0;
+            cursor: pointer;
+            &:hover {
+              background: #e7e4e48c;
+              i {
+                color: #169e8c;
+              }
+            }
+          }
+          .arrowleft {
+            position: absolute;
+            left: 0;
+            cursor: pointer;
+            &:hover {
+              background: #e7e4e48c;
+              i {
+                color: #169e8c;
+              }
+            }
+          }
+          .arrowbottom {
+            position: absolute;
+            bottom: 0px;
+            cursor: pointer;
+
+            &:hover {
+              background: #e7e4e48c;
+              i {
+                color: #169e8c;
+              }
+            }
+          }
+          i {
+            font-size: 54px;
+            color: #16ad99ba;
+          }
+        }
+      }
+      .controlBox {
+        margin-left: 24px;
+        .gnbtn {
+          h3 {
+            font-size: 14px;
+            color: #169e8c;
+            i {
+              margin-right: 6px;
+            }
+          }
+          .grop {
+            display: flex;
+            .el-button {
+              width: auto !important;
+            }
+            .el-button + .el-button {
+              margin-left: 8px;
+            }
+          }
+        }
+      }
+    }
+    .speedBox {
+      display: flex;
+      align-items: center;
+      margin-bottom: 12px;
+      .el-slider {
+        width: 214px;
+        margin: 0px 12px;
+      }
+    }
+    .btnfungrop {
+      display: flex;
+      flex-wrap: wrap;
+      margin: 0 auto;
+      width: 228px;
+      .el-button {
+        width: 108px !important;
+        &:nth-child(even) {
+          margin-left: 12px !important;
+        }
+      }
+    }
+    .presetList {
+      height: calc(100% - 354px);
+      margin-top: 12px;
+      h3 {
+        font-size: 14px;
+        font-weight: bold;
+      }
+      .presetTable {
+        height: calc(100% - 26px);
+        .el-table--border {
+          border-bottom: 1px solid #ebeef5;
+        }
+        .el-button {
+          width: auto !important;
+          margin-bottom: 0px !important;
+        }
+        .el-button + .el-button {
+          margin-left: 8px;
+        }
+      }
+    }
+  }
+  .dialog-footer {
+    .el-button--default,
+    .el-button--primary {
+      width: 80px !important;
+      margin-bottom: 0px !important;
+    }
+    .el-button + .el-button {
+      margin-left: 10px !important;
+    }
+  }
+}
+</style>
diff --git a/src/views/realTimeSearch/index.vue b/src/views/realTimeSearch/index.vue
index f2e173a..cd85733 100644
--- a/src/views/realTimeSearch/index.vue
+++ b/src/views/realTimeSearch/index.vue
@@ -186,6 +186,14 @@
                   }} -->
                 </p>
               </div>
+              <div class="deleteBox">
+                <el-button
+                  title="删除照片"
+                  type="primary"
+                  icon="el-icon-delete"
+                  @click.stop="deletePic(item)"
+                ></el-button>
+              </div>
             </div>
           </el-card>
         </div>