SmartCommunity/operationSupport/src/views/patrolManagement/popups/patrolDetails.vue

<template>
  <div class="patrolDetails">
    <div
      class="search"
      v-if="!this.params"
    >
      <span>巡更详情</span>
      <div class="search-icon">
        <el-tooltip
          effect="light"
          placement="bottom"
          content="返回"
        >
          <i
            class="zoniot_font zoniot-icon-fanhui"
            @click="goback()"
          ></i>
        </el-tooltip>
      </div>
    </div>
    <div class="contentText">
      <div class="leftMap">
        <map-value
          :point="thisItem"
          :line="targetData"
          ref="mapVal"
          :isStart="true"
          :height="400"
        ></map-value>
        <div class="formLabel">
          <div class="formLabelList">
            <div class="label">所属社区</div>
            <div class="text">{{ thisObj.communityName }}</div>
          </div>
          <div class="formLabelList">
            <div class="label">巡更路线</div>
            <div class="text">{{ thisObj.routeName }}</div>
          </div>
          <div class="formLabelList">
            <div class="label">巡更人员</div>
            <div class="text">{{ thisObj.partolName }}</div>
          </div>
          <div class="formLabelList">
            <div class="label">巡更日期</div>
            <div class="text">{{ !!thisObj.patrolDate ? $moment(thisObj.patrolDate).format('YYYY-MM-DD') : '' }}</div>
          </div>
          <div class="formLabelList">
            <div class="label">巡更时间</div>
            <div class="text">{{ thisObj.patrolTime }}</div>
          </div>
        </div>
      </div>
      <div class="rightList">
        <template v-for="(item, index) in leftItem">
          <div
            class="steps"
            :key="index"
          >
            <div class="steps-left">
              <img
                v-if="!!leftItem[1].id"
                src="@assets/img/point_yiwancheng@2x.png"
                alt
              />
              <img
                v-else-if="!leftItem[1].id && index !== leftItem.length - 1"
                src="@assets/img/point_weiwancheng@2x.png"
                alt
              />
              <div
                class="steps-left-line"
                v-if="index !== leftItem.length - 1 && !!leftItem[leftItem.length - 2].id"
              ></div>
              <div
                class="steps-left-line"
                v-else-if="index !== leftItem.length - 2"
              ></div>
            </div>
            <div class="steps-right">
              <!-- 待开始 开始 -->
              <div
                class="steps-right-title"
                v-if="index == 0"
              >
                <span>{{ !!leftItem[1].id ? '开始任务 ' : '待执行' }}</span>
              </div>
              <!-- 点位状态 -->
              <div
                class="steps-right-title"
                v-else-if="index !== 0 && index !== leftItem.length - 1"
              >
                <span>{{ item.pointName }}</span>
                <span
                  class="status"
                  :class="!!item.id ? '' : 'grad'"
                >{{ !!item.id ? '已完成' : '未完成' }}</span>
              </div>
              <div
                class="steps-right-title"
                v-else
              >
                <span>{{ !!leftItem[leftItem.length - 2].id ? '结束任务 ' : '' }}</span>
              </div>

              <div
                class="steps-right-content"
                v-if="index == 0"
              >{{ leftItem[1].startTime }}</div>
              <template v-else-if="index !== 0 && index !== leftItem.length - 1">
                <div class="steps-right-content">{{ item.checkTime }}</div>
                <div class="steps-right-content">
                  <span>巡更结果:</span>
                  <span>{{ item.result || '-' }}</span>
                </div>
                <div class="steps-right-content">
                  <span>图片/视频:</span>
                  <template v-if="!!item.picturePath">
                    <div
                      class="imgVdio"
                      v-for="items in item.picturePath.split(',')"
                      :key="items"
                    >
                      <video
                        v-if="typeVideo(items)"
                        :src="items"
                        @click="lookVideos(items)"
                      ></video>
                      <el-image
                        class="imgs"
                        v-else
                        :src="items"
                        :preview-src-list="[items]"
                      >
                        <div
                          slot="error"
                          class="image-slot"
                        >--</div>
                      </el-image>
                    </div>
                  </template>
                </div>
              </template>
              <div
                class="steps-right-content"
                v-else
              >
                {{ leftItem[1].endTime }}
              </div>
            </div>
          </div>
        </template>
      </div>
    </div>
  </div>
</template>
<script>
import mapValue from './mapValue.vue';
export default {
  props: ['thisObj', 'params'],
  components: { mapValue },
  data () {
    return {
      thisItem: [],
      leftItem: [],
      targetData: []
    };
  },
  filters: {
    statusType (val) {
      let name = '-';
      switch (val) {
        case 1:
          name = '待执行';
          break;
        case 2:
          name = '执行中';
          break;
        case 3:
          name = '已完成';
          break;
        case 4:
          name = '已完成(超时)';
          break;
        case 5:
          name = '已逾期';
          break;
      }
      return name;
    }
  },
  methods: {
    goback () {
      this.$emit('initPage');
    },
    getDetail (id) {
      this.$http.get('/sc-community/patrolRecord/findRecordDtail', { id: id }).then(({ data, status, msg }) => {
        this.thisItem = data;
        this.leftItem = [
          [
            {
              checkTime: null,
              id: null,
              picturePath: null,
              pointId: null,
              pointStatus: null,
              recordId: null,
              result: null
            }
          ],
          ...data,
          [
            {
              checkTime: null,
              id: null,
              picturePath: null,
              pointId: null,
              pointStatus: null,
              recordId: null,
              result: null
            }
          ]
        ];
      });
    },
    getTrack (id) {
      this.$http.get('/sc-community/patrolRecord/getUserPatrolTrack', { recordId: id }).then(({ data, status, msg }) => {
        if (!!data) {
          this.targetData = data;
        }
      });
    },
    typeVideo (str) {
      let type = str.slice(str.lastIndexOf('.') + 1, str.length);
      let videoType = ['mp4'];
      return videoType.includes(type);
    },
    lookVideos (src) {
      new Promise((resolve) => {
        this.$store.dispatch('addPopup', {
          url: '/lookVideo.vue',
          width: '600px',
          height: '500px',
          props: {
            src: src,
            callback: resolve
          },
          showConfirmButton: true,
          showCancelButton: true,
          hideStar: true,
          title: '查看视频'
        });
      }).then(() => {
        this.mixins_search();
      });
    }
  },
  created () {
    if (!!this.params) {
      this.thisObj = this.params.thisObj;
      this.getDetail(this.params.thisObj.id);
      this.getTrack(this.params.thisObj.id);
    } else {
      this.getDetail(this.thisObj.id);
      this.getTrack(this.thisObj.id);
    }
  }
};
</script>>
<style lang="scss" scoped>
@import '@assets/css/public-style.scss';
.border20 {
    padding: 20px;
    box-sizing: border-box;
}
.patrolDetails {
    // @extend .height100;

    .search > span {
        font-size: 16px;
        line-height: 30px;
    }
    .contentText {
        height: calc(100% - 100px);
        display: flex;
        justify-content: space-between;
        .leftMap {
            width: calc(100% - 420px);
            background: white;
            @extend .border20;
            .formLabel {
                box-shadow: 0px 2px 4px 0px rgba(236, 236, 236, 0.5);
                border-radius: 4px;
                border: 1px solid #eeeeee;
                padding: 20px;
                margin-top: 20px;
                .formLabelList {
                    display: flex;
                    line-height: 30px;
                    .label {
                        width: 70px;
                    }
                    .text {
                        color: #424656;
                    }
                }
            }
        }
        .rightList {
            width: 400px;
            background: white;
            @extend .border20;
            .steps {
                display: flex;
                img {
                    width: 20px;
                    vertical-align: -webkit-baseline-middle;
                    &.grad {
                        -webkit-filter: grayscale(100%);
                        -moz-filter: grayscale(100%);
                        -ms-filter: grayscale(100%);
                        -o-filter: grayscale(100%);
                        filter: grayscale(100%);
                        filter: gray;
                    }
                }
                .steps-left {
                    margin-right: 10px;
                    .steps-left-line {
                        width: 2px;
                        height: calc(100% - 40px);
                        min-height: 20px;
                        margin: 10px auto;
                        background-color: $mainBgColor;
                    }
                }
                &:last-child {
                    .steps-left-line {
                        display: none;
                    }
                }
                .steps-right {
                    width: calc(100% - 15px);
                    line-height: 30px;
                    margin-bottom: 10px;
                    .steps-right-title {
                        font-weight: 600;
                        display: flex;
                        justify-content: space-between;
                        .status {
                            color: $mainBgColor;
                            font-weight: 400;
                            &.grad {
                                color: gray;
                            }
                        }
                    }
                    .steps-right-content {
                        font-size: 12px;
                        color: #303133;
                        display: flex;
                        span:first-child {
                            margin-right: 10px;
                        }
                    }
                }
            }
        }
    }
}
.imgVdio {
    display: inline-block;
    margin-right: 10px;
    .imgs,
    video {
        width: 64px;
        cursor: pointer;
    }
}
</style>