首页CSS修改

src/components/Echarts/PieChart.vue

@@ -67,11 +67,11 @@ export default {
             radius: [15, 95],
             center: ['50%', '38%'],
             data: [
-              { value: 320, name: 'Industries' },
-              { value: 240, name: 'Technology' },
-              { value: 149, name: 'Forex' },
-              { value: 100, name: 'Gold' },
-              { value: 59, name: 'Forecasts' }
+              { value: 730, name: '案卷' },
+              // { value: 240, name: 'Technology' },
+              // { value: 149, name: 'Forex' },
+              // { value: 100, name: 'Gold' },
+              { value: 900, name: '文件' }
             ],
             animationEasing: 'cubicInOut',
             animationDuration: 2600

src/views/archivesManage/outInStorage/inStorage/index.vue

@@ -52,7 +52,7 @@
       <el-table-column prop="caseName" align="center" label="盒名称" min-width="150" />
       <el-table-column prop="tid" align="center" label="TID" min-width="250" />
       <el-table-column prop="barcode" align="center" label="条形码" width="200" />
-      <el-table-column prop="folderLocation" align="center" label="存放位置" width="250">
+      <el-table-column prop="folderLocationDetails" align="center" label="存放位置" width="250">
         <!-- <template slot-scope="scope">
           <div>{{ scope.row.update_time | parseTime }}</div>
         </template> -->

src/views/data1.json

@@ -0,0 +1,100 @@
+{
+  "rows":[
+    {
+      "time":"2022-6-30 13:00",
+      "warehouse":"文书档案库房",
+      "warning":"温度温度温度温度温度温度"
+    },
+    {
+      "time":"2022-6-30 13:00",
+      "warehouse":"文书档案库房",
+      "warning":"温度温度温度温度温度温度"
+    },
+    {
+      "time":"2022-6-30 13:00",
+      "warehouse":"文书档案库房",
+      "warning":"温度温度温度温度温度温度"
+    },
+    {
+      "time":"2022-6-30 13:00",
+      "warehouse":"文书档案库房",
+      "warning":"温度温度温度温度温度温度"
+    },
+    {
+      "time":"2022-6-30 13:00",
+      "warehouse":"文书档案库房",
+      "warning":"温度温度温度温度温度温度"
+    },
+    {
+      "time":"2022-6-30 13:00",
+      "warehouse":"文书档案库房",
+      "warning":"温度温度温度温度温度温度"
+    },
+    {
+      "time":"2022-6-30 13:00",
+      "warehouse":"文书档案库房",
+      "warning":"温度温度温度温度温度温度"
+    },
+    {
+      "time":"2022-6-30 13:00",
+      "warehouse":"文书档案库房",
+      "warning":"温度温度温度温度温度温度"
+    },
+    {
+      "time":"2022-6-30 13:00",
+      "warehouse":"文书档案库房",
+      "warning":"温度温度温度温度温度温度"
+    },
+    {
+      "time":"2022-6-30 13:00",
+      "warehouse":"文书档案库房",
+      "warning":"温度温度温度温度温度温度"
+    },
+    {
+      "time":"2022-6-30 13:00",
+      "warehouse":"文书档案库房",
+      "warning":"温度温度温度温度温度温度"
+    },
+    {
+      "time":"2022-6-30 13:00",
+      "warehouse":"文书档案库房",
+      "warning":"温度温度温度温度温度温度"
+    },
+    {
+      "time":"2022-6-30 13:00",
+      "warehouse":"文书档案库房",
+      "warning":"温度温度温度温度温度温度"
+    },
+    {
+      "time":"2022-6-30 13:00",
+      "warehouse":"文书档案库房",
+      "warning":"温度温度温度温度温度温度"
+    },
+    {
+      "time":"2022-6-30 13:00",
+      "warehouse":"文书档案库房",
+      "warning":"温度温度温度温度温度温度"
+    },
+    {
+      "time":"2022-6-30 13:00",
+      "warehouse":"文书档案库房",
+      "warning":"温度温度温度温度温度温度"
+    },
+    {
+      "time":"2022-6-30 13:00",
+      "warehouse":"文书档案库房",
+      "warning":"温度温度温度温度温度温度"
+    },
+    {
+      "time":"2022-6-30 13:00",
+      "warehouse":"文书档案库房",
+      "warning":"温度温度温度温度温度温度"
+    },
+    {
+      "time":"2022-6-30 13:00",
+      "warehouse":"文书档案库房",
+      "warning":"温度温度温度温度温度温度"
+    }
+
+  ]
+}

src/views/home.vue

@@ -6,7 +6,7 @@
       <!-- <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
         <line-chart :chart-data="lineChartData" />
       </el-row> -->
-      <el-row :gutter="20">
+      <el-row :gutter="20" style="margin-bottom:20px;height: 158px;">
         <el-col :xs="24" :sm="24" :lg="16">
           <div class="container-left search-area">
             <span class="right-top-line" />
@@ -28,7 +28,7 @@
           <!-- <div class="chart-wrapper">
             <pie-chart />
           </div> -->
-          <div class="container-left" style="height: 158px;margin: 0">
+          <div class="container-left" style="height: 100%;margin: 0">
             <span class="right-top-line" />
             <span class="left-bottom-line" />
             <h3 class=" table-title">
@@ -57,37 +57,84 @@
           </div>
         </el-col>
       </el-row>
-      <el-row :gutter="20">
+      <el-row :gutter="20" style="margin-bottom:20px;height:276px;">
         <el-col :xs="24" :sm="24" :lg="8">
-          <div class="chart-wrapper">
-            <radar-chart />
+          <!-- 待办事项 -->
+          <div class="container-wrap">
+            <span class="right-top-line" />
+            <span class="left-bottom-line" />
+            <h3 class="table-title">
+              <p class="title-arrow"><svg-icon icon-class="tongzhigonggao" class-name="warehouse-svg" />待办事项</p>
+            </h3>
           </div>
         </el-col>
         <el-col :xs="24" :sm="24" :lg="8">
-          <div class="chart-wrapper">
-            <pie-chart />
+          <!-- 门禁记录 -->
+          <div class="container-wrap">
+            <span class="right-top-line" />
+            <span class="left-bottom-line" />
+            <h3 class="table-title">
+              <p class="title-arrow"><svg-icon icon-class="menjin" class-name="warehouse-svg" />门禁记录</p>
+            </h3>
+            <el-table
+              ref="table2"
+              style="min-width: 100%;"
+              height="100%"
+              :data="tableData"
+              class="warehose-el-table"
+              :row-class-name="rowBgColor"
+            >
+              <el-table-column prop="time" label="时间" align="center" min-width="60" />
+              <el-table-column prop="warehouse" label="库房" align="center" min-width="60" />
+              <el-table-column prop="warning" label="警情" align="center" :show-overflow-tooltip="true" min-width="85" />
+            </el-table>
           </div>
         </el-col>
         <el-col :xs="24" :sm="24" :lg="8">
-          <div class="chart-wrapper">
-            <bar-chart />
+          <!-- 报警记录 -->
+          <div class="container-wrap">
+            <span class="right-top-line" />
+            <span class="left-bottom-line" />
+            <h3 class="table-title">
+              <p class="title-arrow"><svg-icon icon-class="alerm" class-name="warehouse-svg" />报警记录</p>
+            </h3>
+            <el-table
+              ref="table"
+              style="min-width: 100%;"
+              height="100%"
+              :data="tableData"
+              class="warehose-el-table"
+              :row-class-name="rowBgColor"
+            >
+              <el-table-column prop="time" label="时间" align="center" min-width="60" />
+              <el-table-column prop="warehouse" label="库房" align="center" min-width="60" />
+              <el-table-column prop="warning" label="警情" align="center" :show-overflow-tooltip="true" min-width="85" />
+            </el-table>
           </div>
         </el-col>
       </el-row>
-      <el-row :gutter="20">
+      <el-row :gutter="20" style="height:276px;">
         <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 class="container-wrap">
+            <span class="right-top-line" />
+            <span class="left-bottom-line" />
+            <h3 class="table-title">
+              <p class="title-arrow">档案类别</p>
+            </h3>
+            <div class="chart-wrapper">
+              <pie-chart :width="'100%'" :height="'100%'" />
+            </div>
           </div>
         </el-col>
         <el-col :xs="24" :sm="24" :lg="8">
           <div class="chart-wrapper">
-            <bar-chart />
+            <pie-chart />
           </div>
         </el-col>
       </el-row>
@@ -101,7 +148,8 @@ import PanelGroup from './dashboard/PanelGroup'
 // import LineChart from './dashboard/LineChart'
 import RadarChart from '@/components/Echarts/RadarChart'
 import PieChart from '@/components/Echarts/PieChart'
-import BarChart from '@/components/Echarts/BarChart'
+// import BarChart from '@/components/Echarts/BarChart'
+import data1 from './data1.json'
 
 const lineChartData = {
   newVisitis: {
@@ -129,17 +177,24 @@ export default {
     PanelGroup,
     // LineChart,
     RadarChart,
-    PieChart,
-    BarChart
+    PieChart
+    // ,
+    // BarChart
   },
   data() {
     return {
       lineChartData: lineChartData.newVisitis
     }
   },
+  created() {
+    this.getData()
+  },
   methods: {
     handleSetLineChartData(type) {
       this.lineChartData = lineChartData[type]
+    },
+    getData() {
+      this.tableData = data1.rows
     }
   }
 }
@@ -190,8 +245,8 @@ export default {
     z-index: 11;
     // width: calc(100vw - 545px);
     width: 100%;
-    height: 90px;
-    min-height: 90px;
+    // height: 90px;
+    // min-height: 90px;
     padding: 0;
     li{
       display: flex;
@@ -247,7 +302,7 @@ export default {
   }
 }
 .search-area {
-  height: 158px;
+  height: 100%;
   margin: 0;
   display: flex;
   align-items: center;
@@ -255,12 +310,20 @@ export default {
   & .search-input{
     width: 796px;
   }
-  // & .el-select .el-input {
-  //   width: 130px;
-  // }
-  // & .input-with-select .el-input-group__prepend {
-  //   background-color: #fff;
-  // }
 }
-
+.el-col {
+  height: 100%;
+}
+.container-left, .container-right, .container-wrap, .el-card, .header-container-wrap{
+  min-height: 100%;
+}
+.warehose-el-table ::v-deep.el-table__header-wrapper{
+  box-shadow: inset 0px 0px 6px 1px #339CFF;
+  background: none !important;
+}
+.container-wrap{
+  min-height: auto;
+  height: 100%;
+  overflow: hidden;
+}
 </style>