From 440143a15897383b7eed99a493274e0ae37e6642 Mon Sep 17 00:00:00 2001
From: z_yu <1534695664@qq.com>
Date: Thu, 21 Jul 2022 15:21:22 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A6=96=E9=A1=B5CSS=E4=BF=AE=E6=94=B9?=
 =?UTF-8?q?=E4=BB=A5=E5=8F=8A=E8=AE=BE=E5=A4=87=E7=AE=A1=E7=90=86=E4=BF=AE?=
 =?UTF-8?q?=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/dashboard/PanelGroup.vue            | 127 ++++++++----
 src/views/home.vue                            | 183 ++++++++++++++++--
 .../deviceManage/module/deviceDetail.vue      |   5 +
 3 files changed, 263 insertions(+), 52 deletions(-)

diff --git a/src/views/dashboard/PanelGroup.vue b/src/views/dashboard/PanelGroup.vue
index 719f6ce..eb3723d 100644
--- a/src/views/dashboard/PanelGroup.vue
+++ b/src/views/dashboard/PanelGroup.vue
@@ -7,9 +7,9 @@
         </div>
         <div class="card-panel-description">
           <div class="card-panel-text">
-            New Visits
+            <count-to :start-val="0" :end-val="102400" :duration="2600" class="card-panel-num" />
           </div>
-          <count-to :start-val="0" :end-val="102400" :duration="2600" class="card-panel-num" />
+          档案总量
         </div>
       </div>
     </el-col>
@@ -20,9 +20,9 @@
         </div>
         <div class="card-panel-description">
           <div class="card-panel-text">
-            Messages
+            <count-to :start-val="0" :end-val="81212" :duration="3000" class="card-panel-num" />
           </div>
-          <count-to :start-val="0" :end-val="81212" :duration="3000" class="card-panel-num" />
+          档案盒总量
         </div>
       </div>
     </el-col>
@@ -33,9 +33,9 @@
         </div>
         <div class="card-panel-description">
           <div class="card-panel-text">
-            Purchases
+            <count-to :start-val="0" :end-val="9280" :duration="3200" class="card-panel-num" />
           </div>
-          <count-to :start-val="0" :end-val="9280" :duration="3200" class="card-panel-num" />
+          全部设备
         </div>
       </div>
     </el-col>
@@ -46,9 +46,9 @@
         </div>
         <div class="card-panel-description">
           <div class="card-panel-text">
-            Shoppings
+            <count-to :start-val="0" :end-val="13600" :duration="3600" class="card-panel-num" />
           </div>
-          <count-to :start-val="0" :end-val="13600" :duration="3600" class="card-panel-num" />
+          在线设备
         </div>
       </div>
     </el-col>
@@ -59,9 +59,9 @@
         </div>
         <div class="card-panel-description">
           <div class="card-panel-text">
-            Shoppings
+            <count-to :start-val="0" :end-val="13600" :duration="3600" class="card-panel-num" />
           </div>
-          <count-to :start-val="0" :end-val="13600" :duration="3600" class="card-panel-num" />
+          离线设备
         </div>
       </div>
     </el-col>
@@ -87,24 +87,59 @@ export default {
 .panel-group {
 
   .card-panel-col {
-    margin-bottom: 32px;
+    margin-bottom: 20px;
   }
 
   .card-panel {
     height: 100px;
     // height: 108px;
     // cursor: pointer;
-    font-size: 12px;
+    font-size: 15px;
     position: relative;
     overflow: hidden;
-    color: #666;
-    // background: #fff;
-    background: linear-gradient(180deg, rgba(51,159,210,0.5000) 0%, rgba(56,158,225,0) 100%);
-    border-top: 2px #21AAE1 solid;
     opacity: 0.86;
     // box-shadow: 4px 4px 40px rgba(0, 0, 0, .05);
     // border-color: rgba(0, 0, 0, .05);
-
+    &.danganzongliang {
+      color: #21AAE1;
+      background: linear-gradient(180deg, rgba(51,159,210,0.5000) 0%, rgba(56,158,225,0) 100%);
+      border-top: 2px #21AAE1 solid;
+      & span.card-panel-num{
+        background: linear-gradient(180deg, #FFFFFF 0%, #21AAE1 100%);
+      }
+    }
+    &.danganhezongliang {
+      color: #793CBA;
+      background: linear-gradient(180deg, rgba(121,60,186,0.5000) 0%, rgba(121,60,186,0) 100%);
+      border-top: 2px #793CBA solid;
+      & span.card-panel-num{
+        background: linear-gradient(180deg, #FFFFFF 0%, #793CBA 100%)
+      }
+    }
+    &.quanbushebei {
+      color: #008E81;
+      background: linear-gradient(180deg, rgba(0,142,129,0.5000) 0%, rgba(0,142,129,0) 100%);
+      border-top: 2px #008E81 solid;
+      & span.card-panel-num{
+        background: linear-gradient(180deg, #FFFFFF 0%, #008E81 100%);
+      }
+    }
+    &.zaixianshebei {
+      color: #C4C859;
+      background: linear-gradient(180deg, rgba(196,200,89,0.5000) 0%, rgba(196,200,89,0) 100%);
+      border-top: 2px #C4C859 solid;
+      & span.card-panel-num{
+        background: linear-gradient(180deg, #FFFFFF 0%, #BFC458 100%);
+      }
+    }
+    &.lixianshebei {
+      color: #F65164;
+      background: linear-gradient(180deg, rgba(246,81,100,0.5000) 0%, rgba(247,80,100,0) 100%);
+      border-top: 2px #F65164 solid;
+      & span.card-panel-num{
+        background: linear-gradient(180deg, #FFFFFF 0%, #F55164 100%);
+      }
+    }
     // &:hover {
     //   .card-panel-icon-wrapper {
     //     color: #fff;
@@ -127,51 +162,61 @@ export default {
     //   }
     // }
 
-    .icon-danganzongliang {
-      color: #21AAE1;
-    }
+    // .icon-danganzongliang {
+    //   color: #21AAE1;
+    // }
 
-    .icon-danganhezongliang {
-      color: #36a3f7;
-    }
+    // .icon-danganhezongliang {
+    //   color: #793CBA;
+    // }
 
-    .icon-money {
-      color: #f4516c;
-    }
+    // .icon-quanbushebei {
+    //   color: #008E81;
+    // }
 
-    .icon-shopping {
-      color: #34bfa3
-    }
+    // .icon-zaixianshebei {
+    //   color: #C4C859
+    // }
+
+    // .icon-lixianshebei {
+    //   color: #F65164
+    // }
 
     .card-panel-icon-wrapper {
       float: left;
-      margin: 14px 0 0 14px;
-      padding: 16px;
+      margin: 0 10px 0 12px;
+      padding: 20px;
       transition: all 0.38s ease-out;
       border-radius: 6px;
     }
 
     .card-panel-icon {
       float: left;
-      font-size: 48px;
+      font-size: 60px;
     }
 
     .card-panel-description {
-      float: right;
-      font-weight: bold;
-      margin: 26px;
+      // float: right;
+      // font-weight: bold;
+      margin: 19px;
       margin-left: 0px;
 
       .card-panel-text {
-        line-height: 18px;
+        line-height: 30px;
         color: rgba(0, 0, 0, 0.45);
-        font-size: 16px;
-        margin-bottom: 12px;
+        font-size: 28px;
+        margin-bottom: 11px;
+        & span{
+          // background: linear-gradient(180deg, #FFFFFF 0%, #21AAE1 100%);
+          -webkit-background-clip: text;
+          color: transparent;
+          font-weight: bold;
+        }
       }
 
-      .card-panel-num {
-        font-size: 20px;
-      }
+      // .card-panel-num {
+      //   font-size: 20px;
+      // }
     }
   }
 }
diff --git a/src/views/home.vue b/src/views/home.vue
index 2992ff4..ff2aa8c 100644
--- a/src/views/home.vue
+++ b/src/views/home.vue
@@ -3,10 +3,78 @@
     <div class="dashboard-editor-container">
       <!-- <github-corner class="github-corner" /> -->
       <panel-group @handleSetLineChartData="handleSetLineChartData" />
-      <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
+      <!-- <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
         <line-chart :chart-data="lineChartData" />
+      </el-row> -->
+      <el-row :gutter="20">
+        <el-col :xs="24" :sm="24" :lg="16">
+          <div class="container-left search-area">
+            <span class="right-top-line" />
+            <span class="left-bottom-line" />
+            <div class="search-input">
+              <!-- v-model="input3"  v-model="select"-->
+              <el-input placeholder="请输入内容" class="input-with-select">
+                <el-select slot="prepend" placeholder="全目录">
+                  <el-option label="餐厅名" value="1" />
+                  <el-option label="订单号" value="2" />
+                  <el-option label="用户电话" value="3" />
+                </el-select>
+                <el-button slot="append" icon="el-icon-search" />
+              </el-input>
+            </div>
+          </div>
+        </el-col>
+        <el-col :xs="24" :sm="24" :lg="8">
+          <!-- <div class="chart-wrapper">
+            <pie-chart />
+          </div> -->
+          <div class="container-left" style="height: 158px;margin: 0">
+            <span class="right-top-line" />
+            <span class="left-bottom-line" />
+            <h3 class=" table-title">
+              <p class="title-arrow"><svg-icon icon-class="a-3Dkufang" class-name="warehouse-svg" />3D库房</p>
+            </h3>
+            <div class="warehouse-tab">
+              <ul class="warehouse-nav">
+                <li @click="changeActiveTab(0)">
+                  <span />
+                  <p>全景图</p>
+                </li>
+                <li @click="changeActiveTab(1)">
+                  <span />
+                  <p>档案库</p>
+                </li>
+                <li @click="changeActiveTab(2)">
+                  <span />
+                  <p>整理室</p>
+                </li>
+                <li @click="changeActiveTab(3)">
+                  <span />
+                  <p>阅览室</p>
+                </li>
+              </ul>
+            </div>
+          </div>
+        </el-col>
       </el-row>
-      <el-row :gutter="32">
+      <el-row :gutter="20">
+        <el-col :xs="24" :sm="24" :lg="8">
+          <div class="chart-wrapper">
+            <radar-chart />
+          </div>
+        </el-col>
+        <el-col :xs="24" :sm="24" :lg="8">
+          <div class="chart-wrapper">
+            <pie-chart />
+          </div>
+        </el-col>
+        <el-col :xs="24" :sm="24" :lg="8">
+          <div class="chart-wrapper">
+            <bar-chart />
+          </div>
+        </el-col>
+      </el-row>
+      <el-row :gutter="20">
         <el-col :xs="24" :sm="24" :lg="8">
           <div class="chart-wrapper">
             <radar-chart />
@@ -30,7 +98,7 @@
 <script>
 // import GithubCorner from '@/components/GithubCorner'
 import PanelGroup from './dashboard/PanelGroup'
-import LineChart from './dashboard/LineChart'
+// import LineChart from './dashboard/LineChart'
 import RadarChart from '@/components/Echarts/RadarChart'
 import PieChart from '@/components/Echarts/PieChart'
 import BarChart from '@/components/Echarts/BarChart'
@@ -59,7 +127,7 @@ export default {
   components: {
     // GithubCorner,
     PanelGroup,
-    LineChart,
+    // LineChart,
     RadarChart,
     PieChart,
     BarChart
@@ -78,17 +146,18 @@ export default {
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
+@import '~@/assets/styles/lend-manage.scss';
   .dashboard-editor-container {
     padding: 20px;
     background-color: #031435;
     position: relative;
 
-    .github-corner {
-      position: absolute;
-      top: 0;
-      border: 0;
-      right: 0;
-    }
+    // .github-corner {
+    //   position: absolute;
+    //   top: 0;
+    //   border: 0;
+    //   right: 0;
+    // }
 
     .chart-wrapper {
       background: #fff;
@@ -96,10 +165,102 @@ export default {
       margin-bottom: 32px;
     }
   }
-
   @media (max-width:1024px) {
     .chart-wrapper {
       padding: 8px;
     }
   }
+.title-arrow {
+  width: 100%;
+  &:before{
+    left: calc(50% - 100px)
+  }
+  &:after{
+    right: calc(50% - 100px)
+  }
+}
+.warehouse-tab{
+  color: #fff;
+  .warehouse-nav{
+    display: flex;
+    justify-content: space-around;
+    position: absolute;
+    bottom: 20px;
+    // left: 20px;
+    z-index: 11;
+    // width: calc(100vw - 545px);
+    width: 100%;
+    height: 90px;
+    min-height: 90px;
+    padding: 0;
+    li{
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      flex-wrap: nowrap;
+      // align-items: center;
+      align-content: center;
+      justify-content: center;
+      // width: 25%;
+      height: 90px;
+      // line-height: 90px;
+      text-align: right;
+      // padding-right: 20px;
+      // margin-right: 20px;
+      font-size: 14px;
+      position: relative;
+      &:hover{
+        cursor: pointer;
+      }
+      // background: url('~@/assets/images/warehouse_tab_bg.png') no-repeat;
+      // background-size: 100% 100%;
+      span{
+        width: 72px;
+        height: 52px;
+        margin-bottom: 7px;
+        // position: absolute;
+        // left: 60px;
+        // top: 20px;
+      }
+      p{
+        // flex: 1;
+        text-align: left;
+      }
+      &:first-child span{
+        background: url('~@/assets/images/tab_fullview_logo.png') no-repeat;
+      }
+      &:nth-child(2) span{
+        background: url('~@/assets/images/tab_archives_logo.png') no-repeat;
+      }
+      &:nth-child(3) span{
+        background: url('~@/assets/images/tab_collate_logo.png') no-repeat;
+      }
+      &:nth-child(4) span{
+        background: url('~@/assets/images/tab_read_logo.png') no-repeat;
+      }
+    }
+    // .active-nav{
+    //   color: #fff;
+    //   background: url('~@/assets/images/warehouse_tab_active.png') no-repeat;
+    //   background-size: 100% 100%;
+    // }
+  }
+}
+.search-area {
+  height: 158px;
+  margin: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  & .search-input{
+    width: 796px;
+  }
+  // & .el-select .el-input {
+  //   width: 130px;
+  // }
+  // & .input-with-select .el-input-group__prepend {
+  //   background-color: #fff;
+  // }
+}
+
 </style>
diff --git a/src/views/storeManage/deviceManage/module/deviceDetail.vue b/src/views/storeManage/deviceManage/module/deviceDetail.vue
index 2118479..88ba261 100644
--- a/src/views/storeManage/deviceManage/module/deviceDetail.vue
+++ b/src/views/storeManage/deviceManage/module/deviceDetail.vue
@@ -394,6 +394,11 @@ export default {
       // }
       // }
       // await
+      crudDevice.getDeviceById().then((data) => {
+        crud.resetForm(JSON.parse(JSON.stringify(data)))
+        crud.status.edit = CRUD.STATUS.PREPARED
+        crud.getDataStatus(crud.getDataId(data)).edit = CRUD.STATUS.PREPARED
+      })
       form.supplier = form.supplierId.id
       this.selectedDeviceType = form.deviceTypeId.name
       // crud.status.edit = CRUD.STATUS.PREPARED