mh_fire/src/views/rescue-station.vue

<template>
  <el-row class="contentBox">
    <transition name="el-fade-in-linear">
      <el-col class="leftBox" v-show="leftBtn">
        <el-col class="leftTop">
          <h4>支队值班情况</h4>
          <div class="leftTopSearch">
            <el-button size="mini" @click="searchTime('day')" :class="{ btnClick: timeArea === 'day' }">日</el-button>
            <el-button size="mini" @click="searchTime('month')" :class="{ btnClick: timeArea === 'month' }">月</el-button>
          </div>
          <el-row class="propSituation">
            <template v-if="timeArea === 'day'">
              <el-col v-for="item in unitBeOnDutyList" :key="item.name">
                <el-col class="rank">{{item.postName}}</el-col>
                <el-col><img src="~@a/img/test/bg2.png" alt="" /></el-col>
                <el-col class="propName">{{item.name}}</el-col>
              </el-col>
            </template>
             <se-table
             v-else
              ref="seTable"
              :dataMap="unitBeOnDutyListData"
              :headerData="unitBeOnDutyHeaderList"
              :key="windowWidth"
            ></se-table>
          </el-row>
        </el-col>
        <el-col class="leftBot">
          <h4>历史警情</h4>
          <el-table
            :data="tableData"
            class="transparentTableRow"
            height="100%"
            row-style="height:.425rem;"
            cell-style="height:.425rem;box-sizing: border-box;"
            style="width: 100%; margin: 0 auto;"
          >
            <el-table-column
              show-overflow-tooltip
              v-for="item in headerData2"
              :key="item.prop"
              :prop="item.prop"
              align="center"
              min-width="20"
              :label="item.name"
            >
              <template v-if="item.prop === 'type'" #default="scope">
                <el-tooltip placement="right">
                  <template #content>
                    <div class="tableTooltip">
                      <div class="tableTitle">
                        <div>执勤力量</div>
                      </div>
                      <el-row class="tableContent">
                        <el-col :span="12">电车呼台：{{scope.row.callingUp}}</el-col>
                        <el-col :span="12">装备名称：{{scope.row.equipName}}</el-col>
                        <el-col :span="12">车牌号：{{scope.row.carNumber}}</el-col>
                        <el-col :span="12">车辆状态：{{scope.row.carStatus}}</el-col>
                        <el-col :span="24">警情处置时长：{{scope.row.disposeTime}}</el-col>
                      </el-row>
                      <el-row class="tablePersonnel">
                        <el-col :span="7">
                          <img src="~@a/img/test/bg1.png" alt="" />
                          <div>{{scope.row.commander}}</div>
                          <div>指挥员</div>
                        </el-col>
                        <el-col :span="7">
                          <img src="~@a/img/test/bg1.png" alt="" />
                          <div>{{scope.row.correspondent}}</div>
                          <div>通讯员</div>
                        </el-col>
                        <el-col :span="7">
                          <img src="~@a/img/test/bg1.png" alt="" />
                          <div>{{scope.row.firemen}}</div>
                          <div>消防员</div>
                        </el-col>
                        <el-col :span="7">
                          <img src="~@a/img/test/bg1.png" alt="" />
                          <div>{{scope.row.driver}}</div>
                          <div>驾驶员</div>
                        </el-col>
                      </el-row>
                    </div>
                  </template>
                  <template>
                    <i class="iconfont icon-icon-test" v-if="item.prop === 'type'"></i>
                    <div class="name-wrapper" v-else>{{ scope.row[item.prop] }}</div>
                  </template>
                </el-tooltip>
              </template>
              <template v-else #default="scope">
                  {{ item.prop === 'type' ? '' : (item.prop === 'status' ? (scope.row[item.prop] == 1 ? '可用' : '不可用') : scope.row[item.prop])}}
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-col>
    </transition>
    <transition name="el-fade-in-linear">
      <el-col class="centerBox" :style="{'max-width':leftBtn && rightBtn ? '8rem' :!leftBtn &&  !rightBtn ? '100%' : leftBtn ||  rightBtn ? '16rem' : '8rem'}">
        <el-row class="leftBtn btnW" @click="leftBtnClick()">
          <i :class="leftBtn ? 'el-icon-arrow-left' : 'el-icon-arrow-right'"></i>
        </el-row>
        <el-row class="centerContent" id="mapF"></el-row>
        <el-row class="rightBtn btnW" @click="rightBtnClick()">
          <i :class="rightBtn ? 'el-icon-arrow-right' : 'el-icon-arrow-left'"></i>
        </el-row>
        <el-row class="mapTips">
          <el-col class="blueImageTip">消防站</el-col>
          <el-col class="yellowImageTip">单位微型消防站</el-col>
          <el-col class="redImageTip">居村微型消防站</el-col>
        </el-row>
      </el-col>
    </transition>
    <transition name="el-fade-in-linear">
      <el-col class="rightBox" v-show="rightBtn">
        <div class="rightContent">
          <el-col class="rightTop">
            <h4>各站点执勤实力</h4>
            <el-table
              :data="tableData2"
              class="transparentTableRow"
              height="100%"
              row-style="height:.425rem;"
              cell-style="height:.425rem;box-sizing: border-box;"
              style="width: 100%; margin: 0 auto;"
              @expand-change="getFireSiteDuty"
            >
              <el-table-column type="expand">
                <template #default="props">
                  <template v-if="props.row.children">
                    <template v-for="(item,ind) in props.row.children" :key="ind">
                      <el-row class="tableExpendTitle"> {{item.type}}（1辆车，{{item.personNumber}}人） </el-row>
                      <el-row class="tableExpendcontent">
                        <el-col>
                          <img src="~@a/img/test/bg3.png" alt="" />
                          <div>{{ item.carNumber }}</div>
                          <div>车牌号</div>
                        </el-col>
                        <el-col>
                          <img src="~@a/img/test/bg7.png" alt="" />
                          <div>{{ item.correspondent }}</div>
                          <div>指挥员</div>
                        </el-col>
                        <el-col>
                          <img src="~@a/img/test/bg7.png" alt="" />
                          <div>{{ item.commander }}</div>
                          <div>通讯员</div>
                        </el-col>
                        <el-col>
                          <img src="~@a/img/test/bg7.png" alt="" />
                          <div>{{ item.firemen }}</div>
                          <div>消防员</div>
                        </el-col>
                        <el-col>
                          <img src="~@a/img/test/bg7.png" alt="" />
                          <div>{{ item.driver }}</div>
                          <div>驾驶员</div>
                        </el-col>
                      </el-row>
                    </template>
                  </template>
                </template>
              </el-table-column>
              <el-table-column
                show-overflow-tooltip
                v-for="item in headerData"
                :key="item.prop"
                :prop="item.prop"
                align="center"
                min-width="20"
                :label="item.name"
              >
              </el-table-column>
            </el-table>
          </el-col>
          <el-col class="rightBot">
            <h4>消防科普教育基地</h4>
            <el-table
              :data="$store.state.educationList"
              class="transparentTableRow"
              height="100%"
              row-style="height:.425rem;"
              cell-style="height:.425rem;box-sizing: border-box;"
              style="width: 100%; margin: 0 auto"
            >
              <el-table-column
                v-for="item in $store.state.educationHeader"
                show-overflow-tooltip
                :key="item.prop"
                :prop="item.prop"
                align="center"
                min-width="20"
                :label="item.name"
              >
              </el-table-column>
            </el-table>
          </el-col>
        </div>
      </el-col> 
    </transition>
  </el-row>
</template>

<script>
import linstener from "@c/mixins/linstener";
// import map from "@c/mixins/map-data";
import map from "@c/mixins/map-gaode";
import seTable from "@c/se-table";
export default {
  data() {
    return {
      timeArea: "day",
      tableData: [
        {
          type: "火灾",
          policeTime: "23:00:00",
          alertLevel: "二级",
          address: "闵行区",
          car: "2辆",
          policeCause: "电器火灾",
          department: "吴泾支队",
          status: "1",
          callingUp: "1号",
          equipName: "一七",
          carNumber: "沪X5477应急",
          carStatus: "出动",
          disposeTime: "1:00：00",
          correspondent: "张三",
          commander: "李四",
          firemen: "王五",
          driver: "赵六",
        },
        {
          type: "火灾",
          policeTime: "23:00:00",
          alertLevel: "二级",
          address: "闵行区",
          car: "2辆",
          policeCause: "电器火灾",
          department: "吴泾支队",
          status: "1",
          callingUp: "1号",
          equipName: "一七",
          carNumber: "沪X5477应急",
          carStatus: "出动",
          disposeTime: "1:00：00",
          correspondent: "张三",
          commander: "李四",
          firemen: "王五",
          driver: "赵六",
        },
        {
          type: "火灾",
          policeTime: "23:00:00",
          alertLevel: "二级",
          address: "闵行区",
          car: "2辆",
          policeCause: "电器火灾",
          department: "吴泾支队",
          status: "1",
          callingUp: "1号",
          equipName: "一七",
          carNumber: "沪X5477应急",
          carStatus: "出动",
          disposeTime: "1:00：00",
          correspondent: "张三",
          commander: "李四",
          firemen: "王五",
          driver: "赵六",
        },
        {
          type: "火灾",
          policeTime: "23:00:00",
          alertLevel: "二级",
          address: "闵行区",
          car: "2辆",
          policeCause: "电器火灾",
          department: "吴泾支队",
          status: "1",
          callingUp: "1号",
          equipName: "一七",
          carNumber: "沪X5477应急",
          carStatus: "出动",
          disposeTime: "1:00：00",
          correspondent: "张三",
          commander: "李四",
          firemen: "王五",
          driver: "赵六",
        },
        {
          type: "火灾",
          policeTime: "23:00:00",
          alertLevel: "二级",
          address: "闵行区",
          car: "2辆",
          policeCause: "电器火灾",
          department: "吴泾支队",
          status: "1",
          callingUp: "1号",
          equipName: "一七",
          carNumber: "沪X5477应急",
          carStatus: "出动",
          disposeTime: "1:00：00",
          correspondent: "张三",
          commander: "李四",
          firemen: "王五",
          driver: "赵六",
        },
      ],
      tableData2: [
        {
          id:'222',
          address: "XX消防站",
          car: "3辆",
          lochus: "12人",
          children:[
            {type:'备训',carNumber:"沪X5477应急",personNumber:'4', correspondent: "张三", commander: "李四", firemen: "王五", driver: "赵六",},
            {type:'跨训',carNumber:"沪X5477应急",personNumber:'4', correspondent: "张三", commander: "李四", firemen: "王五", driver: "赵六",},
            {type:'救助',carNumber:"沪X5477应急",personNumber:'4', correspondent: "张三", commander: "李四", firemen: "王五", driver: "赵六",},
          ]
        },
        {
          id:'222',
          address: "XX消防站",
          car: "3辆",
          lochus: "12人",
          children:[
            {type:'备训',carNumber:"沪X5477应急",personNumber:'4', correspondent: "张三", commander: "李四", firemen: "王五", driver: "赵六",},
            {type:'跨训',carNumber:"沪X5477应急",personNumber:'4', correspondent: "张三", commander: "李四", firemen: "王五", driver: "赵六",},
            {type:'救助',carNumber:"沪X5477应急",personNumber:'4', correspondent: "张三", commander: "李四", firemen: "王五", driver: "赵六",},
          ]
        },
        {
          id:'222',
          address: "XX消防站",
          car: "3辆",
          lochus: "12人",
          children:[
            {type:'备训',carNumber:"沪X5477应急",personNumber:'4', correspondent: "张三", commander: "李四", firemen: "王五", driver: "赵六",},
            {type:'跨训',carNumber:"沪X5477应急",personNumber:'4', correspondent: "张三", commander: "李四", firemen: "王五", driver: "赵六",},
            {type:'救助',carNumber:"沪X5477应急",personNumber:'4', correspondent: "张三", commander: "李四", firemen: "王五", driver: "赵六",},
          ]
        },
        {
          id:'222',
          address: "XX消防站",
          car: "3辆",
          lochus: "12人",
          children:[
            {type:'备训',carNumber:"沪X5477应急",personNumber:'4', correspondent: "张三", commander: "李四", firemen: "王五", driver: "赵六",},
            {type:'跨训',carNumber:"沪X5477应急",personNumber:'4', correspondent: "张三", commander: "李四", firemen: "王五", driver: "赵六",},
            {type:'救助',carNumber:"沪X5477应急",personNumber:'4', correspondent: "张三", commander: "李四", firemen: "王五", driver: "赵六",},
          ]
        },
        {
          id:'222',
          address: "XX消防站",
          car: "3辆",
          lochus: "12人",
          children:[
            {type:'备训',carNumber:"沪X5477应急",personNumber:'4', correspondent: "张三", commander: "李四", firemen: "王五", driver: "赵六",},
            {type:'跨训',carNumber:"沪X5477应急",personNumber:'4', correspondent: "张三", commander: "李四", firemen: "王五", driver: "赵六",},
            {type:'救助',carNumber:"沪X5477应急",personNumber:'4', correspondent: "张三", commander: "李四", firemen: "王五", driver: "赵六",},
          ]
        },
        {
          id:'222',
          address: "XX消防站",
          car: "3辆",
          lochus: "12人",
          children:[
            {type:'备训',carNumber:"沪X5477应急",personNumber:'4', correspondent: "张三", commander: "李四", firemen: "王五", driver: "赵六",},
            {type:'跨训',carNumber:"沪X5477应急",personNumber:'4', correspondent: "张三", commander: "李四", firemen: "王五", driver: "赵六",},
            {type:'救助',carNumber:"沪X5477应急",personNumber:'4', correspondent: "张三", commander: "李四", firemen: "王五", driver: "赵六",},
          ]
        },
      ],
      headerData: [
        { prop: "address", name: "站点名称" },
        { prop: "car", name: "站点车辆" },
        { prop: "lochus", name: "人员" },
      ],
      headerData2: [
        { prop: "type", name: "类型" },
        { prop: "policeTime", name: "立案时间" },
        { prop: "alertLevel", name: "警情等级" },
        { prop: "address", name: "案发地址" },
        { prop: "car", name: "调动车辆" },
        { prop: "policeCause", name: "原因" },
        { prop: "department", name: "所属中队" },
        { prop: "status", name: "状况" },
      ],
      unitBeOnDutyList: [],
      unitBeOnDutyHeaderList: [],
      unitBeOnDutyListData: [],
    };
  },
  mixins: [linstener,map],
  components: {seTable},
  created() {
    this.getData();
  },
  mounted() {
    window.addEventListener(
      "resize",
      () =>
        this.resizeTimeActions([
          this.$refs.gauge1,
          this.$refs.gauge2,
          this.$refs.gauge3,
          this.$refs.lineSmooth,
          this.$refs.barChart,
        ]),
      true
    );
    this.initMap()
  },
  methods: {
    async getData() {
      this.getSiAeAllCollect();
      this.getPage();
      this.getFireSiteList();
    },
    // 支队值班情况
    async getSiAeAllCollect() {
      let res = await this.$axios.get(this.$api.water[this.timeArea === 'day' ? 'unitBeOnDuty' : 'unitBeOnDutyList'] +
          "?" +
          this.$qs.stringify({
            startTime: this.timeArea === 'day' ? "2020-03-03 00:00:00" :'2020-03-01 00:00:00',
            endTime:  this.timeArea === 'day' ? "2020-03-03 23:59:59" :'2020-03-31 23:59:59',
          })
      );
      if (res && this.timeArea === 'day') this.unitBeOnDutyList = res.data;
      if (res && this.timeArea === 'month' && res.data[0]){
        this.unitBeOnDutyHeaderList = Array.from(new Set(res.data[0].map(val=>val.postName))).map(val=>{
          return {
            name:val,
            prop:val
          }
        })
        this.unitBeOnDutyHeaderList.unshift({name:'日期',prop:'time'})
        this.unitBeOnDutyListData = res.data.map(val=>{
          let a = {}
          let time = val[0].time.split(' ')[0].split('-')
          time.shift()
          a.time = time.join('-')
          this.unitBeOnDutyHeaderList.map(value=>{
            let b = val.filter(reaVal=>reaVal.postName === value.name)
            a[value.name] = b.length>0 ? b.map(val=>val.name).join(',') :''
          })
          return a
        })
      }else{
         this.unitBeOnDutyListData = []
      }
    },
    // 历史警情
    async getPage() {
      // let res = await this.$axios.get(this.$api.house.page +
      //     "?" +
      //     this.$qs.stringify({
      //       current: 1,
      //       size: 100,
      //       startTime: "2020-03-03 00:00:00",
      //       endTime: "2021-03-03 23:59:59",
      //     })
      // );
      // if (res) this.tableData = res.data;
    },
    // 各站点执勤实力
    async getFireSiteList() {
      // let res = await this.$axios.get(this.$api.fireSite.page +
      //     "?" +
      //     this.$qs.stringify({
      //       startTime: "2020-03-03 00:00:00",
      //       endTime: "2020-03-03 23:59:59",
      //     })
      // );
      // if (res) this.tableData2 = res.data;
    },
    // 各站点执勤实力
    async getFireSiteDuty(row, expandedRows) {
      if(!expandedRows || expandedRows.length<1) return
      // let res = await this.$axios.get(this.$api.fireSite.fireSiteDuty +
      //     "?" +
      //     this.$qs.stringify({
      //       fireSiteId: expandedRows.id,
      //     })
      // );
      // if (res) row.children = res.data;
    },
    searchTime(val){
      this.timeArea = val
      this.getSiAeAllCollect();
    }
  },
};
</script>

<style lang="scss" scoped>
.contentBox {
  display: flex;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding-bottom: 0.125rem;
  color: #fff;
  // font-family: "DS", "DS-B", "DS-BB", "DS-BS";
  & > .el-col {
    flex: 1;
    max-width: 8rem;
    height: 100%;
  }
  .leftBox {
    box-sizing: border-box;
    & > .el-col {
      height: calc(50% - .0625rem);
      background: url(~@a/img/enforce/bg1.png) no-repeat;
      background-size: 100% 100%;
      position: relative;
      max-height: 50%;
      h4 {
        font-size: 0.2125rem;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        margin: 0 auto;
        text-align: center;
        color: #00ffff;
      }
    }
    .leftTop {
      padding: 0.375rem 0.475rem 0.1875rem;
      margin-bottom: 0.125rem;
    width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .leftTopSearch {
        display: flex;
        justify-content: flex-end;
        height: 0.375rem;
        padding: 0.0625rem 0 0;
        .el-button {
          width: 0.375rem;
          height: 0.325rem;
          min-height: auto;
          padding: 0;
          margin-right: 0.075rem;
          margin-left: 0;
          background: #000707;
          color: #fff;
          border: 1px solid;
          box-sizing: border-box;
          font-size: 0.15rem;
          border-image: linear-gradient(0deg, #0461c2 0%, #0ecdf1 100%) 1 1;
          border-radius: 0.125rem;
        }
        .btnClick {
          color: #fccf2a;
          border-image: linear-gradient(0deg, #ff6800 0%, #fccf2a 100%) 1 1;
        }
      }
      
      .propSituation {
        flex: 1;
        height: calc(100% - 1rem);
        // justify-content: center;
        width: 100%;
        flex-wrap: wrap;
        align-items: center;
        margin-bottom: 0.125rem;
        overflow-y: scroll;
        overflow-x: hidden;
        scrollbar-width: none;
        /* firefox */
        -ms-overflow-style: none;
        /* IE 10+ */
        overflow-x: hidden;
        overflow-y: auto;
        &::-webkit-scrollbar {
          display: none;
          // opacity: 0;
          /* Chrome Safari */
        }
        & > .el-col {
          width: 32%;
          height: 48%;
          border-radius: .0625rem;
          max-height: 48%;
          margin: .0375rem calc(4% / 6);
          flex: none;
          box-shadow: inset 0 0 0.4375rem 0.0625rem #30cfff;
          display: flex;
          flex-direction: column;
          font-size: 0.2rem;
          color: #dbe9ea;
          font-weight: 400;
          // font-family: Microsoft YaHei Regular, Microsoft YaHei Regular-Regular;
          .el-col {
            flex: none;
            overflow: hidden;
          }
          .rank {
            padding: 0.125rem 0;
            text-align: center;
            box-sizing: border-box;
          }
          .propName {
            padding: 0.125rem 0;
            text-align: center;
            box-sizing: border-box;
          }
          & .el-col:nth-child(2) {
            flex: 1;
            img {
              // width: 100%;
              height: 100%;
              // objec-fit: cover;
              margin: 0 auto;
              display: block;
            }
          }
        }
      }
    }
    .leftBot {
      padding: 0.5rem 0.35rem 0.25rem;
      box-sizing: border-box;
      .el-table {
        border-radius: 0.125rem;
      }
    }
  }
  .rightBox {
    .rightContent {
      width: 100%;
      height: 100%;
      background-size: 100% 100%;
      box-sizing: border-box;
      position: relative;
      & > .el-col {
        padding: 0.5rem 0.35rem 0.25rem;
        background: url(~@a/img/enforce/bg1.png) no-repeat;
        background-size: 100% 100%;
        position: relative;
        h4 {
          font-size: 0.2125rem;
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          margin: 0 auto;
          text-align: center;
          color: #00ffff;
        }
      }
      .rightTop{
        height: 60%;
      }
      .rightBot{
        margin-top: .125rem;
        height: calc(40% - .125rem);
        padding-top: 0.35rem;
      }
      .tableExpendTitle {
        color: #00fffc;
        padding: 0.125rem 0;
      }
      .tableExpendcontent {
        display: flex;
        flex-wrap: wrap;
        .el-col {
          width: 20%;
          padding: 0.0625rem;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: center;
          flex: none;
          img {
            width: 100%;
          }
        }
      }
    }
  }
}
</style>