Pipe.vue

<!--
 * @Author: your name
 * @Date: 2022-04-14 15:49:20
 * @LastEditTime: 2022-04-14 17:52:06
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: /gassafety-progress/gassafetyprogress-web/src/views/operationMonitor/xunjianxuncha/components/Pipe.vue
-->
<template>
  <div class="pipe-wrapper">
    <div class="top">
      <div class="title">{{ deviceData.title }}</div>
      <div class="close" @click="close">
        <img src="@/assets/image-xjxc/close.png" alt="" />
      </div>
    </div>

    <div class="bottom">
      <div class="ele flex">
        <div class="left zzz">任务标题</div>
        <div class="right zzz">中燃翔科测试</div>
      </div>
      <div class="ele flex">
        <div class="left zzz">任务类型</div>
        <div class="right zzz">入户安检</div>
      </div>
      <div class="ele flex">
        <div class="left zzz">任务内容</div>
        <div class="right zzz">巡检巡查</div>
      </div>
      <div class="ele flex">
        <div class="left zzz">执行单位</div>
        <div class="right zzz">中燃翔科</div>
      </div>
      <div class="ele flex">
        <div class="left zzz">执行人</div>
        <div class="right zzz">林俊杰</div>
      </div>

      <div class="ele flex">
        <div class="left">发现问题</div>
        <div class="right img-wrapper">
          <el-image
            v-if="imgSrc"
            style="width: 80px; height: 80px"
            :src="imgSrc"
            :preview-src-list="[imgSrc]"
            :z-index="999999"
          >
          </el-image>
          <img v-else src="@/assets/image-xjxc/nomal.jpg" alt="" />
        </div>
      </div>
      <div class="ele flex">
        <div class="left zzz">问题描述</div>
        <div title="还没有找到问题原因" class="right zzz">还没有找到问题原因</div>
      </div>
      <div class="ele flex end">
        <div class="left zzz">发现时间</div>
        <div class="right">2022-01-02 12:12:12</div>
      </div>
    </div>
  </div>
</template>

<script>
// deviceData
export default {
  data() {
    return {
      // imgSrc:
      //   "http://222.223.203.154:8092/gassafety/profile/upload/2022/04/08/3f197bb6-ad51-43df-aded-e1b005008ad6.jpg",
    };
  },
  methods: {
    close() {
      this.mapClass.infowindowClose();
    },
  },
};
</script>

<style lang="scss" scoped>
.pipe-wrapper {
  width: 230px;
  padding: 10px 0 12px;
  background-color: #fff;
  box-sizing: border-box;
  box-shadow: 2px 0px 10px 1px rgba(0, 0, 0, 0.1);
  border-radius: 3px;
  position: relative;
  &::before {
    content: "";
    border-style: solid;
    border-width: 9px 13px 9px 7px;
    border-color: transparent #fff transparent transparent ;
    position: absolute;
    left:-20px;
    top:50%;
    margin-top:-9px;
  }
  .top {
    box-sizing: border-box;
    padding-bottom: 5px;
    border-bottom: 1px solid #c4c4c4;
    .title {
      padding-left: 21px;
      color: #1d8cf3;
      font-size: 14px;
      font-weight: 500;
    }
    .close {
      position: absolute;
      width: 13px;
      height: 13px;
      right: 10px;
      top: 13px;
      cursor: pointer;
      img {
        width: 100%;
      }
    }
  }
  .bottom {
    padding: 10px 15px 0px 21px;
    .ele {
      font-size: 12px;
      padding-bottom: 4px;
      border-bottom: 1px dashed #ececec;
      margin-bottom: 5px;
      > div {
        width: 80px;
        color: #333333;
        &.left{
          font-weight: 500;
        }
        &.right {
          text-align: left;
        }
        &.img-wrapper {
          height: 80px;
        }
      }
      &.end {
        border-bottom: 0px;
      }
    }
  }
}
</style>