城市消防体征 统计部分样式调整

src/views/fire-signs.vue

@@ -57,43 +57,147 @@
                                     </el-progress>
                                 </el-col>
                             </el-row> -->
-                            <el-row class="mhjbqk">
-                                <el-col :span="8" >
-                                    辖区面积：<Strong>{{ mhjbqk.regionArea }}</Strong> km²
+
+                            <el-row>
+                                <el-col :span="7" class="basicItem">
+                                    <div>
+                                        <span style="display: block">
+                                            <Strong style="color:#7DD807">
+                                                <CountTo :startVal="0" :endVal="mhjbqk.regionArea || 0" :duration="3000" v-if="!isNaN(mhjbqk.regionArea)">{{ mhjbqk.regionArea || 0 }}</CountTo>
+                                                <span v-if="isNaN(mhjbqk.regionArea)" style="fontsize: 0.2rem">{{ mhjbqk.regionArea || 0 }}</span>
+                                            </Strong>
+                                            km²
+                                        </span>
+                                        <span>辖区面积</span>
+                                    </div>
                                 </el-col>
-                                <el-col :span="8">
-                                    重点单位：<Strong>{{ mhjbqk.keyCompanyNum }}</Strong> 家
+                                <el-col :span="7" class="basicItem">
+                                    <div>
+                                        <span style="display: block">
+                                            <Strong style="color:#7DD807">
+                                                <CountTo :startVal="0" :endVal="mhjbqk.streetTownNum || 0" :duration="3000" v-if="!isNaN(mhjbqk.streetTownNum)">{{ mhjbqk.streetTownNum || 0 }}</CountTo>
+                                                <span v-if="isNaN(mhjbqk.streetTownNum)" style="fontsize: 0.2rem">{{ mhjbqk.streetTownNum || 0 }}</span>
+                                            </Strong>
+                                            个
+                                        </span>
+                                        <span>街镇</span>
+                                    </div>
                                 </el-col>
-                                <el-col :span="8">
-                                    微型消防站：<Strong>{{ mhjbqk.miniFireNum }}</Strong> 个
+
+                                
+
+                                <el-col :span="7" class="basicItem">
+                                    <div>
+                                        <span style="display: block">
+                                            <Strong style="color:#FC0609">
+                                                <CountTo :startVal="0" :endVal="mhjbqk.regionResident || 0" :duration="3000" v-if="!isNaN(mhjbqk.regionResident)">{{ mhjbqk.regionResident || 0 }}</CountTo>
+                                                <span v-if="isNaN(mhjbqk.regionResident)" style="fontsize: 0.2rem">{{ mhjbqk.regionResident || 0 }}</span>
+                                            </Strong>
+                                            万
+                                        </span>
+                                        <span>常住人口</span>
+                                    </div>
                                 </el-col>
-                                <el-col :span="8">
-                                    常住人口：<Strong>{{ mhjbqk.regionResident }}</Strong> 万
+                                <!-- 、 -->
+
+                                <el-col :span="7" class="basicItem">
+                                    <div>
+                                        <span style="display: block">
+                                            <Strong style="color:#FD843A">
+                                                <CountTo :startVal="0" :endVal="mhjbqk.hospitalNum || 0" :duration="3000" v-if="!isNaN(mhjbqk.hospitalNum)">{{ mhjbqk.hospitalNum || 0 }}</CountTo>
+                                                <span v-if="isNaN(mhjbqk.hospitalNum)" style="fontsize: 0.2rem">{{ mhjbqk.hospitalNum || 0 }}</span>
+                                            </Strong>
+                                            家
+                                        </span>
+                                        <span>医院</span>
+                                    </div>
                                 </el-col>
-                                <el-col :span="8">
-                                    医院：<Strong>{{ mhjbqk.hospitalNum }}</Strong>家
+                                <el-col :span="7" class="basicItem">
+                                    <div>
+                                        <span style="display: block">
+                                            <Strong style="color:#01C3B4">
+                                                <CountTo :startVal="0" :endVal="mhjbqk.keyCompanyNum || 0" :duration="3000" v-if="!isNaN(mhjbqk.keyCompanyNum)">{{ mhjbqk.keyCompanyNum || 0 }}</CountTo>
+                                                <span v-if="isNaN(mhjbqk.keyCompanyNum)" style="fontsize: 0.2rem">{{ mhjbqk.keyCompanyNum || 0 }}</span>
+                                            </Strong>
+                                            家
+                                        </span>
+                                        <span>重点单位</span>
+                                    </div>
                                 </el-col>
-                                <el-col :span="8">
-                                    专职消防队：<Strong>{{ mhjbqk.fullTimeNum }}</Strong> 个
+                                <el-col :span="7" class="basicItem">
+                                    <div>
+                                        <span style="display: block">
+                                            <Strong style="color:#058DFE">
+                                                <CountTo :startVal="0" :endVal="mhjbqk.schoolNum || 0" :duration="3000" v-if="!isNaN(mhjbqk.schoolNum)">{{ mhjbqk.schoolNum || 0 }}</CountTo>
+                                                <span v-if="isNaN(mhjbqk.schoolNum)" style="fontsize: 0.2rem">{{ mhjbqk.schoolNum || 0 }}</span>
+                                            </Strong>
+                                            个
+                                        </span>
+                                        <span>学校</span>
+                                    </div>
                                 </el-col>
-                                <el-col :span="8">
+                                <el-col :span="7" class="basicItem">
+                                    <div>
+                                        <span style="display: block">
+                                            <Strong style="color:#7DD807">
+                                                <CountTo :startVal="0" :endVal="mhjbqk.largeBuildNum || 0" :duration="3000" v-if="!isNaN(mhjbqk.largeBuildNum)">{{ mhjbqk.largeBuildNum || 0 }}</CountTo>
+                                                <span v-if="isNaN(mhjbqk.largeBuildNum)" style="fontsize: 0.2rem">{{ mhjbqk.largeBuildNum || 0 }}</span>
+                                            </Strong>
+                                            个
+                                        </span>
+                                        <span>大型综合体</span>
+                                    </div>
+                                </el-col>
+
+                                
+
+                            </el-row>
+
+      
+                                
+               
+
+
+                            <el-row class="mhjbqk">
+                                <!-- <el-col :span="8" >
+                                    辖区面积：<Strong>{{ mhjbqk.regionArea }}</Strong> km²
+                                </el-col> -->
+                                <!-- <el-col :span="8">
+                                    重点单位：<Strong>{{ mhjbqk.keyCompanyNum }}</Strong> 家
+                                </el-col> -->
+                                
+                                <!-- <el-col :span="8">
+                                    常住人口：<Strong>{{ mhjbqk.regionResident }}</Strong> 万
+                                </el-col> -->
+                                <!-- <el-col :span="8">
+                                    医院：<Strong>{{ mhjbqk.hospitalNum }}</Strong>家
+                                </el-col> -->
+                                
+                                <!-- <el-col :span="8">
                                     街镇：<Strong>{{ mhjbqk.streetTownNum }}</Strong>个
                                 </el-col>
                                 <el-col :span="8">
                                    学校：<Strong>{{ mhjbqk.schoolNum }}</Strong>个
                                 </el-col>
-                                <el-col :span="8">
-                                    一级微型消防站：<Strong>{{ mhjbqk.priorMiniNum }}</Strong> 个
-                                </el-col>
                                 <el-col :span="8">
                                     大型综合体：<Strong>{{ mhjbqk.largeBuildNum }}</Strong> 个
-                                </el-col>
-                                <el-col :span="8">
+                                </el-col> -->
+                                <!-- <el-col :span="8">
+                                    一级微型消防站：<Strong>{{ mhjbqk.priorMiniNum }}</Strong> 个
+                                </el-col> -->
+                                
+                                <!-- <el-col :span="8">
                                     消防救援站：<Strong>{{ mhjbqk.fireRescueNum }}</Strong> 个
                                 </el-col>
                                 <el-col :span="8">
                                    社区微型消防站：<Strong>{{ mhjbqk.communityMiniNum }}</Strong> 个
-                                </el-col>
+                                </el-col> -->
+                                <!-- <el-col :span="8">
+                                    微型消防站：<Strong>{{ mhjbqk.miniFireNum }}</Strong> 个
+                                </el-col> -->
+                                <!-- <el-col :span="8">
+                                    专职消防队：<Strong>{{ mhjbqk.fullTimeNum }}</Strong> 个
+                                </el-col> -->
                             </el-row>
                         </div>
                     </div>
@@ -509,8 +613,9 @@ import map from "@c/mixins/map-data1";
 // import map from "@c/mixins/map-gaode-public";
 import radarChart from "@c/radar/index2";
 // import wordCloud from "@c/wordCloud";
+import CountTo from "@/components/count-to/index.js";
 export default {
-    components: { categoryLine, seTable, radarChart, category, category2, pie2, pie3 },
+    components: { categoryLine, seTable, radarChart, category, category2, pie2, pie3,CountTo },
     mixins: [linstener, map],
     data() {
         return {
@@ -1801,6 +1906,7 @@ export default {
             this.$axios.get(this.$api.fireSite.regionInfo
             ).then(res=>{
                this.mhjbqk = res.data[0]
+               console.log(this.mhjbqk)
             })
         },
     },
@@ -1845,7 +1951,7 @@ export default {
                 align-items: center;
                 flex-wrap: nowrap;
                 color: #ffffff;
-                padding: 0 0.125rem;
+                // padding: 0 0.125rem;
                 & > .flexBoxE {
                     margin-top: 0.6rem;
                     flex: 1;
@@ -1912,7 +2018,7 @@ export default {
 
                             margin-top: 0.45rem;
                             span {
-                                margin-right: 0.125rem;
+                                // margin-right: 0.125rem;
                             }
                             .el-progress {
                                 flex: 1;
@@ -2100,8 +2206,21 @@ export default {
     }
 }
 </style>
-<style>
+<style lang="scss">
 .el-loading-mask{
         background: transparent !important;
 }
+.basicItem{
+    border: 1px solid rgba(48, 207, 255, 0.6); margin: 4px 10px!important; box-shadow: inset 0 0 0.07rem 0.04rem rgba(115, 251, 253 , .4); box-sizing: border-box
+    ;
+    text-align:center;
+    >div{
+        padding: 0.03rem 0; text-align: center;
+        strong{
+                 color:rgb(1, 195, 180); font-weight: 600;font-size: 0.3rem
+                                                
+        }
+
+    }
+}
 </style>