ybxf-security-ui/src/views/backend/statisticsFire/index.vue

<template>
  <div>
    <el-tabs
      type="border-card"
      v-model.trim="selectedTab"
      @tab-click="clickTab"
    >
      <el-tab-pane
        :label="item.deptName"
        v-for="(item, index) in brigade"
        :key="index"
        :name="item.id"
      >
      </el-tab-pane>
    </el-tabs>
    <div class="nav-data">
      <div v-for="(item, index) in navData" :key="index" class="nav-data-item">
        <img :src="item.imgs" alt="" class="nav-img" />
        <div class="text">
          <div>{{ item.name }}</div>
          <div>{{ item.count }}</div>
        </div>
      </div>
    </div>
    <!-- 统计图 -->
    <div class="chart">
      <!-- 左侧版块 -->
      <div class="left-chart">
        <div class="first-line">
          <bar-chart :watcherList="watcherList" />
          <unitbart-chart :watcherList="watcherList" />
        </div>
        <div class="two-line">
          <div v-for="(item, index) in scanCode" :key="index">
            <div class="total">{{ item.count }}</div>
            <div class="item-name">{{ item.name }}</div>
          </div>
        </div>
        <div class="two-line three-line">
          <div
            v-for="(item, index) in threeChart"
            :key="index"
            style="color: #657398"
          >
            <img :src="item.imgs" alt="" class="nav-img" />
            <div>{{ item.name }}</div>
            <div class="date">{{ item.count }}</div>
          </div>
        </div>
        <div class="four-line" style="position: relative">
          <div class="title">单位活跃数</div>
          <div
            class="date-picker"
            style="
              position: absolute;
              top: 0;
              right: 16px;
              z-index: 999;
              margin-top: 10px;
            "
          >
            <el-date-picker
              v-model="selectedMonths"
              type="month"
              placeholder="选择月份"
              format="M"
              value-format="M"
              @change="handleChange"
            >
            </el-date-picker>
          </div>
          <div style="display: flex; align-items: center">
            <div class="fire">
              <div class="imgs">
                <img src="../../../assets/images/fire11.png" alt="" />
              </div>
              <div class="count">3218</div>
              <div>当前活跃单位数</div>
            </div>
            <unit-active :reportData="reportData"> </unit-active>
          </div>
        </div>
      </div>
      <!-- 右侧版块 -->
      <div class="right-chart">
        <div class="first-line">
          <div class="table-title">单位质态列表</div>
          <el-table highlight-current-row :data="list" height="360px">
            <el-table-column label="序号" type="index" width="50px" />
            <el-table-column label="单位名称" align="center" prop="orgName">
            </el-table-column>
            <el-table-column label="质态" align="center" prop="policeId">
            </el-table-column>
          </el-table>
          <!-- 分页组件 -->
          <pagination
            v-show="total > 0"
            :total="total"
            :pager-count="5"
            :page.sync="queryRader.pageNo"
            :limit.sync="queryRader.pageSize"
            layout="total, prev, pager, next, jumper"
            @pagination="getData"
          />
        </div>
        <div class="two-line">
          <div class="left">
            <div style="background: #fff">
              <div class="table-title">设备类型扫码量排行(TOP10)</div>
              <el-table
                highlight-current-row
                :data="devscanorderList"
                height="376px"
              >
                <el-table-column label="序号" type="index" width="50px" />
                <el-table-column
                  label="消防设备类型"
                  align="center"
                  prop="inspecttype"
                >
                </el-table-column>
                <el-table-column label="扫码数量" align="center" prop="sort">
                </el-table-column>
              </el-table>
            </div>
            <div style="background: #fff; margin-top: 16px">
              <div class="table-title">隐患类型排行</div>
              <el-table
                highlight-current-row
                :data="dengertypeorderList"
                height="332px"
                style="margin-top: 16px"
              >
                <el-table-column label="序号" type="index" width="50px" />
                <el-table-column
                  label="隐患类型"
                  align="center"
                  prop="dengertype"
                >
                </el-table-column>
                <el-table-column label="数量" align="center" prop="sort">
                </el-table-column>
              </el-table>
            </div>
          </div>
          <div class="right" style="background: #fff">
            <div class="table-title">监督员</div>
            <el-table
              highlight-current-row
              :data="watcherOrgData"
              height="782px"
            >
              <el-table-column label="序号" type="index" width="50px" />
              <el-table-column label="监督单位" align="center" prop="org_name">
              </el-table-column>
              <el-table-column
                label="监督员"
                align="center"
                prop="watcher_name"
              >
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
  <script>
import {
  getDdlist,
  getPoliceId,
  tongjiBroad,
  tongjiDevscanorder,
  tongjiDengertypeorder,
  watcherPage,
  watcherorglist,
} from "@/api/backend/statistics";
import { getActdateTongjiPage } from "@/api/backend/actdateTongji";
import { currentReport } from "@/api/backend/taskInfo";
import barChart from "./component/barChart.vue";
import unitbartChart from "./component/unitbartChart.vue";
import unitActive from "./component/unitActive.vue";
import { getOrgPage } from "@/api/backend/org";
import { DICT_TYPE, getDictDatas } from "@/utils/dict";
export default {
  components: {
    barChart,
    unitbartChart,
    unitActive,
  },
  data() {
    return {
      brigade: [],
      selectedTab: 0,
      selectedMonths: "",
      reportData: {},
      list: [], //单位质态列表
      navData: [
        {
          name: "已初始化单位数",
          code: 1,
          imgs: require("@/assets/images/fire1.png"),
        },
        {
          name: "发现隐患数",
          code: 2,
          imgs: require("@/assets/images/fire2.png"),
        },
        {
          name: "整改隐患数",
          code: 3,
          imgs: require("@/assets/images/fire3.png"),
        },
        {
          name: "隐患整改率",
          code: 4,
          imgs: require("@/assets/images/fire4.png"),
        },
      ],
      scanCode: [
        { name: "巡查扫码总数", code: 1 },
        { name: "日均扫码总数", code: 2 },
        { name: "人均扫码总数", code: 3 },
        { name: "单位扫码总数", code: 4 },
        { name: "隐患整改平均时间(天)", code: 5 },
        { name: "日均扫描设备类型数", code: 6 },
      ],
      threeChart: [
        {
          name: "今日扫码",
          code: 1,
          imgs: require("@/assets/images/fire5.png"),
        },
        {
          name: "今日活跃人数",
          code: 2,
          imgs: require("@/assets/images/fire6.png"),
        },
        {
          name: "上周缺查单位",
          code: 3,
          imgs: require("@/assets/images/fire7.png"),
        },
        {
          name: "设备类型数",
          code: 4,
          imgs: require("@/assets/images/fire8.png"),
        },
        {
          name: "设备类型覆盖率",
          code: 5,
          imgs: require("@/assets/images/fire9.png"),
        },
      ],
      total: 0,
      queryRader: {
        pageSize: 10,
        pageNo: 1,
      },
      deptId: 0,
      tongjiData: null, //找到对应大队下的统计数字数据
      allNumber: null,
      devscanorderList: null, //排行列表
      dengertypeorderList: null, //隐患类型排行榜
      watcherList: null, //监督员质态统计
      watcherOrgData: null, //监督员
      actList: null, //单位活跃数
      actdate: [],
    };
  },
  // 监听 Element UI 中的筛选月份变化
  watch: {
    //选择月份
    selectedMonths: function (newVal) {
      this.fetchData();
    },
  },
  created() {
    this.getList();
    this.fetchData();
    this.getData();
    this.navList();
    this.Devscanorder();
    this.Dengertypeorder();
    this.getWatcher();
    this.getWatcherorg();
    this.getActdateTong();
  },
  methods: {
    //得到所有的数字数据
    navList() {
      tongjiBroad({ pageNo: 1, pageSize: 9999 }).then((response) => {
        if (response.data) {
          this.allNumber = response.data.list;
          this.tongjiData = this.allNumber.filter((item) => {
            return item.deptid == this.deptId;
          });
          console.log(" this.tongjiData", this.tongjiData);
          if (this.tongjiData.length > 0) {
            this.detaulData();
            console.log("111", 111);
          } else {
            console.log("222", 222);
            this.navData.forEach((item) => {
              item.count = 0;
            });
            this.scanCode.forEach((item) => {
              item.count = 0;
            });
            this.threeChart.forEach((item) => {
              item.count = 0;
            });
          }
          this.$forceUpdate();
        }
      });
    },
    // 处理得到的数字数据
    detaulData() {
      const datas = this.tongjiData[0];
      this.navData.forEach((item) => {
        switch (item.code) {
          case 1:
            item.count = datas.initorgtotal; //
            break;
          case 2:
            item.count = datas.peradjust; //
            break;
          case 3:
            item.count = datas.peradjust;
            break;
          case 4:
            item.count = datas.peradjust;
            break;
          default:
            break;
        }
      });
      this.scanCode.forEach((item) => {
        switch (item.code) {
          case 1:
            item.count = datas.patroltotal; //修改客户信息
            break;
          case 2:
            item.count = datas.avgdate; //红号变更
            break;
          case 3:
            item.count = datas.avgperson;
            break;
          case 4:
            item.count = datas.scantotal;
            break;
          case 5:
            item.count = datas.dengerfixavg;
            break;
          case 6:
            item.count = datas.avgdatedevtype;
            break;
          default:
            break;
        }
      });
      this.threeChart.forEach((item) => {
        switch (item.code) {
          case 1:
            item.count = datas.todayscantotal; //修改客户信息
            break;
          case 2:
            item.count = datas.todayhottotal; //红号变更
            break;
          case 3:
            item.count = datas.lastweektotal;
            break;
          case 4:
            item.count = datas.devtypetotal;
            break;
          case 5:
            item.count = datas.devcover;
            break;
          default:
            break;
        }
      });

      console.log("this.threeChart", this.threeChart);
    },
    getList() {
      // 执行查询
      getDdlist().then((response) => {
        this.brigade = response.data;
        this.brigade.unshift({ deptName: "所有大队", id: "0" });
      });
    },
    //切换tab
    clickTab(e) {
      this.deptId = e.name;
      this.navList();
      this.Devscanorder();
      this.Dengertypeorder();
      this.getWatcher();
      this.getWatcherorg();
      this.getActdateTong();
      this.$forceUpdate();
    },
    async fetchData() {
      const time = this.selectedMonths;
      const month = this.selectedMonths
        ? this.selectedMonths
        : new Date().getMonth() + 1; // 如果已选择月份使用已选择的月份，否则默认为当前月份
      const res = await currentReport({ month: month });
      this.reportData = res.data;
    },
    handleChange(val) {
      //选择月份
      this.selectedMonths = val;
      this.selectedMonth = val;
    },
    //质态表格
    getData() {
      getOrgPage(this.queryRader).then((response) => {
        this.list = response.data.list;
        this.total = response.data.total;
      });
    },
    //top扫码排行
    Devscanorder() {
      tongjiDevscanorder({
        pageNo: 1,
        pageSize: 999,
        deptId: this.deptId,
      }).then((response) => {
        this.devscanorderList = response.data.list;
        const type = this.getDictDatas(DICT_TYPE.DICT_FIRE_DECIVE_TYPE);
        type.map((item) => {
          this.devscanorderList.forEach((key) => {
            if (item.value == key.inspecttype) {
              key.inspecttype = item.label;
            }
          });
        });
      });
    },
    //隐患排行
    Dengertypeorder() {
      tongjiDengertypeorder({
        pageNo: 1,
        pageSize: 999,
        deptId: this.deptId,
      }).then((response) => {
        this.dengertypeorderList = response.data.list;
        const type = this.getDictDatas(DICT_TYPE.DANGER_TYPE);
        type.map((item) => {
          this.dengertypeorderList.forEach((key) => {
            if (item.value == key.dengertype) {
              key.dengertype = item.label;
            }
          });
        });
      });
    },
    //监督员质态统计
    getWatcher() {
      watcherPage({ pageNo: 1, pageSize: 20, deptId: this.deptId }).then(
        (response) => {
          this.watcherList = response.data.list;
        }
      );
    },
    //监督员
    getWatcherorgs() {
      watcherorglist({ pageNo: 1, pageSize: 20, deptId: this.deptId }).then(
        (response) => {
          this.watcherOrgData = response.data.records;
        }
      );
    },
    //单位活跃数
    getActdateTong() {
      getActdateTongjiPage({
        pageNo: 1,
        pageSize: 100,
        actdate: this.actdate,
        deptId: this.deptId,
      }).then((response) => {
        this.actList = response.data.list;
      });
    },
  },
};
</script>
  <style lang="scss" scoped>
.tabs {
  margin-bottom: 12px;
}
::v-deep .el-tabs--border-card > .el-tabs__content {
  padding: 0 !important;
}
.nav {
  width: 100%;
  display: flex;
  justify-content: space-between;
  overflow-x: auto;
  cursor: pointer;
}
.nav-img {
  width: 50px;
  height: 50px;
  margin: 0 32px 0 40px;
}
.text {
  font-size: 18px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  & > div:first-child {
    color: #657398;
    margin-bottom: 20px;
  }
  & > div:last-child {
    font-weight: 600;
  }
}

.nav-data {
  display: flex;
  margin-top: 16px;
  justify-content: space-around;
}
.nav-data-item {
  display: flex;
  align-items: center;
  background: #fff;
  width: 25%;
  height: 132px;
  margin-right: 16px;
}
.nav-data-item:last-child {
  margin-right: 0;
}
.chart {
  display: flex;
  .left-chart {
    width: 58%;
    .first-line {
      display: flex;
      justify-content: space-between;
      margin-top: 16px;
    }
    .two-line {
      margin-top: 16px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      & > div {
        width: 144px;
        margin-right: 16px;
        height: 200px;
        background: #fff;
        position: relative;
        .total {
          position: absolute;
          left: 50%;
          text-align: center;
          line-height: 90px;
          font-size: 30px;
          font-weight: 600;
          transform: translateX(-50%);
          top: 30px;
          width: 106px;
          height: 106px;
          opacity: 1;
          border-radius: 50%;
          box-sizing: border-box;
        }
      }
      & > div:nth-child(even) {
        color: #01bceb;
        .total {
          border: 9px solid #01bceb;
        }
      }
      & > div:nth-child(odd) {
        color: #0147eb;
        .total {
          border: 9px solid #0147eb;
        }
      }
      & > div:last-child {
        margin-right: 0;
      }
      .item-name {
        color: #657398;
        display: flex;
        align-items: center;
        justify-content: center;
        line-height: 330px;
      }
    }
    .three-line {
      display: flex;
      & > div {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        .nav-img,
        div {
          margin: 0;
          margin-left: 28px;
        }
      }
      .date {
        font-size: 30px;
        font-weight: 600;
        color: #0f2b4c;
      }
    }
    .four-line {
      margin-top: 16px;
      background: #fff;
      .title {
        height: 40px;
        font-size: 18px;
        color: #0f2b4c;
        padding: 10px 0 0 10px;
      }
      ::v-deep .el-date-editor.el-input__inner {
        width: 121px !important;
      }

      ::v-deep .el-input__prefix {
        color: #0147eb;
      }

      ::v-deep .el-input__inner {
        border: 1px solid #0147eb;
        color: #0147eb;
      }
      .fire {
        width: 144px;
        height: 212px;
        font-size: 15px;
        color: #657398;
        background: #fff url("~@/assets/images/fire10.png") no-repeat center;
        margin-left: 16px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
        .imgs {
          width: 64px;
          height: 64px;
          background-color: #fff;
          display: flex;
          align-items: center;
          justify-content: center;
          & > img {
            width: 48px;
            height: 48px;
          }
        }
        .count {
          font-size: 30px;
          color: #0f2b4c;
          font-weight: 600;
        }
      }
    }
  }

  .right-chart {
    margin-left: 1%;
    width: 41%;
    .first-line {
      background: #fff;
      height: 464px;
      margin-top: 16px;
    }
    .two-line {
      display: flex;
      justify-content: space-between;
      margin-top: 16px;
      .left {
        flex-basis: 48%;
      }
      .right {
        height: 100%;
        flex-basis: 48%;
        margin-left: 16px;
      }
    }
  }
}
.table-title {
  color: #0f2b4c;
  font-size: 16px;
  padding: 10px;
}
</style>