Merge branch 'master' of http://192.168.0.105:10010/r/zhba_regulatory

liuyg

2021-08-16 3f07a091808431641b106c17f636033e79d74cd1

Merge branch 'master' of http://192.168.0.105:10010/r/zhba_regulatory

 src/api/index/index.js

@@ -80,6 +80,12 @@
    params: params
  });
};
export const selectExtypeUser = () => {
  return request({
    url: "/api/information/selectExtypeUser",
    method: "post",
  });
};

 


 src/components/map/main.vue

@@ -90,91 +90,91 @@
    },
    mounted () {
        // 本地开发使用
        this.ol2d = new OlMap({
            layers: [
                new OlLayerTile({
                    zIndex: 4,
                    title: '影像',
                    source: new XYZ({
                        url: "https://webmap-tile.sf-express.com/MapTileService/rt?fetchtype=static&x={x}&y={y}&z={z}&project=sfmap&pic_size=256&pic_type=png8&data_name=361100&data_format=merged-dat&data_type=normal" // 行政区划
                    })
                })
                // ,
                // new OlLayerTile({
                //     zIndex: 5,
                //     title: '道路+中文注记',
                //     source: new XYZ({
                //         url: 'http://t3.tianditu.com/DataServer?T=cta_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0' // 注记
                //     })
                // })
            ],

            // 注意地图控件的写法
            controls: defaults().extend([
                new FullScreen(),
                new ScaleLine(),
                new MousePosition(),
                new Rotate(),
                new Attribution()
            ]),
            target: 'track_map',
            view: new OlView({
                center: [0, 0],
                zoom: 2,
                projection: 'EPSG:4326'
            })
        })

        // var projection = getProjection("EPSG:4326");
        // var projectionExtent = projection.getExtent();
        // var size = getWidth(projectionExtent) / 256;
        // var resolutions = [];
        // for (var z = 2; z < 19; ++z) {//计算比例尺
        //     resolutions[z] = size / Math.pow(2, z);
        // }

        // // 正式服务器上使用
        // this.ol2d = new OlMap({
        //     layers: [
        //         new OlLayerTile({//矢量地图

        //             source: new WMTS({
        //                 url: "http://47.49.21.207:7001/PGIS_S_TileMapServer/Maps/YX",
        //                 layer: "JX14YGJCIMGL7_L14",
        //                 style: "default",
        //                 matrixSet: "JX14YGJCIMGL7_L14",
        //                 format: "image/png",
        //                 wrapX: true,
        //                 tileGrid: new WMTSTileGrid({
        //                     origin: getTopLeft(projectionExtent),
        //                     //resolutions: res.slice(0, 15),
        //                     resolutions: resolutions,
        //                     matrixIds: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]
        //                 })
        //             }),

        //         new OlLayerTile({
        //             zIndex: 4,
        //             title: '影像',
        //             source: new XYZ({
        //                 url: "https://webmap-tile.sf-express.com/MapTileService/rt?fetchtype=static&x={x}&y={y}&z={z}&project=sfmap&pic_size=256&pic_type=png8&data_name=361100&data_format=merged-dat&data_type=normal" // 行政区划
        //             })
        //         })
        //         // ,
        //         // new OlLayerTile({
        //         //     zIndex: 5,
        //         //     title: '道路+中文注记',
        //         //     source: new XYZ({
        //         //         url: 'http://t3.tianditu.com/DataServer?T=cta_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0' // 注记
        //         //     })
        //         // })
        //     ],

        //     // 注意地图控件的写法
        //     controls: defaults().extend([
        //         new FullScreen(),
        //         new ScaleLine(),
        //         // new MousePosition(),
        //         new MousePosition(),
        //         new Rotate(),
        //         new Attribution()
        //     ]),
        //     target: 'track_map',
        //     view: new OlView({
        //         center: [115.85883507433789, 28.708432053474827],
        //         projection: projection,
        //         zoom: 11,
        //         maxZoom: 15,
        //         minZoom: 1

        //         center: [0, 0],
        //         zoom: 2,
        //         projection: 'EPSG:4326'
        //     })
        // })

        var projection = getProjection("EPSG:4326");
        var projectionExtent = projection.getExtent();
        var size = getWidth(projectionExtent) / 256;
        var resolutions = [];
        for (var z = 2; z < 19; ++z) {//计算比例尺
            resolutions[z] = size / Math.pow(2, z);
        }

        // 正式服务器上使用
        this.ol2d = new OlMap({
            layers: [
                new OlLayerTile({//矢量地图

                    source: new WMTS({
                        url: "http://47.49.21.207:7001/PGIS_S_TileMapServer/Maps/YX",
                        layer: "JX14YGJCIMGL7_L14",
                        style: "default",
                        matrixSet: "JX14YGJCIMGL7_L14",
                        format: "image/png",
                        wrapX: true,
                        tileGrid: new WMTSTileGrid({
                            origin: getTopLeft(projectionExtent),
                            //resolutions: res.slice(0, 15),
                            resolutions: resolutions,
                            matrixIds: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]
                        })
                    }),

                })
            ],

            // 注意地图控件的写法
            controls: defaults().extend([
                new FullScreen(),
                new ScaleLine(),
                // new MousePosition(),
                new Rotate(),
                new Attribution()
            ]),
            target: 'track_map',
            view: new OlView({
                center: [115.85883507433789, 28.708432053474827],
                projection: projection,
                zoom: 11,
                maxZoom: 15,
                minZoom: 1

            })
        })

        this.parentParameter();

        window.ol2d = this.ol2d

 src/router/views/index.js

@@ -328,20 +328,48 @@
                import( /* webpackChunkName: "views" */ '@/views/securityUnitOperation/operationTable')
        }]
    }, 
    // {
    //     path: '/securityUnitOperation/economicTable',
    //     redirect: '/securityUnitOperation/economicTable/index',
    //     component: Layout,
    //     children: [{
    //         path: 'index',
    //         name: '公司经济情况智能分析详情表',
    //         meta: {
    //             i18n: 'index',
    //         },
    //         component: () =>
    //             import( /* webpackChunkName: "views" */ '@/views/securityUnitOperation/economicTable')
    //     }]
    // },
    {
        path: '/securityUnitOperation/economicTable',
        redirect: '/securityUnitOperation/economicTable/index',
        path: '/statisticalQueryManagement/companyDetails',
        redirect: '/statisticalQueryManagement/companyDetails/index',
        component: Layout,
        children: [{
            path: 'index',
            name: '公司经济情况智能分析详情表',
            name: '保安公司人员详情',
            meta: {
                i18n: 'index',
            },
            component: () =>
                import( /* webpackChunkName: "views" */ '@/views/securityUnitOperation/economicTable')
                import( /* webpackChunkName: "views" */ '@/views/statisticalQueryManagement/companyDetails')
        }]
    },
    // {
    //     path: '/securityUnitOperation/economicTable',
    //     redirect: '/securityUnitOperation/economicTable/index',
    //     component: Layout,
    //     children: [{
    //         path: 'index',
    //         name: '公司经济情况智能分析详情表',
    //         meta: {
    //             i18n: 'index',
    //         },
    //         component: () =>
    //             import( /* webpackChunkName: "views" */ '@/views/securityUnitOperation/economicTable')
    //     }]
    // },
    {
        path: '/statisticalQueryManagement/companyDetails',
        redirect: '/statisticalQueryManagement/companyDetails/index',
@@ -371,31 +399,17 @@
        }]
    },
    {
        path: '/statisticalQueryManagement/companyDetails',
        redirect: '/statisticalQueryManagement/companyDetails/index',
        path: '/statisticalQueryManagement/businessStatisticsDetail',
        redirect: '/statisticalQueryManagement/businessStatisticsDetail/index',
        component: Layout,
        children: [{
            path: 'index',
            name: '保安公司人员详情',
            name: '业务情况明细',
            meta: {
                i18n: 'index',
            },
            component: () =>
                import( /* webpackChunkName: "views" */ '@/views/statisticalQueryManagement/companyDetails')
        }]
    },
    {
        path: '/securityUnitOperation/economicTable',
        redirect: '/securityUnitOperation/economicTable/index',
        component: Layout,
        children: [{
            path: 'index',
            name: '公司经济情况智能分析详情表',
            meta: {
                i18n: 'index',
            },
            component: () =>
                import( /* webpackChunkName: "views" */ '@/views/securityUnitOperation/economicTable')
                import( /* webpackChunkName: "views" */ '@/views/statisticalQueryManagement/businessStatisticsDetail')
        }]
    }
]

 src/views/home/echarts-auto-tooltip.js

New file
@@ -0,0 +1,176 @@
(function (global) {
    global.echartAutoTools = global.echartAutoTools || {};

    /**
     *  echarts tooltip 自动轮播
     *  @author liuyishi
     *  @param chart
     *  @param chartOption
     *  @param options
     *  {
     *  interval    轮播时间间隔，单位毫秒，默认为2000
     *  loopSeries  boolean类型，默认为false。
     *              true表示循环所有series的tooltip，false则显示指定seriesIndex的tooltip
     *     seriesIndex 默认为0，指定某个系列（option中的series索引）循环显示tooltip，
     *                 当loopSeries为true时，从seriesIndex系列开始执行.
     *  }
     * @returns {{clearLoop: clearLoop}}
     */

     echartAutoTools.loopShowTooltip = function (chart, chartOption, options) {
        var defaultOptions = {
            interval: 10000,
            loopSeries: false,
            seriesIndex: 1,
            updateData: null
        };

        if (!chart || !chartOption) {
            return {};
        }

        var dataIndex = 0; // 数据索引，初始化为-1，是为了判断是否是第一次执行
        var seriesIndex = 1; // 系列索引
        var timeTicket = 0;
        var seriesLen = chartOption.series.length; // 系列个数
        var dataLen = 0; // 某个系列数据个数
        var chartType; // 系列类型
        var first = true;

        // 不循环series时seriesIndex指定显示tooltip的系列，不指定默认为0，指定多个则默认为第一个
        // 循环series时seriesIndex指定循环的series，不指定则从0开始循环所有series，指定单个则相当于不循环，指定多个
        // 要不要添加开始series索引和开始的data索引？

        if (options) {
            options.interval = options.interval || defaultOptions.interval;
            options.loopSeries = options.loopSeries || defaultOptions.loopSeries;
            options.seriesIndex = options.seriesIndex || defaultOptions.seriesIndex;
            options.updateData = options.updateData || defaultOptions.updateData;
        } else {
            options = defaultOptions;
        }

        // 如果设置的seriesIndex无效，则默认为0
        if (options.seriesIndex < 0 || options.seriesIndex >= seriesLen) {
            seriesIndex = 1;
        } else {
            seriesIndex = options.seriesIndex;
        }

        function autoShowTip() {
            function showTip() {
                seriesIndex = 1;
                // 判断是否更新数据
                if (dataIndex === 0 && !first && typeof options.updateData === "function") {
                    options.updateData();
                    chart.setOption(chartOption);
                }

                var series = chartOption.series;
                chartType = series[seriesIndex].type; // 系列类型
                dataLen = series[seriesIndex].data.length; // 某个系列的数据个数

                var tipParams = { seriesIndex: seriesIndex };
                switch (chartType) {
                    case 'map':
                    case 'pie':
                    case 'chord':
                        tipParams.name = series[seriesIndex].data[dataIndex].name;
                        break;
                    case 'radar': // 雷达图
                        tipParams.seriesIndex = seriesIndex;
                        tipParams.dataIndex = dataIndex;
                        break;
                    default:
                        tipParams.dataIndex = dataIndex;
                        break;
                }

                if (chartType === 'pie' || chartType === 'radar') {
                    // 取消之前高亮的图形
                    chart.dispatchAction({
                        type: 'downplay',
                        seriesIndex: options.loopSeries ? (seriesIndex === 1 ? seriesLen - 1 : seriesIndex - 1) : seriesIndex,
                        dataIndex: dataIndex === 0 ? dataLen - 1 : dataIndex - 1
                    });

                    // 高亮当前图形
                    chart.dispatchAction({
                        type: 'highlight',
                        seriesIndex: seriesIndex,
                        dataIndex: dataIndex
                    });
                }

                // 显示 tooltip
                tipParams.type = 'showTip';
                chart.dispatchAction(tipParams);

                dataIndex = (dataIndex + 1) % dataLen;
                if (options.loopSeries && dataIndex === 0 && !first) { // 数据索引归0表示当前系列数据已经循环完
                    seriesIndex = (seriesIndex + 1) % seriesLen;
                }

                first = false;
            }

            showTip();
            timeTicket = setInterval(showTip, options.interval);
        }

        // 关闭轮播
        function stopAutoShow() {
            if (timeTicket) {
                clearInterval(timeTicket);
                timeTicket = 0;

                if (chartType === 'pie' || chartType === 'radar') {
                    // 取消高亮的图形
                    chart.dispatchAction({
                        type: 'downplay',
                        seriesIndex: options.loopSeries ? (seriesIndex === 1 ? seriesLen - 1 : seriesIndex - 1) : seriesIndex,
                        dataIndex: dataIndex === 0 ? dataLen - 1 : dataIndex - 1
                    });
                }
            }
        }

        var zRender = chart.getZr();

        function zRenderMouseMove(param) {
            if (param.event) {
                // 阻止canvas上的鼠标移动事件冒泡
                param.event.cancelBubble = true;
            }

            stopAutoShow();
        }

        // 离开echarts图时恢复自动轮播
        function zRenderGlobalOut() {
            if (!timeTicket) {
                autoShowTip();
            }
        }

        // 鼠标在echarts图上时停止轮播
        chart.on('mousemove', stopAutoShow);
        zRender.on('mousemove', zRenderMouseMove);
        zRender.on('globalout', zRenderGlobalOut);

        autoShowTip();

        return {
            clearLoop: function () {
                if (timeTicket) {
                    clearInterval(timeTicket);
                    timeTicket = 0;
                }

                chart.off('mousemove', stopAutoShow);
                zRender.off('mousemove', zRenderMouseMove);
                zRender.off('globalout', zRenderGlobalOut);
            }
        };
    };
})(window);

 src/views/home/index.scss

@@ -222,8 +222,8 @@
        width: 44px;
        height: 56px;
        position: absolute;
        margin-left: -7px;
        margin-top: -9px;
        left: -7px;
        top: -9px;
      }
      .leftbottom {
        background: url("../../../public/img/bajgxt/leftbottom.png") no-repeat;
@@ -231,8 +231,8 @@
        width: 44px;
        height: 56px;
        position: absolute;
        margin-left: -7px;
        margin-top: calc(40% - 66px);
        left: -7px;
        bottom: -7px;
      }
      .righttop {
        background: url("../../../public/img/bajgxt/righttop.png") no-repeat;
@@ -240,8 +240,8 @@
        width: 44px;
        height: 56px;
        position: absolute;
        margin-left: calc(100% - 37px);
        margin-top: -9px;
        left: calc(100% - 37px);
        top: -9px;
      }
      .rightbottom {
        background: url("../../../public/img/bajgxt/rightbottom.png") no-repeat;
@@ -249,8 +249,8 @@
        width: 44px;
        height: 56px;
        position: absolute;
        margin-left: calc(100% - 37px);
        margin-top: calc(40% - 66px);
        left: calc(100% - 37px);
        bottom: -7px;
      }
    }
  }
@@ -276,7 +276,7 @@
  .el-table th.is-leaf {
    border-bottom-color: transparent;
  }
  /deep/ .el-table__header th{
  /deep/ .el-table__header th {
    border-bottom: 1px solid #031a38 !important;
  }
  /deep/.el-table--enable-row-hover .el-table__body tr:hover > td {
@@ -339,7 +339,7 @@
    padding: 15px;
  }
  .card-list {
    margin: 15px 60px 10px 90px;
    margin: 15px 60px 10px 50px;
    display: flex;
    height: 55px;
    line-height: 55px;
@@ -424,190 +424,241 @@
    height: 100%;
  }
}
.left2-btn{
.left2-btn {
  height: 21px;
  width: 69px;
  background-color: #0445b5;
  background-color: #4478d0;
  color: #fff;
  font-size: 13px !important;
  font-weight: 700;
  color: #fff !important;

  line-height: 21px !important;
  text-align: center;
  position: absolute;
  cursor: pointer;
}
.left2-btn.btn1{
.left2-btn.btn1 {
  right: 106px;
  margin-top: 25px;
}
.left2-btn.btn2{
.left2-btn.btn2 {
  right: 25px;
  margin-top: 25px;
}
.left2-btn.date{
  margin-left: 74px;
.left2-btn.date {
  right: 47px;
  margin-top: 27px;
}
.left2-btn.mounce{
  margin-left: 208px;
.left2-btn.mounce {
  right: 47px;
  margin-top: 71px;
}
.left2-btn.all{
  right: 100px;
.left2-btn.all {
  right: 47px;
  margin-top: 114px;
}

.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;
      }
    }
.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;
  }
  .rightData1{
    margin-left: 42px;
    margin-top: 23px;
  }
  .rightData2{
    margin-left: 58px;
    margin-top: 23px;
  }
  .rightData3{
    margin-top: 21px;
    margin-left: 42px;
  }
  .rightData4{
    margin-top: 21px;
    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 {
  .text {
    width: 100px;
    text-align: center;
    // margin: 3px;
    line-height: 25px;
    span:nth-child(1) {
      width: 100%;
      position: absolute;
      bottom: 0;
      display: block;
      font-size: 14px;
    }
    .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;
    span:nth-child(2) {
      width: 100%;
      display: block;
      color: #00ccff;
      font-size: 15px;
    }
  }
  .leftEchartTitle{
    height: 30px;
    display: flex;
    line-height: 30px;
    margin-top: 10px;
    margin-left: 28px;
}
.rightData1 {
  margin-left: 42px;
  margin-top: 23px;
}
.rightData2 {
  margin-left: 58px;
  margin-top: 23px;
}
.rightData3 {
  margin-top: 21px;
  margin-left: 42px;
}
.rightData4 {
  margin-top: 21px;
  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;
    .block1{
      width: 23px;
      height: 13px;
      background: #2ec7c9;
      border-radius: 3px;
      margin-top: 9px;
    }
    span:nth-child(2){
      color: #fff;
      font-size: 13px;
      margin: 0px 10px 0px 3px;
    }
    span:nth-child(3){
      color: #2ec7c9;
    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;
  }
}
.leftEchartTitle {
  height: 30px;
  display: flex;
  line-height: 30px;
  margin-top: 10px;
  margin-left: 28px;
  position: absolute;
  .block1 {
    width: 23px;
    height: 13px;
    background: #2ec7c9;
    border-radius: 3px;
    margin-top: 9px;
  }
  span:nth-child(2) {
    color: #fff;
    font-size: 13px;
    margin: 0px 10px 0px 3px;
  }
  span:nth-child(3) {
    color: #2ec7c9;
    font-size: 17px;
    font-weight: 700;
    display: block;
    width: 65px;
    text-align: center;
    }
    span:nth-child(4){
      font-size: 13px;
      color: #2ec7c9;
    }
  }
  .leftEchartTitle2{
    right: 35px;
    .block1{
      background: #b6a2de;
    }
    span:nth-child(3){
      color: #b6a2de;
  span:nth-child(4) {
    font-size: 13px;
    color: #2ec7c9;
  }
}
.leftEchartTitle2 {
  right: 35px;
  .block1 {
    background: #b6a2de;
  }
  span:nth-child(3) {
    color: #b6a2de;
    font-size: 15px;
    }
  }
  .leftEchartTitle3{
    margin-top: 37px;
    .block1{
      background: #5ab1ef;
    }
    span:nth-child(3){
      color: #5ab1ef;
}
.leftEchartTitle3 {
  margin-top: 37px;
  .block1 {
    background: #5ab1ef;
  }
  span:nth-child(3) {
    color: #5ab1ef;
    font-size: 15px;
    }
  }
  .leftEchartTitle4{
    margin-top: 37px;
    right: 35px;
    .block1{
      background: #ffb980;
    }
    span:nth-child(3){
      color: #ffb980;
}
.leftEchartTitle4 {
  margin-top: 37px;
  right: 22px;
  .block1 {
    background: #ffb980;
  }
  span:nth-child(3) {
    color: #ffb980;
    font-size: 15px;
    }
  }
  .leftEchartTitle5{
    margin-top: 64px;
    .block1{
      background: #fc8452;
    }
    span:nth-child(3){
      color: #fc8452;
}
.leftEchartTitle5 {
  margin-top: 64px;
  .block1 {
    background: #fc8452;
  }
  span:nth-child(3) {
    color: #fc8452;
    font-size: 15px;
    }
  }


}
.bayHover {
  background-color: #0445b5;
  color: #fff !important;
}
.leftEchartTitle.xbNan {
  right: 47px;
  margin-top: 76px;
  .block1 {
    width: 30px;
    height: 15px;
    background: #008dec;
    margin-top: 7px;
  }
  span:nth-child(2) {
    color: #fff;
    font-size: 13px;
  }
  span:nth-child(3) {
    color: #008dec;
    font-size: 17px;
  }
  span:nth-child(4) {
    font-size: 13px;
    color: #008dec;
  }
}
.leftEchartTitle.xbNv {
  right: 47px;
  margin-top: 135px;
  .block1 {
    width: 30px;
    height: 15px;
    background: #886eff;
    margin-top: 7px;
  }
  span:nth-child(2) {
    color: #fff;
    font-size: 13px;
  }
  span:nth-child(3) {
    color: #886eff;
    font-size: 17px;
  }
  span:nth-child(4) {
    font-size: 13px;
    color: #886eff;
  }
}

 src/views/home/index.vue

@@ -30,13 +30,13 @@
            <span>{{ leftData.fw }}</span>
            <span>个</span>
          </div>
          <div class="leftEchartTitle leftEchartTitle4">
          <!-- <div class="leftEchartTitle leftEchartTitle4">
            <div class="block1"></div>
            <span>武装守押公司</span>
            <span>{{ leftData.wz }}</span>
            <span>个</span>
          </div>
          <div class="leftEchartTitle leftEchartTitle5">
          </div> -->
          <div class="leftEchartTitle leftEchartTitle4">
            <div class="block1"></div>
            <span>跨区域保安公司</span>
            <span>{{ leftData.kqy }}</span>
@@ -48,23 +48,42 @@
          <div class="title-pane2">
            <img src="../../../public/img/bajgxt/icon1.png" />
            <span>保安员持证情况</span>
            <span class="left2-btn btn1" @click="getHolderNum(0)"
            <span
              class="left2-btn btn1"
              :class="[left2EchartType === 0 ? 'bayHover' : '']"
              @click="getHolderNum(0)"
              >辖区统计</span
            >
            <span class="left2-btn btn2" @click="getHolderNum(1)"
            <span
              class="left2-btn btn2"
              :class="[left2EchartType === 1 ? 'bayHover' : '']"
              @click="getHolderNum(1)"
              >男女结构</span
            >
          </div>

          <div v-if="left2EchartType === 1" class="leftEchartTitle xbNan">
            <div class="block1"></div>
            <span>男</span>
            <span>{{ leftData.nan }}</span>
            <span>人</span>
          </div>
          <div v-if="left2EchartType === 1" class="leftEchartTitle xbNv">
            <div class="block1"></div>
            <span>女</span>
            <span>{{ leftData.nv }}</span>
            <span>人</span>
          </div>
          <div id="left2Echart" v-loading="left2loading"></div>
        </div>
      </div>
      <div class="middle" v-loading="middleloading">
        <div class="mapimg">
          <div class="textBox">
          <!-- <div class="textBox">
            <transition name="slide">
              <p class="text" :key="text.id">{{ text.val }}</p>
            </transition>
          </div>
          </div> -->

          <!-- <div></div> -->
          <div class="mapBtn" @click="setMapData(2)">
@@ -226,16 +245,25 @@
            </el-select>
          </div>
          <div class="right-content" v-loading="right1loading">
            <span class="left2-btn date" @click="getPoorPerformance(0)"
            <span
              class="left2-btn date"
              :class="[poorPerformanceType === 0 ? 'bayHover' : '']"
              @click="getPoorPerformance(0)"
              >当日</span
            >
            <span class="left2-btn mounce" @click="getPoorPerformance(1)"
            <span
              class="left2-btn mounce"
              :class="[poorPerformanceType === 1 ? 'bayHover' : '']"
              @click="getPoorPerformance(1)"
              >当月</span
            >
            <span class="left2-btn all" @click="getPoorPerformance(2)"
            <span
              class="left2-btn all"
              :class="[poorPerformanceType === 2 ? 'bayHover' : '']"
              @click="getPoorPerformance(2)"
              >全部</span
            >
            <div class="card-list" style="margin-top: 38px">
            <div class="card-list" style="margin-top: 21px">
              <img src="../../../public/img/bajgxt/u4.png" />
              <img src="../../../public/img/bajgxt/u256.png" />
              <img src="../../../public/img/bajgxt/u1.png" />
@@ -277,28 +305,28 @@
            <div class="rightData rightData1">
              <img src="../../../public/img/bajgxt/u231.png" alt />
              <div class="text">
                <span>数据未更新</span>
                <span>45条</span>
                <span>数据更新异常</span>
                <span>45个</span>
              </div>
            </div>
            <div class="rightData rightData2">
              <img src="../../../public/img/bajgxt/u232.png" alt />
              <div class="text">
                <span>资质不全</span>
                <span>资质未过审</span>
                <span>23个</span>
              </div>
            </div>
            <div class="rightData rightData3">
              <img src="../../../public/img/bajgxt/u233.png" alt />
              <div class="text">
                <span>没开展业务</span>
                <span>业务经营异常</span>
                <span>12个</span>
              </div>
            </div>
            <div class="rightData rightData4">
              <img src="../../../public/img/bajgxt/111.png" alt />
              <div class="text">
                <span>被公安查处</span>
                <span>监管处罚</span>
                <span>6个</span>
              </div>
            </div>
@@ -336,22 +364,23 @@
</template>

<script>
import "ol/ol.css";
import "./echarts-auto-tooltip";
// import "ol/ol.css";
import * as echarts from "echarts";
import optionJs from "./indexEchart";
import TileLayer from "ol/layer/Tile";
// import TileLayer from "ol/layer/Tile";
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 { 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 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 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,
@@ -365,6 +394,7 @@
  selectExtype,
  seCountUg,
  seCountI,
  selectExtypeUser
} from "../../api/index/index";

import car from "@/assets/img/car.png";
@@ -389,7 +419,7 @@
        poorPerformance: 0,
        qualification: 0,
        socialSecurity: 0,
        noholder: 0,
        noholder: 0
      },
      carNum: 0,
      peoNum: 0,
@@ -399,7 +429,7 @@
        left1Echart: null,
        left2Echart: null,
        mapEchart: null,
        right3Echart: null,
        right3Echart: null
      },
      left1loading: true,
      left2loading: true,
@@ -414,17 +444,21 @@
        px: 0,
        fw: 0,
        wz: 0,
        kqy:0
        kqy: 0,
        nan: 0,
        nv: 0
      },
      left2EchartType: 0,
      poorPerformanceType: 2
    };
  },
  computed: {
    text() {
      return {
        id: this.number,
        val: this.textArr[this.number],
        val: this.textArr[this.number]
      };
    },
    }
  },
  methods: {
    startMove() {
@@ -440,7 +474,7 @@
    },
    // 左侧表的接口返回数据
    initEchart() {
      securityTotal().then((res) => {
      securityTotal().then(res => {
        if (res.data.code == 200) {
          let securityData = res.data.data;
          if (!this.echarts.left1Echart) {
@@ -454,10 +488,10 @@
        }
        this.left1loading = false;
      });
      seCountI({ jurisdiction: "", deptid: "" }).then((res) => {
      seCountI({ jurisdiction: "", deptid: "" }).then(res => {
        if (res.data.code == 200) {
          let data = res.data.data;
          data.forEach((item) => {
          data.forEach(item => {
            if (item.stats === "0") {
              this.leftData.zz = item.num;
            }
@@ -478,7 +512,7 @@
          this.$message.error(res.msg);
        }
      });
      selectFj().then((res) => {
      selectFj().then(res => {
        if (res.data.code === 200) {
          if (!this.echarts.right3Echart) {
            this.echarts.right3Echart = echarts.init(
@@ -496,12 +530,13 @@
    },

    getHolderNum(type) {
      this.left2EchartType = type;
      this.left2loading = true;
      if (this.echarts.left2Echart) {
        this.echarts.left2Echart.clear();
      }
      if (type === 0) {
        holderNum().then((res) => {
        holderNum().then(res => {
          if (res.data.code === 200) {
            let data = res.data.data;
            this.echarts.left2Echart = echarts.init(
@@ -514,7 +549,7 @@
          this.left2loading = false;
        });
      } else {
        seCountUg({ jurisdiction: "", deptid: "" }).then((res) => {
        seCountUg({ jurisdiction: "", deptid: "" }).then(res => {
          if (res.data.code === 200) {
            this.echarts.left2Echart = echarts.init(
              document.getElementById("left2Echart")
@@ -522,6 +557,8 @@
            this.echarts.left2Echart.setOption(
              optionJs.left3Data(res.data.data, true)
            );
            this.leftData.nan = res.data.data[0].mnum;
            this.leftData.nv = res.data.data[0].gnum;
          }
          this.left2loading = false;
        });
@@ -532,6 +569,11 @@
        this.echarts.mapEchart = echarts.init(document.getElementById("map"));
      }
      this.echarts.mapEchart.setOption(optionJs.middleData(data, type));
      echartAutoTools.loopShowTooltip(
        this.echarts.mapEchart,
        optionJs.middleData(data, type),
        { loopSeries: true }
      );
    },
    setMapData(type) {
      this.middleloading = true;
@@ -541,7 +583,7 @@
      this.middleloading = false;
      this.textArr = [];
      if (type === 2) {
        this.tableData.forEach((item) => {
        this.tableData.forEach(item => {
          let obj =
            "押运车辆车牌号" +
            item.carNum +
@@ -556,7 +598,7 @@
          this.textArr.push(obj);
        });
      } else if (type === 1) {
        this.tableData.forEach((item) => {
        this.tableData.forEach(item => {
          let obj =
            "押运人员" +
            item.name +
@@ -569,7 +611,7 @@
          this.textArr.push(obj);
        });
      } else if (type === 3) {
        this.tableData.forEach((item) => {
        this.tableData.forEach(item => {
          let obj =
            "枪支编号" +
            item.number +
@@ -631,21 +673,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,
@@ -653,7 +695,7 @@
              linkman: m.linkman,
              company: m.company,
              tel: m.tel,
              carNum: m.carNum,
              carNum: m.carNum
            };

            // let geoObj = {
@@ -662,7 +704,7 @@
            // };
            middleData[m.type]["geoData"].push([
              Number(m.longitude),
              Number(m.latitude),
              Number(m.latitude)
            ]);
            middleData[m.type]["table"].push(obj);
          });
@@ -688,36 +730,38 @@
            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);
@@ -727,7 +771,7 @@
    },
    // 获取辖区列表
    getOfficeData() {
      lazyTreeJu().then((res) => {
      lazyTreeJu().then(res => {
        if (res.data.code === 200) {
          this.options1 = res.data.data;
          this.options2 = res.data.data;
@@ -736,8 +780,8 @@
          // 获取完辖区列表之后再获取具体数据
          this.getNoholderNum();
          this.getNoSocialSecurity();
          this.getQualification();
          this.getPoorPerformance();
          // this.getQualification();
          this.getPoorPerformance(2);
        } else {
          this.$message.error(res.msg);
        }
@@ -745,7 +789,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 {
@@ -756,7 +800,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 {
@@ -766,25 +810,46 @@
      });
    },
    // 现实表现差
    // 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(type) {
      this.right1loading = true;
      this.poorPerformanceType = type;
      if (type === 0) {
        this.rightData.poorPerformance = 2;
        this.rightData.qualification = 3;
        this.right1loading = false;
      } else if (type === 1) {
        this.rightData.poorPerformance = 11;
        this.rightData.qualification = 14;
        this.right1loading = false;
      } else if (type === 2) {
        // this.rightData.poorPerformance = 32;
        // this.rightData.qualification = 45;
        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;
        });
        selectExtypeUser().then(res => {
          if (res.status === 200) {
            this.rightData.qualification = res.data;
          } 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 {
          this.$message.error(res.msg);
        }
        this.right1loading = false;
      });
    },
    peoWarning() {
@@ -795,38 +860,26 @@

    companyWarning() {
      this.right1loading = true;
      this.getPoorPerformance();
      this.getQualification();
      this.getPoorPerformance(2);
      // this.getQualification();
    },

    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.getPoorPerformance(2);
    // this.getTableData("car");
    // this.initMap();
    this.getTableData(0);
    // this.initMapEchart();
    this.getOfficeData();
  },
  }
};
</script>


 src/views/home/indexEchart.js

@@ -1,5 +1,5 @@
import * as echarts from "echarts";
import nc from '../../../public/nc.json';
import nc from "../../../public/nc.json";
function left1Data(allData) {
  let nameArr = [];
  let data1 = [];
@@ -16,6 +16,12 @@
    data4.push(item.server.armed);
    data5.push(item.server.region);
  });
  nameArr.reverse();
  data1.reverse();
  data2.reverse();
  data3.reverse();
  data4.reverse();
  data5.reverse();
  let option = {
    tooltip: {
      trigger: "axis",
@@ -28,13 +34,13 @@
      // borderColor: "gray", //设置边框颜色
      textStyle: {
        color: "#fff" //设置文字颜色
      },
      }
    },
    color: [
      '#2ec7c9',
      '#b6a2de',
      '#5ab1ef',
      '#ffb980',
      "#2ec7c9",
      "#b6a2de",
      "#5ab1ef",
      "#ffb980",

      // "#fac858",
      // "#73c0de",
@@ -43,10 +49,10 @@
      "#9a60b4",
      "#3fb1e3",
      "#6be6c1",
      '#626c91',
      '#a0a7e6',
      '#c4ebad',
      '#96dee8'
      "#626c91",
      "#a0a7e6",
      "#c4ebad",
      "#96dee8"
    ],
    // legend: {
    //   data: ["自招保安单位", "保安培训公司", "保安服务公司", "武装守押公司"],
@@ -60,10 +66,10 @@
    //   // }
    // },
    grid: {
      top: '10%',
      top: "5%",
      left: "5%",
      right: "6%",
      bottom: "10%",
      right: "10%",
      bottom: "5%",
      containLabel: true
    },
    xAxis: {
@@ -90,7 +96,7 @@
        name: "自招保安单位",
        type: "bar",
        stack: "total",
        barWidth: 20,
        barWidth: 17,
        emphasis: {
          focus: "series"
        },
@@ -157,7 +163,7 @@
      // borderColor: "gray", //设置边框颜色
      textStyle: {
        color: "#fff" //设置文字颜色
      },
      }
    },
    color: [
      "#3fb1e3",
@@ -168,10 +174,10 @@
      "#9a60b4",
      "#3fb1e3",
      "#6be6c1",
      '#626c91',
      '#a0a7e6',
      '#c4ebad',
      '#96dee8'
      "#626c91",
      "#a0a7e6",
      "#c4ebad",
      "#96dee8"
    ],
    legend: {
      data: ["持证人数", "未持证人数"],
@@ -182,13 +188,21 @@
      }
    },
    grid: {
      top: '5%',
      top: "10%",
      left: "5%",
      right: "6%",
      bottom: "15%",
      bottom: "4%",
      containLabel: true
    },
    xAxis: {
      type: "category",
      axisLabel: {
        color: "#fff",
        rotate: -80
      },
      data: nameArr
    },
    yAxis: {
      type: "value",
      axisLabel: {
        color: "#fff"
@@ -200,13 +214,6 @@
      splitLine: {
        show: false
      }
    },
    yAxis: {
      type: "category",
      axisLabel: {
        color: "#fff"
      },
      data: nameArr
    },
    series: [
      {
@@ -236,12 +243,12 @@

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: '女' }
  ]
    { value: allData[0].mnum ? Number(allData[0].mnum) : 0, name: "男" },
    { value: allData[0].gnum ? Number(allData[0].gnum) : 0, name: "女" }
  ];
  let option = {
    tooltip: {
      trigger: 'item',
      trigger: "item",
      formatter: "{a}<br>{b}:{c}({d}%)",
      axisPointer: {
        type: "shadow"
@@ -252,42 +259,42 @@
      // borderColor: "gray", //设置边框颜色
      textStyle: {
        color: "#fff" //设置文字颜色
      },
      }
    },
    color: [
      '#008DEC',
      '#886EFF',
    ],
    legend: {
      right: "8%",
      bottom: "10%",
      itemHeight: 10,
      show: true,
      selectedMode: false,
      textStyle: {
        color: "#fff"
      },
      data: ['男', '女'],
      orient: "vertical"
    color: ["#008DEC", "#886EFF"],
    // legend: {
    //   right: "8%",
    //   bottom: "10%",
    //   itemHeight: 10,
    //   show: true,
    //   selectedMode: false,
    //   textStyle: {
    //     color: "#fff"
    //   },
    //   data: ['男', '女'],
    //   orient: "vertical"
    // },
    grid: {
      top: "10%",
      left: "5%",
      right: "30%",
      bottom: "4%",
      containLabel: true
    },
    series: [
      {
        name: '性别比例',
        type: 'pie',
        center: ['43%', '50%'],
        radius: '70%',
        name: "性别比例",
        type: "pie",
        center: ["33%", "50%"],
        radius: "70%",
        data: data,
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        },
        label: {
          color: "#fff"
        }
      }
    ]
  };
  return option
  return option;
}

function right1Data(allData) {
@@ -325,10 +332,10 @@
      "#9a60b4",
      "#3fb1e3",
      "#6be6c1",
      '#626c91',
      '#a0a7e6',
      '#c4ebad',
      '#96dee8'
      "#626c91",
      "#a0a7e6",
      "#c4ebad",
      "#96dee8"
    ],

    legend: {
@@ -390,10 +397,10 @@
      "#9a60b4",
      "#3fb1e3",
      "#6be6c1",
      '#626c91',
      '#a0a7e6',
      '#c4ebad',
      '#96dee8'
      "#626c91",
      "#a0a7e6",
      "#c4ebad",
      "#96dee8"
    ],

    legend: {
@@ -446,17 +453,17 @@
  let data = [];
  let legendData = [];
  let datas = allData.sort((a, b) => {
    return b.Count - a.Count
  })
    return b.Count - a.Count;
  });
  datas.forEach(item => {
    let obj = {
      name: item.jurname,
      value: item.Count
    }
    legendData.push(item.jurname)
    };
    legendData.push(item.jurname);
    // sumValue += Number(item.Count)
    data.push(obj)
  })
    data.push(obj);
  });
  // let arrName = getArrayValue(data, "name");
  // let arrValue = getArrayValue(data, "value");
  // let sumValue = 1000;
@@ -624,16 +631,18 @@
      // borderColor: "gray", //设置边框颜色
      textStyle: {
        color: "#fff" //设置文字颜色
      },
      }
    },
    legend: {
      right: "2%",
      top: "10%",
      right: "5%",
      top: "5%",
      itemHeight: 10,
      show: true,
      itemGap:8,
      selectedMode: false,
      textStyle: {
        color: "#fff"
        color: "#fff",
        fontSize:11
      },
      data: legendData,
      orient: "vertical"
@@ -647,18 +656,18 @@
      "#9a60b4",
      "#3fb1e3",
      "#6be6c1",
      '#626c91',
      '#a0a7e6',
      '#c4ebad',
      '#96dee8'
      "#626c91",
      "#a0a7e6",
      "#c4ebad",
      "#96dee8"
    ],
    series: [
      {
        name: '分局预警占比',
        type: 'pie',
        radius: '75%',
        center: ['30%', '50%'],
        roseType: 'radius',
        name: "分局预警占比",
        type: "pie",
        radius: "75%",
        center: ["35%", "55%"],
        roseType: "radius",
        itemStyle: {
          borderRadius: 0
        },
@@ -671,7 +680,7 @@
          }
        },
        data: data
      },
      }
      // {
      //     name: '面积模式',
      //     type: 'pie',
@@ -711,42 +720,69 @@
  //   }
  //   return res;
  // };
  let name = '';
  let label = '';
  let symbolUrl = '';
  let geoData = []
  allData['table'].forEach((item, i) => {
  let name = "";
  let label = "";
  let symbolUrl = "";
  let geoData = [];
  allData["table"].forEach((item, i) => {
    let obj = {};
    if (type === 1) {
      name = '保安员名称';
      label = '名称';
      symbolUrl = require('@/assets/img/people.png')
      name = "保安员名称";
      label =
        "押运人员：" +
        item.name +
        "<br />当前位置：" +
        item.location +
        "<br />所属公司：" +
        item.linkman +
        "<br />联系电话：" +
        item.tel;
      symbolUrl = require("@/assets/img/people.png");
      obj = {
        name: item.name,
        value: allData['geoData'][i]
      }
        name: label,
        value: allData["geoData"][i]
      };
    } else if (type === 2) {
      name = '押运车辆';
      label = '押运车辆车牌号';
      symbolUrl = require('@/assets/img/car.png')
      name = "押运车辆";
      label =
        "押运车辆车牌号：" +
        item.carNum +
        "<br />当前位置：" +
        item.location +
        "<br />所属公司：" +
        item.company +
        "<br />联系人：" +
        item.linkman +
        "<br />联系电话：" +
        item.tel;
      symbolUrl = require("@/assets/img/car.png");
      obj = {
        name: item.carNum,
        value: allData['geoData'][i]
      }
        name: label,
        value: allData["geoData"][i]
      };
    } else if (type === 3) {
      name = '枪支';
      label = '枪支编号';
      symbolUrl = require('@/assets/img/gun.png')
      name = "枪支";
      label =
        "枪支编号：" +
        item.number +
        "<br />当前位置：" +
        item.location +
        "<br />所属公司：" +
        item.company +
        "<br />负责人：" +
        item.linkman +
        "<br />联系电话：" +
        item.tel;
      symbolUrl = require("@/assets/img/gun.png");
      obj = {
        name: item.number,
        value: allData['geoData'][i]
      }
        name: label,
        value: allData["geoData"][i]
      };
    }
    geoData.push(obj)
  })
    geoData.push(obj);
  });


  echarts.registerMap('ncMap', ncMap);
  echarts.registerMap("ncMap", ncMap);
  // echarts.registerMap('chinaMapOutline', chinaMapOutline);
  let option = {
    // backgroundColor: '#181F4E',
@@ -754,115 +790,114 @@
    //   trigger: 'item',
    // },
    tooltip: {
      trigger: 'item',
      formatter: function (params) {
        if (typeof (params.value)[1] == "undefined") {
      trigger: "item",
      formatter: function(params) {
        if (typeof params.value[1] == "undefined") {
          return params.name;
        } else {
          return label + ' : ' + params.name;
          return params.name;
        }
      },
      backgroundColor: "#031952", //设置背景图片 rgba格式
      color: "#fff",
      borderWidth: "0", //边框宽度设置1
      // borderColor: "gray", //设置边框颜色
      borderColor: "gray", //设置边框颜色
      extraCssText: "box-shadow: 0 0 3px rgba(    211,211,211, 0.5);",
      textStyle: {
        color: "#fff" //设置文字颜色
      },
      }
    },
    geo: {
      // silent: true,
      map: 'ncMap',
      map: "ncMap",
      show: true,
      zoom: 1.04,
      top: '8%',
      top: "8%",
      label: {
        show: false,
        color: '#fff',
        color: "#fff",
        emphasis: {
          textStyle: {
            color: '#fff'
            color: "#fff"
          }
        }
      },

      roam: true,
      itemStyle: {
        areaColor: 'rgba(0,255,255,.02)',
        borderColor: '#00ffff',
        areaColor: "rgba(0,255,255,.02)",
        borderColor: "#00ffff",
        borderWidth: 1.5,
        shadowColor: '#00ffff',
        shadowColor: "#00ffff",
        shadowOffsetX: 0,
        shadowOffsetY: 4,
        shadowBlur: 10,

        shadowBlur: 10
      },
      emphasis: {
        itemStyle: {
          color: 'transparent', //悬浮背景
          color: "transparent", //悬浮背景
          textStyle: {
            color: '#fff'
            color: "#fff"
          }
        }
      }
    },
    series: [
      {
        map: 'ncMap',
        map: "ncMap",
        // silent: true,
        type: 'map',
        type: "map",
        geoIndex: 0,
        // aspectScale: 0.75, //长宽比
        zoom: 1.14,
        label: {
          show: false,
          color: '#fff'
          color: "#fff"
        },
        emphasis: {
          label: {
            color: '#fff'
            color: "#fff"
          }
        },
        top: '10%',
        top: "10%",
        roam: true,
        itemStyle: {
          areaColor: 'rgba(0,255,255,.02)',
          borderColor: '#00ffff',
          areaColor: "rgba(0,255,255,.02)",
          borderColor: "#00ffff",
          borderWidth: 1.5,
          shadowColor: '#00ffff',
          shadowColor: "#00ffff",
          shadowOffsetX: 0,
          shadowOffsetY: 4,
          shadowBlur: 10,

          shadowBlur: 10
        },
        emphasis: {
          itemStyle: {
            areaColor: 'transparent', //悬浮背景
            areaColor: "transparent", //悬浮背景
            textStyle: {
              color: '#fff'
              color: "#fff"
            }
          }
        }
      },
      {
        name: name,
        type: 'scatter',
        coordinateSystem: 'geo',
        type: "scatter",
        coordinateSystem: "geo",
        // roam: false,
        symbol: 'image://' + symbolUrl,
        symbol: "image://" + symbolUrl,
        symbolSize: [30, 30],
        label: {
          show: false,
          color: '#fff',
          fontSize: 9,
          color: "#fff",
          fontSize: 9
        },
        itemStyle: {
          color: '#FF0000', //标志颜色
          color: "#FF0000" //标志颜色
        },
        data: geoData,
        showEffectOn: 'render',
        showEffectOn: "render",
        rippleEffect: {
          brushType: 'stroke'
          brushType: "stroke"
        },
        hoverAnimation: true,
        emphasis: {
@@ -871,8 +906,8 @@
        zlevel: 1
      }
    ]
  }
  return option
  };
  return option;
}
export default {
  left1Data,

 src/views/home/offlineMapTiles/4/12/6.png

Binary files differ

 src/views/securityUnitOperation/securityEchart.js

@@ -1,7 +1,7 @@
function bottomOption(alldata) {
  let data = [];
  for (var i in alldata) {
    data.push(alldata[i])
    data.push(alldata[i]);
  }
  let option = {
    // title: {
@@ -47,7 +47,7 @@
      // borderColor: "gray", //设置边框颜色
      textStyle: {
        color: "#fff" //设置文字颜色
      },
      }
    },
    xAxis: {
      type: "category",
@@ -90,7 +90,6 @@
  return option;
}
function bottomOption1(alldata) {

  let option = {
    // title: {
    //   text: "公司运营趋势",
@@ -135,7 +134,7 @@
      // borderColor: "gray", //设置边框颜色
      textStyle: {
        color: "#fff" //设置文字颜色
      },
      }
    },
    xAxis: {
      type: "category",
@@ -168,7 +167,7 @@
    series: [
      {
        name: "趋势",
        data: [10,20,14,15,16,17,24,15,3,7,11,23],
        data: [10, 20, 14, 15, 16, 17, 24, 15, 3, 7, 11, 23],
        type: "line",
        smooth: true,
        areaStyle: {}
@@ -186,23 +185,20 @@
  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])
        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: "公司保安类数据对比",
@@ -218,7 +214,7 @@
      // borderColor: "gray", //设置边框颜色
      textStyle: {
        color: "#fff" //设置文字颜色
      },
      }
    },
    legend: {
      data: [
@@ -327,7 +323,7 @@
function middleOption2(alldata) {
  let data = [];
  for (var i in alldata) {
    data.push(alldata[i])
    data.push(alldata[i]);
  }
  let option = {
    // title: {
@@ -347,7 +343,7 @@
      // borderColor: "gray", //设置边框颜色
      textStyle: {
        color: "#fff" //设置文字颜色
      },
      }
    },
    legend: {
      data: ["客户数"],
@@ -421,7 +417,7 @@
function economicMiddle(data) {
  let data1 = [];
  for (var a in data) {
    data1.push(data[a])
    data1.push(data[a]);
  }
  let option = {
    tooltip: {
@@ -432,7 +428,7 @@
      // borderColor: "gray", //设置边框颜色
      textStyle: {
        color: "#fff" //设置文字颜色
      },
      }
    },
    legend: {
      data: ["缴纳社保人数", "公司派遣人数"],
@@ -508,7 +504,6 @@
  return option;
}
function economicPieOption(allData) {

  let title = "总";
  let total = Number(allData.PCount) + Number(allData.WPCount);
  let option = {
@@ -542,7 +537,7 @@
      // borderColor: "gray", //设置边框颜色
      textStyle: {
        color: "#fff" //设置文字颜色
      },
      }
    },
    legend: {
      bottom: "0%",
@@ -572,6 +567,9 @@
        name: "人员分布",
        type: "pie",
        radius: ["40%", "70%"],
        label: {
          color: "#fff"
        },
        data: [
          { value: allData.PCount, name: "已派遣人数" },
          { value: allData.WPCount, name: "未派遣人" }

 src/views/statisticalQueryManagement/businessStatistics.vue

@@ -7,7 +7,9 @@
      :permission="permissionList"
      :before-open="beforeOpen"
      @date-change="dateChange"
      @row-click="handleRowClick"
      @cell-click="handleRowClick"
      :cell-style="cellStyle"
      class="businessStatisticsStyle"
    >
    </avue-crud>
  </basic-container>
@@ -27,25 +29,25 @@
          company: "江西省永安保安服务有限公司",
          subOffice: "南昌市公安局",
          customer: "76",
          num: "1124",
          num: "1124"
        },
        {
          company: "南昌市赣水保安服务有限公司",
          subOffice: "东湖分局",
          customer: "85",
          num: "1428",
          num: "1428"
        },
        {
          company: "江西中业兴达保安服务有限公司",
          subOffice: "西湖分局",
          customer: "46",
          num: "974",
        },
          num: "974"
        }
      ],
      tablePage: {
        pageSize: 10,
        currentPage: 1,
        total: 0,
        total: 0
      },
      tableOption: {
        excelBtn: true,
@@ -71,7 +73,7 @@
            prop: "company",
            search: true,
            searchSpan: 4,
            display: false,
            display: false
          },

          {
@@ -81,53 +83,53 @@
            type: "select",
            props: {
              label: "label",
              value: "value",
              value: "value"
            },
            // cascaderItem: ["city", "area"],
            // dicUrl:subofficeOptions,
            dicData: [
              {
                value: "0",
                label: "南昌市公安局",
                label: "南昌市公安局"
              },
              {
                value: "2",
                label: "东湖分局",
                label: "东湖分局"
              },
              {
                value: "3",
                label: "西湖分局",
                label: "西湖分局"
              },
              {
                value: "4",
                label: "青云谱分局",
                label: "青云谱分局"
              },
              {
                value: "5",
                label: "青山湖分局",
              },
                label: "青山湖分局"
              }
            ],
            search: true,
            rules: [
              {
                required: true,
                message: "请选择所属辖区",
                trigger: "blur",
              },
            ],
                trigger: "blur"
              }
            ]
          },
          {
            label: "服务对象数量",
            prop: "customer",
            display: false,
            display: false
          },
          {
            label: "保安员人数",
            prop: "num",
            display: false,
          },
        ],
      },
            display: false
          }
        ]
      }
    };
  },
  computed: {
@@ -137,15 +139,23 @@
        addBtn: this.vaildData(this.permission.post_add, false),
        viewBtn: this.vaildData(this.permission.post_view, false),
        delBtn: this.vaildData(this.permission.post_delete, false),
        editBtn: this.vaildData(this.permission.post_edit, false),
        editBtn: this.vaildData(this.permission.post_edit, false)
      };
    },
    }
  },
  methods: {
    handleRowClick(row, event, column) {
      this.$router.push({ path: "/statisticalQueryManagement/businessStatisticsDetail" });
    handleRowClick(row, column, cell, event) {
      if (column.label == "服务对象数量" || column.label == "保安员人数") {
        this.$router.push({
          path: "/statisticalQueryManagement/businessStatisticsDetail"
        });
      }
    },
    dateChange() {},
    cellStyle(row, column, rowIndex, columnIndex) {
      // if (columnIndex == 4 || columnIndex == 5) {
      // }
    },
    dateChange() {}
    // downExcel() {
    //   let et = XLSX.utils.table_to_book(document.getElementById("table"));
    //   let etout = XLSX.write(et, {
@@ -166,8 +176,12 @@
    //   return etout;
    // }
  },
  mounted() {},
  mounted() {}
};
</script>
<style lang="scss" scoped>
/deep/ .businessStatisticsStyle .el-table__row:hover td:nth-child(5),
/deep/ .businessStatisticsStyle .el-table__row:hover td:nth-child(6) {
  cursor: pointer !important;
}
</style>

 src/views/statisticalQueryManagement/securityGuardStatistics.vue

@@ -8,6 +8,7 @@
      :before-open="beforeOpen"
      @date-change="dateChange"
      @row-click="handleRowClick"
      class="rowClick"
    >
      <template slot-scope="{ type, size }" slot="menu">
        <el-button icon="el-icon-check" :size="size" :type="type"
@@ -197,9 +198,9 @@
    },
  },
  methods: {
    toCompanyDetails() {
      this.$router.push({ path: "/statisticalQueryManagement/companyDetails" });
    },
    // toCompanyDetails() {
    //   this.$router.push({ path: "/statisticalQueryManagement/companyDetails" });
    // },
    handleRowClick(row, event, column) {
      this.$router.push({ path: "/statisticalQueryManagement/companyDetails" });
    },
@@ -227,5 +228,8 @@
  mounted() {},
};
</script>
<style lang="scss" scoped>
<style lang="scss" scoped> 
/deep/ .rowClick .el-table__row:hover td{
  cursor: pointer;
}
</style>