diff --git a/src/views/components/carouselChart.vue b/src/views/components/carouselChart.vue
index aeb294c..c11ceaf 100644
--- a/src/views/components/carouselChart.vue
+++ b/src/views/components/carouselChart.vue
@@ -282,30 +282,20 @@ export default {
   },
   created() {},
   methods: {
-    downLoadPic(url, name) {
-      const image = new Image();
-      image.setAttribute("crossOrigin", "anonymous");
-      image.src = url;
-      image.onload = () => {
-        const canvas = document.createElement("canvas");
-        canvas.width = image.width;
-        canvas.height = image.height;
-        const ctx = canvas.getContext("2d");
-        ctx.drawImage(image, 0, 0, image.width, image.height);
-        canvas.toBlob((blob) => {
-          const url = URL.createObjectURL(blob);
-          this.download(url, name);
-          // 用完释放URL对象
-          URL.revokeObjectURL(url);
-        });
-      };
-    },
-    download(href, name) {
-      const eleLink = document.createElement("a");
-      eleLink.download = name;
-      eleLink.href = href;
-      eleLink.click();
-      eleLink.remove();
+    async downLoadPic(path, name) {
+      const imgUrl = path;
+      const response = await fetch(imgUrl);
+      const blob = await response.blob();
+      // 创建下载链接
+      const url = window.URL.createObjectURL(blob);
+      const link = document.createElement("a");
+      link.href = url;
+      link.download = name;
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      // 释放 Blob URL
+      window.URL.revokeObjectURL(url);
     },
     // showbigpicPath(data) {
     //   console.log(data);
@@ -626,6 +616,7 @@ export default {
       bottom: 16px;
       color: #fff;
       z-index: 5;
+      opacity: 0;
       &:hover {
         background: rgba(0, 0, 0, 0.9);
         color: #169e8c;
@@ -636,6 +627,10 @@ export default {
         opacity: 1;
         transition: all 0.5s ease-in;
       }
+      .downBtn {
+        opacity: 1;
+        transition: all 0.5s ease-in;
+      }
     }
     .bigimg {
       width: 100%;
diff --git a/src/views/components/carouselChartmore.vue b/src/views/components/carouselChartmore.vue
new file mode 100644
index 0000000..9b0b9e9
--- /dev/null
+++ b/src/views/components/carouselChartmore.vue
@@ -0,0 +1,902 @@
+<template>
+  <div class="thumb-example">
+    <div class="picTop">
+      <!-- 判断是否是图片并且不为空 -->
+
+      <div
+        class="bigimg"
+        v-if="
+          bigPicPath.indexOf('nopic') == -1 &&
+          bigPicPath.indexOf('videos') == -1
+        "
+        :style="bigPicPath ? 'backgroundImage:url(' + bigPicPath + ')' : ''"
+      >
+        <el-button
+          class="downBtn"
+          @click.stop="
+            downLoadPic(
+              bigPicPath.substring(0, bigPicPath.length - 9),
+              bigPicPath.substring(0, bigPicPath.length - 9)
+            )
+          "
+          >下载图片</el-button
+        >
+        <!--  @click="handleBigPicbox(bigPicPath)"  v-viewer="OptionssalseImg"-->
+        <div
+          class="nosee"
+          :style="'backgroundImage:url(' + bigPicPath + ')'"
+        ></div>
+        <div class="bigimgView" @click="handleBigPicbox(bigPicPath)">
+          <img ref="picJpg" class="animImg" :src="bigPicPath" />
+        </div>
+        <canvas id="myCanvas" class="myCanvas" ref="myCanvas"></canvas>
+        <!-- <img ref="picJpg" class="animImg" :src="bigPicPath + '!1366x768'" /> -->
+      </div>
+      <div class="bigimg" v-else-if="bigPicPath.indexOf('videos') !== -1">
+        <video
+          width="100%"
+          height="100%"
+          :src="bigPicPath.substring(0, bigPicPath.length - 9)"
+          controls="controls"
+          :poster="videopath"
+          autoplay
+        ></video>
+      </div>
+      <div class="bigimg nopic" v-if="bigPicPath.indexOf('nopic') !== -1">
+        <img
+          class="animImg"
+          :src="bigPicPath.substring(0, bigPicPath.length - 9)"
+        />
+      </div>
+
+      <div class="arrow leftArrow" v-if="this.bigNum != 0" @click="leftClick">
+        <i class="el-icon-arrow-left"></i>
+      </div>
+      <div
+        class="arrow rightArrow"
+        v-if="this.bigNum < this.terminalPhoto.length - 1"
+        @click="rightClick"
+      >
+        <i class="el-icon-arrow-right"></i>
+      </div>
+    </div>
+    <div class="picBottom">
+      <ul class="smallPicBox">
+        <li
+          v-for="(item, index) in fiveList"
+          @click="handleBigpic(item, index)"
+          :class="activeSmall === index ? 'borderActive' : ''"
+        >
+          <div
+            class="smallhavePic"
+            v-if="
+              item.path.indexOf('nopic') == -1 &&
+              item.path.indexOf('videos') == -1
+            "
+          >
+            <img :src="item.path + '!260x160'" />
+            <p class="timeInfo">
+              <el-tooltip
+                class="item"
+                effect="dark"
+                content="拍照时间"
+                placement="top-start"
+              >
+                <span>{{ $moment(item.photoTime).format("HH:mm:ss") }}</span>
+              </el-tooltip>
+
+              (
+              <el-tooltip
+                class="item"
+                effect="dark"
+                content="图片上传时间"
+                placement="top-start"
+              >
+                <span> {{ $moment(item.recvTime).format("HH:mm:ss") }}</span>
+              </el-tooltip>
+              )
+              <span
+                >--{{
+                  item.alias !== null && item.alias !== ""
+                    ? item.alias
+                    : item.channelName
+                }}</span
+              >
+            </p>
+          </div>
+          <div
+            class="smallnoPic"
+            v-else-if="item.path.indexOf('videos') !== -1"
+          >
+            <img
+              src="../../assets/img/loading.jpg"
+              style="object-fit: cover"
+              v-if="item.thumb == null"
+            />
+            <img :src="item.thumb" v-else />
+            <p class="videoicon"><i class="el-icon-video-play"></i></p>
+            <p class="timeInfo">
+              <el-tooltip
+                class="item"
+                effect="dark"
+                content="拍照时间"
+                placement="top-start"
+              >
+                <span>{{ $moment(item.photoTime).format("HH:mm:ss") }}</span>
+              </el-tooltip>
+
+              (
+              <el-tooltip
+                class="item"
+                effect="dark"
+                content="图片上传时间"
+                placement="top-start"
+              >
+                <span> {{ $moment(item.recvTime).format("HH:mm:ss") }}</span>
+              </el-tooltip>
+              )
+              <span
+                >--{{
+                  item.alias !== null && item.alias !== ""
+                    ? item.alias
+                    : item.channelName
+                }}</span
+              >
+            </p>
+          </div>
+          <div class="smallnoPic" v-else>
+            <img :src="item.path" />
+          </div>
+        </li>
+      </ul>
+      <div
+        class="arrow leftArrow"
+        v-if="this.page != 1"
+        @click="smallLeftClick"
+      >
+        <i class="el-icon-arrow-left"></i>
+      </div>
+      <div
+        class="arrow rightArrow"
+        v-if="this.page < this.total"
+        @click="smallRightClick"
+      >
+        <i class="el-icon-arrow-right"></i>
+      </div>
+    </div>
+
+    <!-- 点击出现大图 -->
+    <div
+      v-if="showBigpic"
+      class="showPic"
+      v-loading="canvasloading"
+      @click="closePic($event)"
+    >
+      <div
+        class="picboxI"
+        @mousewheel.prevent="rollImg"
+        :style="{
+          transform: 'scale(' + zoomD + ')',
+        }"
+        @mousedown="move"
+      >
+        <img
+          @load="imgOnload"
+          id="bigimg"
+          ref="bigimgref"
+          class="maskPic img"
+          :src="bigImgPath"
+        />
+        <!-- <canvas id="bigCanvas" class="myCanvas" ref="myCanvasbig"></canvas> -->
+      </div>
+      <div class="viewClose" @click="closePic($event)">
+        <i class="el-icon-close"></i>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { getCoordinate, updateMarkEnableStatus } from "@/utils/api/index";
+export default {
+  components: {},
+  props: {
+    terminalPhoto: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      OptionssalseImg: {
+        inline: false,
+        button: true,
+        navbar: false,
+        title: false,
+        toolbar: false,
+        tooltip: false,
+        zoomable: true,
+        url: "src",
+      },
+      isshowArrow: true, //判断是否显示切换按钮
+      mediaType: "", //判断图片类型是视频还是图片
+      bigPicPath: "", //大图地址
+      videopath: "",
+      smallPicPath: "", //小图地址
+      bigNum: 0, //判断大图是第几张
+      fiveList: [], //小图图片list
+      activeSmall: 0, //索引选中小图,
+      page: 1, //当前第几页
+      pagesize: 10, //每页显示10条
+      total: 0, //总共又几页
+
+      localPoints: [], //画图对象
+      canvas: null,
+      ctx: null,
+      imgpic: null,
+      color: "",
+      num: "",
+      showBigpic: false,
+      flagline: true,
+      markEnable: "",
+      zoomD: 1,
+      canvasloading: false,
+      bigImgPath: "",
+    };
+  },
+  mounted() {
+    console.log(this.terminalPhoto);
+    this.mediaType = this.terminalPhoto[0].mediaType;
+    this.bigPicPath = this.terminalPhoto[0].path + "!1366x768";
+
+    // this.bigPicPath = this.terminalPhoto[0].path + "!1366x768";
+    this.fiveList = this.terminalPhoto.slice(this.page - 1, this.pagesize);
+    this.total = this.terminalPhoto.length / this.pagesize;
+    console.log(this.fiveList);
+    //获取points
+    getCoordinate({
+      channelId:
+        this.fiveList[0].channelId == null ? 1 : this.fiveList[0].channelId,
+      needPic: "0",
+      termId: this.fiveList[0].termId,
+    })
+      .then((res) => {
+        console.log(res);
+        this.localPoints = res.data.list;
+        this.color = res.data.color;
+        this.num = res.data.boderWidth;
+        this.markEnable = res.data.markEnable;
+        if (this.markEnable === 1) {
+          this.drawline();
+        }
+      })
+      .catch((err) => {});
+  },
+  watch: {
+    terminalPhoto: function (newVal, oldVal) {
+      this.bigPicPath = this.terminalPhoto[0].path + "!1366x768";
+
+      this.fiveList = this.terminalPhoto.slice(this.page - 1, this.pagesize);
+      this.total = this.terminalPhoto.length / this.pagesize;
+    },
+  },
+  created() {},
+  methods: {
+    async downLoadPic(path, name) {
+      const imgUrl = path;
+      const response = await fetch(imgUrl);
+      const blob = await response.blob();
+      // 创建下载链接
+      const url = window.URL.createObjectURL(blob);
+      const link = document.createElement("a");
+      link.href = url;
+      link.download = name;
+      document.body.appendChild(link);
+      link.click();
+      document.body.removeChild(link);
+      // 释放 Blob URL
+      window.URL.revokeObjectURL(url);
+    },
+    // showbigpicPath(data) {
+    //   console.log(data);
+    //   if (data.includes("!")) {
+    //     this.bigPicPath = data.substring(0, data.length - 9);
+    //   } else {
+    //     this.bigPicPath = data;
+    //     this.bgbigPath = data;
+    //   }
+
+    //   console.log(this.bigPicPath);
+    // },
+    // handleBigPicbox() {
+    //   this.showBigpic = true;
+    // },
+    //移动demo
+    move(e) {
+      console.log(e);
+      e.preventDefault();
+      // 获取元素
+      var personBox = document.querySelector(".picboxI");
+      var img = document.querySelector(".img");
+      var x = e.pageX - img.offsetLeft;
+      var y = e.pageY - img.offsetTop;
+      // 添加鼠标移动事件
+      personBox.addEventListener("mousemove", move);
+      console.log(personBox.addEventListener("mousemove", move));
+      console.log(personBox.style);
+      function move(e) {
+        console.log(personBox.style.left);
+        personBox.style.left = e.pageX - x + "px";
+        personBox.style.top = e.pageY - y + "px";
+      }
+      // 添加鼠标抬起事件，鼠标抬起，将事件移除
+      img.addEventListener("mouseup", function () {
+        personBox.removeEventListener("mousemove", move);
+      });
+      // 鼠标离开父级元素，把事件移除
+      personBox.addEventListener("mouseout", function () {
+        personBox.removeEventListener("mousemove", move);
+      });
+    },
+    // 缩放图片
+    rollImg(e) {
+      let direction = e.deltaY > 0 ? "down" : "up";
+      if (direction === "up") {
+        // 滑轮向上滚动
+        this.large();
+      } else {
+        // 滑轮向下滚动
+        this.Small();
+      }
+    },
+    //大
+    large() {
+      this.$nextTick(() => {
+        if (this.zoomD < 6) {
+          this.zoomD += 0.1;
+        }
+        document.querySelector(
+          ".picboxI"
+        ).style.transform = `matrix(${this.zoomD}, 0, 0,${this.zoomD}, 0, 0)`;
+      });
+    },
+    // 小
+    Small() {
+      this.$nextTick(() => {
+        if (this.zoomD > 0.3) {
+          this.zoomD -= 0.1;
+        }
+        document.querySelector(
+          ".picboxI"
+        ).style.transform = `matrix(${this.zoomD}, 0, 0, ${this.zoomD}, 0, 0)`;
+      });
+    },
+    imgOnload() {
+      console.log("加载完成");
+      this.canvasloading = false;
+    },
+    //放大图
+    handleBigPicbox(val) {
+      console.log(val);
+      //this.canvasloading = true;
+      this.showBigpic = true;
+      this.bigImgPath = val.substring(0, val.length - 9);
+    },
+    closePic(e) {
+      console.log(e);
+      var btn = this.$refs.bigimgref;
+      console.log(btn);
+      if (btn) {
+        if (!btn.contains(event.target)) {
+          //按钮.app-download以外的区域
+          this.zoomD = 1;
+          this.showBigpic = false;
+        }
+      }
+      //
+      // this.showBigpic = false;
+    },
+    openline() {
+      this.flagline = true;
+      console.log("11111111111111111111111111", this.flagline);
+      updateMarkEnableStatus({
+        status: 1,
+      }).then((res) => {
+        console.log(res);
+      });
+      this.drawline();
+    },
+    drawline() {
+      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(this.localPoints);
+      if (this.flagline == true) {
+        this.localPoints = this.localPoints;
+      } else {
+        this.localPoints = [];
+      }
+      console.log(this.ctx);
+      this.ctx.beginPath();
+      //设置线条颜色，必须放在绘制之前
+      this.ctx.strokeStyle = this.color;
+      // 线宽设置，必须放在绘制之前
+      this.ctx.lineWidth = this.num;
+      for (var i = 0; i < this.localPoints.length; i++) {
+        this.ctx.moveTo(
+          this.localPoints[i].x1 * this.imgpic.width,
+          this.localPoints[i].y1 * this.imgpic.height
+        );
+        this.ctx.lineTo(
+          this.localPoints[i].x2 * this.imgpic.width,
+          this.localPoints[i].y2 * this.imgpic.height
+        );
+      }
+
+      this.ctx.closePath();
+      this.ctx.stroke();
+    },
+    //不显示绘制线
+    handelClear() {
+      this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+      this.flagline = false;
+      updateMarkEnableStatus({
+        status: 0,
+      }).then((res) => {
+        console.log(res);
+      });
+    },
+    getphotoList() {
+      this.fiveList = this.terminalPhoto.slice(
+        (this.page - 1) * this.pagesize,
+        this.page * this.pagesize
+      );
+
+      this.bigPicPath = this.fiveList[this.activeSmall].path + "!1366x768";
+
+      this.videopath = this.fiveList[this.activeSmall].thumb;
+    },
+    //大图点击左侧切换图片
+    leftClick() {
+      this.bigNum--; //执行下一张
+      this.mediaType = this.terminalPhoto[this.bigNum].mediaType;
+      this.bigPicPath = this.terminalPhoto[this.bigNum].path + "!1366x768";
+
+      this.activeSmall--;
+      console.log("activeSmall", this.activeSmall, "bigNum", this.bigNum);
+      console.log(this.page);
+      if (this.activeSmall < 0) {
+        this.activeSmall = 4;
+        this.smallLeftClick();
+      }
+      console.log(this.terminalPhoto[this.bigNum]);
+      getCoordinate({
+        channelId: this.terminalPhoto[this.bigNum].channelId,
+        needPic: "1",
+        termId: this.terminalPhoto[this.bigNum].termId,
+      })
+        .then((res) => {
+          console.log(res);
+          this.localPoints = res.data.list;
+          if (this.markEnable === 1) {
+            this.drawline();
+          }
+        })
+        .catch((err) => {});
+    },
+    //点击右侧切换图片
+    rightClick() {
+      this.bigNum++; //执行下一张
+      this.mediaType = this.terminalPhoto[this.bigNum].mediaType;
+      this.bigPicPath = this.terminalPhoto[this.bigNum].path + "!1366x768";
+
+      this.activeSmall++;
+      console.log("activeSmall", this.activeSmall, "bigNum", this.bigNum);
+      if (this.activeSmall > 4) {
+        this.activeSmall = 0;
+        console.log(this.activeSmall);
+        this.smallRightClick();
+      }
+      getCoordinate({
+        channelId: this.terminalPhoto[this.bigNum].channelId,
+        needPic: "1",
+        termId: this.terminalPhoto[this.bigNum].termId,
+      })
+        .then((res) => {
+          console.log(res);
+          this.localPoints = res.data.list;
+          if (this.markEnable === 1) {
+            this.drawline();
+          }
+        })
+        .catch((err) => {});
+    },
+    //点击小图变成大图
+    handleBigpic(row, index) {
+      console.log(row);
+      console.log();
+      this.activeSmall = index;
+      this.mediaType = row.mediaType;
+      this.bigPicPath = row.path + "!1366x768";
+      // this.bgbigPath = row.path + "!1366x768";
+      getCoordinate({
+        channelId: row.channelId,
+        needPic: "1",
+        termId: row.termId,
+      })
+        .then((res) => {
+          console.log(res);
+          this.localPoints = res.data.list;
+          if (this.markEnable === 1) {
+            this.drawline();
+          }
+          // this.drawline();
+        })
+        .catch((err) => {});
+    },
+    //点击小图切换左侧
+    smallLeftClick() {
+      this.activeSmall = 0;
+      console.log("点击了左侧");
+
+      this.page--;
+      if (this.page < 1) {
+        this.isshowArrow = false;
+      } else {
+        this.getphotoList();
+      }
+      console.log(this.page);
+      console.log(this.fiveList);
+      //获取points
+      getCoordinate({
+        channelId: this.fiveList[0].channelId,
+        needPic: "0",
+        termId: this.fiveList[0].termId,
+      })
+        .then((res) => {
+          console.log(res);
+          this.localPoints = res.data.list;
+          if (this.markEnable === 1) {
+            this.drawline();
+          }
+          // this.drawline();
+        })
+        .catch((err) => {});
+    },
+    //点击小图切换右侧
+    smallRightClick() {
+      this.activeSmall = 0;
+      console.log("点击了右侧");
+      console.log(this.page);
+      this.page++;
+      this.getphotoList();
+      console.log(this.fiveList);
+      //获取points
+      getCoordinate({
+        channelId: this.fiveList[0].channelId,
+        needPic: "0",
+        termId: this.fiveList[0].termId,
+      })
+        .then((res) => {
+          console.log(res);
+          this.localPoints = res.data.list;
+          if (this.markEnable === 1) {
+            this.drawline();
+          }
+          // this.drawline();
+        })
+        .catch((err) => {});
+    },
+  },
+};
+</script>
+<style lang="less">
+.thumb-example {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  height: calc(100% - 32px);
+  box-sizing: border-box;
+
+  .picTop {
+    width: 100%;
+    height: 80%;
+    overflow: hidden;
+    margin-bottom: 4px;
+    position: relative;
+    .downBtn {
+      position: absolute;
+      background: rgba(0, 0, 0, 0.5);
+      border: none;
+      right: 8px;
+      bottom: 16px;
+      color: #fff;
+      z-index: 5;
+      opacity: 0;
+      &:hover {
+        background: rgba(0, 0, 0, 0.9);
+        color: #169e8c;
+      }
+    }
+    &:hover {
+      .arrow {
+        opacity: 1;
+        transition: all 0.5s ease-in;
+      }
+      .downBtn {
+        opacity: 1;
+        transition: all 0.5s ease-in;
+      }
+    }
+    .bigimg {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: relative;
+      background-size: 100% 100%;
+      .nosee {
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        background-size: 100% 100%;
+        z-index: 2;
+      }
+      .bigimgView {
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        z-index: 3;
+        opacity: 0;
+        .animImg {
+          opacity: 0;
+        }
+      }
+      .mark {
+        position: absolute;
+        bottom: 12px;
+        color: #fff;
+        background-color: rgba(0, 0, 0, 0.5);
+        left: 16px;
+        font-size: 14px;
+        line-height: 24px;
+        //opacity: 0;
+        transition: bottom 2s ease 0s;
+      }
+      .myCanvas {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        cursor: pointer;
+        z-index: 2;
+      }
+    }
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: fill;
+      cursor: pointer;
+    }
+    .arrow {
+      opacity: 0;
+      position: absolute;
+      cursor: pointer;
+      color: #fff;
+      font-size: 16px;
+      border-radius: 30px;
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      background-color: rgba(0, 0, 0, 0.5);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      color: #fff;
+      text-align: center;
+      line-height: 60px;
+      width: 40px;
+      height: 40px;
+      z-index: 4;
+      &:hover {
+        color: @color-primary;
+      }
+    }
+    .leftArrow {
+      left: 16px;
+    }
+    .rightArrow {
+      right: 16px;
+    }
+  }
+  .picBottom {
+    width: 100%;
+    height: 20%;
+    position: relative;
+    .smallPicBox {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      justify-content: center;
+      li {
+        width: 20%;
+        border: 3px solid transparent;
+        // overflow: hidden;
+        box-sizing: border-box;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: relative;
+        img {
+          width: 100%;
+          height: 100%;
+          object-fit: fill;
+          cursor: pointer;
+        }
+        .smallhavePic {
+          width: 100%;
+          height: 100%;
+        }
+        .smallnoPic {
+          width: 100%;
+          height: 100%;
+        }
+      }
+      .timeInfo {
+        position: absolute;
+        bottom: 0px;
+        width: 100%;
+        background: #f0f0f0;
+        padding: 6px 0px;
+        font-size: 12px;
+        text-align: center;
+        color: #333;
+      }
+      .videoicon {
+        position: absolute;
+        top: 73%;
+        left: 10%;
+        transform: translate(-50%, -50%);
+        i {
+          font-size: 28px;
+          color: #fff;
+        }
+      }
+      .borderActive {
+        .timeInfo {
+          //background: @color-primary;
+          background: linear-gradient(180deg, #00eaff 10%, @color-primary 100%);
+          color: #fff;
+        }
+      }
+      // .borderActive {
+      //   border: 3px solid @color-primary;
+      //   &::after {
+      //     content: "";
+      //     position: absolute;
+      //     width: 0;
+      //     height: 0;
+      //     left: 50%;
+      //     top: -16px;
+      //     margin-left: -8px;
+      //     border-bottom: 13px solid @color-primary;
+      //     border-left: 8px solid transparent;
+      //     border-right: 8px solid transparent;
+      //   }
+      // }
+    }
+    .arrow {
+      position: absolute;
+      cursor: pointer;
+      color: #fff;
+      font-size: 12px;
+      border-radius: 30px;
+      position: absolute;
+      top: 45%;
+      transform: translateY(-50%);
+      background-color: rgba(0, 0, 0, 0.5);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      color: #fff;
+      text-align: center;
+      line-height: 60px;
+      width: 28px;
+      height: 28px;
+    }
+    .leftArrow {
+      left: 16px;
+    }
+    .rightArrow {
+      right: 16px;
+    }
+  }
+  //放大图
+  .showPic {
+    position: fixed;
+    background-color: rgba(0, 0, 0, 50%);
+    bottom: 0;
+    left: 0;
+    overflow: hidden;
+    right: 0;
+    top: 0;
+    z-index: 9999;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    cursor: pointer;
+    .picboxI {
+      position: relative;
+      width: 85%;
+      height: 85%;
+      margin: auto;
+      animation-name: scaleDraw;
+      /*关键帧名称*/
+      animation-timing-function: ease;
+      /*动画的速度曲线*/
+      animation-iteration-count: 1;
+      /*动画播放的次数*/
+      animation-duration: 0.65s;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      img {
+        max-width: 100%;
+        max-height: 100%;
+
+        margin: auto;
+        position: absolute;
+        cursor: grab;
+      }
+      .myCanvas {
+        position: absolute;
+        // top: 0;
+        // left: 0;
+        max-width: 100%;
+        max-height: 100%;
+        margin: 0 auto;
+        cursor: pointer;
+        pointer-events: none;
+      }
+    }
+    .viewClose {
+      -webkit-app-region: no-drag;
+      background-color: rgba(0, 0, 0, 0.5);
+      border-radius: 50%;
+      cursor: pointer;
+      height: 80px;
+      overflow: hidden;
+      position: absolute;
+      right: -40px;
+      top: -40px;
+      transition: background-color 0.15s;
+      width: 80px;
+      .el-icon-close {
+        bottom: 16px;
+        left: 16px;
+        position: absolute;
+        color: #fff;
+        font-size: 18px;
+      }
+    }
+  }
+}
+@keyframes scaleDraw {
+  /*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
+  0% {
+    transform: scale(0);
+    /*开始为原始大小*/
+  }
+
+  100% {
+    transform: scale(1);
+  }
+}
+// https://v1.github.surmon.me/vue-awesome-swiper/
+</style>
diff --git a/src/views/realTimeMonitor/components/morePicPreveiw.vue b/src/views/realTimeMonitor/components/morePicPreveiw.vue
new file mode 100644
index 0000000..1187742
--- /dev/null
+++ b/src/views/realTimeMonitor/components/morePicPreveiw.vue
@@ -0,0 +1,125 @@
+<template>
+  <div class="morePicBox" v-if="isShow">
+    <div class="headTitle">
+      <div class="info">
+        <p>
+          {{ deviceData.linename }} - {{ deviceData.towername }} - （{{
+            deviceData.alias !== null && deviceData.alias !== ""
+              ? deviceData.alias
+              : deviceData.channnelname
+          }}）
+        </p>
+        <!-- <p class="timeinfo" v-if="item.mediatype !== null">
+          {{ $moment(item.photoTime).format("YYYY-MM-DD HH:mm:ss") }}
+        </p> -->
+      </div>
+      <div class="closeBox" @click="handleclose">
+        <i class="el-icon-close"></i>
+      </div>
+    </div>
+    <div class="picmain" v-loading="picLoading">
+      <carouselChartmore
+        ref="carouselpic"
+        :terminalPhoto="terminalPhoto"
+        v-if="terminalPhoto.length > 0"
+      ></carouselChartmore>
+    </div>
+  </div>
+</template>
+<script>
+import carouselChartmore from "../../components/carouselChartmore.vue";
+import { getTerminalPhotoListJoggle } from "@/utils/api/index";
+export default {
+  components: {
+    carouselChartmore,
+  },
+  props: {
+    title: String,
+  },
+
+  data() {
+    return {
+      isShow: false,
+      deviceData: "",
+      terminalPhoto: [], //获取装置当前图片数据
+      nopicPath: require("@/assets/img/nopic.jpg"),
+      picLoading: false,
+    };
+  },
+  mounted() {},
+  methods: {
+    display(data) {
+      this.isShow = true;
+      console.log(data);
+      this.deviceData = data;
+      this.getTerminalPhotoList(data.channelid, data.photoTime, data.termid);
+    },
+    //获取图片
+    getTerminalPhotoList(channelid, date, termId) {
+      this.terminalPhoto = [];
+      this.picLoading = true;
+      getTerminalPhotoListJoggle({
+        channelid: channelid,
+        time: date,
+        terminalid: termId,
+      })
+        .then((res) => {
+          console.log(res);
+          this.picLoading = false;
+          if (res.data.list.length == 0) {
+            this.terminalPhoto = [
+              {
+                path: this.nopicPath,
+                termId: termId,
+                mediatype: 0,
+              },
+            ];
+          } else {
+            this.terminalPhoto = res.data.list;
+          }
+        })
+        .catch((err) => {
+          console.log(err); //代码错误、请求失败捕获
+        });
+    },
+    handleclose() {
+      this.isShow = false;
+    },
+  },
+};
+</script>
+<style lang="less">
+.morePicBox {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  background: #fff;
+  top: 0px;
+  left: 0px;
+  z-index: 99999;
+  .headTitle {
+    height: 40px;
+    padding-left: 18px;
+    padding-right: 18px;
+    line-height: 40px;
+    color: #fff;
+    font-size: 14px;
+    background: linear-gradient(180deg, #4cdbc8 10%, #128071);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    .closeBox {
+      width: 24px;
+      height: 24px;
+      align-items: center;
+      display: flex;
+      justify-content: center;
+      cursor: pointer;
+    }
+  }
+  .picmain {
+    width: 100%;
+    height: calc(100% - 10px);
+  }
+}
+</style>
diff --git a/src/views/realTimeMonitor/index.vue b/src/views/realTimeMonitor/index.vue
index 46b17be..64df7f1 100644
--- a/src/views/realTimeMonitor/index.vue
+++ b/src/views/realTimeMonitor/index.vue
@@ -298,6 +298,7 @@
     <setschedule ref="setschedule_ref"></setschedule>
     <info-dialog ref="infodialog_ref"></info-dialog>
     <gps-position ref="gpsdialog_ref"></gps-position>
+    <morePicPreveiw ref="morePicPreveiw_ref"></morePicPreveiw>
   </div>
 </template>
 
@@ -319,6 +320,7 @@ import carouselChart from "../components/carouselChart.vue";
 import setschedule from "./components/setschedule.vue";
 import infoDialog from "./components/infoDialog.vue";
 import gpsPosition from "./components/gpsPosition.vue";
+import morePicPreveiw from "./components/morePicPreveiw.vue";
 import { number } from "echarts";
 export default {
   components: {
@@ -327,6 +329,7 @@ export default {
     setschedule,
     infoDialog,
     gpsPosition,
+    morePicPreveiw,
   },
   data() {
     return {
@@ -442,6 +445,7 @@ export default {
         console.log("电压");
         this.type = 1;
         //this.getPicList(data.id, this.type);
+
         this.$refs.previewRef.getPicList(data.id, this.type, this.page);
       } else if (data.bsManufacturer) {
         this.LineFlag = true;
@@ -510,34 +514,34 @@ export default {
           this.totalNum = res.data.totalNum;
           this.currentData = JSON.parse(localStorage.getItem("currentData"));
           console.log(this.currentData);
-          if (this.lineTreeData[0].list[0].list.length > 0) {
+          // if (this.lineTreeData[0].list[0].list.length > 0) {
+          console.log("diyici");
+          if (
+            this.currentData !== null &&
+            Object.keys(this.currentData).length !== 0
+          ) {
+            console.log("aaa");
+            this.currentNodekey = this.currentData.id;
+            this.handleNodeClick(this.currentData);
+          } else {
             console.log("diyici");
-            if (
-              this.currentData !== null &&
-              Object.keys(this.currentData).length !== 0
-            ) {
-              console.log("aaa");
-              this.currentNodekey = this.currentData.id;
-              this.handleNodeClick(this.currentData);
-            } else {
-              console.log("diyici");
-              this.selectData = this.lineTreeData[0]; //第一个选中的数据
-              this.currentNodekey = this.lineTreeData[0].id; //第一个数据
-              this.type = 1;
-              this.newCurrentId = this.lineTreeData[0].id;
-              this.previewData = this.lineTreeData[0]; //预览图数据
-              this.channelId = this.currentNodekey;
-              this.$refs.previewRef.getPicList(
-                this.currentNodekey,
-                this.type,
-                this.page
-              );
-            }
-
-            this.$nextTick(() => {
-              this.$refs.tree.setCurrentKey(this.currentNodekey); //一定要加这个选中了否则样式没有出来
-            });
+            this.selectData = this.lineTreeData[0]; //第一个选中的数据
+            this.currentNodekey = this.lineTreeData[0].id; //第一个数据
+            this.type = 1;
+            this.newCurrentId = this.lineTreeData[0].id;
+            this.previewData = this.lineTreeData[0]; //预览图数据
+            this.channelId = this.currentNodekey;
+            this.$refs.previewRef.getPicList(
+              this.currentNodekey,
+              this.type,
+              this.page
+            );
           }
+
+          this.$nextTick(() => {
+            this.$refs.tree.setCurrentKey(this.currentNodekey); //一定要加这个选中了否则样式没有出来
+          });
+          // }
           // if (this.zzradio == -1) {
           //   this.lineTreeData = this.lineTreeData;
           // } else if (this.zzradio == 1) {
@@ -690,62 +694,61 @@ export default {
     jumpTowerPic(data) {
       console.log("我是从子组件过来的数据");
       console.log(data);
-      this.LineFlag = false;
-      this.towerFlag = true;
-      this.zzCmdid = data.cmdid;
-      this.towertitle = data.towername;
-      this.zztermId = data.termid;
-      this.selectChannelValue = data.channnelname;
-      this.$refs.tree.setCurrentKey(this.zztermId); //一定要加这个选中了否则样式没有出来
-      this.selectedRegion(this.zztermId);
-      if (data.photoTime == "" || data.photoTime == null) {
-        this.getDateTime();
-      } else {
-        this.dateValue = data.photoTime;
-      }
-      console.log(this.selectChannelValue);
-      // this.getChannelList(this.zztermId);
-      getChannelByTermidJoggle({ termid: this.zztermId })
-        .then((res) => {
-          console.log(res);
-          this.channelList = res.data.list;
-          console.log(this.channelList);
-          this.channelOption = [];
-          this.channelList.forEach((item) => {
-            this.channelOption.push({
-              label: item.channelname,
-              value: item.channelid,
-              termid: item.termId,
-              alias: item.alias,
-            });
-          }); // 选择通道一通道二select框
-          console.log(this.channelOption);
-          this.channelListOption = [];
-          this.channelListOption.push({
-            label: "全部",
-            value: -1,
-            termid: "",
-            alias: "",
-          });
-          this.channelList.forEach((item) => {
-            this.channelListOption.push({
-              label: item.channelname,
-              value: item.channelid,
-              termid: item.termId,
-              alias: item.alias,
-            });
-          });
-          this.selectChannelValue = data.channnelname;
-          this.getTerminalPhotoList(
-            data.channelid,
-            this.dateValue,
-            this.zztermId
-          ); //获取图片列表是传当前设备的 id 和termid
-        })
-        .catch((err) => {
-          console.log(err); //代码错误、请求失败捕获
-        });
-      //this.getTerminalPhotoList(data.channelid, this.dateValue, this.zztermId);
+      this.$refs.morePicPreveiw_ref.display(data);
+      // this.LineFlag = false;
+      // this.towerFlag = true;
+      // this.zzCmdid = data.cmdid;
+      // this.towertitle = data.towername;
+      // this.zztermId = data.termid;
+      // this.selectChannelValue = data.channnelname;
+      // this.$refs.tree.setCurrentKey(this.zztermId); //一定要加这个选中了否则样式没有出来
+      // this.selectedRegion(this.zztermId);
+      // if (data.photoTime == "" || data.photoTime == null) {
+      //   this.getDateTime();
+      // } else {
+      //   this.dateValue = data.photoTime;
+      // }
+      // console.log(this.selectChannelValue);
+      // getChannelByTermidJoggle({ termid: this.zztermId })
+      //   .then((res) => {
+      //     console.log(res);
+      //     this.channelList = res.data.list;
+      //     console.log(this.channelList);
+      //     this.channelOption = [];
+      //     this.channelList.forEach((item) => {
+      //       this.channelOption.push({
+      //         label: item.channelname,
+      //         value: item.channelid,
+      //         termid: item.termId,
+      //         alias: item.alias,
+      //       });
+      //     }); // 选择通道一通道二select框
+      //     console.log(this.channelOption);
+      //     this.channelListOption = [];
+      //     this.channelListOption.push({
+      //       label: "全部",
+      //       value: -1,
+      //       termid: "",
+      //       alias: "",
+      //     });
+      //     this.channelList.forEach((item) => {
+      //       this.channelListOption.push({
+      //         label: item.channelname,
+      //         value: item.channelid,
+      //         termid: item.termId,
+      //         alias: item.alias,
+      //       });
+      //     });
+      //     this.selectChannelValue = data.channnelname;
+      //     this.getTerminalPhotoList(
+      //       data.channelid,
+      //       this.dateValue,
+      //       this.zztermId
+      //     ); //获取图片列表是传当前设备的 id 和termid
+      //   })
+      //   .catch((err) => {
+      //     console.log(err); //代码错误、请求失败捕获
+      //   });
     },
     selectedRegion(id) {
       console.log("滚动到选中定位的位置");
diff --git a/vue.config.js b/vue.config.js
index 31ee2c5..040028d 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -30,7 +30,7 @@ module.exports = defineConfig({
       "/api": {
         //表示拦截以/api开头的请求路径
         target: "http://47.96.238.157:8093", //阿里云服务器环境
-        // target: "http://180.166.218.222:40080", //dell
+        //target: "http://180.166.218.222:40080", //dell
         changOrigin: true, //是否开启跨域
         pathRewrite: {
           "^/api": "", //重写api，把api变成空字符，因为我们真正请求的路径是没有api的