mh_fire/src/views/enforcement-dynamic.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="leftTopContent">
            <el-col :span="7" v-for="item in SiAeAllList" :key="item.checkType">
              <el-col class="leftTopTitle">{{ item.checkType }}</el-col>
              <el-col class="leftTopCenter">{{ item.number }}</el-col>
              <el-col class="leftTopBot">
                <el-col>
                  <el-col>环比</el-col>
                  <el-col :style="{color:item.linkRelativeStatus === 1 ? 'red' : 'green'}">
                    {{item. linkRelativeStatus === 2 ? '-' : ''}}{{ (item.linkRelativeRatio * 100).toFixed(0) }}%
                  </el-col>
                </el-col>
                <el-col>
                  <el-col>同比</el-col>
                  <el-col :style="{color:item.sameStatus === 1 ? 'red' : 'green'}">
                    {{item.sameStatus === 2 ? '-' : ''}}{{ (item.sameRatio * 100).toFixed(0) }}%
                  </el-col>
                </el-col>
              </el-col>
            </el-col>
            <el-col :span="7"> </el-col>
          </el-row>
        </el-col>
        <el-col class="leftBot">
          <h4>行政许可情况</h4>
          <el-row class="leftBotTop">
            <el-row style="z-index:9">
              <el-col>{{ alFsdAllNumber.qualifiedRadio * 100 || 0 }}%</el-col>
              <el-col>合格率</el-col>
            </el-row>
            <liquid-fill class="liQuIdFill" ref="liQuIdFill" :dataMap="0.5"></liquid-fill>
          </el-row>
          <el-row>
            <el-col
              ><span>受理数</span
              ><span>{{ alFsdAllNumber.acceptNumber || 0 }}</span></el-col
            >
            <el-col
              ><span>检查数</span
              ><span>{{ alFsdAllNumber.checkNumber || 0 }}</span></el-col
            >
            <el-col
              ><span>出文数</span
              ><span>{{ alFsdAllNumber.articleNumber || 0 }}</span></el-col
            >
          </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-row class="mapTips">
          <el-col class="greenImage">执法单位</el-col>
          <el-col class="yellowImage">安检单位</el-col>
          <el-col class="redImage">举报投诉</el-col>
        </el-row>
      </el-col>
    </transition>
    <transition name="el-fade-in-linear">
      <el-col class="rightBox" v-show="rightBtn">
        <el-row class="rightContent">
          <h4>投诉举报情况</h4>
          <el-row class="rightTop">
            <!-- <img src="~@a/img/test/bg.png" alt="" /> -->
            <el-row class="graphChart">
              <word-cloud
                ref="wordCloud"
                :dataMap="reportComplaintList"
              ></word-cloud>
            </el-row>
          </el-row>
          <el-row class="treeMap">
            <!-- <tree-map
              :dataMap="reportComplaintList"
              ref="treeMap"
              v-if="reportComplaintList.length > 0"
              style="heighr:calc((100% - 0.2125rem)"
            ></tree-map> -->
            <category
              ref="category"
              v-if="reportComplaintList.length > 0"
              :dataMap="reportComplaintList.slice(0,10).map((val,ind) => ind < 9 ? val.value : reportComplaintList.slice(10).reduce((a, b) => {return a + b.value}, 0))"
              :xData="reportComplaintList.slice(0,10).map((val,ind) => ind < 9 ? val.name :'其他')"
              :isSlice="2"
              color="#33BBFA"
            ></category>
            <img src="~@a/img/enforce/bg7.png" alt="" />
          </el-row>
          <el-row class="rightBot">
            <el-col :span="11">
              <img src="~@a/img/enforce/bg8.png" alt="" />
              <el-row>
                <el-col style="color: #fd0018">{{
                  reportStatisticsObj.complaintNumber || 0
                }}</el-col>
                <el-col>投诉数</el-col>
              </el-row>
            </el-col>
            <el-col :span="11">
              <img src="~@a/img/enforce/bg9.png" alt="" />
              <el-row>
                <el-col style="color: #35ffff">{{
                  reportStatisticsObj.concludeNumber || 0
                }}</el-col>
                <el-col>办结数</el-col>
              </el-row>
            </el-col>
            <el-col :span="11">
              <img src="~@a/img/enforce/bg10.png" alt="" />
              <el-row>
                <el-col style="color: #fed02f">{{
                  reportStatisticsObj.checkNumber || 0
                }}</el-col>
                <el-col>处理数</el-col>
              </el-row>
            </el-col>
            <el-col :span="11">
              <img src="~@a/img/enforce/bg11.png" alt="" />
              <el-row>
                <el-col style="color: #01f01d"
                  >{{
                    parseInt(reportStatisticsObj.satisfactionRate * 100)
                  }}%</el-col
                >
                <el-col>满意率</el-col>
              </el-row>
            </el-col>
          </el-row>
        </el-row>
      </el-col>
    </transition>
  </el-row>
</template>

<script>
import wordCloud from "@c/wordCloud";
import linstener from "@c/mixins/linstener";
import map from "@c/mixins/map-data";
import category from "@c/category";
import liquidFill from "@c/liquid-fill";
export default {
  data() {
    return {
      SiAeAllList: [],
      reportComplaintList: [],
      alFsdAllNumber: {
        acceptNumber: 0,
        articleNumber: 0,
        checkNumber: 0,
        qualifiedRadio: 0,
      },
      reportStatisticsObj: {
        complaintNumber: 0,
        concludeNumber: 0,
        checkNumber: 0,
        satisfactionRate: 0,
      },
    };
  },
  components: { category, wordCloud, liquidFill },
  mixins: [linstener, map],
  created() {
    this.getData();
  },
  mounted() {
    window.addEventListener(
      "resize",
      () => this.resizeTimeActions([this.$refs.category, this.$refs.wordCloud, this.$refs.liQuIdFill]),
      true
    );
    this.initMap();
  },
  methods: {
    async getData() {
      this.getSiAeAllCollect();
      this.getReportStatistics();
      this.getAlFsdAllNumber();
      this.getReportComplaint();
    },
    // 消防执法情况
    async getSiAeAllCollect() {
      let res = await this.$axios.get(
        this.$api.siaeall.siAeAllCollect +
          "?" +
          this.$qs.stringify({
            startTime: this.$store.state.timeList[0] || "",
            endTime: this.$store.state.timeList[1] || "",
          })
      );
      if (res) this.SiAeAllList = res.data;
    },
    // 行政许可情况
    async getAlFsdAllNumber() {
      let res = await this.$axios.get(this.$api.siaeall.alFsdAllNumber);
      if (res) this.alFsdAllNumber = res.data;
    },
    // 投诉举报情况 Top
    async getReportComplaint() {
      let res = await this.$axios.get(this.$api.siaeall.reportComplaint);
      if (res)
        this.reportComplaintList = res.data.map((val) => {
          return {
            name: val.type,
            value: val.number,
          };
        });
        this.reportComplaintList.sort((a,b)=>{
          return b.value - a.value
        })
    },
    // 投诉举报情况 Bot
    async getReportStatistics() {
      let res = await this.$axios.get(this.$api.siaeall.reportStatistics);
      if (res) this.reportStatisticsObj = res.data;
    },
  },
};
</script>

<style lang="scss" scoped>
.contentBox {
  font-family: "DS", "DS-B", "DS-BB", "DS-BS";
  & > .el-col {
    flex: 1;
    max-width: 8rem;
    height: 100%;
  }
  .leftBox {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    box-sizing: border-box;
    & > .el-col {
      flex: 1;
      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;
      }
    }
    .leftTop {
      padding: 0.375rem 0.475rem 0.1875rem;
      height: 5.75rem;
      margin-bottom: 0.125rem;
      display: flex;
      justify-content: center;
      align-items: center;
      .leftTopContent {
        width: 100%;
        max-height: 100%;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        & > .el-col {
          width: 1.9375rem;
          height: 1.3125rem;
          // background: url(~@a/img/enforce/bg3.png) no-repeat;
          box-shadow: inset 0 0 0.2rem 0.0125rem #30cfff;
          background-size: 100% 100%;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          padding: 0.125rem 0.1rem;
          box-sizing: border-box;
          margin-bottom: 0.125rem;
          border-radius: .125rem;
          & > .el-col {
            display: flex;
            justify-content: center;
            flex: none;
            align-items: center;
          }
          .leftTopTitle {
            font-size: 0.2rem;
          }
          .leftTopCenter {
            font-size: 0.3rem;
            color: #fcbb0b;
          }
          .leftTopBot {
            font-size: 0.175rem;
            justify-content: space-between;
            align-items: center;
            & > .el-col {
              flex: none;
              display: flex;
              align-items: center;
              .el-col {
                flex: none;
              }
            }
            & > .el-col:first-child {
              & > .el-col:last-child {
                color: #ccc;
                margin-left: 0.0625rem;
              }
            }
            & > .el-col:last-child {
              & > .el-col:last-child {
                color: #ccc;
                margin-left: 0.0625rem;
              }
            }
          }
          &:last-child {
            background: none;
            box-shadow: none;
          }
        }
      }
    }
    .leftBot {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0.375rem 0.45rem 0.1875rem;
      box-sizing: border-box;
      .leftBotTop {
        // width: 3.1375rem;
        height: 100%;
        flex: 1;
        // background: url(~@a/img/enforce/bg4.png) no-repeat;
        background-size: 100% 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        position: relative;
        .liQuIdFill{
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
          margin: auto;
          padding: .25rem;
          box-sizing: border-box;
        }
        & > .el-row .el-col:first-child {
          font-size: .5625rem;
          line-height: 0.75rem;
          color: #FFF;
          // color: #f4f70d;
        }
        & > .el-row .el-col:last-child {
          font-size: 0.2625rem;
          line-height: 0.375rem;
        }
      }
      & > .el-row:last-child {
        width: 2.6875rem;
        height: 3.1375rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        & > .el-col {
          width: 100%;
          height: 0.7125rem;
          // background: url(~@a/img/enforce/bg5.png) no-repeat;
          border-radius: 0.125rem;
          background-size: 100% 100%;
          padding: 0 0.3rem;
          display: flex;
          justify-content: space-between;
          align-items: center;
          box-shadow: inset 0 0 0.2rem 0.0125rem #30cfff;
          border: 1px solid transparent;
          & > span:first-child {
            font-size: 0.25rem;
          }
          & > span:last-child {
            font-size: 0.4rem;
          }
        }
        & > .el-col:nth-child(1) {
          & > span:last-child {
            color: #fd0018;
          }
        }
        & > .el-col:nth-child(2) {
          & > span:last-child {
            color: #04e7ef;
          }
        }
        & > .el-col:nth-child(1) {
          & > span:last-child {
            color: #53fd00;
          }
        }
      }
    }
  }
  .rightBox {
    display: flex;
    box-sizing: border-box;
    .rightContent {
      width: 100%;
      height: 100%;
      background: url(~@a/img/enforce/bg2.png) no-repeat;
      background-size: 100% 100%;
      box-sizing: border-box;
      padding: 0.4375rem 0.4375rem;
      h4 {
        font-size: 0.2125rem;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        margin: 0 auto;
        text-align: center;
        color: #00ffff;
      }
      .rightTop {
        width: 100%;
        height: 40%;
        position: relative;
        img {
          position: absolute;
          height: 100%;
          left: 0;
          right: 0;
          margin: auto;
        }
        .graphChart {
          height: 100%;
          width: 100%;
          margin: 0 auto;
        }
      }
      .treeMap {
        width: 100%;
        height: 30%;
        img {
          margin: 0 auto;
          height: 0.2125rem;
        }
      }
      .rightBot {
        width: 100%;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        & > .el-col {
          width: 3rem;
          height: 1rem;
          overflow: hidden;
          background: rgba(11, 12, 72, 0.4);
          display: flex;
          justify-content: space-between;
          align-items: center;
          box-shadow: inset 0 0 0.2rem 0.0125rem #30cfff;
          border: 1px solid transparent;
          position: relative;
          img {
            width: 1.125rem;
          }
          &::before {
            content: "";
            position: absolute;
            width: 0.0375rem;
            height: 0.5rem;
            top: 0.25rem;
            left: 0px;
            bottom: 0;
            right: 0;
            background: rgb(48, 178, 199);
          }
          & > .el-row {
            flex: 1;
            & > .el-col:nth-child(1) {
              font-size: 0.4rem;
            }
            & > .el-col:nth-child(2) {
              font-size: 0.25rem;
            }
          }
        }
      }
    }
  }
}
</style>