From 43f86a16dc1db9501dc9dbd74a1ca01829022423 Mon Sep 17 00:00:00 2001
From: fanluyan <754122931@qq.com>
Date: Tue, 23 May 2023 20:36:14 +0800
Subject: [PATCH] =?UTF-8?q?=E7=BB=98=E5=88=B6=E5=9B=BE=E7=BA=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/utils/api/index.js                        | 11 +++
 src/views/Login.vue                           | 32 ++++----
 src/views/components/carouselChart.vue        |  6 +-
 .../components/pictureTags.vue                | 79 +++++++++++++++----
 src/views/realTimeMonitor/index.vue           | 26 ++++++
 5 files changed, 124 insertions(+), 30 deletions(-)

diff --git a/src/utils/api/index.js b/src/utils/api/index.js
index 58c2089..4627699 100644
--- a/src/utils/api/index.js
+++ b/src/utils/api/index.js
@@ -505,3 +505,14 @@ export function delUserApi(data) {
     },
   });
 }
+//绘制坐标保存
+export function updateCoordinate(data) {
+  return request({
+    url: "/api/updateCoordinate",
+    method: "post",
+    data,
+    // headers: {
+    //   "Content-Type": "application/x-www-form-urlencoded;charset=UTF-8",
+    // },
+  });
+}
diff --git a/src/views/Login.vue b/src/views/Login.vue
index 77d38d8..a8408bb 100644
--- a/src/views/Login.vue
+++ b/src/views/Login.vue
@@ -70,8 +70,8 @@ export default {
   data: function () {
     return {
       userInfo: {
-        userName: "",
-        password: "",
+        userName: "xytest",
+        password: "123456",
         //verificationCode: "",
       },
       rules: {
@@ -99,18 +99,22 @@ export default {
       this.$refs.loginForm.validate((valid) => {
         if (valid) {
           // this.userInfo.password = this.$md5(this.userInfo.password); //密码加密
-          loginJoggle(this.userInfo)
-            .then((res) => {
-              if (res.code == 200) {
-                this.$store.commit("SET_TOKEN", res.data.sessionId); //将token保存在vuex中
-                this.$store.commit("SET_USERINFO", res.data); //将用户信息保存在vuex中
-                this.$router.push("/realTimeMonitor");
-                this.$message.success("登录成功");
-              } else {
-                this.$message.error(res.msg);
-              }
-            })
-            .catch((err) => {});
+          this.$store.commit("SET_TOKEN", "asdadadadadsadas"); //将token保存在vuex中
+          this.$store.commit("SET_USERINFO", "xytest"); //将用户信息保存在vuex中
+          this.$router.push("/realTimeMonitor");
+          this.$message.success("登录成功");
+          // loginJoggle(this.userInfo)
+          //   .then((res) => {
+          //     if (res.code == 200) {
+          //       this.$store.commit("SET_TOKEN", res.data.sessionId); //将token保存在vuex中
+          //       this.$store.commit("SET_USERINFO", res.data); //将用户信息保存在vuex中
+          //       this.$router.push("/realTimeMonitor");
+          //       this.$message.success("登录成功");
+          //     } else {
+          //       this.$message.error(res.msg);
+          //     }
+          //   })
+          //   .catch((err) => {});
         } else {
           this.$message.error("请输入账号和密码");
           console.log("error submit!!");
diff --git a/src/views/components/carouselChart.vue b/src/views/components/carouselChart.vue
index 863a64a..66a1dab 100644
--- a/src/views/components/carouselChart.vue
+++ b/src/views/components/carouselChart.vue
@@ -205,7 +205,7 @@ export default {
 
       console.log(localStorage.getItem("piclinePoints"));
     });
-    this.localPoints = JSON.parse(localStorage.getItem("piclinePoints"));
+    this.localPoints = this.terminalPhoto[0].list;
     console.log(this.localPoints);
     if (this.localPoints !== "") {
       this.drawline();
@@ -255,6 +255,10 @@ export default {
       this.ctx.closePath();
       this.ctx.stroke();
     },
+    //不显示绘制线
+    handelClear() {
+      this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+    },
     getphotoList() {
       this.fiveList = this.terminalPhoto.slice(
         (this.page - 1) * this.pagesize,
diff --git a/src/views/management/monitoringEquipment/photographicDevice/components/pictureTags.vue b/src/views/management/monitoringEquipment/photographicDevice/components/pictureTags.vue
index 8c84a2e..84f4bc8 100644
--- a/src/views/management/monitoringEquipment/photographicDevice/components/pictureTags.vue
+++ b/src/views/management/monitoringEquipment/photographicDevice/components/pictureTags.vue
@@ -7,11 +7,8 @@
     width="1262px"
   >
     <div class="picPannel">
-      <div class="imgbox">
-        <img
-          ref="picJpg"
-          src="http://47.96.238.157/photos/2023/05/22/06/XYIGQ10C221000006_1_FF_20230522094507.jpg"
-        />
+      <div class="imgbox" v-if="picsrc">
+        <img ref="picJpg" :src="picsrc" />
         <canvas
           id="myCanvas"
           class="myCanvas"
@@ -21,6 +18,9 @@
           @mousemove="mousemove"
         ></canvas>
       </div>
+      <div class="imgbox" v-else>
+        <img ref="picJpg" src="../../../../../assets/img/loading.jpg" />
+      </div>
 
       <div class="setBox">
         <div class="infoCompany">
@@ -36,12 +36,16 @@
           </p>
           <p>
             <label>选择通道：</label>
-            <el-select v-model="picvalue" placeholder="请选择">
+            <el-select
+              v-model="picvalue"
+              placeholder="请选择"
+              @change="changePic($event)"
+            >
               <el-option
                 v-for="item in picoptions"
                 :key="item.id"
                 :label="item.name"
-                :value="item.name"
+                :value="item.id"
               >
               </el-option>
             </el-select>
@@ -64,7 +68,7 @@
           </p>
           <p>
             <el-button type="primary" @click="restCanvas">重新绘制</el-button>
-            <el-button type="primary" @click="saveCanvas">保存绘制</el-button>
+            <!-- <el-button type="primary" @click="saveCanvas">保存绘制</el-button> -->
           </p>
         </div>
       </div>
@@ -76,6 +80,7 @@
   </el-dialog>
 </template>
 <script>
+import { updateCoordinate } from "@/utils/api/index";
 export default {
   props: {
     title: String,
@@ -98,10 +103,29 @@ export default {
       picvalue: "",
       linePoints: [],
       localPoints: [],
+      picsrc: "",
+      channelId: "", //通道id
+      termId: "",
+      markId: "",
+      cmdid: "",
+      photoId: "",
     };
   },
   mounted() {},
   methods: {
+    //切换通道
+    changePic(val) {
+      var obj = {};
+      obj = this.picoptions.find(function (i) {
+        return i.id === val;
+      });
+      console.log(obj);
+      // console.log(id);
+      this.picsrc = obj.path;
+      this.channelId = obj.id;
+      this.photoId = obj.photoId;
+      // console.log(this.picsrc);
+    },
     //获取线宽
     handleChange(value) {
       console.log(value);
@@ -109,6 +133,7 @@ export default {
     // 保存确定操作
     submitForm() {
       this.isShow = false;
+      this.saveCanvas();
     },
     display(val) {
       this.isShow = true;
@@ -116,22 +141,27 @@ export default {
       this.pictureData = val; //获取当前列表数据
       this.picoptions = val.list; //获取所有通道
       this.picvalue = val.list[0].name; //获取第一个通道
+      this.picsrc = val.list[0].path;
+      this.channelId = val.list[0].id;
+      this.termId = val.id;
+      this.markId = val.markId;
+      this.cmdid = val.cmdid;
+      this.photoId = val.list[0].photoId;
       console.log("this.canvas");
       this.$nextTick(function () {
         // codeing
         this.canvas = this.$refs.myCanvas;
         this.imgpic = this.$refs.picJpg;
-
         console.log(this.canvas);
         console.log(this.imgpic);
         this.canvas.width = this.imgpic.offsetWidth; //设置画布大小
         this.canvas.height = this.imgpic.offsetHeight; //设置画布大小
         this.ctx = this.canvas.getContext("2d");
-        console.log(localStorage.getItem("piclinePoints"));
-        this.localPoints = JSON.parse(localStorage.getItem("piclinePoints"));
-        if (this.localPoints !== "") {
-          this.drawline();
-        }
+        //console.log(localStorage.getItem("piclinePoints"));
+
+        this.localPoints = val.lineList;
+
+        this.drawline();
       });
     },
     hide() {
@@ -242,7 +272,26 @@ export default {
     //点击保存
     saveCanvas() {
       console.log(this.linePoints);
-      localStorage.setItem("piclinePoints", JSON.stringify(this.linePoints));
+      // localStorage.setItem(this.cmdid, JSON.stringify(this.linePoints));
+      updateCoordinate({
+        boderWidth: this.num,
+        channelId: this.channelId,
+        color: this.color,
+        height: this.imgpic.height,
+        id: this.markId,
+        list: this.linePoints,
+        termId: this.termId,
+        width: this.imgpic.width,
+        photoId: this.photoId,
+      })
+        .then((res) => {
+          console.log(res);
+          this.$message({
+            type: "success",
+            message: "绘制保存成功",
+          });
+        })
+        .catch((err) => {});
     },
     restCanvas() {
       this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
diff --git a/src/views/realTimeMonitor/index.vue b/src/views/realTimeMonitor/index.vue
index bad0d73..7892f81 100644
--- a/src/views/realTimeMonitor/index.vue
+++ b/src/views/realTimeMonitor/index.vue
@@ -35,6 +35,7 @@
       <div class="picSetBox">
         <div class="swiperBox" v-loading="loading">
           <carouselChart
+            ref="carouselpic"
             :terminalPhoto="terminalPhoto"
             v-if="terminalPhoto.length > 0"
           ></carouselChart>
@@ -165,6 +166,20 @@
                   <el-dropdown-item command="close">关闭</el-dropdown-item>
                 </el-dropdown-menu>
               </el-dropdown>
+              <!-- 线缆显示 -->
+              <el-dropdown
+                class="dropgps"
+                trigger="click"
+                @command="handleCommandLine"
+              >
+                <el-button type="primary">
+                  线缆显示<i class="el-icon-arrow-down el-icon--right"></i>
+                </el-button>
+                <el-dropdown-menu slot="dropdown" class="gpsdropStyle">
+                  <el-dropdown-item command="open">开启</el-dropdown-item>
+                  <el-dropdown-item command="close">关闭</el-dropdown-item>
+                </el-dropdown-menu>
+              </el-dropdown>
 
               <!-- <el-button type="primary" @click="handlehistoryPic"
                 >历史图片</el-button
@@ -481,6 +496,17 @@ export default {
           });
         });
     },
+    //线缆显示
+    handleCommandLine(command) {
+      switch (command) {
+        case "open": //开启
+          this.$refs.carouselpic.drawline();
+          break;
+        case "close": //关闭
+          this.$refs.carouselpic.handelClear();
+          break;
+      }
+    },
     handleShowErr() {
       this.$message({
         message: "该功能暂未开发,敬请期待",