大屏南海诸岛

src/views/index/kshData.vue

@@ -191,6 +191,11 @@
           v-loading="ssLoading"
           element-loading-text="拼命加载中"
         ></div>
+        <div
+          id="bjChart"
+          v-loading="bjLoading"
+          element-loading-text="拼命加载中"
+        ></div>
       </div>
       <div v-else class="daping_box_content">
         <div class="daping_box_content2_top">
@@ -347,6 +352,7 @@ export default {
   name: "index1",
   data() {
     return {
+      bjLoading: true,
       isNum: true,
       queryNum: "460000",
       grade: sessionStorage.getItem("grade"),
@@ -654,7 +660,8 @@ export default {
     this.getHyyh(); //活跃用户
     this.getJrczcs(); //活跃用户
     this.getZhrys(); //在逃人员数
-    this.maMapTongJi(); //地图上图统计
+   this.maMapTongJi(); //地图上图统计
+    this.renderBj(); 
     axios.get(`map/460000.json`).then((res) => {
       self.$echarts.registerMap(self.queryNum, res);
     });
@@ -1032,29 +1039,30 @@ export default {
       this.maMapTongJiLoading = false;
     },
     renderSs(dataList) {
+      console.log(document.getElementById("ssChart"));
       let myChart = this.$echarts.init(document.getElementById("ssChart"));
       $.get(`map/460300.json`, (data) => {
         this.$echarts.registerMap(460300, data);
         myChart.setOption({
           tooltip: {
-          trigger: "item",
-          borderColor: "#FFE45C",
-          borderWidth: 1,
-          formatter: function (params) {
-            debugger
-            if (params.seriesType == "scatter") {
-              return (
-                '<div style="padding:0px 10px 10px 10px;"><span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:#ddb926;"></span><span style="color:yellow;">' +
-                params.name +
-                '</span></br><span style="font-size: 12px;font-family: Microsoft YaHei;font-weight: 400;line-height: 16px;color: #FFFFFF;">发案:' +
-                params.data.laCount +
-                "</span></div>"
-              );
-            } else {
-              return null;
-            }
+            trigger: "item",
+            borderColor: "#FFE45C",
+            borderWidth: 1,
+            formatter: function (params) {
+              debugger;
+              if (params.seriesType == "scatter") {
+                return (
+                  '<div style="padding:0px 10px 10px 10px;"><span style="margin-right:5px;display:inline-block;width:10px;height:10px;border-radius:5px;background-color:#ddb926;"></span><span style="color:yellow;">' +
+                  params.name +
+                  '</span></br><span style="font-size: 12px;font-family: Microsoft YaHei;font-weight: 400;line-height: 16px;color: #FFFFFF;">发案:' +
+                  params.data.laCount +
+                  "</span></div>"
+                );
+              } else {
+                return null;
+              }
+            },
           },
-        },
           geo: {
             show: true,
             map: 460300,
@@ -1093,49 +1101,82 @@ export default {
             layoutCenter: ["50%", "50%"],
             layoutSize: "73%",
           },
-           series: [
-          {
-            name: "发案",
-            type: "scatter",
-            coordinateSystem: "geo",
-            data: dataList,
-            encode: {
-              value: 2,
-            },
-            symbol: "pin",
-            symbolSize: 45,
-            label: {
-              normal: {
-                formatter: function (mapTip) {
-                  return mapTip.data.value[2];
+          series: [
+            {
+              name: "发案",
+              type: "scatter",
+              coordinateSystem: "geo",
+              data: dataList,
+              encode: {
+                value: 2,
+              },
+              symbol: "pin",
+              symbolSize: 45,
+              label: {
+                normal: {
+                  formatter: function (mapTip) {
+                    return mapTip.data.value[2];
+                  },
+                  x: 10,
+                  y: 10,
+                  show: true,
+                  color: "#fff",
+                  fontSize: "14",
+                },
+              },
+              // visualMap: false,
+              itemStyle: {
+                normal: {
+                  color: "#E0D117",
+                },
+              },
+              emphasis: {
+                label: {
+                  show: true,
                 },
-                x: 10,
-                y: 10,
-                show: true,
-                color: "#fff",
-                fontSize: "14",
               },
             },
-            // visualMap: false,
+          ],
+        });
+      });
+      // 绘制图表
+      this.ssLoading = false;
+      myChart.resize({
+        width: $("#ssChart").width(),
+        height: $("#ssChart").height(),
+      });
+    },
+    renderBj(){
+       let myChart = this.$echarts.init(document.getElementById("bjChart"));
+      $.get(`map/china.json`, (data) => {
+        this.$echarts.registerMap('china', data);
+        myChart.setOption({
+          geo: {
+            show: true,
+            map: 'china',
+           center: [129.244,20.725],
+            zoom: 10,
             itemStyle: {
               normal: {
-                color: '#E0D117',
+                areaColor: "#0c97cb",
+                borderColor: "#10f7ff",
+                borderWidth: 1,
+                borderType: "solid",
+                shadowBlur: 3,
+                opacity: 1,
               },
-            },
-            emphasis: {
-              label: {
-                show: true,
+              emphasis: {
+                areaColor: "#0c97cb",
               },
             },
           },
-        ],
         });
       });
       // 绘制图表
-      this.ssLoading = false;
+      this.bjLoading = false;
       myChart.resize({
-        width: $("#ssChart").width(),
-        height: $("#ssChart").height(),
+        width: $("#bjChart").width(),
+        height: $("#bjChart").height(),
       });
     },
     getNum() {
@@ -1504,9 +1545,9 @@ export default {
           containLabel: true,
         },
         legend: {
-          left: "70%", //图例距离左的距离
+          left: "80%", //图例距离左的距离
           y: "10px", //图例上下居中
-          data: ["发案数", "破案数"],
+          data: ["发案数"],
           textStyle: {
             //图例文字的样式
             color: "#B0BAD3",
@@ -3172,7 +3213,7 @@ export default {
     .daping_map_ys {
       position: absolute;
       /*width: 30px;*/
-      right: 200px;
+      left: 300px;
       bottom: 350px;
       z-index: 10;
       font-size: 14px;
@@ -3337,7 +3378,15 @@ export default {
   position: absolute;
   z-index: 999;
   bottom: 200px;
-  right: 15%;
+  right: 20%;
+}
+#bjChart {
+  width: 100px;
+  height: 150px;
+  position: absolute;
+  z-index: 999;
+  bottom: 260px;
+  right: 13%;
 }
 </style>
 <style lang="scss">

src/views/jcyjzxt/lkyj.vue

 <template>
   <div class="Content">
     <right-content
-        :tableOperation="true"
+    :tableOperationWidth="tableOperationWidth"
+      :tableOperation="true"
         :pageBs="pageBs"
         :header="header"
         :cxFormData="cxFormData"
@@ -26,11 +27,6 @@
         <span @click="jcyjHcyp(scope.scope)" class="hbyp">合成研判</span>
         <span @click="jcyjAddZczl(scope.scope)" class="hbyp">下达指令</span>
         <span @click="dele(scope.scope)" class="hbyp">删除</span>
-<!--        <el-button-group >-->
-<!--          <el-button @click="jcyjHcyp(scope.scope)" type="text">合成研判</el-button>-->
-<!--          <el-button @click="jcyjAddZczl(scope.scope)" type="text">下达指令</el-button>-->
-<!--          <el-button @click="dele(scope.scope)" type="text">删除</el-button>-->
-<!--        </el-button-group>-->
       </template>
     </right-content>
 
@@ -83,6 +79,7 @@ export default {
   },
   data() {
     return {
+      tableOperationWidth:300,
       selectedId: [],
       SJLYLIST: [],
       header: "监测预警",
@@ -284,9 +281,64 @@ export default {
   }
 };
 </script>
+<style>
+.el-dialog__body {
+  padding: 10px 15px !important;
+}
+.rightContent .el-input__inner,
+#formCommonPage .el-input__inner {
+  height: 32px;
+  line-height: 32px;
+  font-family: inherit;
+}
+.el-table__header-wrapper th,
+.el-table__header-wrapper tr {
+  background: #f4f6f7;
+}
+.rightContent .el-input__icon,
+#formCommonPage .el-input__icon,
+.el-input__suffix-inner {
+  line-height: 36px;
+}
+.rightContent .el-range-separator {
+  position: relative;
+  top: -4px;
+}
+.rightContent .el-textarea__inner,
+#formCommonPage .el-textarea__inner {
+  width: 100%;
+  font-family: inherit;
+}
+.rightContent .el-range-input,
+#formCommonPage .el-range-input {
+  vertical-align: top;
+}
+.rightContent .el-date-editor .el-range__close-icon {
+  margin-top: -4px;
+}
+.rightContent .el-form-item__error {
+  left: calc(66% - 27px);
+  top: 12px;
+}
+.success-row {
+  background-color: #fbf9f4 !important;
+}
+.Content .el-input,
+.Content .el-date-editor--daterange.el-input__inner {
+  width: 100% !important;
+}
+</style>
 <style scoped lang="scss">
+.el-form-item {
+  margin: 15px 0 20px 0;
+}
+.red {
+  color: red;
+}
+.black {
+  color: black;
+}
 @import "@/assets/styles/rightContent.scss";
-
 .hbyp {
   font-size: 14px;
   font-family: Source Han Sans CN;
@@ -296,4 +348,8 @@ export default {
   margin-right: 16px;
   cursor: pointer;
 }
+.gzClass {
+  color: #555;
+      cursor: no-drop;
+}
 </style>