soc_app/src/views/menu/iot/subsystem/detail.vue

<template>
  <div class="detail">
    <nav-bar></nav-bar>
    <card class="info">
      <van-cell-group>
        <van-cell title="控制器名称" :value="info.name" />
        <van-cell title="所属监控主机" :value="info.hostName" v-if="info.hostName" value-class="cell-host"/>
        <van-cell title="所属机构" :value="info.orgName" />
      </van-cell-group>
    </card>

    <card title="布撤防历史" class="history">
      <template>
        <k-list :list="history" :params="search">
          <template v-slot:header>
            <div class="header">
              <span>布撤防状态</span>
              <span>布撤防时间</span>
              <span>上报人</span>
            </div>
          </template>
          <template slot-scope="{ data }">
            <div class="datarow">
              <!-- <span v-if="data.status == 1" style="color: rgb(0, 164, 46)">布防</span>
              <span v-else-if="data.status == 0" style="color: rgb(215, 0, 15)">撤防</span> -->
              <span>{{ getDictLabel(data.status, 'protection_status', '未上报') }}</span>
              <span>{{ data.statusChangeTime }}</span>
              <span>{{ data.statusUpdatorName ? data.statusUpdatorName : '自动获取' }}</span>
            </div>
          </template>
        </k-list>
      </template>
    </card>
  </div>
</template>
<script>
import KList from '@/components/list/index.vue'
import { get, history } from '@/api/protection.js'
import Card from '@/components/card/index.vue'
import { getLabel } from '@/utils/optionEx'
import NavBar from '@/components/NavBar'
import { mapGetters } from 'vuex'
export default {
  data() {
    return {
      info: {},
      search: {
        protectionId: this.$route.query.id
      },
      statusOptions: [
        { value: -1, text: '布撤防状态' },
        { value: '0', text: '撤防' },
        { value: '1', text: '布防' },
        { value: '2', text: '未知' }
      ],
      dicts: ['protection_status']
    }
  },
  components: { NavBar, KList, Card },
  computed: {
    ...mapGetters(['dictionary'])
  },
  mounted() {
    this.getInfo()
  },
  methods: {
    history,
    getLabel,
    getInfo() {
      get(this.search.protectionId).then(r => {
        this.info = r.data
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.detail {
  margin: 15px;
}
.info {
  ::v-deep .van-cell__title {
    max-width: 40%;
  }
  ::v-deep .van-cell__value {
    max-width: 60%;
  }
}
.history {
  ::v-deep .header {
    display: flex;
    flex-direction: row;
    background-color: rgb(240, 240, 240);
    padding-top: 10px;
    padding-bottom: 10px;
  }

  ::v-deep .header > span {
    display: inline-block;
    text-align: center;
  }

  ::v-deep .header > span {
    display: inline-block;
    text-align: center;
  }
  ::v-deep .header > span:nth-child(1) {
    width: 30%;
  }

  ::v-deep .header > span:nth-child(2) {
    width: 40%;
  }
  ::v-deep .header > span:nth-child(3) {
    width: 30%;
  }
  ::v-deep .datarow {
    display: flex;
    flex-direction: row;
    padding-top: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgb(240, 240, 240);
  }

  ::v-deep .datarow > span {
    display: inline-block;
    text-align: center;
  }

  ::v-deep .datarow > span:nth-child(1) {
    width: 30%;
  }

  ::v-deep .datarow > span:nth-child(2) {
    width: 40%;
  }
  ::v-deep .datarow > span:nth-child(3) {
    width: 30%;
  }
}

.cell-host{
  min-width: 58vw;
}
</style>