在已完成部分图表增加confine属性来控制tooltip超出问题 修改bar图表上下定位问题 火灾占比图修改图表展示方式和lable内容展示，饼状图大小环形等 散点图修改图标大小 词云部分修改词云二次加载，修改词云边界 警情页面增加实时视频功能，暂时使用本地文件代替直播方式，插件引用完成，待测试使用（80%） 投诉举报模块柱状图对展示字段进行切割处理来控制展示内容 修改城市消防体征页面风险对比图样式和两端对齐均分效果 主页（100%）： 1、消防执法情况、闵行区消防情况、投诉举报情况、历史火灾趋势、火灾趋势图 物联网设备监控情况六个模块已全部重构完成 2、企业云点击跳转物联网平台功能已完成 3、header部分搜索条件在主页进行控制隐藏

package-lock.json

@@ -13399,4 +13399,4 @@
             }
         }
     }
-}
+}

src/components/bar/index.vue

@@ -35,6 +35,7 @@ export default {
           textStyle: {
             color: "#FFF",
           },
+          confine: true,
           backgroundColor: "rgba(11, 12, 72, 0.8)",
           borderColor: "rgba(11, 12, 72, 0.4)",
           position: "bottom",

src/components/category-line/index.vue

@@ -25,10 +25,10 @@ export default {
     getData(val = this.dataMap) {
       echarts.init(this.$refs.echartD).setOption({
         grid: {
-          top: 30,
+          top: 20,
           left: 30,
           right: 30,
-          bottom: 50,
+          bottom: 30,
         },
         xAxis: {
           type: "category",
@@ -58,6 +58,7 @@ export default {
           textStyle: {
             color: "#FFF",
           },
+          confine: true,
           backgroundColor: "rgba(11, 12, 72, 0.8)",
           borderColor: "rgba(11, 12, 72, 0.4)",
           position: "bottom",

src/components/category/index.vue

@@ -46,6 +46,7 @@ export default {
           textStyle: {
             color: "#FFF",
           },
+          confine: true,
           backgroundColor: "rgba(11, 12, 72, 0.8)",
           borderColor: "rgba(11, 12, 72, 0.4)",
           position: "bottom",

src/components/fire-pie/index.vue

@@ -8,7 +8,7 @@ export default {
   props: {
     dataMap: { type: Array, default: () => [] },
     isVs: { type: Boolean, default: () => false },
-    radius: { type: Number, default: () => 50 },
+    radius: { type: Number, default: () => 140 },
     color: {
       type: Array,
       default: () => [
@@ -43,6 +43,7 @@ export default {
       echarts.init(this.$refs.echartD).setOption({
         color: this.color,
         tooltip: {
+          confine: true,
           trigger: "item",
           formatter: (params) => {
             return `</span>${  params.name + ":" + parseInt(params.value * 100) / 100 + "%" }`;
@@ -60,6 +61,7 @@ export default {
           },
           tooltip: {
             show: true,
+            confine: true,
             formatter: (params) => {
               return `</span>${ params.name +  ":" + parseInt( this.dataMap.find((val) => val.name === params.name).value * 100 ) / 100 + "%" }`;
             },
@@ -71,14 +73,21 @@ export default {
             type: "pie",
             top: -50,
             left: 0,
-            radius: this.radius + '%',
+            radius: [this.radius / 2, this.radius],
+            // roseType: 'area',
+            // radius: this.radius + '%',
             data: val,
             label: {
-              // show: !this.isVs, 
+              // show: false, 
+              position: 'inner',
               color: "#FFF",
               fontSize: 16,
               width: 200,
               overflow: "truncate",
+              formatter: (params) => {
+                console.log(params)
+                return `${ parseInt(params.value * 100) / 100 + "%" }`;
+              },
             },
             emphasis: {
               itemStyle: {

src/components/graph/index.vue

@@ -35,7 +35,9 @@ export default {
           show: false,
           text: "笛卡尔坐标系上的 Graph",
         },
-        tooltip: {},
+        tooltip: {
+          confine: true,
+        },
         grid: {
           top: 40,
           bottom: 30,

src/components/line-smooth/index.vue

@@ -57,6 +57,7 @@ export default {
           textStyle: {
             color: "#FFF",
           },
+          confine: true,
           backgroundColor: "rgba(11, 12, 72, 0.8)",
           borderColor: "rgba(11, 12, 72, 0.4)",
           position: "bottom",

src/components/mixins/linstener.js

@@ -13,11 +13,9 @@ export default {
     },
     watch: {
         '$store.state.typeTime' (val) {
-            console.log(val)
             this.getData && this.getData(val)
         },
         '$store.state.timeList' (val) {
-            console.log(val)
             this.getData && this.getData(val)
         }
     },
@@ -26,13 +24,10 @@ export default {
     },
     methods: {
         resizeTimeActions(list) {
-            console.log(this.resizeTime)
             if (!this.resizeTime) return;
-            console.log(list)
             this.resizeTime = false
             setTimeout(() => {
                 list.forEach(element => {
-                    console.log(element)
                     element && element.resize()
                 });
 

src/components/pie-3D/index.vue

@@ -32,6 +32,7 @@ export default {
       echarts.init(this.$refs.echartD).setOption({
         // color:['rgba(21,88,127,1)','rgba(24,91,170,1)','rgba(139,206,241,1)','rgba(246,198,87,1)','rgba(242,151,81,1)',],
         tooltip: {
+          confine: true,
           formatter: (params) => {
             if (params.seriesName !== "mouseoutSeries") {
               return `<span style="display:inline-block;margin-right:.0625rem;border-radius:.125rem;width:.125rem;height:.125rem;background-color:${
@@ -68,6 +69,7 @@ export default {
           orient: "horizontal",
           tooltip: {
             show: true,
+            confine: true,
             formatter: (params) => {
                 return `</span>${
                   params.name +':' + parseInt(echartJ(this.dataMap).series.find(val=> val.name === params.name).pieData.value * 100)/100 + '%'

src/components/radar/index.vue

@@ -48,6 +48,7 @@ export default {
           textStyle: {
             color: "#FFF",
           },
+          confine: true,
           backgroundColor: "rgba(11, 12, 72, 0.8)",
           borderColor: "rgba(11, 12, 72, 0.4)",
           position: "bottom",
@@ -92,7 +93,6 @@ export default {
       });
     },
     resize() {
-      // console.log(2)
       echarts.init(this.$refs.echartD).resize();
     },
   },

src/components/scatter/index.vue

@@ -33,6 +33,7 @@ export default {
           textStyle: {
             color: "#FFF",
           },
+          confine: true,
           formatter: function (param) {
             return `${param.data[3]}<br> 过火面积：${param.data[0]}<br> 火灾数量：${param.data[1]}<br> 死亡人数：${param.data[2]}`;
           },
@@ -97,7 +98,7 @@ export default {
             }),
             type: "scatter",
             symbolSize: function (data) {
-              return Math.sqrt(data[2]) + 1 * 10;
+              return Math.sqrt(data[2]) + 1 * 20;
             },
             itemStyle: {
               shadowBlur: 10,

src/components/wordCloud/index.vue

@@ -102,12 +102,24 @@ export default {
           value: 957,
         },
       ];
-      var color = ['#ff4a4a','#f7b932','#67ff72','#62f6fb','#7770ff','#70ffd8','#fd70ff','#f3ff70','#ffffff']
+      let datamap = [...this.dataMap, ...data, ...this.$store.state.testList];
+      var color = [
+        "#ff4a4a",
+        "#f7b932",
+        "#67ff72",
+        "#62f6fb",
+        "#7770ff",
+        "#70ffd8",
+        "#fd70ff",
+        "#f3ff70",
+        "#ffffff",
+      ];
       maskImage.onload = () => {
         echarts.init(this.$refs.echartD).setOption({
           backgroundColor: "transparent",
           tooltip: {
             show: true,
+            confine: true,
           },
           series: [
             {
@@ -122,16 +134,11 @@ export default {
               top: "center",
               drawOutOfBound: false,
               textStyle: {
-                color:  ()=> {
-                  return color[Math.round(Math.random() * (color.length-1))];
+                color: () => {
+                  return color[Math.round(Math.random() * (color.length - 1))];
                 },
               },
-              data: [...this.dataMap,...data,...this.$store.state.testList,...(data.map((val,ind)=> {
-                return {
-                  name:val.name + this.$store.state.testList[ind].name,
-                  value:this.$store.state.testList[ind].value,
-                }
-              }))],
+              data: datamap,
             },
           ],
         });

src/views/Home.vue

@@ -1,21 +1,46 @@
 <template>
   <div class="home">
-    <el-col :span="8" class="flexJ boxConentSize boxLeft">
+    <el-col :span="8" class="boxConentSize boxLeft">
       <img src="~@a/img/home/title1.png" class="titleLift" />
-      <el-col class="flexJ">
-        <h4>警情时段分布</h4>
-        <line-smooth ref="lineSmooth" :dataMap="alertByHouseList" style="padding: 0 0.25rem; box-sizing: border-box"></line-smooth>
+      <el-col class="flexJ leftTopBox">
+        <h4>消防执法情况</h4>
+        <el-row class="leftTopContent">
+          <el-col :span="7" v-for="item in SiAeAllList" :key="item.checkType">
+            <el-col class="leftTopTitle">{{ item.checkType }}</el-col>
+            <el-col class="leftTopCenter">{{ item.number }}</el-col>
+            <el-col class="leftTopBot">
+              <el-col
+                ><el-col>环比</el-col
+                ><el-col
+                  >{{ (item.linkRelativeRatio * 100).toFixed(0) }}%</el-col
+                ></el-col
+              >
+              <el-col
+                ><el-col>同比</el-col
+                ><el-col
+                  >{{ (item.sameRatio * 100).toFixed(0) }}%</el-col
+                ></el-col
+              >
+            </el-col>
+          </el-col>
+          <el-col :span="7"> </el-col>
+        </el-row>
       </el-col>
-      <el-col class="flexJ">
-        <h4>历史警情趋势图</h4>
-        <bar-chart ref="barChart" :dataMap="alertByHouseList" style="padding: 0 0.25rem; box-sizing: border-box"></bar-chart>
+      <el-col class="flexJ echartsPad">
+        <h4>闵行区消防情况</h4>
+        <radar-chart
+          v-if="complaintList.length > 0"
+          :dataMap="complaintList"
+          name="闵行区消防情况"
+          ref="radarChart"
+        ></radar-chart>
       </el-col>
-      <el-col class="flexJ">
+      <el-col class="flexJ echartsPad">
         <h4>举报投诉情况</h4>
-        <tree-map :dataMap="reportComplaintList" class="treeMap" ref="treeMap"></tree-map>
+        <word-cloud ref="wordCloud" :dataMap="reportComplaintList"></word-cloud>
       </el-col>
     </el-col>
-    <el-col :span="8" class="flexJ boxCenter" ref="boxCenter">
+    <el-col :span="8" class="boxCenter" ref="boxCenter">
       <img class="centerTop" src="~@a/img/home/home_center.png" />
       <el-col class="centerBot">
         <el-col class="photo_box">
@@ -31,43 +56,86 @@
         </el-col>
       </el-col>
     </el-col>
-    <el-col :span="8" class="flexJ boxConentSize boxRight">
+    <el-col :span="8" class="boxConentSize boxRight">
       <img src="~@a/img/home/title1.png" class="titleLift" />
-      <el-col class="flexJ">
+      <el-col class="flexJ rightTopBox">
         <h4>历史火灾趋势</h4>
-        <category-line ref="categoryLine" style="padding: 0 0.25rem; box-sizing: border-box" :dataMap="timeData"></category-line>
+        <el-row class="propSituation">
+          <el-col v-for="item in unitBeOnDutyList" :key="item.name">
+            <el-col><img src="~@a/img/test/bg2.png" alt="" /></el-col>
+            <el-col class="rank">{{ item.postName }}</el-col>
+            <el-col class="propName">{{ item.name }}</el-col>
+          </el-col>
+        </el-row>
       </el-col>
       <el-col class="flexJ">
-        <h4>火灾原因占比</h4>
-        <el-row class="threeBox">
-          <div class="flexBoxE"  :style="isVs3D?'padding-top:0.5rem':'padding-top:0'">
-            <el-form v-show="isVs3D" :inline="true" size="mini" :model="fireCauseRatioObj" >
-              <el-form-item label="街道：">
-                <el-select @change="getFireCause(1)" v-model="fireCauseRatioObj.address" placeholder="选择街道" filterable clearable>
-                  <el-option :label="item" :value="item" v-for="item in fireAddressList" :key="item" ></el-option>
+        <h4>火灾趋势图</h4>
+        <el-row class="fireContent">
+          <el-row class="selectBar">
+            <el-row>
+              <el-button
+                size="mini"
+                @click="searchTime(1)"
+                :class="{ btnClick: timeArea === 1 }"
+                >近一年</el-button
+              >
+              <el-button
+                size="mini"
+                @click="searchTime(3)"
+                :class="{ btnClick: timeArea === 3 }"
+                >近三年</el-button
+              >
+              <el-button
+                size="mini"
+                @click="searchTime(5)"
+                :class="{ btnClick: timeArea === 5 }"
+                >近五年</el-button
+              >
+            </el-row>
+            <el-form :inline="true" size="mini" :model="barForm">
+              <el-form-item label="">
+                <el-select
+                  v-model="barForm.address"
+                  @change="getTrend()"
+                  filterable
+                  clearable
+                  placeholder="街道"
+                >
+                  <el-option
+                    :label="item"
+                    :value="item"
+                    v-for="(item, ind) in fireAddressList"
+                    :key="ind"
+                  ></el-option>
                 </el-select>
               </el-form-item>
-            </el-form>
-            <pie-three-d ref="pieThreeD1" :dataMap="fireCauseRatioList" :distance="distance" :isVs="isVs3D"></pie-three-d>
-          </div>
-          <div class="line" v-show="isVs3D"></div>
-          <div class="flexBoxE" v-show="isVs3D">
-            <el-form v-show="isVs3D" :inline="true" size="mini" :model="fireCauseRatioObj" >
-              <el-form-item label="街道：">
-                <el-select @change="getFireCause(2)" v-model="fireCauseRatioObj.address2" placeholder="选择街道" filterable clearable>
-                  <el-option :label="item" :value="item" v-for="item in fireAddressList" :key="item" ></el-option>
+              <el-form-item label="">
+                <el-select
+                  @change="getTrend()"
+                  v-model="barForm.fireType"
+                  placeholder="火灾类型"
+                  filterable
+                  clearable
+                >
+                  <el-option
+                    :value="item"
+                    v-for="(item, ind) in fireTypeList"
+                    :key="ind"
+                  ></el-option>
                 </el-select>
               </el-form-item>
             </el-form>
-            <pie-three-d style="flex: 1" ref="pieThreeD2" :dataMap="fireCauseRatioList2" :distance="distance" :isVs="isVs3D"></pie-three-d>
-          </div>
-          <div class="VS" @click="vsClick('isVs3D')" :style="{ 'font-size': isVsTab ? '.2rem' : '.225rem' }">
-            {{ isVs3D ? "返回" : "VS" }}
-          </div>
+          </el-row>
+          <el-row class="fireBar">
+            <category-line
+              ref="categoryLine"
+              :dataMap="timeData"
+            ></category-line>
+          </el-row>
         </el-row>
       </el-col>
-      <el-col class="flexJ">
-        <h4>详细火灾情况</h4>
+      <el-col class="flexJ echartsPad" style="height: 200px">
+        <h4>物联网设备监控情况</h4>
         <se-table
           ref="seTable"
           :dataMap="tableData"
@@ -80,57 +148,64 @@
 </template>
 
 <script>
-import treeMap from "@c/treemap";
-import pieThreeD from "@c/pie-3D";
-import categoryLine from "@c/category-line";
 import seTable from "@c/se-table";
 import linstener from "@c/mixins/linstener";
-import barChart from "@c/bar";
-import lineSmooth from "@c/line-smooth";
+import radarChart from "@c/radar";
+import wordCloud from "@c/wordCloud";
+import categoryLine from "@c/category-line";
 export default {
-  components: { treeMap, pieThreeD, barChart, lineSmooth, categoryLine, seTable },
+  components: { seTable, radarChart, wordCloud, categoryLine },
   data() {
     return {
-      reportComplaintList: [],
-      timeData: [120, 200, 150, 80, 70, 110, 130, 150, 80, 70, 110, 130],
-      tableData: [],
+      timeData: [],
+      tableData: [
+        {address:'数量',burnedArea:100,property:200,deathTol:100,nonFatal:100,},
+        {address:'告警',burnedArea:30,property:50,deathTol:5,nonFatal:20,},
+        {address:'离线',burnedArea:1,property:10,deathTol:20,nonFatal:5,},
+        {address:'离线率',burnedArea:'100%',property:'100%',deathTol:'100%',nonFatal:'100%',},
+        {address:'告警率',burnedArea:'5%',property:'5%',deathTol:'5%',nonFatal:'5%',},
+      ],
       headerData: [
-        { prop: "address", name: "火灾地址" },
-        { prop: "burnedArea", name: "过火面积（m²）" },
-        { prop: "propertyLoss", name: "财产损失（万元）" },
-        { prop: "deathToll", name: "死亡人数（人）" },
-        { prop: "nonFatal", name: "受伤人数（人）" },
-        { prop: "disasterHome", name: "受灾户（户）" },
-        { prop: "fireCause", name: "火灾原因" },
+        { prop: "address", name: "类型" },
+        { prop: "burnedArea", name: "电气设备" },
+        { prop: "property", name: "烟感设备" },
+        { prop: "deathTol", name: "温感设备" },
+        { prop: "nonFatal", name: "水压设备" },
+      ],
+      fireTypeList: [],
+      fireAddressList: [],
+      SiAeAllList: [],
+      reportComplaintList: [],
+      unitBeOnDutyList: [],
+      complaintList: [
+        { name: "设备状况", value: 341 },
+        { name: "历史火灾", value: 155 },
+        { name: "隐患状态", value: 156 },
+        { name: "建筑整体", value: 118 },
+        { name: "执法监管", value: 322 },
+        { name: "场所行业等指数", value: 156 },
       ],
-      fireCauseRatioObj:{
-        address:'',
-        address2:'',
+      timeArea: 1,
+      barForm: {
+        fireType: "",
+        address: "",
       },
-      fireCauseRatioList: [],
-      fireCauseRatioList2: [],
-      fireTypeList:[],
-      fireAddressList:[],
-      alertByHouseList:[],
     };
   },
   computed: {},
   watch: {},
   mixins: [linstener],
-  created(){
-    this.getData()
+  created() {
+    this.getData();
   },
   mounted() {
     window.addEventListener(
       "resize",
       () =>
         this.resizeTimeActions([
-          this.$refs.treeMap,
-          this.$refs.pieThreeD1,
-          this.$refs.pieThreeD2,
           this.$refs.categoryLine,
-          this.$refs.lineSmooth,
-          this.$refs.barChart,
+          this.$refs.wordCloud,
+          this.$refs.radarChart,
         ]),
       true
     );
@@ -143,34 +218,10 @@ export default {
       ]);
       if (res[0]) this.fireTypeList = res[0].data;
       if (res[1]) this.fireAddressList = res[1].data;
-      this.getTrend();
-      this.getFireCause();
-      this.getFireStatis();
+      this.getSiAeAllCollect();
       this.getReportComplaint();
-      this.getAlertByHouse();
-    },
-    // 投诉举报情况
-    async getReportComplaint() {
-      let res = await this.$axios.get(this.$api.siaeall.reportComplaint);
-      if (res)
-        this.reportComplaintList = res.data.map((val) => {
-          return {
-            name: val.type,
-            value: val.number,
-          };
-        });
-    },
-    //TODO 警情时段分布
-    async getAlertByHouse() {
-      let res = await this.$axios.get(this.$api.house.alertStatisticsByHouse);
-      if (res){
-        this.alertByHouseList = res.data.map((val) => {
-          return {
-            name: val.type,
-            value: val.number,
-          };
-        });
-      }
+      this.getUnitBeOnDuty();
+      this.getTrend();
     },
     // 火灾趋势图 柱状图
     async getTrend() {
@@ -178,63 +229,70 @@ export default {
         this.$api.fire.trendQuery +
           "?" +
           this.$qs.stringify({
-            year: new Date().getFullYear(),
-            startTime: this.$store.state.timeList[0] || "",
-            endTime: this.$store.state.timeList[1] || "",
+            address: this.barForm.address,
+            fireType: this.barForm.fireType,
+            startTime:
+              new Date().getFullYear() -
+              this.timeArea +
+              "-" +
+              (new Date().getMonth() + 1) +
+              "-" +
+              new Date().getDate() +
+              " 00:00:00",
+            endTime:
+              new Date().getFullYear() +
+              "-" +
+              (new Date().getMonth() + 1) +
+              "-" +
+              new Date().getDate() +
+              " 00:00:00",
           })
       );
       if (res) this.timeData = res.data;
     },
-    // 占比图 饼图
-    async getFireCause(val) {
+    // 支队值班情况
+    async getUnitBeOnDuty() {
       let res = await this.$axios.get(
-        this.$api.fire.fireCauseRatio +
+        this.$api.water["unitBeOnDuty"] +
           "?" +
           this.$qs.stringify({
-            startTime: this.$store.state.timeList[0] || "",
-            endTime: this.$store.state.timeList[1] || "",
-            address:val === 1 ? this.fireCauseRatioObj.address :val === 2 ? this.fireCauseRatioObj.address2 : ''
+            startTime: "2020-03-03 00:00:00",
+            endTime: "2020-03-03 23:59:59",
           })
       );
-      if (res){
-        let ratioList = res.data.map((val) => {
-          return {
-            name: val.fireType || " ",
-            value: val.radio ? val.radio * 100 : 0,
-            itemStyle: {
-              opacity: 0.9,
-            },
-          };
-        })
-        if(val === 1){
-          this.fireCauseRatioList = ratioList
-        } else if(val === 2) {
-          this.fireCauseRatioList2 = ratioList
-        } else{
-          this.fireCauseRatioList = ratioList
-          this.fireCauseRatioList2 = ratioList
-        }
-      }
+      if (res) this.unitBeOnDutyList = res.data;
     },
-    // 详细火灾情况，表格
-    async getFireStatis() {
+    // 消防执法情况
+    async getSiAeAllCollect() {
       let res = await this.$axios.get(
-        this.$api.fire.fireStatistics +
+        this.$api.siaeall.siAeAllCollect +
           "?" +
           this.$qs.stringify({
-            current: 1,
-            size: 1000,
             startTime: this.$store.state.timeList[0] || "",
             endTime: this.$store.state.timeList[1] || "",
-            address:''
           })
       );
-      if (res){ 
-          this.tableData = res.data.records;
-      }
+      if (res) this.SiAeAllList = res.data;
+    },
+    // 投诉举报情况 Top
+    async getReportComplaint() {
+      let res = await this.$axios.get(this.$api.siaeall.reportComplaint);
+      if (res)
+        this.reportComplaintList = res.data.map((val) => {
+          return {
+            name: val.type,
+            value: val.number,
+          };
+        });
+    },
+    searchTime(val) {
+      if (val === this.timeArea) return;
+      this.timeArea = val;
+      this.getTrend();
     },
     imgClick(val) {
       console.log(val);
+      if(val === 2) window.open('https://iot.usky.cn/YtIoT/mhxf_index.jsp')
     },
   },
 };
@@ -257,6 +315,12 @@ $centerCirWidth: 3.375rem;
   }
   .flexJ {
     position: relative;
+    padding: 0.5rem 0.3125rem 0.25rem;
+    box-sizing: border-box;
+    background: url("~@a/img/home/box-bg.png") no-repeat;
+    background-size: 100% 100%;
+    flex: 1;
+    margin-top: 10px;
     h4 {
       font-size: 0.2125rem;
       position: absolute;
@@ -272,46 +336,188 @@ $centerCirWidth: 3.375rem;
       border-radius: 0.125rem;
     }
   }
-  .threeBox {
-    width: 100%;
-    height: 100%;
-    position: relative;
+  .echartsPad {
+    padding: 0.375rem 0.25rem 0.1875rem;
+    height: 30%;
+  }
+  .boxConentSize {
+    display: flex;
     justify-content: space-between;
-    align-items: center;
-    flex-wrap: nowrap;
-    & > .flexBoxE {
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-      justify-content: space-between;
+    flex-direction: column;
+    padding: 0 0.25rem;
+    box-sizing: border-box;
+    height: 100%;
+  }
+  .leftTopBox {
+    margin: 0;
+    min-height: 3.75rem;
+    font-family: "DS", "DS-B", "DS-BB", "DS-BS";
+    .leftTopContent {
       width: 100%;
       height: 100%;
-      padding-top: 0.5rem;
-      box-sizing: border-box;
-      .el-form {
-        text-align: center;
-        .el-form-item {
-          margin: 0;
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: space-between;
+      color: #fff;
+      & > .el-col {
+        width: 32%;
+        height: 32%;
+        // background: url(~@a/img/enforce/bg3.png) no-repeat;
+        box-shadow: inset 0 0 0.2rem 0.0125rem #30cfff;
+        background-size: 100% 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        padding: 0.125rem;
+        box-sizing: border-box;
+        border-radius: 0.125rem;
+        & > .el-col {
+          display: flex;
+          justify-content: center;
+          flex: none;
+          align-items: center;
+        }
+        .leftTopTitle {
+          font-size: 0.2rem;
+        }
+        .leftTopCenter {
+          font-size: 0.3rem;
+          color: #fcbb0b;
+        }
+        .leftTopBot {
+          font-size: 0.175rem;
+          justify-content: space-between;
+          align-items: center;
+          & > .el-col {
+            flex: none;
+            display: flex;
+            align-items: center;
+            .el-col {
+              flex: none;
+            }
+          }
+          & > .el-col:first-child {
+            & > .el-col:last-child {
+              color: red;
+              margin-left: 0.0625rem;
+            }
+          }
+          & > .el-col:last-child {
+            & > .el-col:last-child {
+              color: green;
+              margin-left: 0.0625rem;
+            }
+          }
+        }
+        &:last-child {
+          background: none;
+          box-shadow: none;
         }
       }
     }
-    .line {
-      flex: none;
-      width: 1px;
-      height: 3.75rem;
-      opacity: 1;
-      background: linear-gradient(
-        rgba(255, 255, 255, 0),
-        #30cfff,
-        rgba(255, 255, 255, 0)
-      );
-      // box-shadow: 0 0 .125rem .0375rem #30cfff;
+  }
+  .rightTopBox {
+    margin: 0;
+    min-height: 3.75rem;
+    .propSituation {
+      height: 100%;
+      width: 100%;
+      flex-wrap: wrap;
+      align-items: center;
+      margin-bottom: 0.125rem;
+      overflow-y: scroll;
+      overflow-x: hidden;
+      scrollbar-width: none;
+      /* firefox */
+      -ms-overflow-style: none;
+      /* IE 10+ */
+      overflow-x: hidden;
+      overflow-y: auto;
+      &::-webkit-scrollbar {
+        display: none;
+        // opacity: 0;
+        /* Chrome Safari */
+      }
+      & > .el-col {
+        width: 32%;
+        height: 48%;
+        max-height: 48%;
+        margin: 0.0375rem calc(4% / 6);
+        padding: 0.125rem;
+        flex: none;
+        box-shadow: inset 0 0 0.4375rem 0.0625rem #30cfff;
+        display: flex;
+        flex-direction: column;
+        font-size: 0.2rem;
+        color: #dbe9ea;
+        font-weight: 400;
+        // font-family: Microsoft YaHei Regular, Microsoft YaHei Regular-Regular;
+        .el-col {
+          flex: none;
+          overflow: hidden;
+        }
+        .rank {
+          // padding: 0.125rem 0;
+          text-align: center;
+          box-sizing: border-box;
+        }
+        .propName {
+          // padding: 0.125rem 0;
+          text-align: center;
+          box-sizing: border-box;
+        }
+        & .el-col:nth-child(1) {
+          flex: 1;
+          img {
+            // width: 100%;
+            height: 100%;
+            // objec-fit: cover;
+            margin: 0 auto;
+            display: block;
+          }
+        }
+      }
     }
   }
-    .VS{
-      padding: 0;
-      top: .0625rem;
+  .fireContent {
+    width: 100%;
+    height: 100%;
+    display: block;
+    .selectBar {
+      width: 100%;
+      display: flex;
+      max-height: 0.375rem;
+      justify-content: space-between;
+      .el-form-item {
+        margin-bottom: 0;
+      }
+      .el-row {
+        display: flex;
+        .el-button {
+          // width: 0.375rem;
+          height: 0.325rem;
+          min-height: auto;
+          padding: 0 0.0625rem;
+          margin-right: 0.075rem;
+          margin-left: 0;
+          background: #000707;
+          color: #fff;
+          border: 1px solid;
+          box-sizing: border-box;
+          border-radius: 0.0375rem;
+          font-size: 0.15rem;
+          border-image: linear-gradient(0deg, #0461c2 0%, #0ecdf1 100%) 1 1;
+        }
+        .btnClick {
+          color: #fccf2a;
+          border-image: linear-gradient(0deg, #ff6800 0%, #fccf2a 100%) 1 1;
+        }
+      }
+    }
+    .fireBar {
+      height: calc(100% - 0.375rem);
     }
+  }
   .boxCenter {
     width: $centerWidth;
     box-sizing: border-box;
@@ -333,26 +539,8 @@ $centerCirWidth: 3.375rem;
       flex: initial;
     }
   }
-  .boxConentSize {
-    display: flex;
-    justify-content: space-between;
-    flex-direction: column;
-    padding: 0 0.25rem;
-    box-sizing: border-box;
-    & > .el-col {
-      height: calc((100% - 1rem) / 3);
-      padding: .4375rem .3125rem .25rem;
-      box-sizing: border-box;
-      background: url('~@a/img/home/box-bg.png') no-repeat;
-      background-size: 100% 100%;
-      flex: initial;
-    }
-    .treeMap {
-      padding: 0.25rem;
-      box-sizing: border-box;
-    }
-  }
 }
+
 .photo_box {
   width: 0.875rem;
   position: absolute;

src/views/comprehensive-disposal.vue

@@ -112,7 +112,7 @@
                         <el-col :span="12">车牌号：{{scope.row.carNumber}}</el-col>
                         <el-col :span="12">车辆状态：{{scope.row.carStatus}}</el-col>
                         <el-col :span="14">警情处置时长：{{scope.row.disposeTime}}</el-col>
-                        <el-col :span="10" style="color:#0ADAFF;text-decoration: underline;cursor: pointer;">实时视频</el-col>
+                        <el-col :span="10" @click="isVideo = true" style="color:#0ADAFF;text-decoration: underline;cursor: pointer;">实时视频</el-col>
                       </el-row>
                       <el-row class="tablePersonnel">
                         <el-col :span="7">
@@ -149,6 +149,22 @@
               </template>
             </el-table-column>
           </el-table>
+           <el-card class="box-card" v-if="isVideo">
+            <template #header>
+              <div class="card-header">
+                <span>实时视频</span>
+                <i class="el-icon-close" @click="isVideo = false"></i>
+              </div>
+            </template>
+            <!-- <img src="~@a/img/test/car.png" alt=""> -->
+            <!-- controls -->
+            <video src="~@a/img/test/card.mp4" class="videoBox" autoplay height="auto"></video>
+            <!-- <video-player class="video-player vjs-custom-skin"
+              ref="videoPlayer"
+              :playsinline="true"
+              :options="playerOptions">
+            </video-player> -->
+          </el-card>
         </el-col>
       </el-col>
     </transition>
@@ -161,6 +177,8 @@ import lineSmooth from "@c/line-smooth";
 import gauge from "@c/gauge";
 import linstener from "@c/mixins/linstener";
 import map from "@c/mixins/map";
+
+
 export default {
   data() {
     return {
@@ -252,6 +270,30 @@ export default {
         { prop: "department", name: "所属中队" },
         { prop: "status", name: "状况" },
       ],
+      isVideo:false,
+        playerOptions: {
+            playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
+            autoplay: false, //如果true,浏览器准备好时开始回放。
+            muted: false, // 默认情况下将会消除任何音频。
+            loop: false, // 导致视频一结束就重新开始。
+            preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
+            language: "zh-CN",
+            aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
+            fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
+            sources: [{
+                type: "video/mp4",
+                src: require("../assets/img/test/card.mp4"), //视频url地址
+            }, ],
+            poster: require("../assets/img/test/car.png"), //你的封面地址
+            // width: document.documentElement.clientWidth,
+            notSupportedMessage: "此视频暂无法播放，请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
+            controlBar: {
+                timeDivider: true,
+                durationDisplay: true,
+                remainingTimeDisplay: false,
+                fullscreenToggle: true, //全屏按钮
+            },
+        },
       barForm: {
         fireType: "",
         address: "",
@@ -263,7 +305,7 @@ export default {
     };
   },
   mixins: [linstener,map],
-  components: { barChart, lineSmooth, gauge },
+  components: { barChart, lineSmooth, gauge},
   created() {
     this.getData();
   },
@@ -329,6 +371,10 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.videoBox{
+  width: 100%;
+  height: auto;
+}
 .contentBox {
   display: flex;
   width: 100%;
@@ -491,6 +537,37 @@ export default {
       max-height: calc(100% - 4.6rem);
       padding: 0.5rem 0.35rem 0.25rem;
       box-sizing: border-box;
+      position: relative;
+      /deep/ .box-card{
+        position: absolute;
+        right: 0;
+        bottom: 0;
+        margin: auto;
+        border-radius: 3%;
+        width: 80%;
+        max-height: 100%;
+        box-shadow: inset 0 0 0.2rem 0.0125rem #30cfff;
+        background: rgba(0, 44, 110, 0.6);
+        border: none;
+        color: #FFF;
+        .el-card__header{
+          padding: .125rem;
+          border-color: #30cfff;
+          .card-header{
+            display: flex;
+            font-size: .2rem;
+            justify-content: space-between;
+            align-items: center;
+            i{
+              font-size: .275rem;
+            }
+          }
+        }
+        img{
+          width: 100%;
+          height: auto;
+        }
+      }
     }
   }
 }

src/views/enforcement-dynamic.vue

@@ -225,7 +225,7 @@ export default {
       if (res)
         this.reportComplaintList = res.data.map((val) => {
           return {
-            name: val.type,
+            name: val.type.slice(0,2),
             value: val.number,
           };
         });

src/views/fire-data-analysis.vue

@@ -32,7 +32,6 @@
         <el-col class="leftBot">
           <h4>火灾原因占比</h4>
           <el-row class="threeBox">
-            <!-- :style="isVs3D?'padding-top:0.75rem':'padding-top:0'" -->
             <div class="flexBoxE" :style="{'padding-top': isVsFirePie ? '0.75rem' : 0 }">
               <el-form v-show="isVsFirePie" :inline="true" size="mini" :model="fireCauseRatioObj">
                 <el-form-item label="街道：">
@@ -41,7 +40,7 @@
                   </el-select>
                 </el-form-item>
               </el-form>
-              <fire-pie ref="firePie1" :dataMap="fireCauseRatioList" :isVs="isVsFirePie" :radius="isVsFirePie ? 50 : 40"></fire-pie>
+              <fire-pie ref="firePie1" :dataMap="fireCauseRatioList" :isVs="isVsFirePie" :radius="isVsFirePie ? 80 : 140"></fire-pie>
             </div>
             <div class="line" v-show="isVsFirePie"></div>
             <div class="flexBoxE" v-show="isVsFirePie">
@@ -52,7 +51,7 @@
                   </el-select>
                 </el-form-item>
               </el-form>
-              <fire-pie style="flex: 1" ref="firePie2" :dataMap="fireCauseRatioList2" :isVs="isVsFirePie" :radius="isVsFirePie ? 50 : 50"></fire-pie>
+              <fire-pie style="flex: 1" ref="firePie2" :dataMap="fireCauseRatioList2" :isVs="isVsFirePie" :radius="isVsFirePie ? 80 : 80"></fire-pie>
             </div>
             <div class="VS"  @click="vsClick('isVsFirePie')" :style="{ 'font-size': isVsFirePie ? '.225rem' : '.25rem' }">
               {{ isVsFirePie ? "返回" : "VS" }}
@@ -92,74 +91,6 @@
           </el-col>
           <el-col class="rightBot">
             <h4>火灾情况分析</h4>
-            <!-- <el-table
-              :data="tableData2"
-              :key="windowWidth"
-              class="transparentTableRow"
-              height="100%"
-              row-style="height:.425rem;"
-              cell-style="height:.425rem;box-sizing: border-box;"
-              style="width: 100%; margin: 0 auto"
-            >
-              <el-table-column
-                show-overflow-tooltip
-                v-for="item in headerData2"
-                :key="item.prop"
-                :prop="item.prop"
-                align="center"
-                min-width="20"
-                :label="item.name"
-              >
-                <template v-if="item.prop === 'type'" #default="scope">
-                  <el-tooltip placement="left">
-                    <template #content>
-                      <div class="tableTooltip">
-                        <div class="tableTitle">
-                          <div>执勤力量</div>
-                        </div>
-                        <el-row class="tableContent">
-                          <el-col :span="12">电车呼台：{{scope.row.callingUp}}</el-col>
-                          <el-col :span="12">装备名称：{{scope.row.equipName}}</el-col>
-                          <el-col :span="12">车牌号：{{scope.row.carNumber}}</el-col>
-                          <el-col :span="12">车辆状态：{{scope.row.carStatus}}</el-col>
-                          <el-col :span="24">警情处置时长：{{scope.row.disposeTime}}</el-col>
-                        </el-row>
-                        <el-row class="tablePersonnel">
-                          <el-col :span="7">
-                            <img src="~@a/img/test/bg1.png" alt="" />
-                            <div>{{scope.row.commander}}</div>
-                            <div>指挥员</div>
-                          </el-col>
-                          <el-col :span="7">
-                            <img src="~@a/img/test/bg1.png" alt="" />
-                            <div>{{scope.row.correspondent}}</div>
-                            <div>通讯员</div>
-                          </el-col>
-                          <el-col :span="7">
-                            <img src="~@a/img/test/bg1.png" alt="" />
-                            <div>{{scope.row.firemen}}</div>
-                            <div>消防员</div>
-                          </el-col>
-                          <el-col :span="7">
-                            <img src="~@a/img/test/bg1.png" alt="" />
-                            <div>{{scope.row.driver}}</div>
-                            <div>驾驶员</div>
-                          </el-col>
-                        </el-row>
-                      </div>
-                    </template>
-                    <template>
-                      <i class="iconfont icon-icon-test" v-if="item.prop === 'type'"></i>
-                      <div class="name-wrapper" v-else>{{ scope.row[item.prop] }}</div>
-                    </template>
-                  </el-tooltip>
-                </template>
-                <template v-else #default="scope">
-                    {{ item.prop === 'type' ? '' : (item.prop === 'status' ? (scope.row[item.prop] == 1 ? '可用' : '不可用') : scope.row[item.prop])}}
-                </template>
-              </el-table-column>
-            </el-table> -->
-
             <scatter ref="scatter" :dataMap="fireBubbleList"></scatter>
           </el-col>
         </div>
@@ -305,7 +236,6 @@ export default {
   },
   watch:{
     isVsFirePie(val){
-      console.log(val)
       if(!val){ 
         this.fireCauseRatioObj.address = ''
         this.getFireCause(1)

src/views/fire-signs.vue

@@ -350,7 +350,7 @@ export default {
       }
     }
     .leftTop {
-      padding: 0.375rem 0.45rem 0.1875rem;
+      padding: 0.375rem 0.45rem .25rem;
       margin-top: 0;
       display: flex;
       justify-content: center;
@@ -367,9 +367,6 @@ export default {
         flex-wrap: nowrap;
         & > .flexBoxE {
           flex: 1;
-          display: flex;
-          flex-direction: column;
-          justify-content: space-between;
           width: 100%;
           height: 100%;
           box-sizing: border-box;
@@ -397,10 +394,13 @@ export default {
               }
            }
           &>.el-row{
+            width: 100%;
+            height: 100%;
             font-size: .2rem;
+            align-items: center;
             .el-col{
               display: flex;
-              margin-top: .125rem;
+              // margin-top: .125rem;
               span{
                 margin-right: .125rem;
               }

src/views/head.vue

@@ -16,7 +16,8 @@
         >{{ weatherObj.weather }} {{ weatherObj.temperature }}℃</span
       >
     </div>
-    <el-row class="timeSelect">
+    {{$route.path}}
+    <el-row class="timeSelect" v-if="$route.fullPath !== '/'">
       <img src="~@a/img/home/circle_box.png" alt="" class="timeImage" />
       <el-button size="mini" @click="timeTypeClick('day')">今日</el-button>
       <el-button size="mini" @click="timeTypeClick('m')">当月</el-button>