From 2e7d1e59d04b0ea8a973d3f6e49915b0fe785fe0 Mon Sep 17 00:00:00 2001
From: zhaoyongnian <541231643@qq.com>
Date: Thu, 28 Jul 2022 18:08:20 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=B4=E6=97=B6=E6=8F=90=E4=BA=A4=20?=
 =?UTF-8?q?=E9=A1=BA=E5=BE=B7=E5=B1=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../modules/visual/shundeju/controlCount.vue  | 629 ++++++++++++++++++
 .../modules/visual/shundeju/screen-table.vue  | 346 ++++++++++
 2 files changed, 975 insertions(+)
 create mode 100644 src/views/modules/visual/shundeju/controlCount.vue
 create mode 100644 src/views/modules/visual/shundeju/screen-table.vue

diff --git a/src/views/modules/visual/shundeju/controlCount.vue b/src/views/modules/visual/shundeju/controlCount.vue
new file mode 100644
index 00000000..0487f987
--- /dev/null
+++ b/src/views/modules/visual/shundeju/controlCount.vue
@@ -0,0 +1,629 @@
+<template>
+  <div class="warning-box">
+    <cpt-card :min-full-screen="true">
+      <div class="card-title">
+        <img class="title-icon" src="../../../../assets/img/shuju/title-tip.png" />
+        <div class="title-label">
+          访客统计分析
+        </div>
+      </div>
+      <div class="card-left-title mt30">
+        访客分析 &nbsp;&nbsp;
+        <div class="title-time new-time">
+          <!-- <div class="title-time-label">选择时间</div> -->
+          <div class="second-select">
+            <!-- <el-date-picker v-model="timeRange"
+              type="daterange"
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              prefix-icon="el-icon-caret-bottom"
+              value-format="yyyy-MM-dd"
+              >
+            </el-date-picker> -->
+            <el-date-picker
+              v-model="lineTime"
+              type="date"
+              placeholder="选择日期">
+            </el-date-picker>
+          </div>
+        </div>
+      </div>
+      <div class="echarts-container">
+        <div id="echartsBox" class="echarts-boxs"></div>
+      </div>
+      <div class="card-left-title mt30">
+        访客记录
+        &nbsp;&nbsp;
+        <div class="title-time new-time">
+          <!-- <div class="title-time-label">选择时间</div> -->
+          <div class="second-select">
+            <el-date-picker v-model="timeRange"
+              type="daterange"
+              range-separator="至"
+              start-placeholder="开始日期"
+              end-placeholder="结束日期"
+              prefix-icon="el-icon-caret-bottom"
+              value-format="yyyy-MM-dd"
+              >
+            </el-date-picker>
+          </div>
+        </div>  
+      </div>
+      <div class="warning-box-bottom">
+        <screen-table
+          :operate="false"
+          :headerStyle="headerStyle"
+          :tableContentStyle="headerStyle"
+          :headerList="headerList"
+          :tableData="tableData"
+          :visibleLoading="visibleLoading"
+        ></screen-table>
+        <div class="pagination">
+          <el-pagination hide-on-single-page
+            :current-page="pageNo"
+            :page-size="pageSize"
+            background
+            layout="prev, pager, next"
+            @size-change="pageSizeChangeHandleNew"
+            @current-change="pageCurrentChangeHandleNew"
+            :total="total"
+          >
+          </el-pagination>
+        </div>
+      </div>
+    </cpt-card>
+  </div>
+</template>
+
+<script>
+import { requestPost, requestGet } from "@/js/dai/request";
+import screenTable from "./screen-table";
+import cptCard from "@/views/modules/visual/cpts/card";
+import nextTick from "dai-js/tools/nextTick";
+import * as echarts from 'echarts';
+export default {
+  name: "warning-box",
+  components: {
+    cptCard,
+    screenTable
+  },
+  data() {
+    return {
+      headerStyle: [
+        {
+          'max-width': '100px'
+        },
+        {
+          'min-width': '150px'
+        },
+        {
+          'min-width': '210px'
+        },
+        {
+          'min-width': '20px'
+        },
+        {
+          'min-width': '20px'
+        },
+        {
+          'min-width': '20px'
+        },
+        {
+          'min-width': '210px'
+        },
+        {
+          'min-width': '400px',
+          'white-space':'pre-wrap'
+        },
+        {
+          'min-width': '50px'
+        },
+        {
+          'min-width': '50px'
+        },
+        {
+          'min-width': '50px'
+        },
+        {
+          'min-width': '50px'
+        }
+      ],
+      headerList: [
+        { title: "姓名", coulmn: 'name' },
+        { title: "头像", coulmn: 'faceImg' },
+        { title: "身份证", coulmn: 'idCard' },
+        { title: "性别", coulmn: 'gender' },
+        { title: "手机号", coulmn: 'mobile' },
+        { title: "类型", coulmn: 'type' },
+        { title: "出入时间", coulmn: 'createdTime' },
+        { title: "进入原因", coulmn: 'visitReason' },
+        { title: "小区", coulmn: 'residential' },
+        { title: "楼号", coulmn: 'building' },
+        { title: "单元", coulmn: 'unit' },
+        { title: "房间", coulmn: 'room' },
+      ],
+      timeRange: '',
+      tableData: [],
+      visibleLoading: true,
+      pageNo: 1,
+      pageSize: 10,
+      total: 0,
+      startTime: '',
+      endTime: '',
+      lineTime: new Date()
+    };
+  },
+  watch: {
+    timeRange(val) {
+      console.log('val-www', JSON.stringify(val))
+      if (!val) return false
+      this.pageNo = 1;
+      this.pageSize = 10;
+      this.total = 0;
+      this.startTime = val[0]
+      this.endTime = val[1]
+      this.getVisitVisitorPage()
+    },
+    lineTime  (val) {
+      if (val) {
+        this.getChartTraffic()
+      }
+    },
+  },
+  async mounted() {
+    this.initTime()
+    await nextTick(100);
+    await this.getChartTraffic()
+    await this.getVisitVisitorPage()
+  },
+  methods: {
+    // 从这里开始写
+    async getChartTraffic () {
+      const url = "/pli/power/visitVisitor/chart/traffic";
+      let params = {
+        date: this.timeFormat(this.lineTime)
+      };
+      const { data, code, msg } = await requestPost(url, params);
+        if (code === 0) {
+        console.log('pie-data', data)
+        let xData = []
+        let yData = []
+        if (data && data.length > 0) {
+          data.forEach(item => {
+            xData.push(item.hour)
+            yData.push(item.num)
+          });
+        }
+        this.initCharts(xData, yData)
+      } else {
+      }
+    },
+    async getVisitVisitorPage () {
+      const url = "/pli/power/visitVisitor/page";
+      let params = {
+        page: this.pageNo,
+        limit: this.pageSize,
+        startTime: this.startTime,
+        endTime: this.endTime
+      };
+      const { data, code, msg } = await requestGet(url, params);
+      if (code === 0) {
+        this.tableData = data.list.map((item, index) => {
+          return {
+            ...item,
+            index: index + 1
+          }
+        })
+        this.total = data.total
+        
+      } else {
+      }
+      this.visibleLoading = false;
+    },
+    initCharts(xData, yData) {
+      const eId = document.getElementById('echartsBox')
+      let _charts = echarts.init(eId)
+
+      let option = {
+        tooltip: {
+          trigger: 'axis',
+          axisPointer: {
+            // Use axis to trigger tooltip
+            type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
+          },
+          backgroundColor: 'transprant',
+          borderColor: 'transprant',
+          textStyle: {
+            color: '#fff'
+          },
+          formatter: params => {
+              const total = params[0].data
+              const xName = params[0].axisValue
+              let title = `<div style='margin-bottom: 10px;'><span>${xName} 时 -- </span>${total}人</div>`
+              return title
+          }
+        },
+        xAxis: {
+          type: 'category',
+          axisLabel: {
+            color: '#8ec7dc',
+            fontSize: 16
+          },
+          axisTick: {
+            show: false
+          },
+          axisLine: {
+            lineStyle: {
+              color: '#0c4b59'
+            }
+          },
+          data: xData
+        },
+        yAxis: {
+          nameTextStyle: {
+            color: '#8ec7dc',
+            fontSize: 18
+          },
+          splitNumber: 4,
+          minInterval: 1,
+          show: true,
+          type: 'value',
+          axisLabel: {
+            color: '#8ec7dc',
+            fontSize: 18
+          },
+          axisTick: {
+            show: false
+          },
+          splitLine: {
+            lineStyle: {
+              color: ['#145968'],
+              type: 'dotted'
+            }
+          },
+          axisLine: {
+            show: true,
+            symbol: ['none', 'arrow'],
+            symbolOffset: [0, 15],
+            lineStyle: {
+              color: '#0c4b59'
+            }
+          }
+        },
+        series: [
+          {
+            name: '数量',
+            type: 'line',
+            smooth: true,
+            barWidth: 15,
+            areaStyle: {},
+            itemStyle: {
+              color: new echarts.graphic.LinearGradient(
+                0, 1, 0, 0,
+                [
+                  { offset: 0, color: 'rgba(121, 55, 255, 0)' },
+                  { offset: 1, color: '#6339FF' }
+                ]
+              )
+            }
+          },
+          {
+            data: yData,
+            type: 'line',
+            areaStyle: {}
+          }
+        ]
+      };
+
+      option && _charts.setOption(option);
+    },
+    initTime() {
+      const end = new Date();
+      const start = new Date();
+      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
+      console.log('time-rtt', this.timeFormat(start), this.timeFormat(end))
+      this.timeRange = [this.timeFormat(start), this.timeFormat(end)]
+    },
+    timeFormat(date) {
+      if (!date || typeof date === 'string') {
+        return false
+      }
+      var y = date.getFullYear() //年
+      var m = date.getMonth() + 1 //月
+      if (m < 10) m = '0' + m
+      var d = date.getDate() //日
+      if (d < 10) d = '0' + d
+
+      return y + '-' + m + '-' + d
+    },
+
+    handleCascader(val) {
+      console.log('val-vvv', val)
+      if (val.length > 0) {
+        const _arr = val[val.length - 1].split('-')
+        const orgType = _arr[1] !== 'grid' ? 'agency': 'grid'
+        // this.getServicePie(_arr[0], orgType)
+      }
+    },
+    pageSizeChangeHandleNew(val) {
+      this.pageNo = 1;
+      this.pageSize = val;
+      this.getVisitVisitorPage()
+    },
+    pageCurrentChangeHandleNew(val) {
+      this.pageNo = val;
+      this.getVisitVisitorPage()
+    },
+  },
+};
+</script>
+
+<style
+  lang="scss"
+  src="@/assets/scss/modules/visual/warning.scss"
+  scoped
+></style>
+<style lang="scss" scoped>
+.new-time{
+  display: flex;
+  align-items: center;
+}
+.warning-box-bottom {
+  margin-top: 10px;
+}
+.card-title {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  margin-bottom: 10px;
+  padding: 4px 2px;
+
+  .title-icon {
+    display: block;
+    // width: 46px;
+    // height: 34px;
+    box-sizing: border-box;
+    margin-right: 5px;
+  }
+  ::v-deep .el-dropdown {
+    font-size: 16px;
+    color: #fff;
+    font-weight: 800;
+  }
+  .title-time {
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    margin-left: 10px;
+    font-size: 14px;
+    color: #fff;
+    .title-time-label {
+      margin-right: 10px;
+    }
+    ::v-deep .el-date-editor--month {
+      width: 100px;
+      .el-input__inner {
+        width: 100px;
+        height: 24px;
+        box-sizing: border-box;
+        padding: 0;
+        font-size: 14px;
+        color: #fff;
+        line-height: 24px;
+        text-align: center;
+        background: #06186D;
+        border: 1px solid #1A64CC;
+        border-radius: 2px;
+      }
+      .el-input__prefix {
+        display: none;
+      }
+      .el-input__suffix {
+        right: 0;
+        .el-input__icon {
+          line-height: 24px;
+        }
+      }
+      
+    }
+  }
+
+  .title-label {
+    font-size: 22px;
+    font-family: PingFang SC;
+    font-weight: 800;
+    ::v-deep .el-input {
+      width: 180px;
+      .el-input__inner {
+        font-size: 18px;
+        // font-weight: 800;
+        color: #fff;
+        background: #06186d;
+        border: 1px solid #1a64cc;
+      }
+      .el-icon-arrow-down::before {
+          content: "\e790";
+      }
+    }
+  }
+}
+.card-left-title {
+  position: relative;
+  padding-left: 40px;
+  font-size: 16px;
+  font-weight: 500;
+  color: #fff;
+}
+.card-left-title::after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 20px;
+  width: 12px;
+  height: 12px;
+  box-sizing: border-box;
+  margin-top: -6px;
+  background: #2865FA;
+  border-radius: 50%;
+}
+.second-select {
+    margin: 0 10px 0 0;
+    ::v-deep .el-input {
+      width: 180px;
+      height: 36px;
+      .el-input__inner {
+        height: 100%;
+        padding: 0 10px;
+        color: #fff;
+        line-height: 36px;
+        background: #06186d;
+        border: 1px solid #1a64cc;
+      }
+
+      .el-icon-arrow-up:before {
+        content: "\e78f";
+      }
+      // .el-select__caret:before {
+      //   content: '\E790'
+      // }
+    }
+    ::v-deep .el-date-editor {
+      width: 360px;
+      position: relative;
+      background: #06186d;
+      border: 1px solid #1a64cc;
+      .el-range-input {
+        color: #fff;
+        background: #06186d;
+      }
+      .el-range-separator {
+        color: #fff;
+      }
+      .el-range__icon {
+        position: absolute;
+        right: 5px;
+        // float: right;
+      }
+      .el-input__prefix {
+        left: unset;
+        right: 5px;
+      }
+    }
+  }
+.card-echart {
+  display: flex;
+  margin-top: 40px;
+  .card-left {
+    position: relative;
+    flex: 1;
+    display: flex;
+    
+  }
+}
+.echart-wr {
+  position: relative;
+  flex-shrink: 0;
+  width: 50%;
+  height: 320px;
+  box-sizing: border-box;
+  .echart-org {
+    width: 100%;
+    height: 100%;
+  }
+  .echart-cicle {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 240px;
+    height: 240px;
+    box-sizing: border-box;
+    margin-top: -120px;
+    margin-left: -120px;
+    border: 1px dashed rgba(0, 96, 240, 1);
+    border-radius: 50%;
+  }
+}
+
+.echarts-tips {
+  width: 40%;
+  // flex: 1;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.echarts-tips-wd50 {
+  width: 50%;
+}
+.tips-list, .tips-item, .tips-lists, .tips-items-num {
+  display: flex;
+  align-items: center;
+}
+.tips-list {
+  // width: 100%;
+  // height: 100%;
+  flex-wrap: wrap;
+  // justify-content: center;
+  .tips-item {
+    // flex: 1;
+    width: 50%;
+    margin-top: 20px;
+    // margin-right: 40px;
+    cursor: pointer;
+    .tips-item-icon {
+      width: 20px;
+      height: 10px;
+      box-sizing: border-box;
+      margin-right: 8px;
+      background: #1B51FF;
+      border-radius: 2px;
+    }
+    .tips-item-text {
+      font-size: 16px;
+      color: #D2E7FF;
+    }
+  }
+}
+.tips-lists {
+  width: 100%;
+  flex-wrap: wrap;
+  .tips-items {
+    margin-bottom: 30px;
+    width: 50%;
+    .tips-items-title {
+      font-size: 16px;
+    }
+    .tips-items-num {
+      justify-content: space-between;
+      box-sizing: border-box;
+      margin-top: 20px;
+      padding-right: 30px;
+      font-size: 20px;
+      .tips-item-has {
+        font-size: 14px;
+      }
+    }
+  }
+}
+
+
+.echarts-boxs {
+  width: 100%;
+  height: 400px;
+}
+
+.ecahrts-button {
+  width: 100%;
+  text-align: right;
+  ::v-deep .el-button--warning {
+
+    background: linear-gradient(90deg, #0863EA, #3B9FFC);
+    border: 0;
+  }
+}
+.mt30 {
+  margin-top: 30px;
+  display: flex;
+  align-items: center;
+}
+</style>
diff --git a/src/views/modules/visual/shundeju/screen-table.vue b/src/views/modules/visual/shundeju/screen-table.vue
new file mode 100644
index 00000000..716875d5
--- /dev/null
+++ b/src/views/modules/visual/shundeju/screen-table.vue
@@ -0,0 +1,346 @@
+<template>
+  <div class="warning-table">
+    <div class="table">
+      <div class="table-header">
+        <div
+          class="table-header-th"
+          v-for="(item, index) in headerList"
+          :key="item.title"
+          :style="headerStyle[index]"
+        >
+          {{ item.title }}
+        </div>
+         <div
+          v-if="operate"
+          class="table-header-th"
+        >
+          操作
+        </div>
+      </div>
+      <div class="table-body">
+        <div
+          class="table-body-tr"
+          v-for="(value, index) in tableData"
+          :key="index"
+          @click.stop="handleClickRow(value)"
+        >
+          <div
+            class="td"
+            v-for="(item, indexs) in headerList"
+            :key="indexs"
+            :style="tableContentStyle[indexs]"
+          >
+            <div v-if="item.coulmn == 'faceImg'">
+              <img
+                :src= "value[item.coulmn]"
+                alt=""
+                srcset=""
+                style="width: 50px;height: 50px;"
+              />
+            </div>
+            <div v-else>
+              {{ value[item.coulmn] }}
+            </div>
+            <!-- <span
+              v-if="indexs + 1 == value.length && item.length > 8"
+              class="more"
+              @click.stop="onClickMorePop(index)"
+              ref="morePop"
+            >
+              更多>
+              <span class="more-pop" v-if="visiblePopList[index]">
+                {{ value[item.coulmn] }}
+              </span>
+            </span> -->
+          </div>
+          <div v-if="operate" class="td td-btn" @click="look(value)">查看</div>
+        </div>
+        <screen-loading v-if="visibleLoading">加载中</screen-loading>
+        <div class="no-data" v-if="tableData.length == 0 && !visibleLoading">
+          <img
+            src="../../../../assets/img/modules/visual/noData.png"
+            alt=""
+            srcset=""
+            class="no-data-img"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import ScreenLoading from "../components/screen-loading/index";
+import Vue from "vue";
+export default {
+  name: "warning-table",
+  components: {
+    ScreenLoading,
+  },
+  props: {
+    headerList: {
+      type: Array,
+      required: false,
+      default: () => {
+        return [
+          { title: "序号" },
+          { title: "所属网格" },
+          { title: "所属小区" },
+          { title: "楼号" },
+          { title: "姓名" },
+        ];
+      },
+    },
+    tableData: {
+      type: Array,
+      required: false,
+      default: () => {
+        return [
+          // [
+          //   1,
+          //   "商丘路社区第一网格",
+          //   "商丘路小区",
+          //   "2号楼",
+          //   "杨颖、王平、刘佳敏、丁辉、杨萍",
+          // ],
+          // [
+          //   2,
+          //   "商丘路社区第一网格",
+          //   "商丘路小区",
+          //   "2号楼",
+          //   "杨颖、王平、刘佳敏、丁辉、杨萍",
+          // ],
+        ];
+      },
+    },
+    // 单独给头部设置样式
+    headerStyle: {
+      type: Array,
+      default: () => {
+        return [
+          // {
+          //   width:'200px',
+          //   border:'1px solid red'
+          // },
+          // {
+          //   width:'200px'
+          // }
+        ];
+      },
+    },
+    // 单独给内容设置样式
+    tableContentStyle: {
+      type: Array,
+      default: () => {
+        return [
+          // {
+          //   width:'200px',
+          //   border:'1px solid red'
+          // },
+          // {
+          //   width:'200px'
+          // }
+        ];
+      },
+    },
+    visibleLoading: {
+      type: Boolean,
+      default: true,
+    },
+    operate: {
+      type: Boolean,
+      default: true
+    }
+    // // 表格平均分的份数
+    // ava: {
+    //   type: Number,
+    //   default: 8
+    // },
+    // // 表头高度--默认占比10%
+    // headerHeightAva: {
+    //   type: String,
+    //   default: '10%'
+    // },
+    // // 表格主体平均分成的份数
+    // tableContentAva: {
+    //   type: Number,
+    //   default: 5
+    // },
+  },
+  data() {
+    return {
+      visiblePopList: [
+        false,
+        false,
+        false,
+        false,
+        false,
+        false,
+        false,
+        false,
+        false,
+        false,
+      ],
+    };
+  },
+  watch: {
+    tableData(arr) {
+      if (Array.isArray(arr)) {
+        this.visiblePopList = new Array(arr.length).fill(false);
+      }
+    },
+  },
+
+  mounted() {
+    window.addEventListener("click", (e) => {
+      this.visiblePopList = new Array(this.visiblePopList.length).fill(false);
+    });
+  },
+
+  created() {},
+
+  methods: {
+    onClickMorePop(index) {
+      this.visiblePopList.forEach((item, indexs) => {
+        if (index == indexs) {
+          Vue.set(this.visiblePopList, index, true);
+        } else {
+          Vue.set(this.visiblePopList, indexs, false);
+        }
+      });
+    },
+    look(val) {
+      console.log('look-----l', val)
+      this.$emit('look', val)
+    },
+    handleClickRow(val) {
+      this.$emit('row', val)
+    }
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.warning-table {
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  .table {
+    width: 100%;
+    height: 100%;
+    &-header {
+      width: 100%;
+      height: 50px;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+      background: rgba(8, 37, 134, 0.85);
+      font-size: 16px;
+      font-weight: 400;
+      color: #ffffff;
+
+      &-th {
+        text-align: center;
+        width: calc(100% / 5);
+      }
+    }
+
+    &-body {
+      box-sizing: border-box;
+      width: 100%;
+      height: calc(100% - 50px);
+      font-size: 18px;
+      font-weight: 400;
+      color: #ffffff;
+
+      &-tr {
+        width: 100%;
+        height: 50px;
+        // height: calc(100% / 10);
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+
+        .td {
+          text-align: center;
+          width: calc(100% / 5);
+          box-sizing: border-box;
+          padding: 0 15px;
+          cursor: pointer;
+          overflow: hidden;
+          white-space: nowrap;
+          text-overflow: ellipsis;
+          .more {
+            font-size: 18px;
+            font-weight: 400;
+            color: #e4dc00;
+            position: relative;
+            cursor: pointer;
+
+            &-pop {
+              box-sizing: border-box;
+              display: block;
+              box-sizing: border-box;
+              width: 215px;
+              height: auto;
+              line-height: 20px;
+              border: 1px solid red;
+              position: absolute;
+              right: -100%;
+              top: 150%;
+              background: #06186d;
+              border: 1px solid #1a64cc;
+              border-radius: 5px;
+              font-size: 9px;
+              font-weight: 400;
+              color: #ffffff;
+              padding: 16px 8px 10px 9px;
+              z-index: 1;
+              cursor: default;
+              // &::after{
+              //   position: absolute;
+              //   left: 30%;
+              //   top: -30%;
+              //   display: flex;
+              //   content:'';
+              //   width: 0;
+              //   height: 0;
+              //   border-width: 13px;
+              //   border-style: solid;
+              //   border-color: transparent transparent rgba(26, 100, 204,0.5) transparent;
+              //   // border-color: transparent transparent red transparent;
+              //   transform: translate(-50%,0);
+              // }
+            }
+          }
+        }
+      }
+      .td-btn {
+        color: #e4dc00;
+      }
+
+      &-tr:nth-child(2n) {
+        background: rgba(16, 75, 164, 0.24);
+      }
+
+      &-tr:hover {
+        background: url("../../../../assets/img/modules/visual/hover-bac.png")
+          no-repeat center;
+        background-size: 100% 100%;
+      }
+      // 暂无数据
+      .no-data {
+        width: 100%;
+        height: calc(100% - 50px);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        &-img {
+          width: 249px;
+          height: 172px;
+        }
+      }
+    }
+  }
+}
+</style>