首页文字更改，保安单位经营情况四个页面

zpzgiser

2021-07-18 fd61a737e45cc7075b1d008524f1883dcea15aad

首页文字更改，保安单位经营情况四个页面

 public/img/bajgxt/u1.png

 public/img/bajgxt/u1618.png

 src/views/home/index.scss

@@ -241,6 +241,7 @@
  }
  /deep/ .el-table .cell {
    color: #fff;
    text-align: center;
  }
  /deep/ .el-table td,
  .el-table th.is-leaf {
@@ -258,7 +259,7 @@
    border-radius: 2px;
  }
  /deep/ .el-input {
    width: 94px;
    width: 138px;
  }
  /deep/ .el-select {
    line-height: 55px;
@@ -305,12 +306,13 @@
    width: 100%;
  }
  .card-list {
    margin: 20px 60px;
    margin: 20px 60px 20px 90px;
    display: flex;
    height: 55px;
    line-height: 55px;
    img:first-child {
      height: 55px;
      z-index: 22;
    }
    img:nth-child(2) {
      position: absolute;
@@ -318,19 +320,24 @@
      width: 35px;
      height: 35px;
      margin-top: 9px;
      z-index: 22;
    }
    span:nth-child(3) {
    img:nth-child(3) {
      margin-left: -20px;
    }
    span:nth-child(4) {
      color: red;
      font-size: 30px;
      display: block;
      width: 71px;
      margin: 0px 20px;
      margin-left: -74px;
    }
    span:nth-child(4) {
    span:nth-child(5) {
      color: #7ff3f4;
      font-size: 18px;
      display: block;
      width: 129px;
      margin-left: 30px;
    }
  }
  .mapBtn,

 src/views/home/index.vue

@@ -1,7 +1,7 @@
<template>
  <div class="bajgxt-home">
    <div class="head-title">
      <span>保安监管系统可视化平台</span>
      <span>智慧保安监管模块</span>
      <!-- <img src="../../../public/img/bajgxt/linkimg.png"
                 @click.stop="goSystemHome"
                 title="进入系统" /> -->
@@ -10,9 +10,10 @@
    <div class="content">
      <div class="left">
        <div class="left1">
          <!-- <img src="../../../public/img/bajgxt/line.jpg" /> -->
          <div class="title-pane">
            <img src="../../../public/img/bajgxt/icon1.png" />
            <span>业务对象统计--单位</span>
            <span>各辖区单位情况统计</span>
          </div>
          <div id="left1Echart"></div>
        </div>
@@ -56,52 +57,43 @@
          <div class="leftbottom"></div>
          <div class="righttop"></div>
          <div class="rightbottom"></div>
          <el-table :data="tableData" stripe>
            <el-table-column type="index" label="序号" width="50">
            </el-table-column>
            <el-table-column
              v-if="curTableType === 'car'"
              prop="carNum"
              label="押运车辆车牌号"
              width="180"
            >
            </el-table-column>
            <el-table-column
              v-if="curTableType === 'peo'"
              prop="name"
              label="押运人员名称"
              width="180"
            >
            </el-table-column>
            <el-table-column
              v-if="curTableType === 'gun'"
              prop="number"
              label="枪支编号"
              width="180"
            >
            </el-table-column>
            <el-table-column prop="location" label="实时位置">
            </el-table-column>
            <el-table-column prop="company" label="所属公司"> </el-table-column>
            <el-table-column
              v-if="curTableType === 'car'"
              prop="linkman"
              label="联系人"
            >
            </el-table-column>
            <el-table-column
              v-if="curTableType === 'gun'"
              prop="linkman"
              label="负责人"
            >
            </el-table-column>
            <el-table-column prop="tel" label="联系电话"> </el-table-column>
            <el-table-column
              v-if="curTableType === 'peo'"
              prop="bz"
              label="备注"
            >
            </el-table-column>
          <el-table :data="tableData" stripe ref="indexTable">
            <template v-if="curTableType === 'car'">
              <el-table-column type="index" label="序号" width="50">
              </el-table-column>
              <el-table-column prop="carNum" label="押运车辆车牌号" width="180">
              </el-table-column>
              <el-table-column prop="location" label="实时位置">
              </el-table-column>
              <el-table-column prop="company" label="所属公司">
              </el-table-column>
              <el-table-column prop="linkman" label="联系人"> </el-table-column>
              <el-table-column prop="tel" label="联系电话"> </el-table-column>
            </template>
            <template v-if="curTableType === 'peo'">
              <el-table-column type="index" label="序号" width="50">
              </el-table-column>
              <el-table-column prop="name" label="押运人员名称" width="180">
              </el-table-column>
              <el-table-column prop="location" label="实时位置">
              </el-table-column>
              <el-table-column prop="company" label="所属公司">
              </el-table-column>
              <el-table-column prop="tel" label="联系电话"> </el-table-column>
              <el-table-column prop="bz" label="备注"> </el-table-column>
            </template>
            <template v-if="curTableType === 'gun'">
              <el-table-column type="index" label="序号" width="50">
              </el-table-column>
              <el-table-column prop="number" label="枪支编号" width="180">
              </el-table-column>
              <el-table-column prop="location" label="实时位置">
              </el-table-column>
              <el-table-column prop="company" label="所属公司">
              </el-table-column>
              <el-table-column prop="linkman" label="负责人"> </el-table-column>
              <el-table-column prop="tel" label="联系电话"> </el-table-column>
            </template>
          </el-table>
        </div>
      </div>
@@ -124,14 +116,16 @@
            <div class="card-list">
              <img src="../../../public/img/bajgxt/u4.png" />
              <img src="../../../public/img/bajgxt/u256.png" />
              <img src="../../../public/img/bajgxt/u1.png" />
              <span>45</span>
              <span>现实表现差</span>
            </div>
            <div class="card-list">
              <img src="../../../public/img/bajgxt/u4.png" />
              <img src="../../../public/img/bajgxt/u230.png" />
              <img src="../../../public/img/bajgxt/u1.png" />
              <span>76</span>
              <span>资格审查</span>
              <span>资格审查异常</span>
            </div>
          </div>
          <!-- <div class="card-text"> -->
@@ -158,12 +152,14 @@
            <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" />
              <span>21</span>
              <span>未缴纳社保</span>
            </div>
            <div class="card-list">
              <img src="../../../public/img/bajgxt/u4.png" />
              <img src="../../../public/img/bajgxt/u251.png" />
              <img src="../../../public/img/bajgxt/u1.png" />
              <span>26</span>
              <span>未持证</span>
            </div>
@@ -191,17 +187,24 @@
import * as echarts from "echarts";
import optionJs from "./indexEchart";
import TileLayer from "ol/layer/Tile";
import { transform } from "ol/proj";
import XYZ from "ol/source/XYZ";
import { Map, View } from "ol";
import { Tile, Group } from "ol/layer";
import { OSM, TileJSON } from "ol/source";
import VectorLayer from "ol/layer/Vector";
import VectorSource from "ol/source/Vector";
import { Fill, Stroke, Circle, Style } from "ol/style";

import Feature from "ol/Feature.js";
import Point from "ol/geom/Point.js";
import { Fill, Stroke, Circle, Style, Icon } from "ol/style";
import GeoJSON from "ol/format/GeoJSON";
import axios from "../../router/axios";
import { securityTotal, holderNum, securityPer } from "../../api/index/index";

import car from "@/assets/img/car.png";
import peo from "@/assets/img/people.png";
import gun from "@/assets/img/gun.png";

export default {
  data() {
    return {
@@ -209,25 +212,53 @@
      curTableType: "car",
      tableData: [],
      value1: "1",
      carVectorLayer: null,
      peoVectorLayer: null,
      gunVectorLayer: null,

      options1: [
        {
          value: "1",
          label: "南昌市"
          label: "南昌市公安局"
        },
        {
          value: "2",
          label: "赣州市"
          label: "东湖分局"
        },
        {
          value: "3",
          label: "西湖分局"
        },
        {
          value: "4",
          label: "青云谱分局"
        },
        {
          value: "5",
          label: "青山湖分局"
        }
      ],
      value2: "1",
      options2: [
        {
          value: "1",
          label: "南昌市"
          label: "南昌市公安局"
        },
        {
          value: "2",
          label: "赣州市"
          label: "东湖分局"
        },
        {
          value: "3",
          label: "西湖分局"
        },
        {
          value: "4",
          label: "青云谱分局"
        },
        {
          value: "5",
          label: "青山湖分局"
        }
      ]
    };
@@ -273,8 +304,28 @@
    },

    getTableData(type) {
      this.carVectorLayer.getSource().clear();
      this.peoVectorLayer.getSource().clear();
      this.gunVectorLayer.getSource().clear();
      this.curTableType = type;
      let curLayer = null;
      let imgUrl = null;
      let geoData = [];
      if (type === "car") {
        curLayer = this.carVectorLayer;
        imgUrl = car;
        geoData = [
          [115.759941, 28.89309],
          [115.757056, 28.895082],
          [115.755648, 28.897737],
          [115.75487, 28.904896],
          [115.750814, 28.910861],
          [115.742915, 28.916431],
          [115.740537, 28.918827],
          [115.738363, 28.928465],
          [115.734182, 28.930418],
          [115.729585, 28.93114]
        ];
        this.tableData = [
          {
            carNum: "111111111111",
@@ -313,6 +364,20 @@
          }
        ];
      } else if (type === "peo") {
        curLayer = this.peoVectorLayer;
        imgUrl = peo;
        geoData = [
          [115.726802, 28.929966],
          [115.726306, 28.920866],
          [115.723726, 28.917826],
          [115.719647, 28.916816],
          [115.714486, 28.91849],
          [115.708041, 28.921607],
          [115.700649, 28.920751],
          [115.69488, 28.922982],
          [115.683128, 28.924531],
          [115.678677, 28.923011]
        ];
        this.tableData = [
          {
            name: "小张",
@@ -358,6 +423,21 @@
          }
        ];
      } else if (type === "gun") {
        curLayer = this.gunVectorLayer;
        imgUrl = gun;
        geoData = [
          [115.67702, 28.923656],
          [115.674372, 28.927773],
          [115.666361, 28.928937],
          [115.663882, 28.93339],
          [115.664626, 28.936632],
          [115.671646, 28.940989],
          [115.674091, 28.941672],
          [115.678384, 28.940729],
          [115.681877, 28.943114],
          [115.682857, 28.946865],
          [115.680694, 28.948442]
        ];
        this.tableData = [
          {
            number: "Q1111",
@@ -403,67 +483,79 @@
          }
        ];
      }

      let features = [];
      let style = new Style({
        image: new Icon({
          src: imgUrl,
          opacity: 1,
          scale: 0.5
        })
      });
      geoData.forEach(item => {
        let carFeature = new Feature({
          geometry: new Point(item)
        });
        carFeature.setStyle(style);
        features.push(carFeature);
      });
      curLayer.getSource().addFeatures(features);
      let extent = curLayer.getSource().getExtent();
      this.map.getView().fit(extent, this.map.getSize());
      this.$nextTick(() => {
        this.$refs.indexTable.doLayout();
      });
    },

    initMap() {
      this.map = new Map({
        target: "map", // 对应页面里 id 为 map 的元素
        target: "map",
        layers: [
          // 图层
          // new Tile({
          //   source: new OSM()
          // })
          new Tile({
            source: new OSM() // 图层数据源
            zIndex: 4,
            title: "影像",
            source: new XYZ({
              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" // 注记
            })
          })
        ],
        view: new View({
          // 地图视图
          projection: "EPSG:4326", // 坐标系，有EPSG:4326和EPSG:3857
          center: [115.892151, 28.676493], //坐标 厦门
          // minZoom: 10, // 地图缩放最小级别
          zoom: 11 //地图缩放级别
          projection: "EPSG:4326",
          center: [115.892151, 28.676493],
          zoom: 11
        })
      });
      var image = new Circle({
        radius: 5,
        fill: new Fill({
          color: "rgba(255, 0, 0, 1)"
        }),
        stroke: new Stroke({ color: "red", width: 1 })
      this.carVectorLayer = new VectorLayer({
        zIndex: 99,
        source: new VectorSource()
      });

      var styles = {
        Point: new Style({
          image: image
        })
      };
      axios.get("./nc.json").then(res => {
        let data = res.data.features;
        let vectorSource = new VectorSource({
          features: new GeoJSON().readFeatures(data)
        });
        let vectorLayer = new VectorLayer({
          source: vectorSource,
          style: styles
        });
        this.map.addLayer(vectorLayer);
      this.peoVectorLayer = new VectorLayer({
        zIndex: 99,
        source: new VectorSource()
      });
      // var center = new transform(
      //   [104.06667, 30.66667],
      //   "EPSG:4326",
      //   "EPSG:3857"
      // );
      // this.map = new Map({
      //   view: new View({
      //     center: center,
      //     zoom: 4
      //   }),
      //   target: "map"
      // });
      // var offlineMapLayer = new TileLayer({
      //   source: new XYZ({
      //     url: "./offlineMapTiles/{z}/{x}/{y}.png"
      //   })
      // });
      // this.map.addLayer(offlineMapLayer);

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

      this.getTableData("car");
    },

    goSystemHome() {
@@ -472,7 +564,7 @@
  },
  mounted() {
    this.initEchart();
    this.getTableData("car");
    // this.getTableData("car");
    this.initMap();
  }
};

 src/views/home/indexEchart.js

@@ -362,6 +362,34 @@
    {
      name: "西湖区",
      value: 200
    },
    {
      name: "东湖区",
      value: 250
    },
    {
      name: "经开区",
      value: 281
    },
    {
      name: "青云谱区",
      value: 320
    },
    {
      name: "高新区",
      value: 231
    },
    {
      name: "湾里区",
      value: 210
    },
    {
      name: "进贤县",
      value: 187
    },
    {
      name: "青山湖区",
      value: 190
    }
  ];
  // let arrName = getArrayValue(data, "name");
@@ -503,7 +531,6 @@
  };
  return option;
}

export default {
  left1Data,
  left2Data,

 src/views/securityUnitOperation/economicAnalysis.vue

@@ -1,7 +1,238 @@
/*
 * @Author: mikey.zhaopeng 
 * @Date: 2021-07-17 00:19:50 
 * @Last Modified by: mikey.zhaopeng
 * @Last Modified time: 2021-07-17 00:20:31
  * @description:公司经济情况智能分析详情
 */
<template>
  <div class="page1">
    <el-row>
      <el-col :span="24">
        <div class="rowContent first-menu">
          <div class="rowTitle">
            <img src="../../../public/img/bajgxt/u1618.png" />
            <span>数据概览</span>
            <el-button>进入数据统计表</el-button>
            <el-select class="select1" v-model="value1" placeholder="请选择">
              <el-option
                v-for="item in options1"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
            <el-select class="select2" v-model="value2" placeholder="请选择">
              <el-option
                v-for="item in options2"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>

          <div class="col-content">
            <div class="box-card">
              <span>社保缴纳人数</span>
              <span>11291</span>
              <span>较上月增加12人</span>
            </div>
            <div class="box-card">
              <span>社保缴纳总额(万)</span>
              <span>410</span>
              <span>较上月增加15万</span>
            </div>
            <div class="box-card">
              <span>公司派遣人数</span>
              <span>1121</span>
              <span>较上月增加13人</span>
            </div>
            <div class="box-card">
              <span>社保缴纳人数占比</span>
              <span>85%</span>
              <span>较上月上涨2%</span>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="16">
        <div class="rowContent">
          <span class="span-title">社保缴纳</span>
          <div id="middleEchart1"></div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="rowContent">
          <span class="span-title">派遣人员占比</span>
          <div id="middleEchart2"></div>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div class="rowContent">
          <span class="span-title">公司经济运转趋势</span>
          <div id="bottomEchart"></div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from "echarts";
import echartJs from "./securityEchart.js";
export default {
  data() {
    return {
      value1: "1",
      value2: "1",
      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: "江西中业兴达保安服务有限公司"
        }
      ]
    };
  },
  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));
      let middleEchart2 = echarts.init(
        document.getElementById("middleEchart2")
      );
      middleEchart2.setOption(echartJs.economicPieOption(data));
    }
  },
  mounted() {
    this.setEchart();
  }
};
</script>
<style lang="scss" scoped>
.page1 {
  height: 100%;
  width: 100%;
}
#bottomEchart,
#middleEchart1,
#middleEchart2 {
  height: calc(100% - 40px);
  width: 100%;
}
.el-row:first-child {
  height: calc(40% - 80px);
  margin-bottom: 20px;
}
.el-row:nth-child(2) {
  margin-bottom: 20px;
}
.el-row:nth-child(2),
.el-row:nth-child(3) {
  height: 30%;
}
.el-col {
  height: 100%;
}
.rowContent {
  padding: 5px 20px 0px 10px;
  height: calc(100% - 5px);
  width: calc(100% - 30px);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0px 0px 1px #fff;
  .span-title {
    color: #fff;
    font-size: 17px;
    margin-left: 35px;
    font-weight: 600;
  }
}
.box-card {
  width: 150px;
  background: #00aaf1;
  height: 135px;
  text-align: center;
  margin-right: 66px;
  box-shadow: 5px 5px 5px rgba($color: #000, $alpha: 0.35);
  line-height: 40px;
}
.box-card span {
  display: block;
  width: 100%;
  color: #fff;
}
.box-card span:nth-child(2) {
  color: #06ffff;
  font-size: 34px;
}
.rowTitle {
  height: 40px;
  display: flex;
  line-height: 40px;
  img {
    width: 30px;
    height: 30px;
    margin-top: 5px;
  }
  span {
    color: #fff;
    font-size: 17px;
    font-weight: 600;
    margin-left: 11px;
  }
  .select1 {
    position: absolute;
    right: 140px;
  }
  .select2 {
    position: absolute;
    right: 0px;
  }
  .el-button {
    position: absolute;
    right: 300px;
  }
  /deep/ .el-input__inner {
    width: 120px;
  }
}
.col-content {
  display: flex;
  margin-top: 15px;
  margin-left: 36px;
}
</style>

 src/views/securityUnitOperation/economicTable.vue

@@ -1,7 +1,279 @@
/*
 * @Author: mikey.zhaopeng 
 * @Date: 2021-07-17 00:19:50 
 * @Last Modified by: mikey.zhaopeng
 * @Last Modified time: 2021-07-17 00:20:33
  * @description:公司经济情况智能分析统计
 */
<template>
  <div class="operation-table">
    <el-row>
      <el-col>
        <span>时间范围：</span>
        <el-date-picker
          v-model="value2"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
        >
        </el-date-picker>
        <span>类别：</span>
        <el-select v-model="typeValue" placeholder="请选择">
          <el-option
            v-for="item in typeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <span>分局：</span>
        <el-select v-model="subofficeValue" placeholder="请选择">
          <el-option
            v-for="item in subofficeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <span>公司名称：</span>
        <el-input v-model="companyName"></el-input>
        <el-button>查询</el-button>
        <el-button>重置</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <div class="table">
          <el-button @click="downExcel">下载</el-button>
          <el-table id="table" :data="tableData" style="width: 100%">
            <el-table-column type="index" label="序号" width="50">
            </el-table-column>
            <el-table-column prop="company" label="公司名称" width="180">
            </el-table-column>
            <el-table-column prop="subOffice" label="所属分局" width="180">
            </el-table-column>
            <el-table-column prop="time" label="时间"> </el-table-column>
            <el-table-column prop="sbjnrs" label="社保缴纳人数">
            </el-table-column>
            <el-table-column prop="sbjnze" label="社保缴纳总额（万）">
            </el-table-column>
            <el-table-column prop="gspqrs" label="公司派遣人数">
            </el-table-column>
            <el-table-column prop="sbjnrszb" label="社保缴纳人数占比（%）">
            </el-table-column>
            <el-table-column prop="bz" label="备注"> </el-table-column>
          </el-table>
          <el-pagination background layout="prev, pager, next" :total="tableData.length">
          </el-pagination>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import FileSaver from "file-saver";
import XLSX from "xlsx";
export default {
  data() {
    return {
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      value1: "",
      value2: "",
      tableData: [
        {
          company: "江西省永安保安服务有限公司",
          subOffice: "南昌市公安局",
          time: "2021年6月",
          sbjnrs: "12200",
          sbjnze: "400",
          gspqrs: "110",
          sbjnrszb: "10",
          bz: ""
        },
        {
          company: "南昌市赣水保安服务有限公司",
          subOffice: "东湖分局",
          time: "2021年6月",
          sbjnrs: "12200",
          sbjnze: "400",
          gspqrs: "110",
          sbjnrszb: "10",
          bz: ""
        },
        {
          company: "江西中业兴达保安服务有限公司",
          subOffice: "西湖分局",
          time: "2021年6月",
          sbjnrs: "12200",
          sbjnze: "400",
          gspqrs: "110",
          sbjnrszb: "10",
          bz: ""
        }
      ],
      typeValue: "0",
      typeOptions: [
        {
          value: "0",
          label: "全部"
        },
        {
          value: "1",
          label: "社保缴纳人数"
        },
        {
          value: "2",
          label: "社保缴纳总额"
        },
        {
          value: "3",
          label: "公司派遣人数"
        },
        {
          value: "4",
          label: "社保缴纳人数占比"
        }
      ],
      subofficeValue: "0",
      subofficeOptions: [
        {
          value: "0",
          label: "南昌市公安局"
        },
        {
          value: "2",
          label: "东湖分局"
        },
        {
          value: "3",
          label: "西湖分局"
        },
        {
          value: "4",
          label: "青云谱分局"
        },
        {
          value: "5",
          label: "青山湖分局"
        }
      ],
      companyName: ""
    };
  },
  methods: {
    downExcel() {
      let et = XLSX.utils.table_to_book(document.getElementById("table"));
      let etout = XLSX.write(et, {
        bookType: "xlsx",
        bookSST: true,
        type: "array"
      });
      try {
        FileSaver.saveAs(
          new Blob([etout], {
            type: "application/octet-stream"
          }),
          `表.xlsx`
        ); //导出的文件名
      } catch (e) {
        console.log(e, etout);
      }
      return etout;
    }
  },
  mounted() {}
};
</script>
<style lang="scss" scoped>
.operation-table {
  height: 100%;
  width: 100%;
  .el-row:first-child {
    height: 100px;
    margin-bottom: 20px;
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0px 0px 1px #fff;
    .el-col {
      padding: 20px;
      .el-date-editor {
        margin-right: 20px;
      }
      .el-select {
        width: 115px;
        margin-right: 20px;
      }
      .el-input {
        width: 115px;
        margin-right: 20px;
      }
      .el-button {
        width: 70px !important;
      }
    }
  }
  .el-row:nth-child(2) {
    height: calc(100% - 120px);
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0px 0px 1px #fff;
  }
  .el-col {
    height: 100%;
    span {
      color: #fff;
    }
  }
}
.table {
  padding: 20px;
  height: calc(100% - 40px);
  width: calc(100% - 40px);
  .el-button {
    width: 55px;
    height: 30px;
    padding: 0px;
    margin-left: calc(100% - 55px);
  }
}
/deep/ .el-table {
  width: 100%;
  height: calc(100% - 100px);
  margin: 10px 0px;
  .cell {
    color: #fff;
    text-align: center;
  }
}
.el-pagination {
  height: 40px;
  float: right;
}
</style>

 src/views/securityUnitOperation/operationAnalysis.vue

@@ -4,6 +4,7 @@
      <el-col :span="24">
        <div class="rowContent first-menu">
          <div class="rowTitle">
            <img src="../../../public/img/bajgxt/u1618.png" />
            <span>数据概览</span>
            <el-button>进入数据统计表</el-button>
            <el-select class="select1" v-model="value1" placeholder="请选择">
@@ -26,41 +27,41 @@
            </el-select>
          </div>

          <div style="display: flex ;margin-top: 15px;">
          <div class="col-content">
            <div class="box-card">
              <span>总保安数</span>
              <span>500</span>
              <span>较上月上涨2%</span>
              <span>23708</span>
              <span>较上月增加123人</span>
            </div>
            <div class="box-card">
              <span>正常保安员</span>
              <span>500</span>
              <span>较上月上涨2%</span>
              <span>22176</span>
              <span>较上月增加13人</span>
            </div>
            <div class="box-card">
              <span>持证保安员</span>
              <span>500</span>
              <span>较上月上涨2%</span>
              <span>21003</span>
              <span>较上月增加31人</span>
            </div>
            <div class="box-card">
              <span>过考保安员</span>
              <span>500</span>
              <span>较上月上涨2%</span>
              <span>21003</span>
              <span>较上月增加31人</span>
            </div>
            <div class="box-card">
              <span>服务客户</span>
              <span>500</span>
              <span>较上月上涨2%</span>
              <span>56</span>
              <span>较上月增加34人</span>
            </div>
            <div class="box-card">
              <span>缴纳社保</span>
              <span>500</span>
              <span>较上月上涨2%</span>
              <span>23708</span>
              <span>较上月增加3人</span>
            </div>
            <div class="box-card">
              <span>保安派遣</span>
              <span>500</span>
              <span>较上月上涨2%</span>
              <span>12720</span>
              <span>较上月增加31人</span>
            </div>
          </div>
        </div>
@@ -68,15 +69,22 @@
    </el-row>
    <el-row :gutter="20">
      <el-col :span="16">
        <div class="rowContent" id="middleEchart1"></div>
        <div class="rowContent">
          <span class="span-title">公司保安类数据对比</span>
          <div id="middleEchart1"></div>
        </div>
      </el-col>
      <el-col :span="8">
        <div class="rowContent" id="middleEchart2"></div>
        <div class="rowContent">
          <span class="span-title">服务客户</span>
          <div id="middleEchart2"></div>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div class="rowContent">
          <span class="span-title">公司运营趋势</span>
          <div id="bottomEchart"></div>
        </div>
      </el-col>
@@ -95,13 +103,37 @@
      options1: [
        {
          value: "1",
          label: "南昌市"
          label: "南昌市公安局"
        },
        {
          value: "2",
          label: "东湖分局"
        },
        {
          value: "3",
          label: "西湖分局"
        },
        {
          value: "4",
          label: "青云谱分局"
        },
        {
          value: "5",
          label: "青山湖分局"
        }
      ],
      options2: [
        {
          value: "1",
          label: "保安公司"
          label: "江西省永安保安服务有限公司"
        },
        {
          value: "2",
          label: "南昌市赣水保安服务有限公司"
        },
        {
          value: "3",
          label: "江西中业兴达保安服务有限公司"
        }
      ]
    };
@@ -130,22 +162,12 @@
.page1 {
  height: 100%;
  width: 100%;
  /* background: #003688; */
}
#bottomEchart,
#middleEchart1,
#middleEchart2 {
  height: 100%;
  height: calc(100% - 40px);
  width: 100%;
}
.rowContent {
  height: 20%;
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0px 0px 1px #fff;
}
.first-menu {
  padding: 5px 20px 20px 20px;
  height: calc(100% - 25px) !important;
}
.el-row:first-child {
  height: calc(40% - 80px);
@@ -158,9 +180,21 @@
.el-row:nth-child(3) {
  height: 30%;
}
.el-col,
.rowContent {
.el-col {
  height: 100%;
}
.rowContent {
  padding: 5px 20px 0px 10px;
  height: calc(100% - 5px);
  width: calc(100% - 30px);
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0px 0px 1px #fff;
  .span-title {
    color: #fff;
    font-size: 17px;
    margin-left: 35px;
    font-weight: 600;
  }
}
.box-card {
  width: 150px;
@@ -183,11 +217,17 @@
.rowTitle {
  height: 40px;
  display: flex;
  line-height: 40px;
  img {
    width: 30px;
    height: 30px;
    margin-top: 5px;
  }
  span {
    color: #fff;
    font-size: 25px;
    font-size: 17px;
    font-weight: 600;
    margin-right: 20px;
    margin-left: 11px;
  }
  .select1 {
    position: absolute;
@@ -205,4 +245,9 @@
    width: 120px;
  }
}
.col-content {
  display: flex;
  margin-top: 15px;
  margin-left: 36px;
}
</style>

 src/views/securityUnitOperation/operationTable.vue

@@ -1,17 +1,81 @@
<template>
  <div class="table1">
    <div class="about">
      <el-button @click="downExcel">下载</el-button>
      <el-table id="table" :data="tableData" stripe style="width: 100%">
        <el-table-column prop="date" label="日期" width="180">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="180">
        </el-table-column>
        <el-table-column prop="address" label="地址"> </el-table-column>
      </el-table>
      <el-pagination background layout="prev, pager, next" :total="1000">
      </el-pagination>
    </div>
  <div class="operation-table">
    <el-row>
      <el-col>
        <span>时间范围：</span>
        <el-date-picker
          v-model="value2"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
        >
        </el-date-picker>
        <span>类别：</span>
        <el-select v-model="typeValue" placeholder="请选择">
          <el-option
            v-for="item in typeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <span>分局：</span>
        <el-select v-model="subofficeValue" placeholder="请选择">
          <el-option
            v-for="item in subofficeOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <span>公司名称：</span>
        <el-input v-model="companyName"></el-input>
        <el-button>查询</el-button>
        <el-button>重置</el-button>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <div class="table">
          <el-button @click="downExcel">下载</el-button>
          <el-table id="table" :data="tableData" style="width: 100%">
            <el-table-column type="index" label="序号" width="50">
            </el-table-column>
            <el-table-column prop="company" label="公司名称" width="180">
            </el-table-column>
            <el-table-column prop="subOffice" label="所属分局" width="180">
            </el-table-column>
            <el-table-column prop="time" label="时间"> </el-table-column>
            <el-table-column prop="totalSec" label="总保安人数">
            </el-table-column>
            <el-table-column prop="normalSec" label="正常保安数">
            </el-table-column>
            <el-table-column prop="holderSec" label="持证保安数">
            </el-table-column>
            <el-table-column prop="sendSec" label="保安派遣数">
            </el-table-column>
            <el-table-column prop="passSec" label="过考保安数">
            </el-table-column>
            <el-table-column prop="unit" label="服务单位数"> </el-table-column>
            <el-table-column prop="socialSec" label="缴纳社保保安数">
            </el-table-column>
            <el-table-column prop="bz" label="备注"> </el-table-column>
          </el-table>
          <el-pagination
            background
            layout="prev, pager, next"
            :total="tableData.length"
          >
          </el-pagination>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
@@ -20,28 +84,139 @@
export default {
  data() {
    return {
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      value1: "",
      value2: "",
      tableData: [
        {
          date: "2016-05-02",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1518 弄",
          company: "江西省永安保安服务有限公司",
          subOffice: "南昌市公安局",
          time: "2020年7月",
          totalSec: "1200",
          normalSec: "1150",
          holderSec: "1160",
          sendSec: "1000",
          passSec: "1180",
          unit: "50",
          socialSec: "1180",
          bz: ""
        },
        {
          date: "2016-05-04",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1517 弄",
          company: "南昌市赣水保安服务有限公司",
          subOffice: "东湖分局",
          time: "2020年7月",
          totalSec: "1200",
          normalSec: "1150",
          holderSec: "1160",
          sendSec: "1000",
          passSec: "1180",
          unit: "50",
          socialSec: "1180",
          bz: ""
        },
        {
          date: "2016-05-01",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1519 弄",
        },
        {
          date: "2016-05-03",
          name: "王小虎",
          address: "上海市普陀区金沙江路 1516 弄",
        },
          company: "江西中业兴达保安服务有限公司",
          subOffice: "西湖分局",
          time: "2020年7月",
          totalSec: "1200",
          normalSec: "1150",
          holderSec: "1160",
          sendSec: "1000",
          passSec: "1180",
          unit: "50",
          socialSec: "1180",
          bz: ""
        }
      ],
      typeValue: "0",
      typeOptions: [
        {
          value: "0",
          label: "全部"
        },
        {
          value: "1",
          label: "总保安人数"
        },
        {
          value: "2",
          label: "正常保安数"
        },
        {
          value: "3",
          label: "持证保安数"
        },
        {
          value: "4",
          label: "保安派遣数"
        },
        {
          value: "5",
          label: "过考保安数"
        },
        {
          value: "6",
          label: "服务单位数"
        },
        {
          value: "7",
          label: "缴纳社保保安数"
        }
      ],
      subofficeValue: "0",
      subofficeOptions: [
        {
          value: "0",
          label: "南昌市公安局"
        },
        {
          value: "2",
          label: "东湖分局"
        },
        {
          value: "3",
          label: "西湖分局"
        },
        {
          value: "4",
          label: "青云谱分局"
        },
        {
          value: "5",
          label: "青山湖分局"
        }
      ],
      companyName: ""
    };
  },
  methods: {
@@ -50,12 +225,12 @@
      let etout = XLSX.write(et, {
        bookType: "xlsx",
        bookSST: true,
        type: "array",
        type: "array"
      });
      try {
        FileSaver.saveAs(
          new Blob([etout], {
            type: "application/octet-stream",
            type: "application/octet-stream"
          }),
          `表.xlsx`
        ); //导出的文件名
@@ -63,15 +238,72 @@
        console.log(e, etout);
      }
      return etout;
    },
    }
  },
  mounted() {},
  mounted() {}
};
</script>
<style>
.table1 {
<style lang="scss" scoped>
.operation-table {
  height: 100%;
  width: 1005;
  display: none;
  width: 100%;
  .el-row:first-child {
    height: 100px;
    margin-bottom: 20px;
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0px 0px 1px #fff;
    .el-col {
      padding: 20px;
      .el-date-editor {
        margin-right: 20px;
      }
      .el-select {
        width: 115px;
        margin-right: 20px;
      }
      .el-input {
        width: 115px;
        margin-right: 20px;
      }
      .el-button {
        width: 70px !important;
      }
    }
  }
  .el-row:nth-child(2) {
    height: calc(100% - 120px);
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0px 0px 1px #fff;
  }
  .el-col {
    height: 100%;
    span {
      color: #fff;
    }
  }
}
.table {
  padding: 20px;
  height: calc(100% - 40px);
  width: calc(100% - 40px);
  .el-button {
    width: 55px;
    height: 30px;
    padding: 0px;
    margin-left: calc(100% - 55px);
  }
}
/deep/ .el-table {
  width: 100%;
  height: calc(100% - 100px);
  margin: 10px 0px;
  .cell {
    color: #fff;
    text-align: center;
  }
}
.el-pagination {
  height: 40px;
  float: right;
}
</style>

 src/views/securityUnitOperation/securityEchart.js

@@ -1,10 +1,27 @@
function bottomOption(data) {
  let option = {
    title: {
      text: "公司运营趋势",
    // title: {
    //   text: "公司运营趋势",
    //   textStyle: {
    //     color: "#fff"
    //   }
    // },
    grid: {
      top: "10%",
      left: "3%",
      right: "4%",
      bottom: "15%",
      containLabel: true
    },
    legend: {
      data: ["趋势"],
      bottom: "0%",
      textStyle: {
        color: "#fff"
      }
    },
    tooltip: {
      trigger: "item"
    },
    xAxis: {
      type: "category",
@@ -35,7 +52,8 @@
    },
    series: [
      {
        data: [820, 932, 901, 934, 1290, 1330, 1320, 132, 1111, 321, 342, 134],
        name: "趋势",
        data: [0.1, 0.3, 0.2, 0.5, 0.1,0.4, 0.32, 0.13, 0.21, 0.12, 0.25, 0.11],
        type: "line",
        smooth: true,
        areaStyle: {}
@@ -46,12 +64,12 @@
}
function middleOption1(data) {
  let option = {
    title: {
      text: "公司保安类数据对比",
      textStyle: {
        color: "#fff"
      }
    },
    // title: {
    //   text: "公司保安类数据对比",
    //   textStyle: {
    //     color: "#fff"
    //   }
    // },
    tooltip: {
      trigger: "axis"
    },
@@ -64,13 +82,14 @@
        "缴纳社保保安数",
        "缴纳社保数"
      ],
      bottom: "2%",
      bottom: "0%",
      textStyle: {
        color: "#fff"
      }
    },
    grid: {
      left: "3%",
      top: "10%",
      left: "5%",
      right: "4%",
      bottom: "15%",
      containLabel: true
@@ -145,12 +164,12 @@
}
function middleOption2(data) {
  let option = {
    title: {
      text: "服务客户",
      textStyle: {
        color: "#fff"
      }
    },
    // title: {
    //   text: "服务客户",
    //   textStyle: {
    //     color: "#fff"
    //   }
    // },
    tooltip: {
      trigger: "axis",
      axisPointer: {
@@ -159,15 +178,16 @@
    },
    legend: {
      data: ["客户数"],
      bottom: "5%",
      bottom: "0%",
      textStyle: {
        color: "#fff"
      }
    },
    grid: {
      left: "3%",
      top: "10%",
      left: "12%",
      right: "4%",
      bottom: "7%",
      bottom: "15%",
      containLabel: true
    },
    xAxis: {
@@ -199,9 +219,132 @@
    },
    series: [
      {
        name: "2011年",
        name: "客户数",
        type: "bar",
        data: [231, 123, 441, 123, 321, 333, 111, 221, 332, 442, 132, 51]
      }
    ]
  };
  return option;
}

function economicMiddle(data) {
  let option = {
    // title: {
    //   text: "公司保安类数据对比",
    //   textStyle: {
    //     color: "#fff"
    //   }
    // },
    tooltip: {
      trigger: "axis"
    },
    legend: {
      data: [
        "缴纳社保人数",
        '公司派遣人数'
      ],
      bottom: "0%",
      textStyle: {
        color: "#fff"
      }
    },
    grid: {
      top: "10%",
      left: "5%",
      right: "4%",
      bottom: "15%",
      containLabel: true
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      axisLabel: {
        color: "#fff"
      },
      data: [
        "一月",
        "二月",
        "三月",
        "四月",
        "五月",
        "六月",
        "七月",
        "八月",
        "九月",
        "十月",
        "十一月",
        "十二月"
      ]
    },
    yAxis: {
      type: "value",
      axisLabel: {
        color: "#fff"
      }
    },
    series: [
      {
        name: "缴纳社保人数",
        type: "line",
        stack: "总量",
        data: [120, 132, 101, 134, 90, 230, 210, 214, 123, 22, 132, 321]
      },
      {
        name: "公司派遣人数",
        type: "line",
        stack: "总量",
        data: [220, 182, 191, 234, 290, 330, 310, 111, 222, 132, 143, 123]
      },
    ]
  };
  return option;
}
function economicPieOption() {
  let title = "总";
  let total = "111";
  let option = {
    title: [
      {
        text: "{name|" + title + "}\n{val|" + total + "}",
        top: "center",
        left: "center",
        textStyle: {
          rich: {
            name: {
              fontSize: 14,
              fontWeight: "normal",
              color: "#fff",
              padding: [10, 0]
            },
            val: {
              fontSize: 20,
              fontWeight: "bold",
              color: "#fff"
            }
          }
        }
      }
    ],
    tooltip: {
      trigger: "item"
    },
    legend: {
      bottom: "0%",
      left: "center",
      textStyle: {
        color: "#fff"
      }
    },
    series: [
      {
        name: "人员分布",
        type: "pie",
        radius: ["40%", "70%"],
        data: [
          { value: 1048, name: "已派遣人数" },
          { value: 735, name: "未派遣人" }
        ]
      }
    ]
  };
@@ -211,5 +354,7 @@
export default {
  bottomOption,
  middleOption1,
  middleOption2
  middleOption2,
  economicMiddle,
  economicPieOption
};