改首页及对接口

zhengpz

2021-08-14 91f270f3285875e1381027a3b593f33f26f79063

改首页及对接口

 src/api/index/index.js

@@ -66,6 +66,20 @@
    params: params
  });
};
export const seCountUg = (params) => {
  return request({
    url: "/api/information/seCountUg",
    method: "post",
    params: params
  });
};
export const seCountI = (params) => {
  return request({
    url: "/api/information/seCountI",
    method: "post",
    params: params
  });
};

 


 src/views/home/index.scss

@@ -427,23 +427,22 @@
.left2-btn{
  height: 21px;
  width: 69px;
  background-color: #2a3e9d;
  background-color: #0445b5;
  font-size: 13px !important;
  font-weight: 700;
  color: #FFFF80 !important;
  color: #fff !important;
  line-height: 21px !important;
  border-radius: 10px;
  text-align: center;
  position: absolute;
  cursor: pointer;
}
.left2-btn.btn1{
  right: 100px;
  margin-top: 22px;
  right: 106px;
  margin-top: 25px;
}
.left2-btn.btn2{
  right: 21px;
  margin-top: 22px;
  right: 25px;
  margin-top: 25px;
}
.left2-btn.date{
  margin-left: 74px;
@@ -490,16 +489,18 @@
  }
  .rightData1{
    margin-left: 42px;
    margin-top: 23px;
  }
  .rightData2{
    margin-left: 58px;
    margin-top: 23px;
  }
  .rightData3{
    margin-top: 8px;
    margin-top: 21px;
    margin-left: 42px;
  }
  .rightData4{
    margin-top: 8px;
    margin-top: 21px;
    margin-left: 58px;
  }
  .rightData5{
@@ -540,7 +541,7 @@
    display: flex;
    line-height: 30px;
    margin-top: 10px;
    margin-left: 67px;
    margin-left: 28px;
    position: absolute;
    .block1{
      width: 23px;
@@ -558,6 +559,9 @@
      color: #2ec7c9;
    font-size: 17px;
    font-weight: 700;
    display: block;
    width: 65px;
    text-align: center;
    }
    span:nth-child(4){
      font-size: 13px;
@@ -565,7 +569,7 @@
    }
  }
  .leftEchartTitle2{
    right: 72px;
    right: 35px;
    .block1{
      background: #b6a2de;
    }
@@ -575,7 +579,7 @@
    }
  }
  .leftEchartTitle3{
    margin-top: 43px;
    margin-top: 37px;
    .block1{
      background: #5ab1ef;
    }
@@ -585,8 +589,8 @@
    }
  }
  .leftEchartTitle4{
    margin-top: 34px;
    right: 72px;
    margin-top: 37px;
    right: 35px;
    .block1{
      background: #ffb980;
    }
@@ -595,5 +599,15 @@
    font-size: 15px;
    }
  }
  .leftEchartTitle5{
    margin-top: 64px;
    .block1{
      background: #fc8452;
    }
    span:nth-child(3){
      color: #fc8452;
    font-size: 15px;
    }
  }



 src/views/home/index.vue

@@ -12,28 +12,34 @@
            <img src="../../../public/img/bajgxt/icon1.png" />
            <span>各辖区单位统计情况</span>
          </div>
          <div class='leftEchartTitle'>
            <div class='block1'></div>
          <div class="leftEchartTitle">
            <div class="block1"></div>
            <span>自招保安单位</span>
            <span>230</span>
            <span>{{ leftData.zz }}</span>
            <span>个</span>
          </div>
          <div class='leftEchartTitle leftEchartTitle2'>
            <div class='block1'></div>
          <div class="leftEchartTitle leftEchartTitle2">
            <div class="block1"></div>
            <span>保安培训公司</span>
            <span>210</span>
            <span>{{ leftData.px }}</span>
            <span>个</span>
          </div>
          <div class='leftEchartTitle leftEchartTitle3'>
            <div class='block1'></div>
          <div class="leftEchartTitle leftEchartTitle3">
            <div class="block1"></div>
            <span>保安服务公司</span>
            <span>180</span>
            <span>{{ leftData.fw }}</span>
            <span>个</span>
          </div>
          <div class='leftEchartTitle leftEchartTitle4'>
            <div class='block1'></div>
          <div class="leftEchartTitle leftEchartTitle4">
            <div class="block1"></div>
            <span>武装守押公司</span>
            <span>150</span>
            <span>{{ leftData.wz }}</span>
            <span>个</span>
          </div>
          <div class="leftEchartTitle leftEchartTitle5">
            <div class="block1"></div>
            <span>跨区域保安公司</span>
            <span>{{ leftData.kqy }}</span>
            <span>个</span>
          </div>
          <div id="left1Echart" v-loading="left1loading"></div>
@@ -269,34 +275,27 @@
          </div>
          <div class="right-content" v-loading="right2loading">
            <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">
            <div class="rightData rightData2">
              <img src="../../../public/img/bajgxt/u232.png" alt />
              <div class="text">
                <span>资质不全</span>
                <span>23个</span>
              </div>
            </div>
            <div class="rightData rightData4">
            <div class="rightData rightData3">
              <img src="../../../public/img/bajgxt/u233.png" alt />
              <div class="text">
                <span>没开展业务</span>
                <span>12个</span>
              </div>
            </div>
            <div class="rightData rightData5">
            <div class="rightData rightData4">
              <img src="../../../public/img/bajgxt/111.png" alt />
              <div class="text">
                <span>被公安查处</span>
@@ -364,6 +363,8 @@
  selectFj,
  selectBx,
  selectExtype,
  seCountUg,
  seCountI,
} from "../../api/index/index";

import car from "@/assets/img/car.png";
@@ -408,6 +409,13 @@
      right3loading: true,
      textArr: [],
      number: 0,
      leftData: {
        zz: 0,
        px: 0,
        fw: 0,
        wz: 0,
        kqy:0
      },
    };
  },
  computed: {
@@ -430,7 +438,7 @@
        this.startMove();
      }, 2000); // 滚动不需要停顿则将2000改成动画持续时间
    },
    // 左侧两个表的接口返回数据
    // 左侧表的接口返回数据
    initEchart() {
      securityTotal().then((res) => {
        if (res.data.code == 200) {
@@ -446,16 +454,30 @@
        }
        this.left1loading = false;
      });
      // securityPer().then(res => {
      //   if (res.data.code === 200) {
      //     let data = res.data.data;
      //   let right1Echart = echarts.init(document.getElementById("right1Echart"));
      //   right1Echart.setOption(optionJs.right1Data(data));
      //   }
      // });

      //   let right2Echart = echarts.init(document.getElementById("right2Echart"));
      //   right2Echart.setOption(optionJs.right2Data(data));
      seCountI({ jurisdiction: "", deptid: "" }).then((res) => {
        if (res.data.code == 200) {
          let data = res.data.data;
          data.forEach((item) => {
            if (item.stats === "0") {
              this.leftData.zz = item.num;
            }
            if (item.stats === "1") {
              this.leftData.px = item.num;
            }
            if (item.stats === "2") {
              this.leftData.fw = item.num;
            }
            if (item.stats === "3") {
              this.leftData.wz = item.num;
            }
            if (item.stats === "4") {
              this.leftData.kqy = item.num;
            }
          });
        } else {
          this.$message.error(res.msg);
        }
      });
      selectFj().then((res) => {
        if (res.data.code === 200) {
          if (!this.echarts.right3Echart) {
@@ -474,24 +496,35 @@
    },

    getHolderNum(type) {
      this.left2loading = true;
      if (this.echarts.left2Echart) {
        this.echarts.left2Echart.clear();
      }
      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));
            this.echarts.left2Echart = echarts.init(
              document.getElementById("left2Echart")
            );
            this.echarts.left2Echart.setOption(optionJs.left2Data(data), true);
          } else {
            this.$message.error(res.msg);
          }
          this.left2loading = false;
        });
      } else {
        let data = [];
        this.echarts.left2Echart.setOption(optionJs.left3Data(data));
        seCountUg({ jurisdiction: "", deptid: "" }).then((res) => {
          if (res.data.code === 200) {
            this.echarts.left2Echart = echarts.init(
              document.getElementById("left2Echart")
            );
            this.echarts.left2Echart.setOption(
              optionJs.left3Data(res.data.data, true)
            );
          }
          this.left2loading = false;
        });
      }
    },
    initMapEchart(data, type) {

 src/views/home/indexEchart.js

@@ -6,6 +6,7 @@
  let data2 = [];
  let data3 = [];
  let data4 = [];
  let data5 = [];
  // let legend = ["自招保安单位", "保安培训公司", "保安服务公司", "武装守押公司"];
  allData.forEach(item => {
    nameArr.push(item.name);
@@ -13,31 +14,8 @@
    data2.push(item.server.staff);
    data3.push(item.server.security);
    data4.push(item.server.armed);
    data5.push(item.server.region);
  });
  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",
@@ -82,7 +60,7 @@
    //   // }
    // },
    grid: {
      top: '5%',
      top: '10%',
      left: "5%",
      right: "6%",
      bottom: "10%",
@@ -144,6 +122,15 @@
          focus: "series"
        },
        data: data4
      },
      {
        name: "跨区域保安公司",
        type: "bar",
        stack: "total",
        emphasis: {
          focus: "series"
        },
        data: data5
      }
    ]
  };
@@ -248,77 +235,56 @@
}

function left3Data(allData) {
  let data = [
    { value: allData[0].mnum ? Number(allData[0].mnum) : 0, name: '男' },
    { value: allData[0].gnum ? Number(allData[0].gnum) : 0, name: '女' }
  ]
  let option = {
    tooltip: {
      trigger: 'axis',
      trigger: 'item',
      formatter: "{a}<br>{b}:{c}({d}%)",
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      data: ['男', '女'],
      bottom: "1%",
      itemWidth: 20,
        type: "shadow"
      },
      backgroundColor: "#031952", //设置背景图片 rgba格式
      color: "#fff",
      borderWidth: "0", //边框宽度设置1
      // borderColor: "gray", //设置边框颜色
      textStyle: {
        color: "#fff"
      }
        color: "#fff" //设置文字颜色
      },
    },
    color: [
      "#91cc75",
      "#fac858",
      "#73c0de",
      '#008DEC',
      '#886EFF',
    ],
    grid: {
      top: '5%',
      left: "5%",
      right: "6%",
      bottom: "15%",
      containLabel: true
    legend: {
      right: "8%",
      bottom: "10%",
      itemHeight: 10,
      show: true,
      selectedMode: false,
      textStyle: {
        color: "#fff"
      },
      data: ['男', '女'],
      orient: "vertical"
    },
    xAxis: [
      {
        type: 'value',
        splitLine: {
          show: false
        },
        axisLabel: {
          color: "#fff"
        },
      }
    ],
    yAxis: [

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

        splitLine: {
          show: false
        },
        axisLabel: {
          color: "#fff"
        },
      }
    ],
    series: [
      {
        name: '男',
        type: 'bar',
        stack: '性别',
        name: '性别比例',
        type: 'pie',
        center: ['43%', '50%'],
        radius: '70%',
        data: data,
        emphasis: {
          focus: 'series'
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        },
        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
@@ -690,7 +656,7 @@
      {
        name: '分局预警占比',
        type: 'pie',
        radius: '70%',
        radius: '75%',
        center: ['30%', '50%'],
        roseType: 'radius',
        itemStyle: {