1.统计分析弹窗-区域

2.bug修改

src/views/administrative/deptFilter.vue

@@ -213,7 +213,7 @@
         top: 3rem;
         left: 0;
         width: 100%;
-        height: calc(100% - 3rem);;
+        height: calc(100% - 3rem);
         background: #fff;
         overflow: hidden;
     }

src/views/administrative/userFilter.vue

@@ -129,7 +129,7 @@
         top: 3rem;
         left: 0;
         width: 100%;
-        height: calc(100% - 3rem);;
+        height: calc(100% - 3rem);
         background: #fff;
         overflow: hidden;
     }

src/views/common/analyse.vue

@@ -61,12 +61,14 @@
 
 
           <div class="dropdown-box">
-            <span><label>区域</label><van-icon name="arrow-down" /></span>
+            <span @click="showPopup()"><label>区域</label><van-icon name="arrow-down" /></span>
             <span><label>部门</label><van-icon name="arrow-down" /></span>
             <span><label>企业</label><van-icon name="arrow-down" /></span>
             <span><label>检查</label><van-icon name="arrow-down" /></span>
             <span><label>投诉</label><van-icon name="arrow-down" /></span>
           </div>
+<Popup :visible="popupVisible" :content="popupContent" @close="closePopup" />
+
 
 <div class="selected-box">
   <div><label>执法部门：</label><div><span>深圳市司法局</span>,<span>深圳市公安局</span><span>深圳市司法局</span>,<span>深圳市公安局</span></div></div>
@@ -110,31 +112,10 @@
 
 
 
-
-
-
-
-          <!--            <div class="analybox">
-                          <div class="title">检查类别</div>
-                          <div id="echartRing" class="chartbox"></div>
-                          <div id="echartLine" class="chartbox"></div>
         </div>
-                      <div class="analybox">
-                          <div class="title">执法人员</div>
-                          <div id="echartLineUser" class="chartbox" style="height: 10rem;"></div>
-                      </div>
-                      <div class="analybox">
-                          <div class="title">案件数量</div>
-                          <div id="echarCount" class="chartbox"></div>
-                      </div>
-                      <div class="analybox">
-                          <div class="title">企业类型</div>
-                          <div id="echartLineCompany" class="chartbox"></div>
-                      </div>-->
 
     </div>
 
-    </div>
 </template>
 
 <script setup name="addressEdit">
@@ -188,285 +169,7 @@
     const onChangeDetail = () => {
     };
 
-    const echartInit = (data, targetId) => {
-      var container = document.getElementById(targetId);
-      var myChart = echarts.getInstanceByDom(container);
-      if (myChart) {
-          myChart.dispose();
-      }
-        myChart = echarts.init(document.getElementById(targetId));
-        // 指定图表的配置项和数据
-        let option = {
-            tooltip: {
-                trigger: 'item'
-            },
-            series: [
-                {
-                    name: '统计图表',
-                    type: 'pie',
-                    silent: true,   // 设置所有的点击事件为静默模式
-                    radius: ['33%', '50%'],
-                    avoidLabelOverlap: false,
-                    itemStyle: {
-                        borderRadius: 0,
-                        borderColor: '#fff',
-                        borderWidth: 1
-                    },
-                    emphasis: {
-                        label: {
-                            show: true,
-                            fontSize: '14',
-                            fontWeight: 'bold'
-                        }
-                    },
-                    label: {
-                        normal: {
-                            show: true,
-                            position: 'outside', // 标签显示在外部
-                            formatter: '{b}\n{c} ({d}%)', // 标签格式化，b是数据名，c是数值，d是百分比
-                            textStyle: {
-                                fontSize: 14,
-                                rich: {
-                                    a: {
-                                        width: 100,
-                                        overflow: 'truncate', // 文字超出宽度时截断
-                                        textOverflow: 'ellipsis', // 文字超出宽度时显示省略号
-                                    },
-                                },
-                            },
-                        },
-                    },
-                    // ... 其他配置项
-                    data: data,
-                    color: ['#0038bb', '#0047eb', '#1c60ff', '#3f78ff', '#6592ff', '#8aadff'],
-                }
-            ]
-        };
-        // 使用刚指定的配置项和数据显示图表。
-        myChart.setOption(option);
-    };
 
-    const initSchedule = (dataAll, targetId) => {
-      var container = document.getElementById(targetId);
-      var myChartLine = echarts.getInstanceByDom(container);
-      if (myChartLine) {
-        myChartLine.dispose();
-      }
-        myChartLine = echarts.init(document.getElementById(targetId));
-        let myColor = ['#3C83FF']
-        var option = {
-            tooltip: {
-                trigger: 'item',
-            },
-            grid: { // 直角坐标系内绘图网格
-                top: '-5%',
-                bottom: '5%',
-                left: '25%', //grid 组件离容器左侧的距离,
-                //left的值可以是80这样具体像素值，
-                //也可以是'80%'这样相对于容器高度的百分比
-                right: '25%',
-                //containLabel: true   //gid区域是否包含坐标轴的刻度标签。为true的时候，
-                // left/right/top/bottom/width/height决定的是包括了坐标轴标签在内的
-                //所有内容所形成的矩形的位置.常用于【防止标签溢出】的场景
-            },
-            xAxis: { //直角坐标系grid中的x轴,
-                //一般情况下单个grid组件最多只能放上下两个x轴,
-                //多于两个x轴需要通过配置offset属性防止同个位置多个x轴的重叠。
-                type: 'value', //坐标轴类型,分别有：
-                //'value'-数值轴；'category'-类目轴;
-                //'time'-时间轴;'log'-对数轴
-                splitLine: {
-                    show: false
-                }, //坐标轴在 grid 区域中的分隔线
-                axisLabel: {
-                    show: false
-                }, //坐标轴刻度标签
-                axisTick: {
-                    show: false
-                }, //坐标轴刻度
-                axisLine: {
-                    show: false
-                }, //坐标轴轴线
-            },
-            yAxis: {
-                type: 'category',
-                axisTick: {
-                    show: false
-                },
-                axisLine: {
-                    show: false
-                },
-                axisLabel: {
-                    color: 'rgba(0,0,0,.7)',
-                    fontSize: 14,
-                    formatter: function (data) {
-                        var traceValue;
-                        for (var i = 0; i < dataAll.dataX.length; i++) {
-                            if (data === dataAll.dataX[i]) {
-                                traceValue = dataAll.dataY[i]
-                                break
-                            }
-                        }
-                        var arr = [
-                            '{a|' + data + '}',
-                            '{b|' + traceValue + '}',
-                            '{c|件}'
-                        ]
-                        return arr.join('')
-                    },
-                    formatter: function (params) {
-                        var maxLength = 6;
-                        //判断长度，超出使用...代替
-                        if (params && params.length > maxLength) {
-                            return params.substring(0, maxLength - 1) + '.';
-                        } else {
-                            return params;
-                        }
-                    },
-                    textStyle: {
-                        rich: {
-                            a: {
-                                fontSize: 14,
-                                //width: 100
-                            },
-                            b: {
-                                fontSize: 14,
-                                align: 'center',
-                                color: '#3C83FF',
-                                fontWeight: 600,
-                            },
-                            c: {
-                                padding: [0, 0, 0, 5],
-                                fontSize: 14,
-                                align: 'center',
-                            }
-                        }
-                    },
-                },
-                data: dataAll.dataX //类目数据，在类目轴（type: 'category'）中有效。
-                //如果没有设置 type，但是设置了axis.data,则认为type 是 'category'。
-            },
-            series: [ //系列列表。每个系列通过 type 决定自己的图表类型
-                {
-                    name: '', //系列名称
-                    type: 'bar', //柱状、条形图
-                    silent: true,   // 设置所有柱子的点击事件为静默模式
-                    barWidth: 15, //柱条的宽度,默认自适应
-                    data: dataAll.dataPercent, //系列中数据内容数组
-                    label: { //图形上的文本标签
-                        show: true,
-                        position: 'right', //标签的位置
-                        offset: [0, 40], //标签文字的偏移，此处表示向上偏移40
-                        //formatter: '{c}{a}',//标签内容格式器 {a}-系列名,{b}-数据名,{c}-数据值
-                        formatter: function (data) {
-                            //.toFixed(0)去掉小数位，如果为2就是保留两位小数
-                            //let b = data.percent.toFixed(0) + "%";
-                            //subText = b;
-                            return '';
-                        },
-                        color: 'rgba(0,0,0,.7)', //标签字体颜色
-                        fontSize: 26 //标签字号
-                    },
-                    itemStyle: { //图形样式
-                        normal: { //normal 图形在默认状态下的样式;
-                            //emphasis图形在高亮状态下的样式
-                            barBorderRadius: 10, //柱条圆角半径,单位px.
-                            //此处统一设置4个角的圆角大小;
-                            //也可以分开设置[10,10,10,10]顺时针左上、右上、右下、左下
-                            color: function (params) {
-                                let num = myColor.length; //得到myColor颜色数组的长度
-                                return myColor[params.dataIndex % num]; //返回颜色数组中的一个对应的颜色值
-                            },
-                        }
-                    },
-                  dataZoom: [
-                    {
-                      type: 'inside', // 设置为 inside 类型
-                      orient: 'vertical', // 设置为垂直滚动条
-                      start: 0,
-                      end: 100,
-                      left: "93%",
-                      yAxisIndex: [0],
-                    }
-                  ],
-                    zlevel: 1 //柱状图所有图形的 zlevel 值,
-                    //zlevel 大的 Canvas 会放在 zlevel 小的 Canvas 的上面
-                },
-                {
-                    name: '',
-                    type: 'bar',
-                    silent: true,   // 设置所有柱子的点击事件为静默模式
-                    label: { //图形上的文本标签
-                        show: true,
-                        position: 'right', //标签的位置
-                        offset: [0, 0], //标签文字的偏移，此处表示向上偏移40
-                        //formatter: '{c}{a}',//标签内容格式器 {a}-系列名,{b}-数据名,{c}-数据值
-                        formatter: function (data) {
-                            //.toFixed(0)去掉小数位，如果为2就是保留两位小数
-                            var traceValue;
-                            for (var i = 0; i < dataAll.dataX.length; i++) {
-                                if (data.name === dataAll.dataX[i]) {
-                                    traceValue = dataAll.dataPercent[i]
-                                    break
-                                }
-                            }
-                            var arr = [
-                                '{a|' + traceValue + '}',
-                                '{b|%}'
-                            ]
-                            return arr.join('');
-                        },
-                        textStyle: {
-                            rich: {
-                                a: {
-                                    fontSize: 14,
-                                    color: 'rgba(0,0,0,0.7)',
-                                    fontWeight: 560,
-                                    padding: [0, 0, 0, 15],
-                                },
-                                b: {
-                                    fontSize: 14,
-                                    color: 'rgba(0,0,0,0.7)',
-                                    padding: [0, 0, 0, 3],
-                                    align: 'center',
-                                },
-                            }
-                        },
-                    },
-                    barGap: '-100%', //不同系列的柱间距离，为百分比。
-                    // 在同一坐标系上，此属性会被多个 'bar' 系列共享。
-                    // 此属性应设置于此坐标系中最后一个 'bar' 系列上才会生效，
-                    //并且是对此坐标系中所有 'bar' 系列生效。
-                    barWidth: 15,
-                    data: dataAll.dataSum,
-
-                    color: '#DEE0E3', //柱条颜色
-                    itemStyle: {
-                        normal: {
-                            barBorderRadius: 10
-                        }
-                    }
-                },
-
-            ]
-        };
-        myChartLine.setOption(option, true);
-    };
-
-    const initData = (dataX, dataY, dataPercent, targetId) => {
-
-        // var dataX = ['生态环境检查', '卫生健康检查', '商务领域检查', '财务领域检查', '水务领域检查']
-        // var dataY = ['30', '20', '15', '25', '10'];
-        // var dataPercent = ['30', '20', '15', '25', '10'];
-        var dataSum = new Array(dataX.length).fill(100);
-        var data = {
-            dataX: dataX,
-            dataY: dataY,
-            dataSum: dataSum,
-            dataPercent: dataPercent,
-        }
-        initSchedule(data, targetId);
-    };
 
 
     onMounted(() => {
@@ -550,7 +253,30 @@
 
     });
 </script>
+<script>
+//统计指标筛选弹窗
+import Popup from '@/views/common/analyseFilter.vue';
 
+export default {
+  components: {
+    Popup
+  },
+  data() {
+    return {
+      popupVisible: false,
+      popupContent: ''
+    }
+  },
+  methods: {
+    showPopup() {
+      this.popupVisible = true;
+    },
+    closePopup() {
+      this.popupVisible = false;
+    }
+  }
+}
+</script>
 
 <style lang="less" scoped>
     .address_edit {
@@ -703,7 +429,7 @@
     }
 
     .percent-tag {
-      margin: -3% 3% 0;
+      margin: -3% 3% 2%;
 
     }
 
@@ -817,7 +543,7 @@
 
     .stat-box {
       position: relative;
-      margin: 0 3%;
+      margin: 0 3% 5%;
       padding: 1%;
       width: 94%;
       background: #fff;

src/views/common/analyseFilter.vue

@@ -0,0 +1,221 @@
+<template>
+  <div v-if="visible" class="van-overlay"></div>
+  <div v-if="visible" class="popup">
+    <div class="popup-title">区域</div>
+    <!-- 关闭按钮 -->
+    <label class="close-button" @click="closePopup"></label>
+
+    <!-- 弹窗的内容 -->
+    <div class="popup-content">
+
+      <div class="subsearch">
+        <input class="searchbox" placeholder="请输入区域名称"/>
+        <van-icon class="ibtn-reset" name="clear" @click="cancel()" title="重置"/>
+        <button class='btn-search'>搜索</button>
+        <button class='btn-search btn-determine'>确定</button>
+        <button class='btn-search btn-empty'>清空</button>
+      </div>
+
+      <div class="search-result">
+        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
+
+          <van-list finished-text="没有更多了" @load="onLoad">
+            <van-checkbox-group>
+                <van-checkbox v-model="checked">全市</van-checkbox>
+                <van-checkbox>福田区</van-checkbox>
+                <van-checkbox>罗湖区</van-checkbox>
+                <van-checkbox>盐田区</van-checkbox>
+                <van-checkbox>南山区</van-checkbox>
+                <van-checkbox>宝安区</van-checkbox>
+                <van-checkbox>龙岗区</van-checkbox>
+                <van-checkbox>龙华区</van-checkbox>
+                <van-checkbox>坪山区</van-checkbox>
+                <van-checkbox>光明区</van-checkbox>
+                <van-checkbox>大鹏新区</van-checkbox>
+                <van-checkbox>深汕特别合作区</van-checkbox>
+            </van-checkbox-group>
+          </van-list>
+        </van-pull-refresh>
+      </div>
+
+
+    </div>
+  </div>
+</template>
+
+<script>
+    export default {
+      props: {
+        visible: {
+          type: Boolean,
+          default: false
+        },
+        content: {
+          type: String,
+          default: ''
+        }
+      },
+    methods: {
+        closePopup() {
+          this.$emit('close');
+      }
+    }
+    }
+
+</script>
+<script>
+
+
+</script>
+
+<style>
+.popup {
+  position: fixed;
+  z-index: 999;
+  top: 3rem;
+  left: 0;
+  width: 100%;
+  height: calc(100% - 3rem);
+  background: #fff;
+  overflow: hidden;
+}
+
+.popup-title {
+  margin: 0.3rem 0 0;
+  width: 100%;
+  height: 1rem;
+  border-bottom: 1px solid #f3f4f5;
+  text-align: center;
+  font-size: 0.45rem;
+  font-weight: 600;
+}
+
+.close-button {
+  position: absolute;
+  top: 0.15rem;
+  right: 0.1rem;
+  width: 0.8rem;
+  height: 0.8rem;
+  background-color: rgba(255, 255, 255, .5);
+  border: 0.05rem solid rgba(255, 255, 255, .7);
+  border-radius: 50%;
+  transform: rotate(45deg);
+}
+
+.close-button:before,
+.close-button:after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  background: #333;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  height: 0.4rem;
+  width: 0.02rem;
+}
+
+.close-button:after {
+  height: 0.02rem;
+  width: 0.4rem;
+}
+
+.popup-content {
+  margin: 0.25rem 3% 0;
+  padding-bottom: 1rem;
+  width: 94%;
+  height: calc(100% - 1.6rem);
+  overflow: hidden;
+  font-size: 0.37rem;
+}
+
+.subsearch {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 1%;
+  width: 96%;
+  height: 1.25rem;
+  font-size: 0.37rem;
+  white-space: nowrap;
+}
+
+.subsearch .ibtn-reset {
+  margin: 0 0.5rem 0 -1rem;
+  width: 1rem;
+  color: #afabab;
+  font-size: 0.5rem;
+}
+
+.subsearch .btn-search {
+  margin: 0 0.8rem 0 -0.2rem;
+  width: 20%;
+  height: 1rem;
+  background: #eeeff1 url(/src/assets/images/icon_sou.png) no-repeat;
+  background-position: left 0.3rem center;
+  background-size: auto 50%;
+  border-radius: 0 0.15rem 0.15rem 0;
+  border: 1px solid rgba(0, 0, 0, .1);
+  border-left: 1px solid #eee;
+  line-height: 10rem;
+  overflow: hidden;
+}
+
+.subsearch .btn-search.btn-determine {
+  margin-right: 0.5rem;
+  width: 2.5rem;
+  border-radius: 0.15rem;
+  background: #1367fe;
+  border-color: #1367fe;
+  color: #fff;
+  line-height: 1;
+}
+
+.subsearch .btn-search.btn-empty {
+  margin-right: 0;
+  width: 2.5rem;
+  border-radius: 0.15rem;
+  background: #f74e4d;
+  border-color: #f74e4d;
+  color: #fff;
+  line-height: 1;
+}
+
+
+.searchbox {
+  margin: 2% 0;
+  padding: 0.1rem 1.2rem 0.1rem 0.9rem;
+  width: 100%;
+  height: 1rem;
+  background: #f6f7fe url(../../assets/images/icon_sou.png) no-repeat;
+  background-position: left 0.25rem center;
+  background-size: auto 50%;
+  box-sizing: border-box;
+  border: 1px solid rgba(0, 0, 0, .1);
+  border-radius: 0.15rem 0 0 0.15rem;
+  color: #999999;
+  outline: none;
+}
+
+.subtitle {
+  margin: 0.5rem 0 0.25rem;
+  color: #000;
+  font-size: 0.4rem;
+  /*font-weight: 600;*/
+  clear: both;
+}
+
+.search-result {
+  width: 100%;
+  height: calc(100% - 2.5rem);
+  padding-bottom: 1rem;
+  overflow-y: auto;
+}
+
+.van-checkbox {
+  margin: 3% 2%;
+  padding: 3% 0;
+  border-bottom: 1px solid #f3f4f5;
+}
+
+</style>

src/views/enforce/assistUserFilter.vue

@@ -87,7 +87,7 @@ export default {
   top: 3rem;
   left: 0;
   width: 100%;
-  height: calc(100% - 3rem);;
+  height: calc(100% - 3rem);
   background: #fff;
   overflow: hidden;
 }

src/views/enforce/lawFilter.vue

@@ -146,7 +146,7 @@
         top: 3rem;
         left: 0;
         width: 100%;
-        height: calc(100% - 3rem);;
+        height: calc(100% - 3rem);
         background: #fff;
         overflow: hidden;
     }

src/views/enforce/noScanFilter.vue

@@ -191,7 +191,7 @@ const props = defineProps( {
   top: 3rem;
   left: 0;
   width: 100%;
-  height: calc(100% - 3rem);;
+  height: calc(100% - 3rem);
   background: #fff;
   overflow: hidden;
 }

src/views/enforce/userFilter.vue

@@ -135,7 +135,7 @@
         top: 3rem;
         left: 0;
         width: 100%;
-        height: calc(100% - 3rem);;
+        height: calc(100% - 3rem);
         background: #fff;
         overflow: hidden;
     }

src/views/enforce/zqyjjdmFilter.vue

@@ -153,7 +153,7 @@
         top: 3rem;
         left: 0;
         width: 100%;
-        height: calc(100% - 3rem);;
+        height: calc(100% - 3rem);
         background: #fff;
         overflow: hidden;
     }

src/views/enterprise/compaint/selectDeptFilter.vue

@@ -180,7 +180,7 @@
         top: 3rem;
         left: 0;
         width: 100%;
-        height: calc(100% - 3rem);;
+        height: calc(100% - 3rem);
         background: #fff;
         overflow: hidden;
     }

src/views/enterprise/compaint/selectMssqFilter.vue

@@ -172,7 +172,7 @@
       top: 3rem;
       left: 0;
       width: 100%;
-      height: calc(100% - 3rem);;
+      height: calc(100% - 3rem);
       background: #fff;
       overflow: hidden;
   }

src/views/enterprise/compaint/uniteDept.vue

@@ -146,7 +146,7 @@
       top: 3rem;
       left: 0;
       width: 100%;
-      height: calc(100% - 3rem);;
+      height: calc(100% - 3rem);
       background: #fff;
       overflow: hidden;
   }

src/views/enterprise/companyFilter.vue

@@ -148,7 +148,7 @@
         top: 3rem;
         left: 0;
         width: 100%;
-        height: calc(100% - 3rem);;
+        height: calc(100% - 3rem);
         background: #fff;
         overflow: hidden;
     }

src/views/enterprise/complaintNoScan.vue

@@ -531,7 +531,7 @@
         top: 3rem;
         left: 0;
         width: 100%;
-        height: calc(100% - 3rem);;
+        height: calc(100% - 3rem);
         background: #fff;
         overflow: hidden;
     }