Merge remote-tracking branch 'origin/visu_emergency_01_siping_2.5d' into visu_emergency_01_siping_2.5d

package.json

@@ -46,6 +46,7 @@
     "element-ui": "2.15.6",
     "file-saver": "2.0.5",
     "fuse.js": "6.4.3",
+    "highcharts-vue": "^1.4.3",
     "highlight.js": "9.18.5",
     "html2canvas": "^1.4.1",
     "js-beautify": "1.13.0",

src/components/supermap-2.5d.vue

@@ -10,7 +10,7 @@
           </div>
           <div class="map-txt" v-html="bindPopupHtml">
           </div>
-          <el-button size="mini" type="primary"
+          <el-button size="mini" type="primary" v-if="clickName!=''"
                      class="sj-icon-btn" @click="openTvwall"
           >查看
           </el-button>

src/views/bigdata/bigdata.vue

@@ -55,8 +55,9 @@
       <div class="bigdata-list wid-li-3 m-l-15 flex-r">
         <div class="b-con mg-b-20 tall">
           <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
-            <span>仓库信息</span>
+            <span>危化企业信息</span>
           </div>
+          <chartenterprises/>
         </div>
         <div class="b-con mg-b-20 b-49">
           <div class="b-tit"><img src="@/assets/images/integrated/bigdata-tit-icon.png">
@@ -149,6 +150,7 @@ import bigdataSupermap from '@/components/supermap' //超图
 import chartEvent from './chart-event.vue' //1  隐患整改情况
 import chartteam from './chart-team.vue'
 import chartwarehouse from './chart-warehouse.vue'
+import chartenterprises from './chart-enterprises.vue'
 import chartForestFarm from './chart-forestFarm.vue' //2  行业高危企业
 import chartEquipmentType from './chart-equipmentType.vue' //3  从业人员分布情况
 import chartFireCause from './chart-fireCause.vue' //4  应急物资、、
@@ -172,6 +174,7 @@ export default {
     tabbar,
     chartEvent,
     chartForestFarm,
+    chartenterprises,
     chartEquipmentType,
     chartFireCause,
     chartDeviceReportingEvents,

src/views/bigdata/chart-enterprises.vue

@@ -0,0 +1,84 @@
+<template>
+  <div class="chart-container">
+    <div id="a" style="width: 100%; height:24vh;">
+      <highcharts :options="chartOptions" :callback="myCallback"
+                  style="width: 100%; height:50vh;"></highcharts>
+    </div>
+  </div>
+</template>
+
+<script>
+
+import { Chart } from "highcharts-vue";
+import {getBigDataForQ} from "@/api/bigdata";
+export default {
+  name: 'extend-graphDemo-highchartsColumn',
+  components: {
+    highcharts: Chart
+  },
+  data() {
+    return {
+      chartOptions: {
+        title: {
+          text: ''
+        },
+        chart: {
+          type: 'column',
+          backgroundColor: '#000000'  // 修改背景颜色为黑色
+        },
+        xAxis: {
+          categories: [
+
+          ],
+          crosshair: true
+        },
+        yAxis: {
+          min: 0,
+          title: {
+            text: '数量 (个)'
+          }
+        },
+        tooltip: {
+          // head + 每个 point + footer 拼接成完整的 table
+          headerFormat: '<table>'+'<span style="font-size:10px">{point.key}</span>',
+          pointFormat: '<tr><td style="color:{series.color};padding:0">: </td>' +
+            '<td style="padding:0"><b>{point.y:.0f}</b></td></tr>',
+          footerFormat: '</table>',
+          shared: true,
+          useHTML: true
+        },
+        plotOptions: {
+          column: {
+            borderWidth: 0
+          }
+        },
+        credits: {
+          enabled: false
+        },
+        series: [{
+          name: '危化企业',
+          data: []
+        }]
+      }
+
+    }
+  },
+  mounted() {this.getData() },
+
+  methods: {
+    myCallback() {
+      console.log("this is callback function");
+    },
+    getData() {
+      getBigDataForQ('enterprises').then(res =>{
+        if (res.data !== null) {
+          for (let i = 0; i < res.data.length; i++) {
+            this.chartOptions.xAxis.categories.push(res.data[i].dict_label);
+            this.chartOptions.series[0].data.push(res.data[i].count);
+          }
+        }
+      })
+    }
+  }
+}
+</script>