BJYSYBZ/BJYSYBZ_C/src/views/BjWlydManageView/components/Td1.vue

<template>
  <div>
    <div class="title">
      <p>巡查人员设置</p>
    </div>
    <table class="border">
      <tr>
        <td class="th">巡查人员</td>
        <td>
          <div class="xcryFlex">
            <el-select
              v-model="xcryModel"
              collapse-tags
              multiple
              placeholder="请选择"
              :popper-append-to-body="false"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <div class="btn" @click="xcryAddDk">
              <img src="@/assets/images/bjybz/save2.png" alt="" />
              <p>保存</p>
            </div>
          </div>
        </td>
      </tr>
    </table>

    <div class="title">
      <p>巡查信息</p>
    </div>
    <table class="border">
      <tr>
        <td class="th">巡查时间</td>
        <td>
          <el-input
            size="medium"
            v-model="sumbitObj.xcsj"
            placeholder="请输入"
            disabled
          ></el-input>
        </td>
      </tr>
      <tr>
        <td class="th">巡查人员</td>
        <td>
          <el-input
            size="medium"
            v-model="sumbitObj.xcryName"
            placeholder="请输入"
            disabled
          ></el-input>
        </td>
      </tr>
      <tr>
        <td class="th">联系电话</td>
        <td>
          <!-- <el-input size="medium" v-model="sumbitObj.dkwz" placeholder="请输入"></el-input> -->
          <el-input
            size="medium"
            v-model="sumbitObj.xcryMobile"
            placeholder="请输入"
            disabled
          ></el-input>
        </td>
      </tr>
      <tr>
        <td class="th">现状描述</td>
        <td class="tdHeight">
          <el-input
            type="textarea"
            :autosize="true"
            v-model="sumbitObj.xzms"
            placeholder="请输入"
            disabled
          ></el-input>
        </td>
      </tr>
    </table>

    <div class="title">
      <p>现场照片(3)</p>
    </div>
    <div class="xzzpBox" v-if="carouselImgs.length > 0">
      <el-carousel type="card" :autoplay="false">
        <el-carousel-item v-for="(item, index) in carouselImgs" :key="index">
          <div class="imageFlex">
            <img :src="item" preview="1" />
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>
    <div class="xzzpBox xzzpBoxFlex" v-else>
      <p>暂无</p>
    </div>
    <div v-if="true">
      <div class="title">
        <p>历史巡查记录</p>
      </div>
      <div class="xcjl">
        <el-collapse v-model="activeName" accordion @change="collapseChange">
          <el-collapse-item
            v-for="(item, index) in collapseList"
            :name="index"
            :key="index"
          >
            <template slot="title">
              <div class="headTitle">
                <h4>
                  巡查时间：<span>{{ item.xcsj }}</span>
                </h4>
              </div>
            </template>
            <div class="collapseContent">
              <table>
                <tr>
                  <td>联系人</td>
                  <td>{{ item.xcryName }}</td>
                </tr>
                <tr>
                  <td>联系电话</td>
                  <td>{{ item.xcryMobile }}</td>
                </tr>
                <tr>
                  <td>现状描述</td>
                  <td>{{ item.xzms }}</td>
                </tr>
                <tr style="height:68px">
                  <td>现场照片</td>
                  <td>
                    <div class="xczpFlex">
                      <img
                        v-for="l in item.imgList"
                        :src="l.imgSrc"
                        preview="2"
                      />
                    </div>
                  </td>
                </tr>
              </table>
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Td1',
  components: {},
  props: {
    obj: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      xcryModel: [],
      options: [],
      srcList: [],
      carouselImgs: [],
      activeName: 0,
      collapseList: [],
      sumbitObj: {},
    };
  },
  mounted() {
    let users = JSON.parse(localStorage.getItem('userInfo'));
    this.initTableList(users.nickName);
    this.initAjax();
    this.xcryXcryInit();
  },
  methods: {
    initAjax() {
      let url = '/api/xcjl/getListByDksyh';
      let params = {
        dksyh: this.obj.dksyh,
      };
      this.$ajax.get(url, params, this, false).then((res) => {
        if (res.data) {
          if (res.data.length > 0) {
            this.sumbitObj = res.data[0];
            this.initImgs(res.data[0].imgList);
          }
          this.collapseList = res.data;

          this.collapseList.forEach((item, index) => {
            item.imgList.forEach((l, i) => {
              this.exportUrl(l.fileId).then((result) => {
                const imageUrl =
                  'data:image/png;base64,' +
                  Buffer.from(result['data'], 'base64').toString('base64');
                // l.imgSrc = imageUrl;
                this.collapseList[index].imgList[i].imgSrc = imageUrl;
                this.$forceUpdate();
                this.$previewRefresh();
              });
            });
          });
        }
      });
    },
    initImgs(data) {
      let list = JSON.parse(JSON.stringify(data));
      list.forEach((item) => {
        this.exportUrl(item.fileId).then((result) => {
          const imageUrl =
            'data:image/png;base64,' +
            Buffer.from(result['data'], 'base64').toString('base64');
          item.imgSrc = imageUrl;

          this.carouselImgs.push(imageUrl);
          this.$previewRefresh();
        });
      });
    },
    async exportUrl(fileId) {
      var params = new FormData();
      let url = '/api/oss/download?id' + '=' + fileId;
      return await this.$ajax.downFileByGet(url, params, this, true, false);
    },
    xcryAddDk() {
      let url = '/api/xcry/add-dk';
      let params = {
        dksyh: this.obj.dksyh,
        xcryId: this.xcryModel.join(','),
      };
      this.$ajax.get(url, params, this, false).then((res) => {
        if (res.data) {
          this.$message.success('保存成功！');
        }
      });
    },
    xcryXcryInit() {
      let url = '/api/xcry/getXcryByDksyh';
      let params = {
        dksyh: this.obj.dksyh,
      };
      this.$ajax.get(url, params, this, false).then((res) => {
        if (res.data) {
          let arr = [];
          for (let i = 0; i < res.data.length; i++) {
            arr.push(res.data[i].xcry);
          }
          this.xcryModel = arr;
        }
      });
    },
    initTableList(gddw) {
      let url = '/api/xcry/listByGddw?gddw=' + gddw;
      this.$ajax.get(url, {}, this, false).then((res) => {
        if (res.data) {
          for (let i = 0; i < res.data.length; i++) {
            let obj = {
              label: res.data[i].xcry,
              value: res.data[i].id,
            };
            this.options.push(obj);
          }
        }
      });
    },
    collapseChange(array) {},
    yjsqClick() {
      this.$refs.yjsqRef.yjsqDetailShow = true;
    },
  },
};
</script>

<style scoped lang="scss">
.title {
  margin-bottom: 10px;
  p {
    color: #1bf1ff;
    font-size: 16px;
  }
}
.xzzpBox {
  width: 100%;
  height: 170px;
  border: 1px solid #2c64a1;
  margin-bottom: 10px;

  ::v-deep .imageFlex {
    display: flex;
    align-items: center;
    justify-content: center;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
.xzzpBoxFlex {
  display: flex;
  align-items: center;
  justify-content: center;
  p {
    color: #fff;
    font-size: 16px;
  }
}
.xcjl {
  width: 100%;
  height: calc(200px);
  overflow-y: auto;
}
table {
  width: 100%;
  margin: 5px 0;
  position: relative;
  &.border {
    border-right: 1px solid #2b6da7;
    border-bottom: 1px solid #2b6da7;
    tr {
      .th {
        text-align: center;
        color: #a5daff;
        background: #0e4380;
        width: 146px;
        padding-left: 0px;
      }
      td {
        color: #fff;
        border-left: 1px solid #2b6da7;
        border-top: 1px solid #2b6da7;
        // padding-left: 10px;
        position: relative;
        ::v-deep .el-input {
          input {
            border: none;
          }
        }
        .file-item-wrapper {
          display: inline-block;
          margin: 0 10px;
          position: relative;
          width: 65px;
          border-radius: 5px;
          vertical-align: top;
          .img-wrapper {
            width: 65px;
            height: 58px;
            text-align: center;
            img {
              width: 50px;
              height: 50px;
              margin-top: 5px;
            }
          }
          .filename {
            text-align: center;
            width: 65px;
          }
          .mask-hover-wrapper {
            display: none;
            position: absolute;
            top: 0;
            left: 0;
            width: 65px;
            height: 58px;
            background: rgba(0, 0, 0, 0.6);
            border-radius: 5px;
            cursor: pointer;
            text-align: center;
            line-height: 58px;
            padding-top: 5px;
            .el-icon-delete {
              font-size: 25px;
              color: #fff;
              &:hover {
                color: #409eff;
              }
            }
          }
          &:hover .mask-hover-wrapper {
            display: inline-block;
          }
        }
        ::v-deep .avatar-uploader {
          display: inline-block;
          margin-top: 10px;
          // vertical-align: super;
          .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 5px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            &:hover {
              border-color: #409eff;
            }
            .avatar-uploader-icon {
              font-size: 24px;
              color: #fff;
              width: 50px;
              height: 50px;
              line-height: 50px;
              text-align: center;
            }
          }
        }
      }
    }
  }
  tr {
    height: 40px;
    th {
      font-size: 16px;
      color: rgba(135, 193, 255, 1);
    }
    td {
      ::v-deep .el-input {
        input {
          color: rgba(135, 193, 255, 1);
          background: transparent;
          border: 1px solid #4f91d7;
          &::-webkit-input-placeholder {
            /* WebKit browsers，webkit内核浏览器 */
            color: rgba(135, 193, 255, 0.8);
          }
          &:-moz-placeholder {
            /* Mozilla Firefox 4 to 18 */
            color: rgba(135, 193, 255, 0.8);
          }
          &::-moz-placeholder {
            /* Mozilla Firefox 19+ */
            color: rgba(135, 193, 255, 0.8);
          }
          &:-ms-input-placeholder {
            /* Internet Explorer 10+ */
            color: rgba(135, 193, 255, 0.8);
          }
        }
      }
      ::v-deep .el-radio-group {
        label {
          color: rgba(135, 193, 255, 1);
        }
      }
    }
  }
}
::v-deep .tdHeight {
  textarea {
    white-space: pre-wrap;
    color: rgba(135, 193, 255, 1) !important;
    word-break: break-all;
    background-color: transparent !important;
    border: 0;
    &::-webkit-input-placeholder {
      /* WebKit browsers，webkit内核浏览器 */
      color: rgba(135, 193, 255, 0.8);
    }
    &:-moz-placeholder {
      /* Mozilla Firefox 4 to 18 */
      color: rgba(135, 193, 255, 0.8);
    }
    &::-moz-placeholder {
      /* Mozilla Firefox 19+ */
      color: rgba(135, 193, 255, 0.8);
    }
    &:-ms-input-placeholder {
      /* Internet Explorer 10+ */
      color: rgba(135, 193, 255, 0.8);
    }
  }
}

::v-deep .el-input {
  input {
    color: rgba(135, 193, 255, 1) !important;
    background: transparent !important;
    border: 1px solid #4f91d7;
    &::-webkit-input-placeholder {
      /* WebKit browsers，webkit内核浏览器 */
      color: rgba(135, 193, 255, 0.8) !important;
    }
    &:-moz-placeholder {
      /* Mozilla Firefox 4 to 18 */
      color: rgba(135, 193, 255, 0.8) !important;
    }
    &::-moz-placeholder {
      /* Mozilla Firefox 19+ */
      color: rgba(135, 193, 255, 0.8) !important;
    }
    &:-ms-input-placeholder {
      /* Internet Explorer 10+ */
      color: rgba(135, 193, 255, 0.8) !important;
    }
  }
}

.is-disabled {
  input {
    background-color: transparent;
  }
}

::v-deep .xzzpBox {
  .el-carousel {
    height: 100%;

    .el-carousel__container {
      height: calc(100% - 30px);
    }
  }
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

::v-deep .xcjl {
  .el-collapse {
    color: #fff;
    border-top: 1px solid #2c64a1;
    border-bottom: 1px solid #2c64a1;
    border: 1px solid #2c64a1;
    .el-icon-arrow-right {
    }

    .el-collapse-item__arrow {
      color: #fff;
    }
    .headTitle {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      h4 {
        font-size: 16px;
        font-weight: 400;
        color: #afdcff;
        span {
          color: #fff;
        }
      }
      p {
        color: #fff;
      }
    }
    .el-collapse-item__header {
      background-color: transparent;
      border-bottom: 1px solid #2c64a1;
      padding: 0 20px;
    }
    .el-collapse-item__wrap {
      background-color: transparent;
      border-bottom: 1px solid #2c64a1;
    }
    .el-collapse-item__content {
      padding-bottom: 0;
    }

    .collapseContent {
      width: 100%;
      height: 100%;
      padding: 15px;
      table {
        border: none;
        border-collapse: collapse;
        tr {
          td {
            color: #fff;
            border: 1px solid #2c64a1;
          }
          td:nth-child(1) {
            text-align: right;
            padding-right: 15px;
            background-color: #0d4582;
            color: #afdcff;
            width: 120px;
          }
          td:nth-child(2) {
            text-align: left;
            padding-left: 15px;
          }
        }
      }
      .xczpFlex {
        width: 100%;
        height: 50px;
        overflow: hidden;
        display: flex;
        align-items: center;
        overflow-x: auto;
        img {
          width: 50px;
          height: 50px;
          margin: 5px 10px;
        }
      }
    }
    span {
      color: #fff;
    }
    h4 {
      color: #fff;
    }
  }
}

::v-deep .el-select {
  width: 75%;
  .el-tag--info {
    background-color: #409eff;
    border: 1px solid #0d4582;
    color: #fff;
    .el-tag__close {
      color: #fff;
    }
  }
}
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  height: 26px;
  background: #177fde;
  border-radius: 4px 4px 4px 4px;
  opacity: 1;
  border: 1px solid #25b0ec;
  cursor: pointer;
  p {
    color: #fff;
    margin-left: 5px;
  }
}
.xcryFlex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

::v-deep .el-select-dropdown {
  background-color: #264584;
  border: 1px solid #2c64a1;
  .el-select-dropdown__item {
    span {
      color: #1bf1ff;
    }
  }
  .selected {
    background-color: #2363ae !important;
    span {
      color: #1bf1ff;
    }
  }
  .hover {
    background-color: #2363ae !important;
  }
  .popper__arrow {
    border-bottom-color: #2c64a1;
  }
  .popper__arrow::after {
    border-bottom-color: #264584;
  }
}
</style>