首页样式修改

1

src/components/statistic/index.vue

@@ -2,7 +2,7 @@
   <div class="statistic">
     <div v-for="(item, index) in tags" :style="{flex: (100 / col) + '%'}" class="item" :key="index">
       <statistic-content :class="item.data.class" v-on="{...item.data.on}" :item="item"/>
-      <el-divider class="divider" v-if="(index + 1) % col !== 0 && (index + 1) < tags.length" direction="vertical"></el-divider>
+      <el-divider  class="divider" v-if="((index + 1) % col !== 0 && (index + 1) < tags.length)&&!isNoLine" direction="vertical"></el-divider>
     </div>
   </div>
 </template>
@@ -20,6 +20,10 @@ export default {
     },
     span: {
       type: Number,
+    },
+    isNoLine:{
+      type:Boolean,
+      default:false
     }
   },
   components: {

src/views/main/baseinfo/management.vue

@@ -1,5 +1,5 @@
 <template >
-  <el-card id='management'>
+  <el-card id="management">
     <div slot="header" class="clearfix">
       <searchHeader
         :dates="mdate"
@@ -7,7 +7,7 @@
         @changeValue="changeValue"
         :isShowQuert="true"
         :endDate="endDate"
-        ref='searchHeader'
+        ref="searchHeader"
       />
     </div>
     <div
@@ -16,17 +16,12 @@
       v-if="JSON.stringify(items) == '{}'"
     ></div>
     <statistic :col="5" class="statistic" :cols="12">
-      <statistic-item
-        v-for="(item, key) in items"
-        :key="key"
-        :class="{ active: active === key }"
-        @click="active = key"
-      >
+      <statistic-item @click="active = 0">
         <span>
-          {{ item.title + "(元)" }}
+          {{ items["TOTAL_AMOUNT"].title + "(元)" }}
           <el-tooltip
-            v-if="item.desc"
-            :content="item.desc"
+            v-if="items['TOTAL_AMOUNT'].desc"
+            :content="items['TOTAL_AMOUNT'].desc"
             :open-delay="0.3"
             placement="top"
           >
@@ -37,35 +32,75 @@
           </el-tooltip>
         </span>
         <!--  12345678901.23 -->
-        <span> <count-to :endVal="item.percent" :decimals="2" :class="item.dataType == 'TOTAL_AMOUNT'?'blod':''"  /></span>
-      </statistic-item>
-      <statistic-item></statistic-item>
-    </statistic>
-        <statistic :col="5" class="statistic" :cols="0">
-      <statistic-item
-        v-for="(item, key) in items2"
-        :key="key"
-        :class="{ active: active === key }"
-        @click="active = key"
-      >
         <span>
-          {{ item.title + "(元)" }}
-          <el-tooltip
-            v-if="item.desc"
-            :content="item.desc"
-            :open-delay="0.3"
-            placement="top"
-          >
-            <i
-              style="margin-left: 5px; cursor: pointer"
-              class="el-icon-warning-outline"
-            />
-          </el-tooltip>
-        </span>
-        <!--  12345678901.23 -->
-        <span> <count-to :endVal="item.percent" :decimals="2" /></span>
+          <count-to
+            :endVal="items['TOTAL_AMOUNT'].percent"
+            :decimals="2"
+            :class="'blod'"
+        /></span>
       </statistic-item>
+      <template v-for="(item, key) in items">
+        <statistic-item
+          v-if="item.dataType != 'TOTAL_AMOUNT'"
+          :key="key"
+          :class="{ active: active === key }"
+          @click="active = key"
+        >
+          <span>
+            {{ item.title + "(元)" }}
+            <el-tooltip
+              v-if="item.desc"
+              :content="item.desc"
+              :open-delay="0.3"
+              placement="top"
+            >
+              <i
+                style="margin-left: 5px; cursor: pointer"
+                class="el-icon-warning-outline"
+              />
+            </el-tooltip>
+          </span>
+          <!--  12345678901.23 -->
+          <span>
+            <count-to
+              :endVal="item.percent"
+              :decimals="2"
+              :class="item.dataType == 'TOTAL_AMOUNT' ? 'blod' : ''"
+          /></span>
+        </statistic-item>
+      </template>
+
+      <statistic-item></statistic-item>
     </statistic>
+
+    <div class="statisticWrap">
+      <statistic :col="5" class="statistic" :cols="0" :isNoLine='true'>
+        <statistic-item
+          v-for="(item, key) in items2"
+          :key="key"
+          :class="{ active: active === key }"
+          @click="active = key"
+        >
+          <span>
+            {{ item.title + "(元)" }}
+            <el-tooltip
+              v-if="item.desc"
+              :content="item.desc"
+              :open-delay="0.3"
+              placement="top"
+            >
+              <i
+                style="margin-left: 5px; cursor: pointer"
+                class="el-icon-warning-outline"
+              />
+            </el-tooltip>
+          </span>
+          <!--  12345678901.23 -->
+          <span> <count-to :endVal="item.percent" :decimals="2" /></span>
+        </statistic-item>
+      </statistic>
+    </div>
+
     <!-- 按月/按天 -->
 
     <div class="wrap">
@@ -136,6 +171,7 @@ export default {
           obj[str] = this.data[str];
         }
       });
+      console.log(obj);
       return obj;
     },
     items2() {
@@ -183,8 +219,7 @@ export default {
             return [
               item[0].axisValueLabel,
               ...item.map(
-                (d) =>
-                  `<br/>${d.marker}${d.seriesName}: ${d.value[1]} 元`
+                (d) => `<br/>${d.marker}${d.seriesName}: ${d.value[1]} 元`
               ),
             ].join("");
           },
@@ -202,7 +237,7 @@ export default {
       ];
     },
     chartData() {
-      const values = Object.values({...this.items,...this.items2});
+      const values = Object.values({ ...this.items, ...this.items2 });
       const months = {};
       for (const item of values) {
         for (const row of item.indexMonthData || []) {
@@ -234,7 +269,7 @@ export default {
       };
     },
     chartDataForMoth() {
-      const values = Object.values({...this.items,...this.items2});
+      const values = Object.values({ ...this.items, ...this.items2 });
       const months = {};
       for (const item of values) {
         for (const row of item.indexMonthData || []) {
@@ -247,9 +282,11 @@ export default {
             months[key][item.title] = row.percent;
           } else {
             if (months[key][item.title]) {
-              months[key][item.title] = (parseFloat(months[key][item.title])+ parseFloat(row.percent)).toFixed(2);
+              months[key][item.title] = (
+                parseFloat(months[key][item.title]) + parseFloat(row.percent)
+              ).toFixed(2);
             } else {
-              months[key][item.title] =  parseFloat(row.percent).toFixed(2);
+              months[key][item.title] = parseFloat(row.percent).toFixed(2);
             }
           }
         }
@@ -285,6 +322,7 @@ export default {
       mdate: [],
       loading: false,
       endDate: "",
+      show: true,
     };
   },
   mounted() {
@@ -292,7 +330,7 @@ export default {
   },
   methods: {
     init() {
-      this.$refs.searchHeader.initStatue()
+      this.$refs.searchHeader.initStatue();
       this.mdate = this.getInitDate();
       this.endDate = this.$helpers.dayjs(new Date()).format("YYYY-MM-DD");
       // this.$refs.searchHeader.initStatue()
@@ -318,7 +356,7 @@ export default {
         });
         for (const item of res.data) {
           // 再循环一遍
-          for (const key in {...this.items,...this.items2}) {
+          for (const key in { ...this.items, ...this.items2 }) {
             // console.log(key);
             if (item.dataType == key) {
               data[item.dataType] = {
@@ -359,11 +397,11 @@ export default {
 };
 </script>
 <style lang="less" scoped>
-#management .statistic .statistic-content>span {
-  &:first-child{
-    font-size: 14px !important
+#management .statistic .statistic-content > span {
+  &:first-child {
+    font-size: 14px !important;
   }
-    font-size: 18px !important;
+  font-size: 18px !important;
 }
 .chioseBox {
   position: absolute;
@@ -373,10 +411,10 @@ export default {
 .wrap {
   position: relative;
 }
-.blod{
+.blod {
   font-weight: bold;
   color: #14928a;
-  font-size: 22px!important;
+  font-size: 22px !important;
 }
 // .chioseBox {
 //   position: absolute;
@@ -386,4 +424,46 @@ export default {
 // .wrap {
 //   position: relative;
 // }
+.statisticWrap {
+  // box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
+  border-radius: 4px;
+  border: 1px solid #ebeef5;
+  padding-top: 10px;
+  margin-bottom: 10px;
+  position: relative;
+  &:after {
+    top: -16px;
+    margin-left:calc(10% - 14px) ;
+    border-top-width: 0;
+    border-color: transparent;
+    border-bottom-color: #fff;
+    content: " ";
+    border-width: 8px;
+    position: absolute;
+    display: block;
+    width: 0;
+    height: 0;
+
+    border-style: solid;
+    z-index: 101;
+
+  }
+      &:before {
+      top: -20px;
+       margin-left:calc(10% - 16px) ;
+
+      border-top-width: 0;
+      border-color: transparent;
+      border-bottom-color: #ebeef5;
+      content: " ";
+      border-width: 10px;
+      position: absolute;
+      display: block;
+      width: 0;
+      height: 0;
+
+      border-style: solid;
+      z-index: 100;
+    }
+}
 </style>