增加街镇单位情况图表，修改环形图字体大小和颜色修改雷达图mock字段完成企业自助管理页面包括：企业消防情况、维保记录、个街镇单位情况、物联网设备监控情况、企业自主情况、企业经营情况（采用mock数据）

src/components/category-enterprise/index.vue

@@ -0,0 +1,117 @@
+<template>
+  <div ref="echartD" style="width: 100%; height: 100%"></div>
+</template>
+
+<script>
+import * as echarts from "echarts";
+export default {
+  props: {
+    dataMap: { type: Array, default: () => [] },
+    borderRadius: { type: Array, default: () => [0, 0, 0, 0]},
+    xData: { type: Array, default: () => [ "莘庄镇", "吴泾镇", "马桥镇", "华漕镇", "七宝古镇", "虹桥镇", "江川路",  "新虹",  "古美路", ]},
+  },
+  data() {
+    return {};
+  },
+  watch: {
+    dataMap(val) {
+      this.getData(val);
+    },
+  },
+  mounted() {
+    this.getData();
+  },
+  methods: {
+    getData(val = this.dataMap) {
+      echarts.init(this.$refs.echartD).setOption({
+        grid: {
+          top: 30,
+          left: 50,
+          right: 30,
+          bottom: 50,
+        },
+        xAxis: {
+          axisTick: {
+            show: false,
+          },
+          type: "category",
+          data:this.xData,
+          axisLabel: {
+            color: "#FFFFFF",
+          },
+        },
+        legend: {
+          show: true,
+          bottom: 0,
+          itemGap: 20,
+          textStyle: {
+            color: "#FFF",
+          },
+        },
+        tooltip: {
+          trigger: "axis",
+          textStyle: {
+            color: "#FFF",
+          },
+          confine: true,
+          backgroundColor: "rgba(11, 12, 72, 0.8)",
+          borderColor: "rgba(11, 12, 72, 0.4)",
+          position: "bottom",
+        },
+        yAxis: {
+          axisTick: {
+            show: false,
+          },
+          type: "value",
+          axisLabel: {
+            color: "#FFFFFF",
+          },
+          splitLine: {
+            lineStyle: {
+              color: "rgba(255,255,255,.4)",
+            },
+          },
+        },
+        series: [
+          {
+            type: "bar",
+            name:'其他单位',
+            barWidth: 15,
+            stack: "totalLine",
+            itemStyle: {
+              borderRadius: this.borderRadius,
+            },
+            data: val[0],
+          },
+          {
+            type: "bar",
+            name:'一般单位',
+            barWidth: 15,
+            stack: "totalLine",
+            itemStyle: {
+              borderRadius: this.borderRadius,
+            },
+            data: val[1],
+          },
+          {
+            type: "bar",
+            barWidth: 15,
+            name:'重点单位',
+            stack: "totalLine",
+            itemStyle: {
+              borderRadius: this.borderRadius,
+            },
+            data: val[2],
+          },
+        ],
+      });
+    },
+    resize() {
+      echarts.init(this.$refs.echartD).resize();
+    },
+  },
+};
+</script>
+
+<style scoped>
+</style>

src/components/gauge/index.vue

@@ -79,8 +79,9 @@ export default {
               offsetCenter: [0, "0%"],
               textStyle: {
                 fontSize: this.size,
-                fontWeight: "600",
-                color: this.color || "#FFF",
+                fontWeight: "400",
+                // this.color || 
+                color: "#FFF",
                 fontFamily: '"DS", "DS-B", "DS-BB", "DS-BS"',
               },
             },

src/views/Home.vue

@@ -178,12 +178,14 @@ export default {
       reportComplaintList: [],
       unitBeOnDutyList: [],
       complaintList: [
-        { name: "设备状况", value: 341 },
-        { name: "历史火灾", value: 155 },
-        { name: "隐患状态", value: 156 },
-        { name: "建筑整体", value: 118 },
-        { name: "执法监管", value: 322 },
-        { name: "场所行业等指数", value: 156 },
+        { name: "出文情况", value: 341 },
+        { name: "接警处", value: 155 },
+        { name: "检查数量", value: 156 },
+        { name: "处罚情况", value: 118 },
+        { name: "设施设备", value: 322 },
+        { name: "消防隐患", value: 156 },
+        { name: "整改情况", value: 156 },
+        { name: "查封情况", value: 156 },
       ],
       timeArea: 1,
       barForm: {

src/views/fire-signs.vue

@@ -148,12 +148,14 @@ export default {
       fireAddressList: [],
       fireTypeList: [],
       complaintList: [
-           {name: "设备状况",value: 341},
-           {name: "历史火灾",value: 155},
-           {name: "隐患状态",value: 156},
-           {name: "建筑整体",value: 118},
-           {name: "执法监管",value: 322},
-           {name: "场所行业等指数",value: 156},
+        { name: "出文情况", value: 341 },
+        { name: "接警处", value: 155 },
+        { name: "检查数量", value: 156 },
+        { name: "处罚情况", value: 118 },
+        { name: "设施设备", value: 322 },
+        { name: "消防隐患", value: 156 },
+        { name: "整改情况", value: 156 },
+        { name: "查封情况", value: 156 },
       ],
       reportComplaintList:[],
       fireCauseRatioList: [

src/views/self-management.vue

@@ -1,21 +1,377 @@
 <template>
-  <el-row></el-row>
+  <el-row class="contentBox">
+    <transition name="el-fade-in-linear">
+      <el-col class="leftBox" v-show="leftBtn">
+        <el-col class="leftTop">
+          <h4>企业消防情况</h4>
+          <el-row class="threeBox">
+            <div class="flexBoxE">
+              <el-row>
+                <el-row class="rightTopChart">
+                  <gauge ref="gauge1" :dataMap="0.2" :dataNumber="20" color="#F68E6A"></gauge>
+                </el-row>
+                <el-row class="rightTopNumber">消防微站数</el-row>
+              </el-row>
+              <el-row>
+                <el-row class="rightTopChart">
+                  <gauge ref="gauge2" :dataMap="0.3" :dataNumber="30" color="#06B1B9"></gauge>
+                </el-row>
+                <el-row class="rightTopNumber">消防持证人数</el-row>
+              </el-row>
+              <el-row>
+                <el-row class="rightTopChart">
+                  <gauge ref="gauge3" :dataMap="0.5"  :dataNumber="50" color="#E4951E"></gauge>
+                </el-row>
+                <el-row class="rightTopNumber">培训合格率</el-row>
+              </el-row>
+            </div>
+          </el-row>
+        </el-col>
+        <el-col class="leftBot">
+          <h4>维保记录</h4>
+            <se-table
+              ref="seTable"
+              :dataMap="tableData"
+              :headerData="headerData"
+              :key="windowWidth"
+            ></se-table>
+        </el-col>
+        <el-col class="leftBot">
+          <h4>各街镇单位情况</h4>
+          <el-row class="leftBotContent">
+            <el-row class="fireBar">
+              <category-enterprise ref="categoryEnterprise" :dataMap="[[10,20,15,25,17,16,18,14,20,22,33],[10,20,15,25,17,16,18,14,20,22,33],[10,20,15,25,17,16,18,14,20,22,33]]"></category-enterprise>
+            </el-row>
+          </el-row>
+        </el-col>
+      </el-col>
+    </transition>
+    <transition name="el-fade-in-linear">
+      <el-col class="centerBox" :style="{'max-width':leftBtn && rightBtn ? '8rem' :!leftBtn &&  !rightBtn ? '100%' : leftBtn ||  rightBtn ? '16rem' : '8rem'}">
+        <el-row class="leftBtn btnW" @click="leftBtnClick()">
+          <i :class="leftBtn ? 'el-icon-arrow-left' : 'el-icon-arrow-right'"></i>
+        </el-row>
+        <el-row class="centerContent" id="mapF"></el-row>
+        <el-row class="rightBtn btnW" @click="rightBtnClick()">
+          <i :class="rightBtn ? 'el-icon-arrow-right' : 'el-icon-arrow-left'"></i>
+        </el-row>
+      </el-col>
+    </transition>
+    <transition name="el-fade-in-linear">
+      <el-col class="rightBox" v-show="rightBtn">
+        <div class="rightContent">
+          <el-col>
+            <h4>物联网设备监控情况</h4>
+            <se-table
+              ref="seTable"
+              :dataMap="tableData1"
+              :headerData="headerData1"
+              :key="windowWidth"
+            ></se-table>
+          </el-col>
+          <el-col class="rightTop">
+            <h4>企业自主情况</h4>
+              <radar-chart
+                v-if="complaintList.length > 0"
+                :dataMap="complaintList"
+                name="闵行区消防情况"
+                ref="radarChart"
+              ></radar-chart>
+          </el-col>
+          <el-col class="rightBot">
+            <h4>企业经营情况</h4>
+            <el-row>
+              <el-row>
+                <el-row>上海XX有限公司</el-row>
+                <el-row>
+                  <el-col :span="8">员工总数：100人</el-col>
+                  <el-col :span="8">企业法人：张三</el-col>
+                  <el-col :span="8">成立时间：2020-01-01</el-col>
+                  <el-col :span="8">消防等级：一级</el-col>
+                  <el-col :span="8">注册资金：100万</el-col>
+                  <el-col :span="8">巡检完成率：90%</el-col>
+                </el-row>
+              </el-row>
+              <el-row>
+                <el-row>上海XX有限公司</el-row>
+                <el-row>
+                  <el-col :span="8">员工总数：100人</el-col>
+                  <el-col :span="8">企业法人：张三</el-col>
+                  <el-col :span="8">成立时间：2020-01-01</el-col>
+                  <el-col :span="8">消防等级：一级</el-col>
+                  <el-col :span="8">注册资金：100万</el-col>
+                  <el-col :span="8">巡检完成率：90%</el-col>
+                </el-row>
+              </el-row>
+              <el-row>
+                <el-row>上海XX有限公司</el-row>
+                <el-row>
+                  <el-col :span="8">员工总数：100人</el-col>
+                  <el-col :span="8">企业法人：张三</el-col>
+                  <el-col :span="8">成立时间：2020-01-01</el-col>
+                  <el-col :span="8">消防等级：一级</el-col>
+                  <el-col :span="8">注册资金：100万</el-col>
+                  <el-col :span="8">巡检完成率：90%</el-col>
+                </el-row>
+              </el-row>
+            </el-row>
+          </el-col>
+        </div>
+      </el-col>
+    </transition>
+  </el-row>
 </template>
 
 <script>
+import linstener from "@c/mixins/linstener";
+import categoryEnterprise from "@c/category-enterprise";
+import seTable from "@c/se-table";
+import gauge from "@c/gauge";
+import map from "@c/mixins/map";
+import radarChart from "@c/radar";
 export default {
-  methods:{
-    getdata(){
-      
-    }
-  }};
+  components: { categoryEnterprise, seTable, radarChart, gauge},
+  mixins: [linstener,map],
+  data() {
+    return {
+      tableData: [
+        {address:'2020-01-01',burnedArea:'某某单位',propertyLoss:'查看',deathToll:'张三',nonFatal:'13000000729',disasterHome:'拆除'},
+        {address:'2020-01-01',burnedArea:'某某单位',propertyLoss:'查看',deathToll:'张三',nonFatal:'13000000729',disasterHome:'拆除'},
+        {address:'2020-01-01',burnedArea:'某某单位',propertyLoss:'查看',deathToll:'张三',nonFatal:'13000000729',disasterHome:'拆除'},
+        {address:'2020-01-01',burnedArea:'某某单位',propertyLoss:'查看',deathToll:'张三',nonFatal:'13000000729',disasterHome:'拆除'},
+      ],
+      headerData: [
+        { prop: "address", name: "维保时间" },
+        { prop: "burnedArea", name: "维保单位" },
+        { prop: "propertyLoss", name: "维保点位" },
+        { prop: "deathToll", name: "相关责任人" },
+        { prop: "nonFatal", name: "联系电话" },
+      ],
+      tableData1: [
+        {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%',},
+      ],
+      headerData1: [
+        { prop: "address", name: "类型" },
+        { prop: "burnedArea", name: "电气设备" },
+        { prop: "property", name: "烟感设备" },
+        { prop: "deathTol", name: "温感设备" },
+        { prop: "nonFatal", name: "水压设备" },
+      ],
+      fireAddressList: [],
+      fireTypeList: [],
+      complaintList: [
+           {name: "消防体征指数",value: 341},
+           {name: "健康指数",value: 155},
+           {name: "设施设备",value: 156},
+           {name: "处罚情况",value: 118},
+           {name: "隐患情况",value: 322},
+           {name: "投诉情况",value: 156},
+           {name: "火灾情况",value: 156},
+           {name: "自主管理情况",value: 156},
+      ],
+    };
+  },
+  created() {
+    // this.getData();
+  },
+  watch:{
+
+  },
+  mounted() {
+    window.addEventListener(
+      "resize",
+      () =>
+        this.resizeTimeActions([
+          this.$refs.gauge,
+          this.$refs.categoryLine,
+          this.$refs.category,
+          this.$refs.radarChart,
+          this.$refs.wordCloud,
+        ]),
+      true
+    );
+    this.initMap()
+  },
+  methods: {
+
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-.el-row {
-  width: 100%;
-  height: 100%;
-  background: url(~@a/img/test/bg5.png) no-repeat;
-  background-size: 100% 100%;
+.abc{
+  background: #000;
+}
+.contentBox {
+  // font-family: "DS", "DS-B", "DS-BB", "DS-BS";
+  & > .el-col {
+    flex: 1;
+    height: 100%;
+    max-width: 8rem;
+  }
+  .leftBox {
+    box-sizing: border-box;
+    & > .el-col {
+      flex: none;
+      width: 100%;
+      height: calc((70% - 20px)/2);
+      margin-top: 10px;
+      background: url('~@a/img/home/box-bg.png') no-repeat;
+      background-size: 100% 100%;
+      position: relative;
+      h4 {
+        font-size: 0.2125rem;
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 0;
+        margin: 0 auto;
+        text-align: center;
+        color: #00ffff;
+      }
+    }
+    .leftTop {
+      padding: 0.375rem 0.45rem .25rem;
+      margin-top: 0;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 30%;
+      background: url('~@a/img/home/bg1.png') no-repeat;
+      background-size: 100% 100%;
+      .threeBox {
+        width: 100%;
+        height: 100%;
+        position: relative;
+        justify-content: space-between;
+        align-items: center;
+        flex-wrap: nowrap;
+        & > .flexBoxE {
+          flex: 1;
+          width: 100%;
+          height: 100%;
+          box-sizing: border-box;
+          display: flex;
+          align-items: center;
+          & > .el-row {
+            flex: none;
+            width: 33.33%;
+            display: flex;
+            flex-direction: column;
+          }
+          .rightTopNumber {
+            justify-content: center;
+              font-size: 0.2125rem;
+          }
+          .rightTopChart {
+            height: 1.5rem;
+          }
+          .el-form {
+            text-align: center;
+            .el-form-item {
+              margin: 0;
+            }
+          }
+        }
+        .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;
+        }
+      }
+    }
+    .leftBot {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: .375rem .3125rem .1875rem;
+      box-sizing: border-box;
+      width: 100%;
+      overflow: hidden;
+      .leftBotContent {
+        width: 100%;
+        height: 100%;
+        display: block;
+        .fireBar {
+          height: calc(100%);
+        }
+      }
+    }
+  }
+  
+  .rightBox {
+    box-sizing: border-box;
+    .rightContent{
+      width: 100%;
+      height: 100%;
+      & > .el-col {
+        height: calc((60% - 20px)/2);
+        background: url('~@a/img/home/box-bg.png') no-repeat;
+        background-size: 100% 100%;
+        position: relative;
+        padding: .4375rem .3125rem .25rem;
+        box-sizing: border-box;
+        width: 100%;
+        margin-bottom: 0.125rem;
+        h4 {
+          font-size: 0.2125rem;
+          position: absolute;
+          left: 0;
+          right: 0;
+          top: 0;
+          margin: 0 auto;
+          text-align: center;
+          color: #00ffff;
+        }
+      }
+      .rightTop{
+        height: 40%;
+      }
+      .rightBot{
+        margin-bottom: 0;
+        background-size: 100% 100%;
+        color: #FFF;
+        font-size: .2rem;
+        &>.el-row{
+          width: 100%;
+          height: 100%;
+          overflow: auto;
+          &::-webkit-scrollbar {
+              display: none;
+              // opacity: 0;
+              /* Chrome Safari */
+          }
+          &>.el-row{
+            width: 100%;
+            height: auto;
+            &>.el-row:nth-child(1){
+              width: 100%;
+              height: .4375rem;
+              line-height: .4375rem;
+              text-indent: .125rem;
+              background: rgba(0,250,251,0.20);
+            }
+            &>.el-row:nth-child(2) {
+              padding: .0625rem .125rem;
+              .el-col{
+                line-height: .35rem;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
 }
 </style>