ibms/src/views/ledger/facility/details/index_old.vue

<template>
  <div class="tableDisplay">
    <div class="header">
      <el-button style="float:left;" size="small" type="default" icon="el-icon-back" @click="goBack"></el-button>
      <span :title="`${name} - ${code}`" class="details-title"><b>{{name}} - {{code}}</b></span>
    </div>
    <div class="content">
      <div class="content-left">
        <div class="content-keyPoint">
          <exhibitionCrux :exhibitionCrux="exhibitionCrux" :type="type" @cruxSuccess="cruxSuccess"/>
        </div>
        <div class="content-showType">
          <selectRadio
            :selectRadio="selectRadio"
            @changeRadio="changeRadio"
          />
        </div>
        <div class="content-point">
          <div class="content-point-left">
            <el-scrollbar style="height:100%;">
              <div>
                <exhibitionBaseInformation :exhibitionBaseInformation="exhibitionBaseInformation"/>
              </div>
            </el-scrollbar>
          </div>
          <div class="content-point-right">
            <el-scrollbar style="height:100%;">
              <div>
                <exhibitionEnergy :exhibitionEnergy="exhibitionEnergy"/>
              </div>
            </el-scrollbar>
          </div>
        </div>
      </div>
      <div class="content-right">
        <div class="content-repair">
          <exhibitionMaintain :exhibitionMaintain="exhibitionMaintain"/>
        </div>
        <div class="content-media">
          <el-scrollbar style="height:100%;">
            <div>
              <exhibitionImage :exhibitionImage="exhibitionImage" v-show="isShowImage"/>
              <exhibitionVideo :exhibitionVideo="exhibitionVideo" v-show="isShowVideo"/>
              <exhibitionFile :exhibitionFile="exhibitionFile" v-show="isShowFile"/>
            </div>
          </el-scrollbar>
        </div>
      </div>
    </div>
    <div class="footer">
      <el-select size="mini" style="float:right;margin:7px 30px 0 0" v-model="id" @change="handleChangeExample" placeholder="请选择">
        <el-option
          v-for="item in list"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
    </div>
  </div>
</template>

<script>
  import exhibitionBaseInformation from "@/components/ledger/details/detail/exhibitionBaseInformation";
  import exhibitionFile from "@/components/ledger/details/detail/exhibitionFile";
  import exhibitionImage from "@/components/ledger/details/detail/exhibitionImage";
  import exhibitionVideo from "@/components/ledger/details/detail/exhibitionVideo";
  import exhibitionCrux from "@/components/ledger/details/detail/exhibitionCrux";
  import exhibitionEnergy from "@/components/ledger/details/detail/exhibitionEnergy";
  import exhibitionMaintain from "@/components/ledger/details/detail/exhibitionMaintain";
  import selectRadio from "@/components/ledger/details/detail/selectRadio";
  import tools from "@/utils/scan/tools"
  import {BeatchQueryParam, getDataDictionary, queryEquip} from "@/api/scan/request";
  import {mapGetters} from "vuex";

  export default {
    name: "deviceDetails",
    components: {
      exhibitionBaseInformation,
      exhibitionFile,
      exhibitionVideo,
      exhibitionImage,
      exhibitionMaintain,
      selectRadio,
      exhibitionCrux,
      exhibitionEnergy
    },
    created() {
      this.id = this.$route.query.equipId;
      this.name = this.$route.query.equipName;
      this.code = this.$route.query.equipCode;
      this.type = this.$route.query.type;
      this.list = this.$route.query.data;
      this.getData();
      console.log(this.$route.query)
    },
    computed: {
      ...mapGetters("layout", ["projectId", "secret", "userId"])
    },
    data() {
      return {
        id: '', //当前设备id
        name: '', //当前设备本地名称
        code: '', //当前设备的本地编码
        type: '', //设备类型
        list: [], //设备列表
        pointData: [], //信息点数据
        exampleData: {}, //实例数据
        currentRadio: '',//当前选中的select
        criterias: [], //动态参数
        selectRadio: {
          information: '设备信息点',
          initRadio: '1',
          radioList: [
            {
              value: '显示需采集信息点',
              label: '1'
            },
            {
              value: '显示有值信息点',
              label: '2'
            },
            {
              value: '显示全部信息点',
              label: '3'
            }
          ]
        },
        exhibitionBaseInformation: {
          information: {}
        },
        exhibitionEnergy: {
          title: '能耗信息',
          firstName:'',
          dynamic: [],
        },
        exhibitionMaintain: {
          title: '维修/维保记录'
        },
        exhibitionFile: {
          title: '文件',
          list: {}
        },
        exhibitionCrux: {
          title: '关键信息点：',
          cruxArray: [],
          allMessage: [],//全部信息点
        },
        exhibitionImage: {
          title: '图片',
          list: {},
          arr:[]
        },
        exhibitionVideo: {
          title: '视频',
          list: []
        },
        instance: {},//实例信息处理
        isShowImage: true,
        isShowVideo: true,
        isShowFile: true,
      }
    },
    methods: {
      deepCopy(obj) {
        return JSON.parse(JSON.stringify(obj))
      },
      cruxSuccess(){
        this.getData()
      },
      // 获取表头和实例数据（动态数据在组件中获取，在此格式化请求参数）
      getData() {
        let params1 = {
          data: {
            Orders: "sort asc",
            PageNumber: 1,
            PageSize: 1000
          },
          type: this.type
        }, params2 = {
          Filters: `EquipID='${this.id}'`,
        };
        let promise1 = new Promise((resolve, reject) => {
          getDataDictionary(params1, res => {
            resolve(res)
          })
        })
        let promise2 = new Promise((resolve, reject) => {
          queryEquip(params2, res => {
            resolve(res)
          })
        })
        Promise.all([promise1, promise2]).then(values => {
          this.pointData = values[0].Content;
          this.exampleData = values[1].Content[0];
          this.name = this.exampleData.EquipLocalName?this.exampleData.EquipLocalName:this.exampleData.EquipName?this.exampleData.EquipName:'';
          this.code = this.exampleData.EquipLocalID?this.exampleData.EquipLocalID:'';
          let obj = this.deepCopy(values[1].Content[0]);
          obj = tools.flattenKeys(obj);
          for(let key in obj) {
            if(Array.isArray(obj[key]) && !obj[key].length) {
              delete obj[key]
            }
          }
          this.instance = obj;
          this.handleRadios(1)
          this.handleEnclosure() //处理图片视频文件信息
          this.pointData.forEach(item => {
            if (item.InputMode == "L" || item.InputMode == "L1" || item.InputMode == "L2" || item.InputMode == "M") {
              let cur = tools.dataForKey(this.exampleData, item.Path);
              if (cur) {
                this.criterias.push({
                  id: this.exampleData.EquipID,
                  code: item.InfoPointCode
                })

              }
            }
          })

          let params = { //获取动态参数
            secret: this.secret,
            ProjId: this.projectId,
            data: {
              criterias: this.criterias
            }
          }
          if (this.criterias.length) {
            BeatchQueryParam(params, res => {
              res.Content && res.Content.map(child => {
                this.pointData.forEach(head => {
                  if (head.InfoPointCode == child.code) {
                    console.log(head.FirstName,child,'==')
                    this.exhibitionEnergy.firstName = head.FirstName
                    this.exhibitionEnergy.dynamic.push({
                      FirstName:head.FirstName,
                      InfoPointCode: head.InfoPointCode,
                      InfoPointName: head.InfoPointName,
                      Path: head.Path,
                      value: child.value,
                      data: child.data || '--',
                      receivetime: child.receivetime || '',
                      error: child.error || '',
                      Unit: head.Unit || ''
                    })
                  }
                })
              });
            })
          }

        })
      },
      handleEnclosure() {
        //图片文件处理，脱离radio控制
        let isList = this.pointData
        let isArr = []
        isList.map(j => {
          if (this.instance.hasOwnProperty(j.Path)) {
            j.value = this.instance[j.Path]
            return j
          }
        })
        isArr = isList.filter(k => k.value)
        this.handlePicList(isArr)
        this.handleFileList(isArr)
      },
      handleRadios(val) { //判断radio的值显示关键信息，基本信息，图片，文件
        let arr = []
        //关键信息点
        this.exhibitionCrux.cruxArray = this.pointData.filter(i => i.KeyWord)
        this.exhibitionCrux.cruxArray.map(i => {
          if (this.instance.hasOwnProperty(i.Path)) {
            return {
              ...i,
              value: this.instance[i.Path]
            }
          }
        })

        if (val == 1) { //需采集信息
          arr = this.pointData.filter(i => i.Visible)
          // //  图片和的处理
          // this.handlePicList(arr)
          // //  文件处理
          // this.handleFileList(arr)

        } else if (val == 2) { //有值信息点
          let list = this.pointData
          list.map(j => {
            if (this.instance.hasOwnProperty(j.Path)) {
              return {
                ...j,
                value: this.instance[j.Path]
              }
            }
          })
          arr = list.filter(k => k.value)
          // this.handlePicList(arr, 2)
          // this.handleFileList(arr, 2)

        } else { //全部信息点
          arr = this.pointData
          // this.handlePicList(arr)
          // this.handleFileList(arr)
        }
        this.displayData(arr)
      },
      handlePicList(arr) {
        let picObject = {}
        //处理数据格式
        arr.map(i => {
          if (i.InputMode == 'F2') {
            switch (i.Path) {
              case 'LedgerParam.PhotoDoc.Drawing':
              case 'LedgerParam.Siteinstall.InstallPic':
              case 'LedgerParam.Siteinstall.InstallDrawing':
              case 'LedgerParam.PhotoDoc.Nameplate':
              case 'LedgerParam.PhotoDoc.Pic':
                if (this.instance.hasOwnProperty(i.Path)) {
                  i.PicList = this.instance[i.Path]
                }
                if (picObject[i.InfoPointName]) {

                } else {
                  picObject[i.InfoPointName] = []
                }
                picObject[i.InfoPointName].push({
                  ...i,
                })
                break;

            }
          }

        })
        //展示图片
        this.exhibitionImage.list = picObject
        let isArray = [] //获取图片数组
        for (let i in picObject) {
          if (Array.isArray(picObject[i])) {
            let list = picObject[i]
            list.forEach(i => {
              if (i.PicList) {
                isArray.push(...i.PicList)
              }
            })
          }
        }
        this.exhibitionImage.arr = isArray
        let video = isArray.filter(i => i.Type != 'image' &&i.type != 'image' )
        this.exhibitionVideo.list = video
          //判断是否显示图片组件
          this.isShowImage = isArray.length ? true : false
          //判断是否显示video组件
          this.isShowVideo = video.length ? true : false

      },
      handleFileList(arr) {
        let picObject = {}
        //处理数据格式
        arr.map(i => {
          if (i.InputMode == 'F2') {
            switch (i.Path) {
              case 'LedgerParam.InsuranceDoc.InsuranceFile':
              case 'LedgerParam.PhotoDoc.Archive':
              case 'LedgerParam.Siteinstall.CheckReport':
                if (this.instance.hasOwnProperty(i.Path)) {
                  i.fileList = this.instance[i.Path]
                }
                if (picObject[i.InfoPointName]) {

                } else {
                  picObject[i.InfoPointName] = []
                }
                picObject[i.InfoPointName].push({
                  ...i,
                })
                break
            }
          }
        })
        //展示文件
        this.exhibitionFile.list = picObject
        let isArray = [] //获取文件数组
        for (let i in picObject) {
          if (Array.isArray(picObject[i])) {
            let list = picObject[i]
            list.forEach(i => {
              if (i.fileList) {
                isArray.push(...i.fileList)
              }
            })
          }
        }
          //判断是否显示文件组件
          this.isShowFile = isArray.length ? true : false

      },
      changeRadio(val) { //1,需采集，2，有值，3，全部
        this.handleRadios(val)
        this.currentRadio = val
      },
      formatDate(str) {
        if(str) {
          if(str.includes('-')) {
            return str
          }else {
            return  str.substr(0,4)+"-"+str.substr(4,2)+"-"+str.substr(6,2)+" "+str.substr(8,2) + ":" +str.substr(10,2) + ":"+str.substr(12,2)
          }
        } else {
          return '--'
        }
      },
      displayData(arr) {//对数据进行处理传给组件展示
        const result = {}
        arr.forEach(i => {
          if (this.instance.hasOwnProperty(i.Path) && this.currentRadio != 2) {
            i.value = this.instance[i.Path]
          }
          if (i.InputMode == 'C5') {
            if (this.instance.hasOwnProperty(i.Path)) {
              let time = this.instance[i.Path]
              i.value = this.formatDate(time)
            }
          }
          if (i.DataSource && i.DataSource.length) {
            let source = JSON.parse(i.DataSource)
            //判断输入类型
            if (i.InputMode == 'D1L') {
              let d1l = tools.formatDataSource(i.DataSource)
              d1l.forEach(k => {
                if (k.Code == this.instance[i.Path]) {
                  i.value = k.Name
                }
              })
            } else if (i.InputMode == 'D2' || i.InputMode == 'C6') {
              if (this.instance.hasOwnProperty(i.Path)) {
                if (!Array.isArray(this.instance[i.Path])) {
                  let transArray = this.instance[i.Path].split(',')
                  i.value = source.filter(item => transArray.includes(item.Code)).map(item => item.Name).join(',')
                }
              }
            }
            source.forEach(j => {
              if (j.Code == this.instance[i.Path]) {
                console.log(j.Name)
                i.value = j.Name
              }
            })
          }
          switch (i.InputMode) {
            case "L":
            case "L1":
            case "L2":
            case "M":
              break;
            default:
              if (result[`${i.FirstName}${i.SecondName ? '/' + i.SecondName : ''}`]) {
                result[`${i.FirstName}${i.SecondName ? '/' + i.SecondName : ''}`].paths.push({
                  Path: i.Path,
                  InfoPointName: i.InfoPointName,
                  InfoPointCode: i.InfoPointCode,
                  Value: i.value,
                  Visible: i.Visible,
                  KeyWord: i.KeyWord,
                  InputMode:i.InputMode
                })
              } else {
                result[`${i.FirstName}${i.SecondName ? '/' + i.SecondName : ''}`] = {
                  paths: [{
                    Path: i.Path,
                    InfoPointName: i.InfoPointName,
                    InfoPointCode: i.InfoPointCode,
                    Value: i.value,
                    Visible: i.Visible,
                    KeyWord: i.KeyWord,
                    InputMode:i.InputMode
                  }]
                }
              }

          }


        })
        this.exhibitionBaseInformation.information = result
        this.exhibitionCrux.allMessage = result
      },
      goBack() {
        this.$router.push({
          name: "facilityLedger",
          params: {
            deviceId: this.type
          }
        })
      },
      // 切换实例
      handleChangeExample() {
        this.selectRadio.initRadio = '1'
        this.getData();
        this.exhibitionEnergy.dynamic = []
      },
    },
    watch: {
      projectId() {
        this.$router.push({path: "/ledger/facility"})
      }
    }
  }
</script>

<style scoped lang="less">
  @bgc: #fff;
  .tableDisplay {
    .header {
      padding-bottom: 10px;
      overflow: hidden;
      text-overflow:ellipsis;
      white-space: nowrap;
      .details-title {
        color: #333;
        font-size: 16px;
        margin-left: 20px;
        line-height: 32px;
        cursor: pointer;
      }
    }

    .content {
      display: flex;
      flex-direction: row;
      box-sizing: border-box;
      height: calc(100% - 95px);
      .content-left {
        display: flex;
        flex-direction: column;
        flex: 1;
        .content-keyPoint {
          border: 1px solid #ccc;
          box-sizing: border-box;
          height: 100px;
          margin-bottom: 10px;
          overflow: hidden;
          background: @bgc;
        }
        .content-showType {
          height: 50px;
          border: 1px solid #ccc;
          border-bottom: none;
          box-sizing: border-box;
          background: @bgc;
        }
        .content-point {
          display: flex;
          flex-direction: row;
          height: calc(100% - 160px);
          border: 1px solid #ccc;
          box-sizing: border-box;
          background: @bgc;

          .content-point-left {
            flex: 1;
          }

          .content-point-right {
            width: 300px;
            border-left: 1px solid #ccc;
          }
        }
      }
      .content-right {
        width: 400px;
        margin-left: 10px;
        .content-repair {
          height: 50px;
          line-height: 50px;
          margin-bottom: 10px;
          border: 1px solid #ccc;
          background: @bgc;
          box-sizing: border-box;
        }
        .content-media {
          height: calc(100% - 60px);
          background: @bgc;
          border: 1px solid #ccc;
          box-sizing: border-box;
        }
      }
    }

    .footer {
      margin-top: 5px;
      height: 45px;
      background-color: #fff;
      box-sizing: border-box;
      border: 1px solid #ccc;
    }
  }

  /deep/ .el-scrollbar__wrap {
    overflow-x: hidden;
  }

</style>