mh_fire/src/views/self-management.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>
          <el-row class="threeBox">
            <div class="flexBoxE">
              <el-row>
                <el-row class="rightTopChart">
                  <gauge ref="gauge1" :dataMap="0.2" :dataNumber="20" color="#F68E6A"></gauge>
                </el-row>
                <el-row class="rightTopNumber">消防重点企业数量</el-row>
              </el-row>
              <el-row>
                <el-row class="rightTopChart">
                  <gauge ref="gauge2" :dataMap="0.3" :dataNumber="30" color="#06B1B9"></gauge>
                </el-row>
                <el-row class="rightTopNumber">火灾高危企业数量</el-row>
              </el-row>
              <el-row>
                <el-row class="rightTopChart">
                  <gauge ref="gauge3" :dataMap="0.5"  :dataNumber="50" color="#E4951E"></gauge>
                </el-row>
                <el-row class="rightTopNumber">一般企业数量</el-row>
              </el-row>
            </div>
          </el-row>
        </el-col>
        <el-col class="leftBot">
          <h4>维保记录</h4>
            <se-table
              ref="seTable"
              :dataMap="tableData"
              :headerData="headerData"
              :key="windowWidth"
            ></se-table>
        </el-col>
        <el-col class="leftBot">
          <h4>各街镇单位情况</h4>
          <el-row class="leftBotContent">
            <el-row class="fireBar">
              <category-enterprise ref="categoryEnterprise" :dataMap="[[10,20,15,25,17,16,18,14,20,22,33],[10,20,15,25,17,16,18,14,20,22,33],[10,20,15,25,17,16,18,14,20,22,33]]"></category-enterprise>
            </el-row>
          </el-row>
        </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-col>
    </transition>
    <transition name="el-fade-in-linear">
      <el-col class="rightBox" v-show="rightBtn">
        <div class="rightContent">
          <el-col>
            <h4>物联网设备监控情况</h4>
            <se-table
              ref="seTable"
              :dataMap="tableData1"
              :headerData="headerData1"
              :key="windowWidth"
            ></se-table>
          </el-col>
          <el-col class="rightTop">
            <h4>企业自主情况</h4>
              <radar-chart
                v-if="complaintList.length > 0"
                :dataMap="complaintList"
                name="闵行区消防情况"
                ref="radarChart"
              ></radar-chart>
          </el-col>
          <el-col class="rightBot">
            <h4>企业经营情况</h4>
            <el-row>
              <el-row>
                <el-row>上海XX有限公司</el-row>
                <el-row>
                  <el-col :span="8">员工总数：100人</el-col>
                  <el-col :span="8">企业法人：张三</el-col>
                  <el-col :span="8">成立时间：2020-01-01</el-col>
                  <el-col :span="8">消防等级：一级</el-col>
                  <el-col :span="8">注册资金：100万</el-col>
                  <el-col :span="8">巡检完成率：90%</el-col>
                </el-row>
              </el-row>
              <el-row>
                <el-row>上海XX有限公司</el-row>
                <el-row>
                  <el-col :span="8">员工总数：100人</el-col>
                  <el-col :span="8">企业法人：张三</el-col>
                  <el-col :span="8">成立时间：2020-01-01</el-col>
                  <el-col :span="8">消防等级：一级</el-col>
                  <el-col :span="8">注册资金：100万</el-col>
                  <el-col :span="8">巡检完成率：90%</el-col>
                </el-row>
              </el-row>
              <el-row>
                <el-row>上海XX有限公司</el-row>
                <el-row>
                  <el-col :span="8">员工总数：100人</el-col>
                  <el-col :span="8">企业法人：张三</el-col>
                  <el-col :span="8">成立时间：2020-01-01</el-col>
                  <el-col :span="8">消防等级：一级</el-col>
                  <el-col :span="8">注册资金：100万</el-col>
                  <el-col :span="8">巡检完成率：90%</el-col>
                </el-row>
              </el-row>
            </el-row>
          </el-col>
        </div>
      </el-col>
    </transition>
  </el-row>
</template>

<script>
import linstener from "@c/mixins/linstener";
import categoryEnterprise from "@c/category-enterprise";
import seTable from "@c/se-table";
import gauge from "@c/gauge";
// import map from "@c/mixins/map-data";
import map from "@c/mixins/map-gaode";
import radarChart from "@c/radar";
export default {
  components: { categoryEnterprise, seTable, radarChart, gauge},
  mixins: [linstener,map],
  data() {
    return {
      tableData: [
        {address:'2020-01-01',burnedArea:'某某单位',propertyLoss:'查看',deathToll:'张三',nonFatal:'13000000729',disasterHome:'拆除'},
        {address:'2020-01-01',burnedArea:'某某单位',propertyLoss:'查看',deathToll:'张三',nonFatal:'13000000729',disasterHome:'拆除'},
        {address:'2020-01-01',burnedArea:'某某单位',propertyLoss:'查看',deathToll:'张三',nonFatal:'13000000729',disasterHome:'拆除'},
        {address:'2020-01-01',burnedArea:'某某单位',propertyLoss:'查看',deathToll:'张三',nonFatal:'13000000729',disasterHome:'拆除'},
      ],
      headerData: [
        { prop: "address", name: "维保时间" },
        { prop: "burnedArea", name: "维保单位" },
        { prop: "propertyLoss", name: "维保点位" },
        { prop: "deathToll", name: "相关责任人" },
        { prop: "nonFatal", name: "联系电话" },
      ],
      tableData1: [
        {address:'数量',burnedArea:100,property:200,deathTol:100,nonFatal:100,},
        {address:'告警',burnedArea:30,property:50,deathTol:5,nonFatal:20,},
        {address:'离线',burnedArea:1,property:10,deathTol:20,nonFatal:5,},
        {address:'离线率',burnedArea:'100%',property:'100%',deathTol:'100%',nonFatal:'100%',},
        {address:'告警率',burnedArea:'5%',property:'5%',deathTol:'5%',nonFatal:'5%',},
      ],
      headerData1: [
        { prop: "address", name: "类型" },
        { prop: "burnedArea", name: "电气设备" },
        { prop: "property", name: "烟感设备" },
        { prop: "deathTol", name: "温感设备" },
        { prop: "nonFatal", name: "水压设备" },
        { prop: "nonFatal", name: "其他物联设施" },
      ],
      fireAddressList: [],
      fireTypeList: [],
      complaintList: [
           {name: "设施状况指数",value: 341},
           {name: "自主管理指数",value: 155},
           {name: "隐患状态指数",value: 156},
           {name: "建筑整体指数",value: 118},
           {name: "执法监管指数",value: 322},
      ],
    };
  },





  created() {
    // this.getData();
  },
  watch:{

  },
  mounted() {
    window.addEventListener(
      "resize",
      () =>
        this.resizeTimeActions([
          this.$refs.gauge,
          this.$refs.categoryLine,
          this.$refs.category,
          this.$refs.radarChart,
          this.$refs.wordCloud,
        ]),
      true
    );
    this.initMap()
  },
  methods: {

  },
};
</script>

<style lang="scss" scoped>
.abc{
  background: #000;
}
.contentBox {
  // font-family: "DS", "DS-B", "DS-BB", "DS-BS";
  & > .el-col {
    flex: 1;
    height: 100%;
    max-width: 8rem;
  }
  .leftBox {
    box-sizing: border-box;
    & > .el-col {
      flex: none;
      width: 100%;
      height: calc((70% - .25rem)/2);
      margin-top: .125rem;
      background: url('~@a/img/home/box-bg.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;
      }
    }
    .leftTop {
      padding: 0.375rem 0.45rem .25rem;
      margin-top: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 30%;
      background: url('~@a/img/home/bg1.png') no-repeat;
      background-size: 100% 100%;
      .threeBox {
        width: 100%;
        height: 100%;
        position: relative;
        justify-content: space-between;
        align-items: center;
        flex-wrap: nowrap;
        & > .flexBoxE {
          flex: 1;
          width: 100%;
          height: 100%;
          box-sizing: border-box;
          display: flex;
          align-items: center;
          & > .el-row {
            flex: none;
            width: 33.33%;
            display: flex;
            flex-direction: column;
          }
          .rightTopNumber {
            justify-content: center;
              font-size: 0.2125rem;
          }
          .rightTopChart {
            height: 1.5rem;
          }
          .el-form {
            text-align: center;
            .el-form-item {
              margin: 0;
            }
          }
        }
        .line {
          flex: none;
          width: 1px;
          height: 3.75rem;
          opacity: 1;
          background: linear-gradient(
            rgba(255, 255, 255, 0),
            #30cfff,
            rgba(255, 255, 255, 0)
          );
          // box-shadow: 0 0 .125rem .0375rem #30cfff;
        }
      }
    }
    .leftBot {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: .375rem .3125rem .1875rem;
      box-sizing: border-box;
      width: 100%;
      overflow: hidden;
      .leftBotContent {
        width: 100%;
        height: 100%;
        display: block;
        .fireBar {
          height: calc(100%);
        }
      }
    }
  }
  
  .rightBox {
    box-sizing: border-box;
    .rightContent{
      width: 100%;
      height: 100%;
      & > .el-col {
        height: calc((60% - .25rem)/2);
        background: url('~@a/img/home/box-bg.png') no-repeat;
        background-size: 100% 100%;
        position: relative;
        padding: .4375rem .3125rem .25rem;
        box-sizing: border-box;
        width: 100%;
        margin-bottom: 0.125rem;
        h4 {
          font-size: 0.2125rem;
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          margin: 0 auto;
          text-align: center;
          color: #00ffff;
        }
      }
      .rightTop{
        height: 40%;
      }
      .rightBot{
        margin-bottom: 0;
        background-size: 100% 100%;
        color: #FFF;
        font-size: .2rem;
        &>.el-row{
          width: 100%;
          height: 100%;
          overflow: auto;
          &::-webkit-scrollbar {
              display: none;
              // opacity: 0;
              /* Chrome Safari */
          }
          &>.el-row{
            width: 100%;
            height: auto;
            &>.el-row:nth-child(1){
              width: 100%;
              height: .4375rem;
              line-height: .4375rem;
              text-indent: .125rem;
              background: rgba(0,250,251,0.20);
            }
            &>.el-row:nth-child(2) {
              padding: .0625rem .125rem;
              .el-col{
                line-height: .35rem;
              }
            }
          }
        }
      }
    }
  }
}
</style>