企业一张图UI

src/components/cus/CusFormColumn.vue

@@ -448,6 +448,7 @@ export default defineComponent({
       flex-wrap: unset;
       >div:first-child {
         flex: 1;
+        height: 100%;
       }
       .unit {
         margin-left: 6px;
@@ -462,6 +463,12 @@ export default defineComponent({
           border-radius: 2px;
         }
       }
+      .el-select {
+        height: 100%;
+        .select-trigger {
+          height: 100%;
+        }
+      }
     }
   }
 }

src/views/gis/business/common/statistic-title.vue

@@ -0,0 +1,90 @@
+<template>
+  <div class="statistic-title">
+    <div class="statistic-title-top">
+      <div class="statistic-title-top-title">{{title}}</div>
+      <div class="statistic-title-top-line"/>
+      <div class="statistic-title-top-value">{{num}}{{unit}}</div>
+    </div>
+    <div class="statistic-title-bottom"/>
+  </div>
+</template>
+
+<script lang="ts">
+import {
+  defineComponent,
+  computed,
+  onMounted,
+  ref,
+  reactive,
+  watch,
+  getCurrentInstance,
+  ComponentInternalInstance,
+  toRefs,
+  nextTick
+} from 'vue'
+import {useStore} from 'vuex'
+import {useRouter, useRoute} from 'vue-router'
+import {ElMessage, ElMessageBox} from "element-plus";
+
+export default defineComponent({
+  name: '',
+  components: {},
+  props: {
+    title: {},
+    num: {},
+    unit: {}
+  },
+  setup(props, {emit}) {
+    const store = useStore();
+    const router = useRouter();
+    const route = useRoute();
+    const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
+    const state = reactive({})
+    onMounted(() => {
+    })
+    return {
+      ...toRefs(state),
+    }
+  },
+})
+</script>
+
+<style scoped lang="scss">
+.statistic-title {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  .statistic-title-top {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    .statistic-title-top-title {
+      font-size: 16px;
+      font-family: Microsoft YaHei;
+      font-weight: bold;
+      color: #434343;
+    }
+    .statistic-title-top-line {
+      flex: 1;
+      height: 1px;
+      border-top: 2px dashed #1280F1;
+      margin: 0 12px;
+    }
+    .statistic-title-top-value {
+      font-size: 30px;
+      font-family: YouSheBiaoTiHei;
+      font-weight: 400;
+      background: linear-gradient(0deg, #0096FF 0%, #76DAFF 100%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+    }
+  }
+  .statistic-title-bottom {
+    width: 100%;
+    height: 23px;
+    background-image: url("@/assets/images/gis-business/statistic-title_icon.png");
+    background-repeat: repeat-x;
+  }
+}
+</style>

src/views/gis/business/enterprise/index.vue

@@ -4,7 +4,8 @@
       <div class="__gis-business-main_title">数量统计</div>
       <FocusContentCom class="one" v-loading="loading.statistic">
         <div class="one-top">
-
+          <img src="@/assets/images/gis-business/enterprise_icon1.png" alt=""/>
+          <StatisticTitleCom title="企业总数" :num="statistic.qy.total" unit="家"/>
         </div>
         <div class="one-bottom">
           <div class="one-bottom-item">
@@ -27,7 +28,12 @@
           </div>
         </div>
       </FocusContentCom>
-      <FocusContentCom class="two">2</FocusContentCom>
+      <FocusContentCom class="two">
+        <div class="two-main">
+          <img src="@/assets/images/gis-business/enterprise_icon2.png" alt=""/>
+          <StatisticTitleCom title="预警总数" :num="statistic.warning" unit="条"/>
+        </div>
+      </FocusContentCom>
       <div class="__gis-business-main_title">企业列表</div>
       <div class="form">
         <CusFormColumn
@@ -58,8 +64,18 @@
       <div class="table">
         <div class="table-card">
           <template v-for="(item, index) in enterprise.table.data">
-            <div class="table-card-item">
-              {{(enterprise.table.pageNum - 1) * enterprise.table.pageSize + index + 1}}.{{item.name}}
+            <div class="table-card-item __hover" :class="{active: index === 0}">
+              <img src="@/assets/images/gis-business/enterprise_list-icon1.png" alt=""/>
+              <div class="table-card-item-right">
+                <div class="table-card-item-right-top">
+                  <CusEllipsis :value="`${(enterprise.table.pageNum - 1) * enterprise.table.pageSize + index + 1}.${item.name}`"/>
+                </div>
+                <div class="table-card-item-right-bottom">
+                  <img src="@/assets/images/gis-business/enterprise_list-icon2.png" alt=""/>
+                  {{item.type}}
+                </div>
+              </div>
+
             </div>
           </template>
         </div>
@@ -95,13 +111,15 @@ import {ElMessage, ElMessageBox} from "element-plus";
 import BusinessMainCom from '../common/business-main.vue'
 import FocusContentCom from '../common/focus-content.vue'
 import PieSimpleChartCom from '../common/pie-simple-chart.vue'
+import StatisticTitleCom from '../common/statistic-title.vue'
 
 export default defineComponent({
   name: '',
   components: {
     BusinessMainCom,
     FocusContentCom,
-    PieSimpleChartCom
+    PieSimpleChartCom,
+    StatisticTitleCom
   },
   props: {},
   setup(props, {emit}) {
@@ -204,10 +222,18 @@ export default defineComponent({
     height: 238px;
     display: flex;
     flex-direction: column;
-    .one-top {}
+    .one-top {
+      display: flex;
+      align-items: center;
+      padding: 12px 22px 20px 23px;
+      >img {
+        margin-right: 16px;
+      }
+    }
     .one-bottom {
       display: flex;
       justify-content: space-between;
+      padding: 0 12px;
       .one-bottom-item {
         display: flex;
         flex-direction: column;
@@ -217,6 +243,7 @@ export default defineComponent({
           height: 100px;
         }
         .text {
+          margin-top: 8px;
           flex: 1;
           text-align: center;
           font-size: 12px;
@@ -229,12 +256,21 @@ export default defineComponent({
           justify-content: center;
         }
       }
-
     }
   }
   .two {
     margin-top: 10px;
     height: 100px;
+    .two-main {
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      padding: 12px 22px 20px 23px;
+      >img {
+        margin-right: 16px;
+      }
+    }
   }
   .form {
     :deep(.el-form-item) {
@@ -260,12 +296,43 @@ export default defineComponent({
       display: grid;
       row-gap: 10px;
       .table-card-item {
+        overflow: hidden;
         width: 100%;
         height: 62px;
         border: 1px solid #D6D6D6;
         border-radius: 2px;
-        &:hover {
-          background-color: rgba(16,140,243,0.1);
+        display: flex;
+        align-items: center;
+        padding: 11px 8px;
+        &.active {
+          background: rgba(16,140,243,0.1);
+          border: 1px solid #1270DA;
+        }
+        .table-card-item-right {
+          overflow: hidden;
+          flex: 1;
+          margin-left: 6px;
+          display: flex;
+          flex-direction: column;
+          justify-content: space-between;
+          .table-card-item-right-top {
+            font-size: 16px;
+            font-family: Microsoft YaHei;
+            font-weight: bold;
+            color: #434343;
+          }
+          .table-card-item-right-bottom {
+            margin-top: 7px;
+            font-size: 14px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #FF8217;
+            display: flex;
+            align-items: center;
+            >img {
+              margin-right: 6px;
+            }
+          }
         }
       }
     }