对接接口

zhengpz

2021-07-30 88e9acc00c5e9efa9be636c6083ea634ae04e889

对接接口

 src/api/securityUnitOperation/securityUnitOperation.js

@@ -3,13 +3,55 @@
    return request({
        url: "/api/information/selectIn",
        method: "post",
        params:params
        params: params
    });
};
export const selectPCount = (params) => {
    return request({
        url: "/api/information/selectPCount",
        method: "post",
        params:params
        params: params
    });
};
export const selectTo = (params) => {
    return request({
        url: "/api/information/selectTo",
        method: "post",
        params: params
    });
};
export const queryYearSoil = (params) => {
    return request({
        url: "/api/information/queryYearSoil",
        method: "get",
        params: params
    });
};
export const queryYearAn = (params) => {
    return request({
        url: "/api/information/queryYearAn",
        method: "get",
        params: params
    });
};
export const queryCounts = (params) => {
    return request({
        url: "/api/information/queryCounts",
        method: "get",
        params: params
    });
};
export const queryYearKh = (params) => {
    return request({
        url: "/api/information/queryYearKh",
        method: "get",
        params: params
    });
};
export const queryYearG = (params) => {
    return request({
        url: "/api/information/queryYearG",
        method: "get",
        params: params
    });
};

 src/router/views/index.js

@@ -314,20 +314,20 @@
                import( /* webpackChunkName: "views" */ '@/views/qualificationExamination/registrationTrainingQuery')
        }]
    },
    // {  //报错  到不到vue文件
    //     path: '/securityUnitOperation/operationTable',
    //     redirect: '/securityUnitOperation/operationTable/index',
    //     component: Layout,
    //     children: [{
    //         path: 'index',
    //         name: '公司运营情况智能分析详情表',
    //         meta: {
    //             i18n: 'index',
    //         },
    //         component: () =>
    //             import( /* webpackChunkName: "views" */ '@/views/securityUnitOperation/operationTable')
    //     }]
    // }, 
    {  //报错  到不到vue文件
        path: '/securityUnitOperation/operationTable',
        redirect: '/securityUnitOperation/operationTable/index',
        component: Layout,
        children: [{
            path: 'index',
            name: '公司运营情况智能分析详情表',
            meta: {
                i18n: 'index',
            },
            component: () =>
                import( /* webpackChunkName: "views" */ '@/views/securityUnitOperation/operationTable')
        }]
    }, 
    {
        path: '/securityUnitOperation/economicTable',
        redirect: '/securityUnitOperation/economicTable/index',

 src/views/home/indexEchart.js

@@ -18,7 +18,14 @@
      trigger: "axis",
      axisPointer: {
        type: "shadow"
      }
      },
      backgroundColor: "#031952", //设置背景图片 rgba格式
      color: "#fff",
      borderWidth: "0", //边框宽度设置1
      // borderColor: "gray", //设置边框颜色
      textStyle: {
        color: "#fff" //设置文字颜色
      },
    },
    color: [
      '#2ec7c9',
@@ -128,7 +135,14 @@
      trigger: "axis",
      axisPointer: {
        type: "shadow"
      }
      },
      backgroundColor: "#031952", //设置背景图片 rgba格式
      color: "#fff",
      borderWidth: "0", //边框宽度设置1
      // borderColor: "gray", //设置边框颜色
      textStyle: {
        color: "#fff" //设置文字颜色
      },
    },
    color: [
      "#3fb1e3",
@@ -449,7 +463,14 @@
    tooltip: {
      show: true,
      trigger: "item",
      formatter: "{a}<br>{b}:{c}({d}%)"
      formatter: "{a}<br>{b}:{c}({d}%)",
      backgroundColor: "#031952", //设置背景图片 rgba格式
      color: "#fff",
      borderWidth: "0", //边框宽度设置1
      // borderColor: "gray", //设置边框颜色
      textStyle: {
        color: "#fff" //设置文字颜色
      },
    },
    color: [
      "#91cc75",

 src/views/securityUnitOperation/economicAnalysis.vue

@@ -49,13 +49,13 @@
          <div class="col-content">
            <div class="box-card">
              <span>社保缴纳人数</span>
              <span>11291</span>
              <span>较上月增加12人</span>
              <span>{{ socialSecurity.num }}</span>
              <span>较上月增加{{ socialSecurity.addNum }}人</span>
            </div>
            <div class="box-card">
              <span>社保缴纳总额(万)</span>
              <span>410</span>
              <span>较上月增加15万</span>
              <span>社保缴纳总额(元)</span>
              <span>{{ socialSecurity.money }}</span>
              <span>较上月增加{{ socialSecurity.addMoney }}元</span>
            </div>
            <div class="box-card">
              <span>公司派遣人数</span>
@@ -103,6 +103,9 @@
import {
  getCompanys,
  selectPCount,
  selectTo,
  queryYearSoil,
  queryYearAn,
} from "../../api/securityUnitOperation/securityUnitOperation";
export default {
  data() {
@@ -138,18 +141,15 @@
      ],
      options1: [],
      options2: [],
      socialSecurity: {
        num: 0,
        addNum: 0,
        money: 0,
        addMoney: 0,
      },
    };
  },
  methods: {
    setEchart() {
      let data = [];
      let bottomEchart = echarts.init(document.getElementById("bottomEchart"));
      bottomEchart.setOption(echartJs.bottomOption(data));
      let middleEchart1 = echarts.init(
        document.getElementById("middleEchart1")
      );
      middleEchart1.setOption(echartJs.economicMiddle(data));
    },
    toEconomicTable() {
      this.$router.push({ path: "/securityUnitOperation/economicTable" });
    },
@@ -188,16 +188,67 @@
        if (res.data.code === 200) {
          this.options2 = res.data.data;
          this.value2 = this.options2[0] ? this.options2[0].departmentid : "";
          this.pieChange();
          this.changeCompanys();
        }
      });
    },
    getSocialSecurity() {
      let params = {
        jurisdiction: this.value1,
        deptid: this.value2,
      };
      selectTo(params).then((res) => {
        if (res.data.code === 200) {
          let data = res.data.data[0];
          this.socialSecurity.num = data.thismouth;
          this.socialSecurity.addNum = data.thismouth - data.lastmonth;
          this.socialSecurity.money = data.thisamount;
          this.socialSecurity.addMoney = data.thisamount - data.lastamount;
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    getQueryYearSoil() {
      let params = {
        jurisdiction: this.value1,
        deptid: this.value2,
      };
      queryYearSoil(params).then((res) => {
        if (res.data.code === 200) {
          let middleEchart1 = echarts.init(
            document.getElementById("middleEchart1")
          );
          middleEchart1.setOption(echartJs.economicMiddle(res.data.data));
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    getQueryYearAn() {
      let params = {
        jurisdiction: this.value1,
        deptid: this.value2,
      };
      queryYearAn(params).then((res) => {
        if (res.data.code === 200) {
          let bottomEchart = echarts.init(
            document.getElementById("bottomEchart")
          );
          bottomEchart.setOption(echartJs.bottomOption(res.data.data));
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    changeCompanys() {
      this.pieChange();
      this.getSocialSecurity();
      this.getQueryYearSoil();
      this.getQueryYearAn();
    },
  },
  mounted() {
    this.setEchart();
    this.getFenju();
  },
};

 src/views/securityUnitOperation/operationAnalysis.vue

@@ -16,21 +16,31 @@
              >
              </el-option>
            </el-select>
            <el-select class="select1" v-model="value1" placeholder="请选择">
            <el-select
              class="select1"
              v-model="value1"
              placeholder="请选择"
              @change="fenjuChange"
            >
              <el-option
                v-for="item in options1"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                :key="item.id"
                :label="item.title"
                :value="item.id"
              >
              </el-option>
            </el-select>
            <el-select class="select2" v-model="value2" placeholder="请选择">
            <el-select
              class="select2"
              v-model="value2"
              placeholder="请选择"
              @change="changeCompanys"
            >
              <el-option
                v-for="item in options2"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                :key="item.departmentid"
                :label="item.enterpriseName"
                :value="item.departmentid"
              >
              </el-option>
            </el-select>
@@ -105,11 +115,18 @@
<script>
import * as echarts from "echarts";
import echartJs from "./securityEchart.js";
import { lazyTreeJu } from "../../api/index/index";
import {
  queryCounts,
  getCompanys,
  queryYearKh,
  queryYearG,
} from "../../api/securityUnitOperation/securityUnitOperation";
export default {
  data() {
    return {
      value1: "1",
      value2: "1",
      value1: "",
      value2: "",
      value0: "2012",
      options0: [
        {
@@ -137,64 +154,90 @@
          label: "2007年",
        },
      ],
      options1: [
        {
          value: "1",
          label: "南昌市公安局",
        },
        {
          value: "2",
          label: "东湖分局",
        },
        {
          value: "3",
          label: "西湖分局",
        },
        {
          value: "4",
          label: "青云谱分局",
        },
        {
          value: "5",
          label: "青山湖分局",
        },
      ],
      options2: [
        {
          value: "1",
          label: "江西省永安保安服务有限公司",
        },
        {
          value: "2",
          label: "南昌市赣水保安服务有限公司",
        },
        {
          value: "3",
          label: "江西中业兴达保安服务有限公司",
        },
      ],
      options1: [],
      options2: [],
    };
  },
  methods: {
    setEchart() {
      let data = [];
      let bottomEchart = echarts.init(document.getElementById("bottomEchart"));
      bottomEchart.setOption(echartJs.bottomOption(data));
      let middleEchart1 = echarts.init(
        document.getElementById("middleEchart1")
      );
      middleEchart1.setOption(echartJs.middleOption1(data));
      let middleEchart2 = echarts.init(
        document.getElementById("middleEchart2")
      );
      middleEchart2.setOption(echartJs.middleOption2(data));
      bottomEchart.setOption(echartJs.bottomOption1(data));
    },
    toOperationTable() {
      this.$router.push({ path: "/securityUnitOperation/operationTable" });
    },
    getFenju() {
      lazyTreeJu().then((res) => {
        if (res.data.code === 200) {
          this.options1 = res.data.data;
          this.value1 = this.options1[0] ? this.options1[0].id : "";
          this.getCompanys();
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    fenjuChange() {
      this.getCompanys();
    },
    getCompanys() {
      getCompanys({ jurisdiction: this.value1 }).then((res) => {
        if (res.data.code === 200) {
          this.options2 = res.data.data;
          this.value2 = this.options2[0] ? this.options2[0].departmentid : "";
          this.changeCompanys();
        }
      });
    },
    getQueryCounts() {
      let params = {
        jurisdiction: this.value1,
        deptid: this.value2,
      };
      queryCounts(params).then((res) => {
        if (res.data.code === 200) {
          debugger;
        }
      });
    },
    getQueryYearKh() {
      let params = {
        jurisdiction: this.value1,
        deptid: this.value2,
      };
      queryYearKh(params).then((res) => {
        if (res.data.code === 200) {
          let middleEchart2 = echarts.init(
            document.getElementById("middleEchart2")
          );
          middleEchart2.setOption(echartJs.middleOption2(res.data.data));
        }
      });
    },
    getQueryYearG() {
      let params = {
        jurisdiction: this.value1,
        deptid: this.value2,
      };
      queryYearG().then((res) => {
        if (res.data.code === 200) {
          let middleEchart1 = echarts.init(
            document.getElementById("middleEchart1")
          );
          middleEchart1.setOption(echartJs.middleOption1(res.data.data));
        }
      });
    },
    changeCompanys() {
      // this.getQueryCounts();
      this.getQueryYearKh();
      this.getQueryYearG();
    },
  },
  mounted() {
    this.setEchart();
    this.getFenju();
  },
};
</script>

 src/views/securityUnitOperation/securityEchart.js

@@ -1,4 +1,8 @@
function bottomOption(data) {
function bottomOption(alldata) {
  let data = [];
  for (var i in alldata) {
    data.push(alldata[i])
  }
  let option = {
    // title: {
    //   text: "公司运营趋势",
@@ -36,7 +40,14 @@
      }
    },
    tooltip: {
      trigger: "item"
      trigger: "item",
      backgroundColor: "#031952",
      color: "#fff",
      borderWidth: "0", //边框宽度设置1
      // borderColor: "gray", //设置边框颜色
      textStyle: {
        color: "#fff" //设置文字颜色
      },
    },
    xAxis: {
      type: "category",
@@ -60,7 +71,7 @@
      ]
    },
    yAxis: {
      name: "（%）",
      name: "（元）",
      type: "value",
      axisLabel: {
        color: "#fff"
@@ -69,7 +80,7 @@
    series: [
      {
        name: "趋势",
        data: [10, 30, 20, 50, 10, 40, 32, 13, 21, 12, 25, 11],
        data: data,
        type: "line",
        smooth: true,
        areaStyle: {}
@@ -78,7 +89,120 @@
  };
  return option;
}
function middleOption1(data) {
function bottomOption1(alldata) {

  let option = {
    // title: {
    //   text: "公司运营趋势",
    //   textStyle: {
    //     color: "#fff"
    //   }
    // },
    color: [
      "#73c0de",

      "#fac858",
      "#91cc75",
      "#3ba272",
      "#fc8452",
      "#9a60b4",
      "#3fb1e3",
      "#6be6c1",
      "#626c91",
      "#a0a7e6",
      "#c4ebad",
      "#96dee8"
    ],
    grid: {
      top: "10%",
      left: "3%",
      right: "4%",
      bottom: "15%",
      containLabel: true
    },
    legend: {
      data: ["趋势"],
      bottom: "0%",
      textStyle: {
        color: "#fff"
      }
    },
    tooltip: {
      trigger: "item",
      backgroundColor: "#031952",
      color: "#fff",
      borderWidth: "0", //边框宽度设置1
      // borderColor: "gray", //设置边框颜色
      textStyle: {
        color: "#fff" //设置文字颜色
      },
    },
    xAxis: {
      type: "category",
      axisLabel: {
        color: "#fff"
      },
      boundaryGap: false,
      data: [
        "一月",
        "二月",
        "三月",
        "四月",
        "五月",
        "六月",
        "七月",
        "八月",
        "九月",
        "十月",
        "十一月",
        "十二月"
      ]
    },
    yAxis: {
      name: "（元）",
      type: "value",
      axisLabel: {
        color: "#fff"
      }
    },
    series: [
      {
        name: "趋势",
        data: [10,20,14,15,16,17,24,15,3,7,11,23],
        type: "line",
        smooth: true,
        areaStyle: {}
      }
    ]
  };
  return option;
}
function middleOption1(alldata) {
  let baoan = [];
  let zc = [];
  let chiz = [];
  let sheb = [];
  let paiq = [];
  alldata.forEach(item => {
    for (var i in item) {
      for (var j in item[i]) {
        if (i === 'baoan') {
          baoan.push(item[i][j])
        } else if (i === 'zc') {
          zc.push(item[i][j])
        }
        else if (i === 'chiz') {
          chiz.push(item[i][j])
        }
        else if (i === 'sheb') {
          sheb.push(item[i][j])
        }
        else if (i === 'paiq') {
          paiq.push(item[i][j])
        }
      }
    }
  })
  let option = {
    // title: {
    //   text: "公司保安类数据对比",
@@ -87,7 +211,14 @@
    //   }
    // },
    tooltip: {
      trigger: "axis"
      trigger: "axis",
      backgroundColor: "#031952",
      color: "#fff",
      borderWidth: "0", //边框宽度设置1
      // borderColor: "gray", //设置边框颜色
      textStyle: {
        color: "#fff" //设置文字颜色
      },
    },
    legend: {
      data: [
@@ -157,43 +288,47 @@
        name: "总保安数",
        type: "bar",
        barWidth: 9,
        data: [120, 132, 101, 134, 90, 230, 210, 214, 123, 22, 132, 321]
        data: baoan
      },
      {
        name: "正常保安数",
        type: "bar",
        barWidth: 9,
        data: [220, 182, 191, 234, 290, 330, 310, 111, 222, 132, 143, 123]
        data: zc
      },
      {
        name: "持证保安数",
        type: "bar",
        barWidth: 9,
        data: [150, 232, 201, 154, 190, 330, 410, 132, 111, 222, 132, 43]
        data: chiz
      },
      {
        name: "过考保安数",
        type: "bar",
        barWidth: 9,
        data: [320, 332, 301, 334, 390, 330, 320, 233, 123, 432, 122, 11]
        data: []
      },
      {
        name: "缴纳社保保安数",
        type: "bar",
        barWidth: 9,
        data: [120, 132, 101, 134, 120, 130, 132, 222, 111, 123, 341, 123]
        data: sheb
      },
      {
        name: "保安派遣",
        type: "bar",
        barWidth: 9,
        data: [120, 132, 101, 134, 1210, 130, 120, 22, 123, 33, 21, 13]
        data: paiq
      }
    ]
  };
  return option;
}
function middleOption2(data) {
function middleOption2(alldata) {
  let data = [];
  for (var i in alldata) {
    data.push(alldata[i])
  }
  let option = {
    // title: {
    //   text: "服务客户",
@@ -205,7 +340,14 @@
      trigger: "axis",
      axisPointer: {
        type: "shadow"
      }
      },
      backgroundColor: "#031952",
      color: "#fff",
      borderWidth: "0", //边框宽度设置1
      // borderColor: "gray", //设置边框颜色
      textStyle: {
        color: "#fff" //设置文字颜色
      },
    },
    legend: {
      data: ["客户数"],
@@ -269,7 +411,7 @@
      {
        name: "客户数",
        type: "bar",
        data: [231, 123, 441, 123, 321, 333, 111, 221, 332, 442, 132, 51]
        data: data
      }
    ]
  };
@@ -277,9 +419,20 @@
}

function economicMiddle(data) {
  let data1 = [];
  for (var a in data) {
    data1.push(data[a])
  }
  let option = {
    tooltip: {
      trigger: "axis"
      trigger: "axis",
      backgroundColor: "#031952",
      color: "#fff",
      borderWidth: "0", //边框宽度设置1
      // borderColor: "gray", //设置边框颜色
      textStyle: {
        color: "#fff" //设置文字颜色
      },
    },
    legend: {
      data: ["缴纳社保人数", "公司派遣人数"],
@@ -342,7 +495,7 @@
        name: "缴纳社保人数",
        type: "line",
        stack: "总量",
        data: [120, 132, 101, 134, 90, 230, 210, 214, 123, 22, 132, 321]
        data: data1
      },
      {
        name: "公司派遣人数",
@@ -382,14 +535,22 @@
      }
    ],
    tooltip: {
      trigger: "item"
      trigger: "item",
      backgroundColor: "#031952",
      color: "#fff",
      borderWidth: "0", //边框宽度设置1
      // borderColor: "gray", //设置边框颜色
      textStyle: {
        color: "#fff" //设置文字颜色
      },
    },
    legend: {
      bottom: "0%",
      left: "center",
      right: "5%",
      textStyle: {
        color: "#fff"
      }
      },
      orient: "vertical"
    },
    color: [
      "#73c0de",
@@ -423,6 +584,7 @@

export default {
  bottomOption,
  bottomOption1,
  middleOption1,
  middleOption2,
  economicMiddle,