From ecce8d0d830ea00521b01c6fadd7b6ce7561c333 Mon Sep 17 00:00:00 2001
From: fanluyan <754122931@qq.com>
Date: Wed, 26 Apr 2023 13:20:17 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=9B=BE=E7=89=87=E7=BB=98?=
 =?UTF-8?q?=E5=88=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/deviceUpgrade.vue              |  64 +++++++
 .../components/pictureTags.vue                | 172 ++++++++++++++++++
 src/views/realTimeMonitor/index.vue           |  21 ++-
 3 files changed, 256 insertions(+), 1 deletion(-)
 create mode 100644 src/views/realTimeMonitor/components/deviceUpgrade.vue
 create mode 100644 src/views/realTimeMonitor/components/pictureTags.vue

diff --git a/src/views/realTimeMonitor/components/deviceUpgrade.vue b/src/views/realTimeMonitor/components/deviceUpgrade.vue
new file mode 100644
index 0000000..d9e0625
--- /dev/null
+++ b/src/views/realTimeMonitor/components/deviceUpgrade.vue
@@ -0,0 +1,64 @@
+<template>
+  <el-dialog
+    class="deviceUpgradeDialog"
+    title="装置升级"
+    :visible.sync="isShow"
+    :close-on-click-modal="false"
+    width="400px"
+  >
+    <div class="upload">
+      <el-upload
+        class="upload-demo"
+        action="https://jsonplaceholder.typicode.com/posts/"
+        :on-preview="handlePreview"
+        :on-remove="handleRemove"
+        :file-list="fileList"
+      >
+        <el-button size="small" type="primary">点击上传</el-button>
+        <div slot="tip" class="el-upload__tip">
+          只能上传jpg/png文件，且不超过500kb
+        </div>
+      </el-upload>
+    </div>
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="isShow = false">取 消</el-button>
+      <el-button type="primary" @click="submitForm()">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+<script>
+export default {
+  props: {
+    title: String,
+  },
+  data() {
+    return {
+      isShow: false,
+      fileList: [],
+    };
+  },
+  mounted() {},
+  methods: {
+    handleRemove(file, fileList) {
+      console.log(file, fileList);
+    },
+    handlePreview(file) {
+      console.log(file);
+    },
+    // 保存确定操作
+    submitForm() {
+      this.isShow = false;
+    },
+    display() {
+      this.isShow = true;
+    },
+    hide() {
+      this.isShow = false;
+    },
+  },
+};
+</script>
+<style lang="less">
+.deviceUpgradeDialog {
+}
+</style>
diff --git a/src/views/realTimeMonitor/components/pictureTags.vue b/src/views/realTimeMonitor/components/pictureTags.vue
new file mode 100644
index 0000000..b063997
--- /dev/null
+++ b/src/views/realTimeMonitor/components/pictureTags.vue
@@ -0,0 +1,172 @@
+<template>
+  <el-dialog
+    class="pictureTagsDialog"
+    title="图片绘制"
+    :visible.sync="isShow"
+    :close-on-click-modal="false"
+    width="1000px"
+  >
+    <div class="picPannel">
+      <div class="imgbox">
+        <img
+          src="http://47.96.238.157/image/2023/04/24/01/DSH10H00000000001_1_FF_20230424192442.jpg"
+        />
+        <canvas
+          id="myCanvas"
+          class="myCanvas"
+          ref="myCanvas"
+          @mousedown="mousedown"
+          @mouseup="mouseup"
+          @mousemove="mousemove"
+        ></canvas>
+      </div>
+
+      <div class="setBox">
+        <div class="infoCompany">
+          <p><label>电压等级：</label><span>220kv</span></p>
+          <p><label>线路名称：</label><span>i1测试线路-SH</span></p>
+          <p><label>装置名称：</label><span>XY-SIMULATOR-0001</span></p>
+        </div>
+        <div class="setColor">
+          <p>
+            <label>颜色：</label
+            ><el-color-picker v-model="color"></el-color-picker>
+          </p>
+          <p>
+            <label>线宽：</label>
+            <el-input-number
+              v-model="num"
+              controls-position="right"
+              @change="handleChange"
+              :min="1"
+              :max="10"
+            ></el-input-number>
+          </p>
+          <p>
+            <el-button type="primary">重新绘制</el-button>
+            <el-button type="primary">保存绘制</el-button>
+          </p>
+        </div>
+      </div>
+    </div>
+    <div slot="footer" class="dialog-footer">
+      <el-button @click="isShow = false">取 消</el-button>
+      <el-button type="primary" @click="submitForm()">确 定</el-button>
+    </div>
+  </el-dialog>
+</template>
+<script>
+export default {
+  props: {
+    title: String,
+  },
+  data() {
+    return {
+      color: "#409EFF",
+      num: 1,
+      flag: false,
+      x: 0,
+      y: 0,
+      isShow: false,
+      fileList: [],
+    };
+  },
+  mounted() {},
+  methods: {
+    //获取线宽
+    handleChange(value) {
+      console.log(value);
+    },
+    // 保存确定操作
+    submitForm() {
+      this.isShow = false;
+    },
+    display() {
+      this.isShow = true;
+    },
+    hide() {
+      this.isShow = false;
+    },
+
+    mousedown(e) {
+      console.log("鼠标落下");
+      this.flag = true;
+      this.x = e.offsetX; // 鼠标落下时的X
+      this.y = e.offsetY; // 鼠标落下时的Y
+      console.log(this.x, this.y);
+    },
+    mouseup(e) {
+      console.log("鼠标抬起");
+      this.flag = false;
+    },
+    mousemove(e) {
+      console.log("鼠标移动");
+      this.drawRect(e);
+    },
+    drawRect(e) {
+      if (this.flag) {
+        console.log("绘制图形");
+        const canvas = this.$refs.myCanvas;
+        var ctx = canvas.getContext("2d");
+        let x = this.x;
+        let y = this.y;
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        ctx.beginPath();
+        //设置线条颜色，必须放在绘制之前
+        ctx.strokeStyle = this.color;
+        // 线宽设置，必须放在绘制之前
+        ctx.lineWidth = this.num;
+        console.log(x, y, e.offsetX - x, e.offsetY - y);
+        ctx.strokeRect(x, y, e.offsetX - x, e.offsetY - y);
+      }
+    },
+  },
+};
+</script>
+<style lang="less">
+.pictureTagsDialog {
+  .picPannel {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    position: relative;
+    .imgbox {
+      width: 698px;
+      position: relative;
+      img {
+        width: 100%;
+        height: 100%;
+      }
+      .myCanvas {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    .setBox {
+      width: 230px;
+      padding: 12px;
+      border: 3px solid #2d8cf0;
+      .infoCompany {
+        display: flex;
+        flex-direction: column;
+        line-height: 32px;
+        margin-bottom: 16px;
+      }
+    }
+    .setColor {
+      display: flex;
+      flex-direction: column;
+      line-height: 32px;
+      p {
+        display: flex;
+        align-items: center;
+        margin-bottom: 16px;
+      }
+    }
+  }
+}
+</style>
diff --git a/src/views/realTimeMonitor/index.vue b/src/views/realTimeMonitor/index.vue
index bb7b892..e0b9d87 100644
--- a/src/views/realTimeMonitor/index.vue
+++ b/src/views/realTimeMonitor/index.vue
@@ -76,7 +76,7 @@
                 >装置复位</el-button
               >
 
-              <el-button type="primary" @click="handleShowErr"
+              <el-button type="primary" @click="handlePanel"
                 >图片标记</el-button
               >
 
@@ -86,11 +86,18 @@
               <el-button type="primary" @click="handleShowErr">
                 设备信息</el-button
               >
+              <el-button type="primary" @click="handleUpGrade"
+                >装置升级</el-button
+              >
             </div>
           </div>
         </div>
       </div>
       <setschedule ref="setschedule_ref"></setschedule>
+      <!-- 装置升级 -->
+      <deviceUpgrade ref="deviceupgrade_ref"></deviceUpgrade>
+      <!-- 绘制图片 -->
+      <pictureTags ref="pictureTags_ref"></pictureTags>
     </div>
   </div>
 </template>
@@ -104,11 +111,15 @@ import {
 import carouselChart from "../components/carouselChart.vue";
 
 import setschedule from "./components/setschedule.vue";
+import deviceUpgrade from "./components/deviceUpgrade.vue";
+import pictureTags from "./components/pictureTags.vue";
 
 export default {
   components: {
     carouselChart,
     setschedule,
+    deviceUpgrade,
+    pictureTags,
   },
   data() {
     return {
@@ -268,6 +279,14 @@ export default {
         type: "warning",
       });
     },
+    //装置升级
+    handleUpGrade() {
+      this.$refs.deviceupgrade_ref.display();
+    },
+    //图片绘制
+    handlePanel() {
+      this.$refs.pictureTags_ref.display();
+    },
   },
 };
 </script>