改首页及统计明细表

zhengpz

2021-08-13 e07b830d7c4b3e401f3ffaaa65986618a2a4b77d

改首页及统计明细表

 public/img/bajgxt/111.png

 public/img/bajgxt/u215.png

 public/img/bajgxt/u231.png

 public/img/bajgxt/u232.png

 public/img/bajgxt/u233.png

 src/views/home/index.scss

@@ -96,6 +96,7 @@
      width: 100%;
      background-size: 100% 100%;
      margin-top: 25px;
      position: relative;
      #left2Echart {
        @extend .echartClass;
      }
@@ -330,11 +331,12 @@
    }
  }
  .right-content {
    height: calc(100% - 41px);
    width: 100%;
    height: calc(100% - 71px);
    width: calc(100% - 30px);
    padding: 15px;
  }
  .card-list {
    margin: 25px 60px 20px 90px;
    margin: 15px 60px 10px 90px;
    display: flex;
    height: 55px;
    line-height: 55px;
@@ -419,3 +421,116 @@
    height: 100%;
  }
}
.left2-btn{
  height: 21px;
  width: 69px;
  background-color: #2a3e9d;
  font-size: 13px !important;
  font-weight: 700;
  color: #FFFF80 !important;
  line-height: 21px !important;
  border-radius: 10px;
  text-align: center;
  position: absolute;
  cursor: pointer;
}
.left2-btn.btn1{
  right: 100px;
  margin-top: 22px;
}
.left2-btn.btn2{
  right: 21px;
  margin-top: 22px;
}
.left2-btn.date{
  margin-left: 74px;
}
.left2-btn.mounce{
  margin-left: 208px;
}
.left2-btn.all{
  right: 100px;
}

.rightData{
    position: relative;
    color: #fff;
    background: #010945;
    border-radius: 11px;
    height: 52px;
    display: inline-flex;
    width: 174px;
    cursor: pointer;
    font-weight: 700;
    img {
      margin: 12px;
      height: 28px;
      width: 30px;
    }
    .text {
      width: 100px;
      text-align: center;
      // margin: 3px;
      line-height: 25px;
      span:nth-child(1) {
        width: 100%;
        display: block;
        font-size: 14px;
      }
      span:nth-child(2) {
        width: 100%;
        display: block;
        color: #00CCFF;
        font-size: 15px;
      }
    }
  }
  .rightData1{
    margin-left: 42px;
  }
  .rightData2{
    margin-left: 58px;
  }
  .rightData3{
    margin-top: 8px;
    margin-left: 42px;
  }
  .rightData4{
    margin-top: 8px;
    margin-left: 58px;
  }
  .rightData5{
    margin-top: 8px;
    margin-left: 42px;
  }

  .textBox {
    width: 70%;
    height: 58px;
    // margin: 0 auto;
    overflow: hidden;
    position: absolute;
    text-align: left;
    color: #09b560;
    left: 20px;
    top: 20px;
    font-size: 15px;
    .text {
      width: 100%;
      position: absolute;
      bottom: 0;
    }
    .slide-enter-active, .slide-leave-active {
      transition: all 0.5s linear;
    }
    .slide-enter{
      transform: translateY(20px) scale(1);
      opacity: 1;
    }
    .slide-leave-to {
      transform: translateY(-20px) scale(0.8);
      opacity: 0;
    }
  }



 src/views/home/index.vue

@@ -18,12 +18,24 @@
          <div class="title-pane2">
            <img src="../../../public/img/bajgxt/icon1.png" />
            <span>保安员持证情况</span>
            <span class="left2-btn btn1" @click="getHolderNum(0)"
              >辖区统计</span
            >
            <span class="left2-btn btn2" @click="getHolderNum(1)"
              >男女结构</span
            >
          </div>
          <div id="left2Echart" v-loading="left2loading"></div>
        </div>
      </div>
      <div class="middle" v-loading="middleloading">
        <div class="mapimg">
          <div class="textBox">
            <transition name="slide">
              <p class="text" :key="text.id">{{ text.val }}</p>
            </transition>
          </div>

          <!-- <div></div> -->
          <div class="mapBtn" @click="setMapData(2)">
            <img src="../../../public/img/bajgxt/car.png" alt />
@@ -56,8 +68,18 @@
          <div class="rightbottom"></div>
          <el-table :data="tableData" stripe ref="indexTable">
            <template v-if="curTableType === 2">
              <el-table-column :key="curTableType" type="index" label="序号" width="50"></el-table-column>
              <el-table-column :key="curTableType" prop="carNum" label="押运车辆车牌号" width="180"></el-table-column>
              <el-table-column
                :key="curTableType"
                type="index"
                label="序号"
                width="50"
              ></el-table-column>
              <el-table-column
                :key="curTableType"
                prop="carNum"
                label="押运车辆车牌号"
                width="180"
              ></el-table-column>
              <el-table-column
                :key="curTableType"
                show-overflow-tooltip
@@ -70,11 +92,26 @@
                prop="company"
                label="所属公司"
              ></el-table-column>
              <el-table-column :key="curTableType" show-overflow-tooltip prop="linkman" label="联系人"></el-table-column>
              <el-table-column :key="curTableType" show-overflow-tooltip prop="tel" label="联系电话"></el-table-column>
              <el-table-column
                :key="curTableType"
                show-overflow-tooltip
                prop="linkman"
                label="联系人"
              ></el-table-column>
              <el-table-column
                :key="curTableType"
                show-overflow-tooltip
                prop="tel"
                label="联系电话"
              ></el-table-column>
            </template>
            <template v-if="curTableType === 1">
              <el-table-column :key="curTableType" type="index" label="序号" width="50"></el-table-column>
              <el-table-column
                :key="curTableType"
                type="index"
                label="序号"
                width="50"
              ></el-table-column>
              <el-table-column
                :key="curTableType"
                show-overflow-tooltip
@@ -94,12 +131,22 @@
                prop="company"
                label="所属公司"
              ></el-table-column>
              <el-table-column :key="curTableType" show-overflow-tooltip prop="tel" label="联系电话"></el-table-column>
              <el-table-column
                :key="curTableType"
                show-overflow-tooltip
                prop="tel"
                label="联系电话"
              ></el-table-column>
              <!-- <el-table-column :key="curTableType" prop="bz" label="备注">
              </el-table-column>-->
            </template>
            <template v-if="curTableType === 3">
              <el-table-column :key="curTableType" type="index" label="序号" width="50"></el-table-column>
              <el-table-column
                :key="curTableType"
                type="index"
                label="序号"
                width="50"
              ></el-table-column>
              <el-table-column
                :key="curTableType"
                show-overflow-tooltip
@@ -119,8 +166,17 @@
                prop="company"
                label="所属公司"
              ></el-table-column>
              <el-table-column :key="curTableType" show-overflow-tooltip prop="linkman" label="负责人"></el-table-column>
              <el-table-column :key="curTableType" prop="tel" label="联系电话"></el-table-column>
              <el-table-column
                :key="curTableType"
                show-overflow-tooltip
                prop="linkman"
                label="负责人"
              ></el-table-column>
              <el-table-column
                :key="curTableType"
                prop="tel"
                label="联系电话"
              ></el-table-column>
            </template>
          </el-table>
        </div>
@@ -140,7 +196,16 @@
            </el-select>
          </div>
          <div class="right-content" v-loading="right1loading">
            <div class="card-list">
            <span class="left2-btn date" @click="getPoorPerformance(0)"
              >当日</span
            >
            <span class="left2-btn mounce" @click="getPoorPerformance(1)"
              >当月</span
            >
            <span class="left2-btn all" @click="getPoorPerformance(2)"
              >全部</span
            >
            <div class="card-list" style="margin-top: 38px">
              <img src="../../../public/img/bajgxt/u4.png" />
              <img src="../../../public/img/bajgxt/u256.png" />
              <img src="../../../public/img/bajgxt/u1.png" />
@@ -165,7 +230,11 @@
          <div class="title-pane1">
            <img src="../../../public/img/bajgxt/icon2.png" />
            <span>保安公司预警统计</span>
            <el-select v-model="value2" placeholder="请选择" @change="peoWarning">
            <el-select
              v-model="value2"
              placeholder="请选择"
              @change="peoWarning"
            >
              <el-option
                v-for="item in options2"
                :key="item.id"
@@ -175,7 +244,42 @@
            </el-select>
          </div>
          <div class="right-content" v-loading="right2loading">
            <div class="card-list">
            <div class="rightData rightData1">
              <img src="../../../public/img/bajgxt/u215.png" alt />
              <div class="text">
                <span>信息更新频率</span>
                <span>123次</span>
              </div>
            </div>
            <div class="rightData rightData2">
              <img src="../../../public/img/bajgxt/u231.png" alt />
              <div class="text">
                <span>数据未更新</span>
                <span>45条</span>
              </div>
            </div>
            <div class="rightData rightData3">
              <img src="../../../public/img/bajgxt/u232.png" alt />
              <div class="text">
                <span>资质不全</span>
                <span>23个</span>
              </div>
            </div>
            <div class="rightData rightData4">
              <img src="../../../public/img/bajgxt/u233.png" alt />
              <div class="text">
                <span>没开展业务</span>
                <span>12个</span>
              </div>
            </div>
            <div class="rightData rightData5">
              <img src="../../../public/img/bajgxt/111.png" alt />
              <div class="text">
                <span>被公安查处</span>
                <span>6个</span>
              </div>
            </div>
            <!-- <div class="card-list">
              <img src="../../../public/img/bajgxt/u4.png" />
              <img src="../../../public/img/bajgxt/u235.png" />
              <img src="../../../public/img/bajgxt/u1.png" />
@@ -188,7 +292,7 @@
              <img src="../../../public/img/bajgxt/u1.png" />
              <span>{{ rightData.noholder }}</span>
              <span>未持证</span>
            </div>
            </div> -->
          </div>
          <!-- <div class="card-text"> -->
          <!-- <span>未缴纳社保情况</span><span>902,432</span><span>起</span
@@ -235,7 +339,7 @@
  noSocialSecurity,
  selectFj,
  selectBx,
  selectExtype
  selectExtype,
} from "../../api/index/index";

import car from "@/assets/img/car.png";
@@ -260,7 +364,7 @@
        poorPerformance: 0,
        qualification: 0,
        socialSecurity: 0,
        noholder: 0
        noholder: 0,
      },
      carNum: 0,
      peoNum: 0,
@@ -270,20 +374,41 @@
        left1Echart: null,
        left2Echart: null,
        mapEchart: null,
        right3Echart: null
        right3Echart: null,
      },
      left1loading: true,
      left2loading: true,
      middleloading: true,
      right1loading: true,
      right2loading: true,
      right3loading: true
      right3loading: true,
      textArr: [],
      number: 0,
    };
  },
  computed: {
    text() {
      return {
        id: this.number,
        val: this.textArr[this.number],
      };
    },
  },
  methods: {
    startMove() {
      // eslint-disable-next-line
      let timer = setTimeout(() => {
        if (this.number === 2) {
          this.number = 0;
        } else {
          this.number += 1;
        }
        this.startMove();
      }, 2000); // 滚动不需要停顿则将2000改成动画持续时间
    },
    // 左侧两个表的接口返回数据
    initEchart() {
      securityTotal().then(res => {
      securityTotal().then((res) => {
        if (res.data.code == 200) {
          let securityData = res.data.data;
          if (!this.echarts.left1Echart) {
@@ -297,21 +422,6 @@
        }
        this.left1loading = false;
      });

      holderNum().then(res => {
        if (res.data.code === 200) {
          let data = res.data.data;
          if (!this.echarts.left2Echart) {
            this.echarts.left2Echart = echarts.init(
              document.getElementById("left2Echart")
            );
          }
          this.echarts.left2Echart.setOption(optionJs.left2Data(data));
        } else {
          this.$message.error(res.msg);
        }
        this.left2loading = false;
      });
      // securityPer().then(res => {
      //   if (res.data.code === 200) {
      //     let data = res.data.data;
@@ -322,19 +432,43 @@

      //   let right2Echart = echarts.init(document.getElementById("right2Echart"));
      //   right2Echart.setOption(optionJs.right2Data(data));
      selectFj().then(res => {
      selectFj().then((res) => {
        if (res.data.code === 200) {
          if (!this.echarts.right3Echart) {
            this.echarts.right3Echart = echarts.init(
              document.getElementById("right3Echart")
            );
          }
          this.echarts.right3Echart.setOption(optionJs.right3Data(res.data.data));
          this.echarts.right3Echart.setOption(
            optionJs.right3Data(res.data.data)
          );
        } else {
          this.$message.error(res.msg);
        }
        this.right3loading = false;
      });
    },

    getHolderNum(type) {
      if (type === 0) {
        holderNum().then((res) => {
          if (res.data.code === 200) {
            let data = res.data.data;
            if (!this.echarts.left2Echart) {
              this.echarts.left2Echart = echarts.init(
                document.getElementById("left2Echart")
              );
            }
            this.echarts.left2Echart.setOption(optionJs.left2Data(data));
          } else {
            this.$message.error(res.msg);
          }
          this.left2loading = false;
        });
      } else {
        let data = [];
        this.echarts.left2Echart.setOption(optionJs.left3Data(data));
      }
    },
    initMapEchart(data, type) {
      if (!this.echarts.mapEchart) {
@@ -348,6 +482,51 @@
      this.tableData = this.mapData[type]["table"];
      this.initMapEchart(this.mapData[type], type);
      this.middleloading = false;
      this.textArr = [];
      if (type === 2) {
        this.tableData.forEach((item) => {
          let obj =
            "押运车辆车牌号" +
            item.carNum +
            ",当前位置" +
            item.location +
            ",所属公司" +
            item.company +
            ",联系人" +
            item.linkman +
            ",联系电话" +
            item.tel;
          this.textArr.push(obj);
        });
      } else if (type === 1) {
        this.tableData.forEach((item) => {
          let obj =
            "押运人员" +
            item.name +
            ",当前位置" +
            item.location +
            ",所属公司" +
            item.linkman +
            ",联系电话" +
            item.tel;
          this.textArr.push(obj);
        });
      } else if (type === 3) {
        this.tableData.forEach((item) => {
          let obj =
            "枪支编号" +
            item.number +
            ",当前位置" +
            item.location +
            ",所属公司" +
            item.company +
            ",负责人" +
            item.linkman +
            ",联系电话" +
            item.tel;
          this.textArr.push(obj);
        });
      }
      // let curLayer = null;
      // let imgUrl = null;
      // this.carVectorLayer.getSource().clear();
@@ -395,21 +574,21 @@
      let middleData = {
        1: {
          table: [],
          geoData: []
          geoData: [],
        },
        2: {
          table: [],
          geoData: []
          geoData: [],
        },
        3: {
          table: [],
          geoData: []
        }
          geoData: [],
        },
      };
      getLiveLocationVoList({ type: type }).then(res => {
      getLiveLocationVoList({ type: type }).then((res) => {
        if (res.data.code === 200) {
          let allData = res.data.data;
          allData.forEach(m => {
          allData.forEach((m) => {
            let obj = {
              location: m.location,
              name: m.name,
@@ -417,7 +596,7 @@
              linkman: m.linkman,
              company: m.company,
              tel: m.tel,
              carNum: m.carNum
              carNum: m.carNum,
            };

            // let geoObj = {
@@ -426,7 +605,7 @@
            // };
            middleData[m.type]["geoData"].push([
              Number(m.longitude),
              Number(m.latitude)
              Number(m.latitude),
            ]);
            middleData[m.type]["table"].push(obj);
          });
@@ -452,38 +631,36 @@
            zIndex: 4,
            title: "影像",
            source: new XYZ({
              url:
                "http://t3.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0" // 行政区划
            })
              url: "http://t3.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0", // 行政区划
            }),
          }),
          new Tile({
            zIndex: 5,
            title: "道路+中文注记",
            source: new XYZ({
              url:
                "http://t3.tianditu.com/DataServer?T=cta_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0" // 注记
            })
          })
              url: "http://t3.tianditu.com/DataServer?T=cta_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0", // 注记
            }),
          }),
        ],
        view: new View({
          projection: "EPSG:4326",
          center: [115.892151, 28.676493],
          zoom: 10
        })
          zoom: 10,
        }),
      });
      this.carVectorLayer = new VectorLayer({
        zIndex: 99,
        source: new VectorSource()
        source: new VectorSource(),
      });

      this.peoVectorLayer = new VectorLayer({
        zIndex: 99,
        source: new VectorSource()
        source: new VectorSource(),
      });

      this.gunVectorLayer = new VectorLayer({
        zIndex: 99,
        source: new VectorSource()
        source: new VectorSource(),
      });
      this.map.addLayer(this.carVectorLayer);
      this.map.addLayer(this.peoVectorLayer);
@@ -493,7 +670,7 @@
    },
    // 获取辖区列表
    getOfficeData() {
      lazyTreeJu().then(res => {
      lazyTreeJu().then((res) => {
        if (res.data.code === 200) {
          this.options1 = res.data.data;
          this.options2 = res.data.data;
@@ -511,7 +688,7 @@
    },
    // 未持证
    getNoholderNum() {
      noholderNum({ jurisdiction: this.value2 }).then(res => {
      noholderNum({ jurisdiction: this.value2 }).then((res) => {
        if (res.data.code === 200) {
          this.rightData.noholder = res.data.data[0].Count;
        } else {
@@ -522,7 +699,7 @@
    },
    // 未缴纳社保
    getNoSocialSecurity() {
      noSocialSecurity({ jurisdiction: this.value2 }).then(res => {
      noSocialSecurity({ jurisdiction: this.value2 }).then((res) => {
        if (res.data.code === 200) {
          this.rightData.socialSecurity = res.data.data[0].Count;
        } else {
@@ -532,19 +709,19 @@
      });
    },
    // 现实表现差
    getPoorPerformance() {
      selectBx({ jurisdiction: this.value1 }).then(res => {
        if (res.data.code === 200) {
          this.rightData.poorPerformance = res.data.data[0].count;
        } else {
          this.$message.error(res.msg);
        }
        this.right1loading = false;
      });
    },
    // getPoorPerformance() {
    //   selectBx({ jurisdiction: this.value1 }).then((res) => {
    //     if (res.data.code === 200) {
    //       this.rightData.poorPerformance = res.data.data[0].count;
    //     } else {
    //       this.$message.error(res.msg);
    //     }
    //     this.right1loading = false;
    //   });
    // },
    // 资格审查异常
    getQualification() {
      selectExtype({ jurisdiction: this.value1 }).then(res => {
      selectExtype({ jurisdiction: this.value1 }).then((res) => {
        if (res.data.code === 200) {
          this.rightData.qualification = res.data.data[0].count;
        } else {
@@ -568,16 +745,31 @@
    goSystemHome() {
      // this.$router.push({ path: "/register/index" });
      this.$router.push({ path: "/securityGuardManagement/register" });
    }
    },
    getPoorPerformance(type) {
      if (type === 0) {
        this.rightData.poorPerformance = 2;
        this.rightData.qualification = 3;
      } else if (type === 1) {
        this.rightData.poorPerformance = 11;
        this.rightData.qualification = 14;
      } else if (type === 2) {
        this.rightData.poorPerformance = 32;
        this.rightData.qualification = 45;
      }
    },
  },
  mounted() {
    this.startMove();
    this.initEchart();
    this.getHolderNum(0);
    this.getPoorPerformance(0);
    // this.getTableData("car");
    // this.initMap();
    this.getTableData(0);
    // this.initMapEchart();
    this.getOfficeData();
  }
  },
};
</script>


 src/views/home/indexEchart.js

@@ -6,6 +6,7 @@
  let data2 = [];
  let data3 = [];
  let data4 = [];
  // let legend = ["自招保安单位", "保安培训公司", "保安服务公司", "武装守押公司"];
  allData.forEach(item => {
    nameArr.push(item.name);
    data1.push(item.server.confess);
@@ -13,6 +14,30 @@
    data3.push(item.server.security);
    data4.push(item.server.armed);
  });
  function add(arr) {
    let total = 0;
    arr.forEach(i => {
      total += Number(i)
    })
    return total
  }
  // let legend1 = ["自招保安单位" + add(data1), "保安培训公司", "保安服务公司", "武装守押公司"];
  // let legendData = [{
  //   name: "自招保安单位",
  //   value: add(data1)
  // },
  // {
  //   name: "保安培训公司",
  //   value: add(data2)
  // },
  // {
  //   name: "保安服务公司",
  //   value: add(data3)
  // },
  // {
  //   name: "武装守押公司",
  //   value: add(data4)
  // }];
  let option = {
    tooltip: {
      trigger: "axis",
@@ -51,7 +76,10 @@
      itemWidth: 20,
      textStyle: {
        color: "#fff"
      }
      },
      // formatter: function (legend1) {
      //   return legend1;
      // }
    },
    grid: {
      top: '5%',
@@ -219,6 +247,83 @@
  return option;
}

function left3Data(allData) {
  let option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      data: ['男', '女'],
      bottom: "1%",
      itemWidth: 20,
      textStyle: {
        color: "#fff"
      }
    },
    color: [
      "#91cc75",
      "#fac858",
      "#73c0de",
    ],
    grid: {
      top: '5%',
      left: "5%",
      right: "6%",
      bottom: "15%",
      containLabel: true
    },
    xAxis: [
      {
        type: 'value',
        splitLine: {
          show: false
        },
        axisLabel: {
          color: "#fff"
        },
      }
    ],
    yAxis: [

      {
        type: 'category',
        data: ['红谷滩分局', '青山湖分局', '南昌市公安局东湖分局', '南昌市公安局西湖分局', '南昌市公安局青云谱分局', '南昌市公安局湾里分局', '南昌市公安局高新开发区分局'],

        splitLine: {
          show: false
        },
        axisLabel: {
          color: "#fff"
        },
      }
    ],
    series: [
      {
        name: '男',
        type: 'bar',
        stack: '性别',
        emphasis: {
          focus: 'series'
        },
        data: [120, 132, 101, 134, 90, 230, 210]
      },
      {
        name: '女',
        type: 'bar',
        stack: '性别',
        emphasis: {
          focus: 'series'
        },
        data: [220, 182, 191, 234, 290, 330, 310]
      },
    ]
  };
  return option
}

function right1Data(allData) {
  // let yueData = [
  //   "一月",
@@ -373,7 +478,6 @@

function right3Data(allData) {
  let data = [];
  let sumValue = 0;
  let legendData = [];
  let datas = allData.sort((a, b) => {
    return b.Count - a.Count
@@ -384,14 +488,14 @@
      value: item.Count
    }
    legendData.push(item.jurname)
    sumValue += Number(item.Count)
    // sumValue += Number(item.Count)
    data.push(obj)
  })
  // let arrName = getArrayValue(data, "name");
  // let arrValue = getArrayValue(data, "value");
  // let sumValue = 1000;
  // let objData = array2obj(data, "name");
  let optionData = getData(data);
  // let optionData = getData(data);

  // function getArrayValue(array, key) {
  //   var key = key || "value";
@@ -412,59 +516,137 @@
  //   return resObj;
  // }

  function getData(data) {
    var res = {
      series: [],
      yAxis: []
    };
    for (let i = 0; i < data.length; i++) {
      res.series.push({
        name: "分局预警占比",
        type: "pie",
        clockwise: true,
        z: 2,
        emphasis: {
          scale: false
        },
        // hoverAnimation: false,
        radius: [83 - i * 12 + '%', 78 - i * 12 + '%'],
        center: ["30%", "50%"],
        labelLine: {
          show: false
        },
        label: {
          show: false
        },
        data: [
          {
            value: data[i].value,
            name: data[i].name
          },
          {
            value: sumValue - data[i].value,
            name: "",
            itemStyle: {
              color: "rgba(0,0,0,0)",
              borderWidth: 0
            },
            tooltip: {
              show: false
            },
            label: {
              show: false
            },
            emphasis: {
              scale: false
            }
            // hoverAnimation: false
          }
        ]
      });
      res.yAxis.push(data[i].name);
    }
    return res;
  }
  // function getData(data) {
  //   var res = {
  //     series: [],
  //     yAxis: []
  //   };
  //   for (let i = 0; i < data.length; i++) {
  //     res.series.push({
  //       name: "分局预警占比",
  //       type: "pie",
  //       clockwise: true,
  //       z: 2,
  //       emphasis: {
  //         scale: false
  //       },
  //       // hoverAnimation: false,
  //       radius: [83 - i * 12 + '%', 78 - i * 12 + '%'],
  //       center: ["30%", "50%"],
  //       labelLine: {
  //         show: false
  //       },
  //       label: {
  //         show: false
  //       },
  //       data: [
  //         {
  //           value: data[i].value,
  //           name: data[i].name
  //         },
  //         {
  //           value: sumValue - data[i].value,
  //           name: "",
  //           itemStyle: {
  //             color: "rgba(0,0,0,0)",
  //             borderWidth: 0
  //           },
  //           tooltip: {
  //             show: false
  //           },
  //           label: {
  //             show: false
  //           },
  //           emphasis: {
  //             scale: false
  //           }
  //           // hoverAnimation: false
  //         }
  //       ]
  //     });
  //     res.yAxis.push(data[i].name);
  //   }
  //   return res;
  // }

  // let option = {
  //   tooltip: {
  //     show: true,
  //     trigger: "item",
  //     formatter: "{a}<br>{b}:{c}({d}%)",
  //     backgroundColor: "#031952", //设置背景图片 rgba格式
  //     color: "#fff",
  //     borderWidth: "0", //边框宽度设置1
  //     // borderColor: "gray", //设置边框颜色
  //     textStyle: {
  //       color: "#fff" //设置文字颜色
  //     },
  //   },
  //   color: [
  //     "#91cc75",
  //     "#fac858",
  //     "#73c0de",
  //     "#3ba272",
  //     "#fc8452",
  //     "#9a60b4",
  //     "#3fb1e3",
  //     "#6be6c1",
  //     '#626c91',
  //     '#a0a7e6',
  //     '#c4ebad',
  //     '#96dee8'
  //   ],

  //   legend: {
  //     right: "2%",
  //     top: "3%",
  //     //   icon: "circle",
  //     itemHeight: 10,
  //     show: true,
  //     data: legendData,
  //     selectedMode: false,
  //     textStyle: {
  //       color: "#fff"
  //     },
  //     orient: "vertical"
  //   },
  //   grid: {
  //     top: "5%",
  //     bottom: "50%",
  //     left: "30%",
  //     containLabel: false
  //   },
  //   yAxis: [
  //     {
  //       type: "category",
  //       inverse: true,
  //       z: 3,
  //       axisLine: {
  //         show: false
  //       },
  //       axisTick: {
  //         show: false
  //       },
  //       axisLabel: {
  //         interval: 0,
  //         inside: false,
  //         color: "#fff",
  //         fontSize: 8,
  //         // textStyle: {

  //         // },
  //         show: true
  //       },
  //       data: optionData.yAxis
  //     }
  //   ],
  //   xAxis: [
  //     {
  //       show: false
  //     }
  //   ],
  //   series: optionData.series
  // };
  let option = {
    tooltip: {
      show: true,
@@ -477,6 +659,18 @@
      textStyle: {
        color: "#fff" //设置文字颜色
      },
    },
    legend: {
      right: "2%",
      top: "10%",
      itemHeight: 10,
      show: true,
      selectedMode: false,
      textStyle: {
        color: "#fff"
      },
      data: legendData,
      orient: "vertical"
    },
    color: [
      "#91cc75",
@@ -492,56 +686,47 @@
      '#c4ebad',
      '#96dee8'
    ],

    legend: {
      right: "2%",
      top: "3%",
      //   icon: "circle",
      itemHeight: 10,
      show: true,
      data: legendData,
      selectedMode: false,
      textStyle: {
        color: "#fff"
    series: [
      {
        name: '分局预警占比',
        type: 'pie',
        radius: '70%',
        center: ['30%', '50%'],
        roseType: 'radius',
        itemStyle: {
          borderRadius: 0
        },
        label: {
          show: false
        },
        emphasis: {
          label: {
            show: false
          }
        },
        data: data
      },
      orient: "vertical"
    },
    grid: {
      top: "5%",
      bottom: "50%",
      left: "30%",
      containLabel: false
    },
    yAxis: [
      {
        type: "category",
        inverse: true,
        z: 3,
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          interval: 0,
          inside: false,
          color: "#fff",
          fontSize: 8,
          // textStyle: {

          // },
          show: true
        },
        data: optionData.yAxis
      }
    ],
    xAxis: [
      {
        show: false
      }
    ],
    series: optionData.series
      // {
      //     name: '面积模式',
      //     type: 'pie',
      //     radius: [20, 140],
      //     center: ['75%', '50%'],
      //     roseType: 'area',
      //     itemStyle: {
      //         borderRadius: 5
      //     },
      //     data: [
      //         {value: 30, name: 'rose 1'},
      //         {value: 28, name: 'rose 2'},
      //         {value: 26, name: 'rose 3'},
      //         {value: 24, name: 'rose 4'},
      //         {value: 22, name: 'rose 5'},
      //         {value: 20, name: 'rose 6'},
      //         {value: 18, name: 'rose 7'},
      //         {value: 16, name: 'rose 8'}
      //     ]
      // }
    ]
  };
  return option;
}
@@ -623,8 +808,8 @@
      // silent: true,
      map: 'ncMap',
      show: true,
      zoom: 1.14,
      top: '10%',
      zoom: 1.04,
      top: '8%',
      label: {
        show: false,
        color: '#fff',
@@ -726,6 +911,7 @@
export default {
  left1Data,
  left2Data,
  left3Data,
  right1Data,
  right2Data,
  right3Data,

 src/views/statisticalQueryManagement/businessStatistics.vue

@@ -7,6 +7,7 @@
      :permission="permissionList"
      :before-open="beforeOpen"
      @date-change="dateChange"
      @row-click="handleRowClick"
    >
    </avue-crud>
  </basic-container>
@@ -141,6 +142,9 @@
    },
  },
  methods: {
    handleRowClick(row, event, column) {
      this.$router.push({ path: "/statisticalQueryManagement/businessStatisticsDetail" });
    },
    dateChange() {},
    // downExcel() {
    //   let et = XLSX.utils.table_to_book(document.getElementById("table"));

 src/views/statisticalQueryManagement/businessStatisticsDetail.vue

@@ -12,8 +12,8 @@
  </basic-container>
</template>
<script>
import FileSaver from "file-saver";
import XLSX from "xlsx";
// import FileSaver from "file-saver";
// import XLSX from "xlsx";
import { mapGetters } from "vuex";
export default {
  name: "业务情况统计",
@@ -25,23 +25,32 @@
        {
          company: "江西省永安保安服务有限公司",
          subOffice: "南昌市公安局",
          timeStart:'2020-07-14',
          timeEnd:'2021-06-30',
          customerName: "南昌市幼儿园",
          num: "7",
          status: "正在服务",
          // status: "正在服务",
          bz:'',
        },
        {
          company: "南昌市赣水保安服务有限公司",
          subOffice: "东湖分局",
          timeStart:'2020-01-23',
          timeEnd:'2020-12-31',
          customerName: "南昌市第一人民医院",
          num: "32",
          status: "已完成",
          // status: "已完成",
          bz:'',
        },
        {
          company: "江西中业兴达保安服务有限公司",
          subOffice: "西湖分局",
          timeStart:'2020-03-16',
          timeEnd:'2021-7-29',
          customerName: "南昌市动物园",
          num: "12",
          status: "未下单",
          // status: "未下单",
          bz:'',
        },
      ],
      tablePage: {
@@ -119,49 +128,67 @@
            ],
          },
          {
            label: "服务单位名称",
            prop: "customerName",
            label: "服务开始时间",
            prop: "timeStart",
            display: false,
          },
          {
            label: "保安人数",
            label: "服务到期时间",
            prop: "timeEnd",
            display: false,
          },
          {
            label: "服务单位名称",
            prop: "customerName",
            searchLabelWidth: 110,
            search: true,
            searchSpan: 4,
            display: false,
          },
          {
            label: "保安派遣人数",
            prop: "num",
            display: false,
          },
          {
            label: "服务状态",
            prop: "status",
            searchSpan: 4,
            type: "select",
            props: {
              label: "label",
              value: "value",
            },
            // cascaderItem: ["city", "area"],
            // dicUrl:subofficeOptions,
            dicData: [
              {
                value: "0",
                label: "已完成",
              },
              {
                value: "2",
                label: "正在服务",
              },
              {
                value: "3",
                label: "未下单",
              },
            ],
            search: true,
            rules: [
              {
                required: true,
                message: "请选择服务状态",
                trigger: "blur",
              },
            ],
            label: "备注",
            prop: "bz",
            display: false,
          },
          // {
          //   label: "服务状态",
          //   prop: "status",
          //   searchSpan: 4,
          //   type: "select",
          //   props: {
          //     label: "label",
          //     value: "value",
          //   },
          //   // cascaderItem: ["city", "area"],
          //   // dicUrl:subofficeOptions,
          //   dicData: [
          //     {
          //       value: "0",
          //       label: "已完成",
          //     },
          //     {
          //       value: "2",
          //       label: "正在服务",
          //     },
          //     {
          //       value: "3",
          //       label: "未下单",
          //     },
          //   ],
          //   search: true,
          //   rules: [
          //     {
          //       required: true,
          //       message: "请选择服务状态",
          //       trigger: "blur",
          //     },
          //   ],
          // },
        ],
      },
      typeValue: "0",

 vue.config.js

@@ -30,7 +30,7 @@
        // target: 'http://192.168.0.109:1',
        //远程演示服务地址,可用于直接启动项目
        // target: 'http://2h3f861221.wicp.vip:58646',
        target: 'http://192.168.0.109:82',
        target: 'http://s16s652780.51mypc.cn/api',
        ws: true,
        pathRewrite: {
          '^/api': '/'