diff --git a/src/assets/pds/关闭.png b/src/assets/pds/关闭.png
new file mode 100644
index 0000000..443950f
Binary files /dev/null and b/src/assets/pds/关闭.png differ
diff --git a/src/components/tpt.vue b/src/components/tpt.vue
new file mode 100644
index 0000000..f7ecb2b
--- /dev/null
+++ b/src/components/tpt.vue
@@ -0,0 +1,61 @@
+<template>
+  <div>
+    <div class="outside-element" @click="handleOutsideClick"></div>
+    <div class="tpt11" v-if="tptFlag">
+      <img
+        src="../assets/pds/关闭.png"
+        alt=""
+        class="closeBtn"
+        @click="tptFlag = false"
+      />
+      <img :src="url" alt="" />
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: ["url"],
+  data() {
+    return {
+      tptFlag: false,
+    };
+  },
+  methods: {
+    close() {
+      this.tptFlag = false;
+    },
+    open() {
+      this.tptFlag = true;
+    },
+    handleOutsideClick(event) {
+      if (!event.target.classList.contains("tpt11")) {
+        this.tptFlag = false;
+      }
+    },
+  },
+};
+</script>
+<style scoped lang="less">
+.tpt11 {
+  width: 30%;
+  height: 30%;
+  background-color: #a4f325;
+  position: fixed;
+  left: 50%;
+  top: 30%;
+  transform: translateX(-50%);
+  z-index: 200;
+  .closeBtn {
+    cursor: pointer;
+    position: absolute;
+    right: 10px;
+    width: 54px;
+    height: 54px;
+  }
+}
+.outside-element {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+}
+</style>
diff --git a/src/utils/pds.js b/src/utils/pds.js
index 8fe1761..f9a86eb 100644
--- a/src/utils/pds.js
+++ b/src/utils/pds.js
@@ -4,10 +4,11 @@ export let pdsJs = [
     list: [
       "6.3KV#1破碎出线",
       "6.3KV#1窑头出线",
+
       "6.3KV#1原料#1出线",
       "6.3KV#1原料#2出线",
       "6.3KV#2窑头出线",
-      
+
       "6.3KV#2原料#1出线",
       "6.3KV#2原料#2出线",
       "6.3KV#1发电机出线(安热线)",
@@ -21,7 +22,7 @@ export let pdsJs = [
       "6.3KV#3窑尾出线",
       "6.3KV#3窑头出线",
       "6.3KV#2水泥磨出线",
-      "6.3KV#2发电机出线"
+      "6.3KV#2发电机出线",
     ],
   },
   {
@@ -68,7 +69,6 @@ export let pdsJs = [
       "原材料变压器",
       "1#后排风机",
       "1#变压器",
-
       "2#变压器",
       "生料磨主电机",
       "1#生料磨高温风机",
@@ -270,7 +270,7 @@ export let pdsJs = [
       "与窑头电力室联络电源",
       "侧式悬臂堆料机电源",
       "521FN05VF01离心通风机变频柜",
-      
+
       "照明电源",
       "侧式悬臂堆料机备用柜",
       "1#桥式取料机电源",
diff --git a/src/views/lll/NYJCD.vue b/src/views/lll/NYJCD.vue
index 07fad5d..ae7e465 100644
--- a/src/views/lll/NYJCD.vue
+++ b/src/views/lll/NYJCD.vue
@@ -55,7 +55,7 @@
         水泥磨系统
       </div>
     </div>
-
+    <tpt ref="tpt" :url="url"></tpt>
     <div class="left" v-show="flag">
       <img src="../../assets/img/标题/能源监测-电.png" class="title" />
       <div class="qcssdh">
@@ -100,12 +100,7 @@
           <p>总降拓扑图</p>
         </div>
         <div class="imgBox1">
-          <el-image
-            v-for="item in arr"
-            :src="item.url"
-            :preview-src-list="item.srcList"
-          >
-          </el-image>
+          <img :src="url" alt="" srcset="" @click="$refs.tpt.open()" />
         </div>
       </div>
     </div>
@@ -178,7 +173,7 @@
 <script>
 import { RouterView } from "vue-router";
 import * as echarts from "echarts";
-import Viewer from "viewerjs";
+import tpt from "../../components/tpt.vue";
 export default {
   data() {
     return {
@@ -355,39 +350,10 @@ export default {
           value: "3.27",
         },
       ],
-      arr: [
-        {
-          url: require("../../assets/tpt/总降电力室.png"),
-          srcList: [require("../../assets/tpt/总降电力室.png")],
-        },
-      ],
+      url: require("../../assets/tpt/总降电力室.png"),
     };
   },
   methods: {
-    initViewer() {
-      this.viewer = new Viewer(this.$el, {
-        inline: false,
-        button: true,
-        navbar: true,
-        title: false,
-        toolbar: true,
-        tooltip: true,
-        movable: false,
-        zoomable: true,
-        rotatable: false,
-        scalable: true,
-        transition: true,
-        fullscreen: true,
-        keyboard: true,
-        url(image) {
-          console.log(image.src);
-          return image.src;
-        },
-        ready() {
-          console.log("Viewer is ready");
-        },
-      });
-    },
     defineEcharts(dom, option) {
       var chartDom = document.getElementById(dom);
       var myChart = this.$echarts.init(chartDom);
@@ -430,7 +396,6 @@ export default {
         () => {}
       );
     },
-
     //余热发电  3d
     yrfd() {
       let xaxisData = ["1月", "2月", "3月", "4月", "5月"];
@@ -720,18 +685,13 @@ export default {
   mounted() {
     let dom = document.querySelector(".area1");
     dom.style.pointerEvents = "none";
-    this.initViewer();
     this.defineEcharts("qcssdh", this.option1);
     // this.defineEcharts("yrfd", this.option2);
     this.yrfd();
     this.defineEcharts("ljfdl", this.option3);
   },
-  beforeDestroy() {
-    if (this.viewer) {
-      this.viewer.destroy();
-    }
-  },
-  components: { RouterView },
+
+  components: { RouterView, tpt },
 };
 </script>
 <style lang="less" scoped>
@@ -824,6 +784,8 @@ export default {
   padding-left: 59px;
   padding-right: 45px;
   box-sizing: border-box;
+  position: fixed;
+  left: 0;
 
   .title {
     margin-top: 15px;
diff --git a/src/views/lll/NYJCS.vue b/src/views/lll/NYJCS.vue
index 2377298..0eb0b3d 100644
--- a/src/views/lll/NYJCS.vue
+++ b/src/views/lll/NYJCS.vue
@@ -46,6 +46,7 @@
         <div id="nysl"></div>
       </div>
     </div>
+    <tpt ref="tpt" :url="url"></tpt>
     <div class="right">
       <div class="ystj">
         <div class="imgBox">
@@ -124,7 +125,7 @@
         </div>
         <div class="chartBox">
           <div id="tpt">
-            <img src="" alt="" />
+            <img :src="url" alt="" @click="$refs.tpt.open()" />
           </div>
         </div>
       </div>
@@ -142,6 +143,7 @@
 </template>
 <script>
 import * as echarts from "echarts";
+import tpt from "../../components/tpt.vue";
 export default {
   data() {
     return {
@@ -409,6 +411,7 @@ export default {
           date4: "19.19",
         },
       ],
+      url: require("../../assets/tpt/一线生料电力室.png"),
     };
   },
   methods: {
@@ -689,6 +692,9 @@ export default {
     this.defineEcharts("nysl", this.option3);
     this.defineEcharts("nhfx", this.option4);
   },
+  components: {
+    tpt,
+  },
 };
 </script>
 <style scoped lang="less">
@@ -925,6 +931,7 @@ export default {
       }
     }
   }
+
   .right {
     width: 1237px;
     height: 2500px;
@@ -1090,6 +1097,10 @@ export default {
             color: #56f671;
           }
         }
+        img {
+          width: 100%;
+          height: 100%;
+        }
       }
     }
     .nhfx {
diff --git a/src/views/lll/PDS.vue b/src/views/lll/PDS.vue
index 2fec79c..a4641df 100644
--- a/src/views/lll/PDS.vue
+++ b/src/views/lll/PDS.vue
@@ -17,17 +17,12 @@
           <p>拓扑图</p>
         </div>
         <div id="tpt">
-          <el-image
-            v-for="item in arr"
-            :src="item.url"
-            :preview-src-list="item.srcList"
-          >
-          </el-image>
+          <img :src="url" alt="" @click="openImage" />
         </div>
       </div>
     </div>
     <img src="../../assets/pds/中间.png" v-show="falg" alt="" class="bgt" />
-
+    <tpt ref="tpt" :url="url"></tpt>
     <div class="boxLeft" v-if="falg">
       <div class="title">1号配电箱</div>
       <div class="container">
@@ -126,13 +121,13 @@
   </div>
 </template>
 <script>
-import Viewer from "viewerjs";
 import { pdsJs } from "../../utils/pds";
 import * as echarts from "echarts";
+import tpt from "../../components/tpt.vue";
 export default {
   data() {
     return {
-      arr: [],
+      url: "",
       list: [],
       res: "",
       falg: true,
@@ -363,30 +358,6 @@ export default {
     },
   },
   methods: {
-    initViewer() {
-      this.viewer = new Viewer(this.$el, {
-        inline: false,
-        button: true,
-        navbar: true,
-        title: false,
-        toolbar: true,
-        tooltip: true,
-        movable: false,
-        zoomable: true,
-        rotatable: false,
-        scalable: true,
-        transition: true,
-        fullscreen: true,
-        keyboard: true,
-        url(image) {
-          console.log(image.src);
-          return image.src;
-        },
-        ready() {
-          console.log("Viewer is ready");
-        },
-      });
-    },
     //根据三维传参拿到回路名称列表
     getList(name) {
       var list = [];
@@ -406,125 +377,59 @@ export default {
       });
     },
     changeArr(name) {
-      // var url = require("../../assets/tpt/" + name + ".png");
-      // this.arr[0] = {
-      //   url: url,
-      //   srcList: [url],
-      // };
+      // this.url = require("../../assets/tpt/总降电力室.png");
+      // this.url = require(`../../assets/tpt/${name}.png`);
       if (name == "总降电力室") {
-        this.arr[0] = {
-          url: require("../../assets/tpt/总降电力室.png"),
-          srcList: [require("../../assets/tpt/总降电力室.png")],
-        };
+        this.url = require("../../assets/tpt/总降电力室.png");
       } else if (name == "矿山电力室") {
-        this.arr[0] = {
-          url: require("../../assets/tpt/矿山电力室.png"),
-          srcList: [require("../../assets/tpt/矿山电力室.png")],
-        };
+        this.url = require("../../assets/tpt/矿山电力室.png");
       } else if (name == "原材料电力室") {
-        this.arr[0] = {
-          url: require("../../assets/tpt/原材料电力室.png"),
-          srcList: [require("../../assets/tpt/原材料电力室.png")],
-        };
+        this.url = require("../../assets/tpt/原材料电力室.png");
       } else if (name == "一线生料磨电力室") {
-        this.arr[0] = {
-          url: require("../../assets/tpt/一线生料电力室.png"),
-          srcList: [require("../../assets/tpt/一线生料电力室.png")],
-        };
+        this.url = require("../../assets/tpt/一线生料电力室.png");
       } else if (name == "二线生料磨电力室") {
-        this.arr[0] = {
-          url: require("../../assets/tpt/二线生料电力室.png"),
-          srcList: [require("../../assets/tpt/二线生料电力室.png")],
-        };
+        this.url = require("../../assets/tpt/二线生料电力室.png");
       } else if (name == "窑尾电力室") {
-        this.arr[0] = {
-          url: require("../../assets/tpt/窑尾电力室.png"),
-          srcList: [require("../../assets/tpt/窑尾电力室.png")],
-        };
+        this.url = require("../../assets/tpt/窑尾电力室.png");
       } else if (name == "一线窑头电力室1") {
-        this.arr[0] = {
-          url: require("../../assets/tpt/一线窑头电力室1.png"),
-          srcList: [require("../../assets/tpt/一线窑头电力室1.png")],
-        };
+        this.url = require("../../assets/tpt/一线窑头电力室1.png");
       } else if (name == "一线窑头电力室2") {
-        this.arr[0] = {
-          url: require("../../assets/tpt/一线窑头电力室2.png"),
-          srcList: [require("../../assets/tpt/一线窑头电力室2.png")],
-        };
+        this.url = require("../../assets/tpt/一线窑头电力室2.png");
       } else if (name == "二线窑头电力室1") {
-        this.arr[0] = {
-          url: require("../../assets/tpt/二线窑头电力室1.png"),
-          srcList: [require("../../assets/tpt/二线窑头电力室1.png")],
-        };
+        this.url = require("../../assets/tpt/二线窑头电力室1.png");
       } else if (name == "二线窑头电力室2") {
-        this.arr[0] = {
-          url: require("../../assets/tpt/二线窑头电力室2.png"),
-          srcList: [require("../../assets/tpt/二线窑头电力室2.png")],
-        };
+        this.url = require("../../assets/tpt/二线窑头电力室2.png");
       } else if (name == "一线原煤电力室") {
-        this.arr[0] = {
-          url: require("../../assets/tpt/一线原煤电力室.png"),
-          srcList: [require("../../assets/tpt/一线原煤电力室.png")],
-        };
+        this.url = require("../../assets/tpt/一线原煤电力室.png");
       } else if (name == "水泥磨电力室") {
-        this.arr[0] = {
-          url: require("../../assets/tpt/水泥磨电力室.png"),
-          srcList: [require("../../assets/tpt/水泥磨电力室.png")],
-        };
+        this.url = require("../../assets/tpt/水泥磨电力室.png");
       } else if (name == "万吨仓电力室") {
-        this.arr[0] = {
-          url: require("../../assets/tpt/万吨仓电力室.png"),
-          srcList: [require("../../assets/tpt/万吨仓电力室.png")],
-        };
+        this.url = require("../../assets/tpt/万吨仓电力室.png");
       } else if (name == "余热发电电力室") {
-        this.arr[0] = {
-          url: require("../../assets/tpt/余热发电电力室.png"),
-          srcList: [require("../../assets/tpt/余热发电电力室.png")],
-        };
+        this.url = require("../../assets/tpt/余热发电电力室.png");
       }
       //以下暂无拓扑图
       // else if (name == "三号线熟料配电室") {
-      //   this.arr[0] = {
-      //     url: require("../../assets/tpt/三号线熟料配电室.png"),
-      //     srcList: [require("../../assets/tpt/三号线熟料配电室.png")],
-      //   };
+      //   this.url =require("../../assets/tpt/三号线熟料配电室.png")
       // } else if (name == "三号线窑头配电室") {
-      //   this.arr[0] = {
-      //     url: require("../../assets/tpt/三号线窑头配电室.png"),
-      //     srcList: [require("../../assets/tpt/三号线窑头配电室.png")],
-      //   };
+      //   this.url = require("../../assets/tpt/三号线窑头配电室.png")
       // } else if (name == "三号线窑尾配电室") {
-      //   this.arr[0] = {
-      //     url: require("../../assets/tpt/三号线窑尾配电室.png"),
-      //     srcList: [require("../../assets/tpt/三号线窑尾配电室.png")],
-      //   };
+      //   this.url =require("../../assets/tpt/三号线窑尾配电室.png")
       // } else if (name == "三号线生料配电室") {
-      //   this.arr[0] = {
-      //     url: require("../../assets/tpt/三号线生料配电室.png"),
-      //     srcList: [require("../../assets/tpt/三号线生料配电室.png")],
-      //   };
+      //   this.url = require("../../assets/tpt/三号线生料配电室.png")
       // } else if (name == "辅料处理配电室") {
-      //   this.arr[0] = {
-      //     url: require("../../assets/tpt/辅料处理配电室.png"),
-      //     srcList: [require("../../assets/tpt/辅料处理配电室.png")],
-      //   };
+      //   this.url = require("../../assets/tpt/辅料处理配电室.png")
       // } else if (name == "原料配料配电室") {
-      //   this.arr[0] = {
-      //     url: require("../../assets/tpt/原料配料配电室.png"),
-      //     srcList: [require("../../assets/tpt/原料配料配电室.png")],
-      //   };
+      //   this.url =require("../../assets/tpt/原料配料配电室.png")
       // } else if (name == "石灰石破碎配电室") {
-      //   this.arr[0] = {
-      //     url: require("../../assets/tpt/石灰石破碎配电室.png"),
-      //     srcList: [require("../../assets/tpt/石灰石破碎配电室.png")],
-      //   };
+      //   this.url = require("../../assets/tpt/石灰石破碎配电室.png")
       // } else if (name == "石灰石输送控制室1、2") {
-      //   this.arr[0] = {
-      //     url: require("../../assets/tpt/石灰石输送控制室1、2.png"),
-      //     srcList: [require("../../assets/tpt/石灰石输送控制室1、2.png")],
-      //   };
+      //   this.url =require("../../assets/tpt/石灰石输送控制室1、2.png")
       // }
     },
+    openImage() {
+      this.$refs.tpt.open();
+    },
     dldy() {
       var chartDom = document.getElementById("dldy");
       var myChart = echarts.init(chartDom);
@@ -537,16 +442,13 @@ export default {
     },
   },
   mounted() {
-    this.initViewer();
     this.dldy();
     this.ssfh();
   },
   beforeDestroy() {
     this.falg = false;
-    if (this.viewer) {
-      this.viewer.destroy();
-    }
   },
+  components: { tpt },
 };
 </script>
 <style scoped lang="less">
@@ -601,7 +503,6 @@ export default {
         color: #00fcff;
       }
     }
-
     .tpt {
       position: relative;
       margin-top: 56px;
@@ -649,7 +550,7 @@ export default {
         width: 1155px;
         height: 500px;
         margin-top: 50px;
-        /deep/ .el-image {
+        /deep/ img {
           width: 100%;
           height: 100%;
         }
@@ -658,14 +559,11 @@ export default {
   }
 }
 .bgt {
-  // width: 1113px;
-  // height: 2055px;
   width: 1525px;
   height: 480px;
   position: absolute;
   left: 45%;
   top: 60%;
-  // border: 2px solid #20d6fe;
 }
 .head {
   position: relative;