<template>
  <div class="dashboard-editor-container" style="background-color: #fafafa ;">
    <el-row style="padding-top: 0; border-radius: 4px; margin-bottom: 10px;">
      <el-col :span="24">
        <div class="box_3 flex-col">
                    <div class="text-wrapper_1 flex-row">
                      <span class="text_5">今日打卡统计</span>
                    </div>
                    <div class="group_2 flex-row">
                      <div class="group_3 flex-col"></div>
                    </div>
                    <div class="group_4 flex-row">
                      <div style="display: flex; width: 20%;">
                        <div class="box_4 flex-col">
                          <span class="text_6">正常打卡</span>
                          <span class="text_7" style="cursor: pointer;" @click="tjaow('1')">{{yichangday.zc.num}}</span>
                          <div class="box_5 flex-row justify-between">
                            <span class="text_8">较昨日</span>
                            <img
                              class="thumbnail_10"
                              referrerpolicy="no-referrer"
                              src="../assets/images/icon_htgl_hp_tjss.png"
                              v-if="yichangday.zc.zf == 1"
                            />
                            <img
                              class="thumbnail_10"
                              referrerpolicy="no-referrer"
                              src="../assets/images/icon_htgl_sjtj_xj.png"
                              v-if="yichangday.zc.zf == 2"
                            />
                            <img
                              class="thumbnail_10"
                              referrerpolicy="no-referrer"
                              src="../assets/images/icon_htgl_hp_cps.png"
                              v-if=" yichangday.zc.zf == 3"
                            />
                          </div>
                        </div>
                        <span :class="yichangday.zc.zf == 1?'text_9' :yichangday.zc.zf == 2?'text_19' : 'chsye' ">{{yichangday.zc.bfb}}</span>
                        <div class="text-wrapper_2 flex-col">
                          <panel-groupone :chart-data="yichangday" />
                        </div>
                        <img
                          class="image_2"
                          referrerpolicy="no-referrer"
                          src="../assets/images/pic_kqht_tjfg.png"
                        />
                      </div>
                      <div style="display: flex; width: 20%;">
                        <div class="box_6 flex-col">
                          <span class="text_11">外勤打卡</span>
                          <span class="text_12" style="cursor: pointer;" @click="tjaow('3')">{{yichangday.wq.num}}</span>
                          <div class="block_1 flex-row justify-between">
                            <span class="text_13">较昨日</span>
                            <img
                              class="thumbnail_10"
                              referrerpolicy="no-referrer"
                              src="../assets/images/icon_htgl_hp_tjss.png"
                              v-if="yichangday.wq.zf == 1"
                            />
                            <img
                              class="thumbnail_10"
                              referrerpolicy="no-referrer"
                              src="../assets/images/icon_htgl_sjtj_xj.png"
                              v-if="yichangday.wq.zf == 2"
                            />
                            <img
                              class="thumbnail_10"
                              referrerpolicy="no-referrer"
                              src="../assets/images/icon_htgl_hp_cps.png"
                              v-if=" yichangday.wq.zf == 3"
                            />
                          </div>
                        </div>
                        <span :class="yichangday.wq.zf == 1?'text_14' :yichangday.wq.zf == 2? 'text_19' : 'chsye' ">{{yichangday.wq.bfb}}</span>
                        <div class="text-wrapper_3 flex-col">
                          <panel-grouptwo :chart-data="yichangday" />
                        </div>
                        <img
                          class="image_3"
                          referrerpolicy="no-referrer"
                          src="../assets/images/pic_kqht_tjfg.png"
                        />
                      </div>
                      <div style="display: flex; width: 20%;">
                        <div class="box_7 flex-col">
                          <span class="text_16">迟到打卡</span>
                          <span class="text_17" style="cursor: pointer;" @click="tjaow('2')">{{yichangday.cd.num}}</span>
                          <div class="group_5 flex-row justify-between">
                            <span class="text_18">较昨日</span>
                            <img
                              class="thumbnail_10"
                              referrerpolicy="no-referrer"
                              src="../assets/images/icon_htgl_hp_tjss.png"
                              v-if="yichangday.wq.zf == 1"
                            />
                            <img
                              class="thumbnail_10"
                              referrerpolicy="no-referrer"
                              src="../assets/images/icon_htgl_sjtj_xj.png"
                              v-if="yichangday.wq.zf == 2 "
                            />
                            <img
                              class="thumbnail_10"
                              referrerpolicy="no-referrer"
                              src="../assets/images/icon_htgl_hp_cps.png"
                              v-if="yichangday.wq.zf == 3"
                            />
                          </div>
                        </div>
                         <span :class="yichangday.cd.zf == 1?'text_14' :yichangday.cd.zf == 2? 'text_19' : 'chsye' ">{{yichangday.cd.bfb}}</span>
                        <!-- <span class="text_19">{{yichangday.cd.bfb}}</span> -->
                        <div class="text-wrapper_4 flex-col">
                          <panel-groupther :chart-data="yichangday" />
                        </div>
                        <img
                          class="image_4"
                          referrerpolicy="no-referrer"
                          src="../assets/images/pic_kqht_tjfg.png"
                        />
                      </div>
                      <div style="display: flex; width: 20%;">
                        <div class="box_8 flex-col">
                          <span class="text_21">早退打卡</span>
                          <span class="text_22" style="cursor: pointer;" @click="tjaow('4')">{{yichangday.zt.num}}</span>
                          <div class="group_6 flex-row justify-between">
                            <span class="text_23">较昨日</span>
                            <img
                              class="thumbnail_10"
                              referrerpolicy="no-referrer"
                              src="../assets/images/icon_htgl_hp_tjss.png"
                              v-if="yichangday.zt.zf == 1"
                            />
                            <img
                              class="thumbnail_10"
                              referrerpolicy="no-referrer"
                              src="../assets/images/icon_htgl_sjtj_xj.png"
                              v-if="yichangday.zt.zf == 2 "
                            />
                            <img
                              class="thumbnail_10"
                              referrerpolicy="no-referrer"
                              src="../assets/images/icon_htgl_hp_cps.png"
                              v-if="yichangday.zt.zf == 3"
                            />
                          </div>
                        </div>
                        <span :class="yichangday.zt.zf == 1?'text_14' :yichangday.zt.zf == 2? 'text_19' : 'chsye' ">{{yichangday.zt.bfb}}</span>
                        <div class="text-wrapper_5 flex-col">
                          <panel-groupfour :chart-data="yichangday" />
                        </div>
                        <img
                          class="image_5"
                          referrerpolicy="no-referrer"
                          src="../assets/images/pic_kqht_tjfg.png"
                        />
                      </div>
                      <div style="display: flex; width: 20%;justify-content: center;">
                        <div class="box_9 flex-col">
                          <span class="text_26">缺卡异常</span>
                          <span class="text_27" style="cursor: pointer;" @click="tjaow('5')">{{yichangday.qk.num}}</span>
                          <div class="group_7 flex-row justify-between">
                            <span class="text_28">较昨日</span>
                            <img
                              class="thumbnail_10"
                              referrerpolicy="no-referrer"
                              src="../assets/images/icon_htgl_hp_tjss.png"
                              v-if="yichangday.qk.zf == 1"
                            />
                            <img
                              class="thumbnail_10"
                              referrerpolicy="no-referrer"
                              src="../assets/images/icon_htgl_sjtj_xj.png"
                              v-if="yichangday.qk.zf == 2 "
                            />
                            <img
                              class="thumbnail_10"
                              referrerpolicy="no-referrer"
                              src="../assets/images/icon_htgl_hp_cps.png"
                              v-if="yichangday.qk.zf == 3"
                            />
                          </div>
                        </div>
                         <span :class="yichangday.qk.zf == 1?'text_14' :yichangday.qk.zf == 2? 'text_19' : 'chsye' ">{{yichangday.qk.bfb}}</span>
                        <div class="text-wrapper_6 flex-col">
                          <panel-group :chart-data="yichangday" />
                        </div>
                      </div>
                    </div>
                  </div>
      </el-col>
    </el-row>
    <el-row :gutter="10" style="background-color: #fafafa ;margin: 0;padding: 0;">
      <el-col :span="9">
          <div style="background-color: #fff; border-radius: 4px;padding-top: 10px;">
            <div >
              <div class="box_19 flex-col">
                            <div class="text-wrapper_1 flex-row">
                              <span class="text_5">今日补卡申请</span>
                            </div>
                            <div class="group_2 flex-row">
                              <div class="group_3 flex-col"></div>
                            </div>
                           <div v-if="recordList.length != 0" style="padding: 10px;margin-top: 10px;" v-for="(item,index) in recordList":key="index">
                              <div class="group_21 flex-col"  >
                                <div class="group_22 flex-row">
                                  <div class="text-wrapper_23">
                                    <span class="text_77"> {{item.deptName}}</span>
                                    <span class="text_78"></span>
                                    <span class="text_79">{{item.userName}}</span>
                                    <span class="text_80"></span>
                                    <span class="text_81"
                                      >提交的补卡申请&nbsp;&nbsp;&nbsp;&nbsp;&gt;</span
                                    >
                                  </div>
                                  <span v-if="item.isPass ==0" class="text_82" @click="handleJj(item)">驳回</span>
                                  <img
                                    class="thumbnail_19"
                                    referrerpolicy="no-referrer"
                                    src="../assets/images/shugnagh.png"
                                    v-if="item.isPass ==0"
                                  />
                                  <span v-if="item.isPass ==0" class="text_83" @click="handleTy(item)">同意</span>
                                </div>
                                <div class="text-wrapper_24 flex-row justify-between">
                                  <span class="text_84">提交时间：{{item.createTime}}</span>
                                  <span class="text_85">补卡理由：{{item.reason}}</span>
                                </div>
                                <span class="text_86"
                                  >补卡时间：{{item.applicationTime}}&nbsp;{{item.week}}，</span
                                >
                              </div>
                            </div>
                            <el-empty description="暂无数据" v-if="recordList.length == 0"></el-empty>

                          </div>
            </div>

          </div>

           <div style="background-color: #fff; border-radius: 4px;padding-top: 10px; margin-top: 10px;height: 314px;">
             <div class="idnetw" >
                <div class="text-wrapper_1 flex-row">
                  <span class="text_5">本月考勤记录</span>
                </div>
                <div class="group_2 flex-row">
                  <div class="group_3 flex-col"></div>
                </div>
               <div style="padding: 10px;">
                 <el-table
                     :data="tableData"
                     stripe
                     :height="240"
                     >
                     <el-table-column
                       prop="userName"
                       align="center"
                       label="姓名"
                       show-overflow-tooltip
                      >
                      <template slot-scope="scope">
                        <div>
                          {{scope.row.userName+'/' + scope.row.deptName}}
                        </div>
                      </template>
                     </el-table-column>
                     <el-table-column
                       prop="cd"
                       align="center"
                       label="迟到" show-overflow-tooltip>
                       <template slot-scope="scope">
                         <span style="color: #FFB132;" v-if="scope.row.cd !=0">{{ scope.row.cd }}</span>
                         <span  v-if="scope.row.cd ==0">{{ scope.row.cd }}</span>
                       </template>
                       </el-table-column>
                       <el-table-column
                         prop="zt"
                         align="center"
                         label="早退" show-overflow-tooltip>
                         <template slot-scope="scope">
                           <span v-if="scope.row.zt !=0" style="color: #609CDE;">{{ scope.row.zt }}</span>
                           <span v-if="scope.row.zt == 0" >{{ scope.row.zt }}</span>
                         </template>
                         </el-table-column>
                         <el-table-column
                           prop="qk"
                           align="center"
                           label="缺卡" show-overflow-tooltip>
                           <template slot-scope="scope">
                             <span v-if="scope.row.qk !=0" style="color: #FF6969;">{{ scope.row.qk }}</span>
                             <span v-if="scope.row.qk ==0" >{{ scope.row.qk }}</span>
                           </template>
                           </el-table-column>
                           <el-table-column
                             prop="wq"
                             align="center"
                             label="外勤" show-overflow-tooltip>
                             <template slot-scope="scope">
                               <span v-if="scope.row.wq != 0" style="color: #07C771;">{{ scope.row.wq }}</span>
                               <span v-if="scope.row.wq == 0" >{{ scope.row.wq }}</span>
                             </template>
                             </el-table-column>
                   </el-table>
               </div>
             </div>
           </div>
      </el-col>
      <el-col :span="6">
         <div style="background-color: #fff; border-radius: 4px;padding-top: 10px;">
           <div class="text-wrapper_1 flex-row">
             <span class="text_5">本月考勤异常分析</span>
           </div>
           <div class="group_2 flex-row">
             <div class="group_3 flex-col"></div>
           </div>
           <div style="padding: 10px;">
             <panel-groupfiv :chart-data="yichang"  />
             <div style="margin-top: -72px;">
               <div class="section_6 flex-col" style="padding: 0 20px; margin-top: 10px;" >
                              <div class="box_14 flex-row justify-between">
                                <div class="box_15 flex-col"></div>
                                <span class="text_54" style="margin-left: 10px;">外勤打卡</span>
                              </div>
                              <div class="box_16 flex-row justify-between">
                                <div class="text-wrapper_14">
                                  <span class="text_55">数量：</span>
                                  <span class="text_56">{{yichangmout.wq.num}}</span>
                                </div>
                                <div class="text-wrapper_15">
                                  <span class="text_57">占比：</span>
                                  <span class="text_58">{{yichangmout.wq.bfb}}</span>
                                </div>
                              </div>
               </div>
               <div class="section_6 flex-col" style="padding: 0 20px; margin-top: 10px;" >
                              <div class="box_14 flex-row justify-between">
                                <div class="box_15 flex-col" style="background-color: #3DD18E;"></div>
                                <span class="text_54" style="margin-left: 10px;">迟到打卡</span>
                              </div>
                              <div class="box_16 flex-row justify-between">
                                <div class="text-wrapper_14">
                                  <span class="text_55">数量：</span>
                                  <span class="text_56">{{yichangmout.cd.num}}</span>
                                </div>
                                <div class="text-wrapper_15">
                                  <span class="text_57">占比：</span>
                                  <span class="text_58">{{yichangmout.cd.bfb}}</span>
                                </div>
                              </div>
               </div>
               <div class="section_6 flex-col" style="padding: 0 20px; margin-top: 10px;" >
                              <div class="box_14 flex-row justify-between">
                                <div class="box_15 flex-col" style="background-color: #FF9A49;"></div>
                                <span class="text_54" style="margin-left: 10px;">早退打卡</span>
                              </div>
                              <div class="box_16 flex-row justify-between">
                                <div class="text-wrapper_14">
                                  <span class="text_55">数量：</span>
                                  <span class="text_56">{{yichangmout.zt.num}}</span>
                                </div>
                                <div class="text-wrapper_15">
                                  <span class="text_57">占比：</span>
                                  <span class="text_58">{{yichangmout.zt.bfb}}</span>
                                </div>
                              </div>
               </div>
               <div class="section_6 flex-col" style="padding: 0 20px; margin-top: 10px;" >
                              <div class="box_14 flex-row justify-between">
                                <div class="box_15 flex-col" style="background-color: #FFA7A7;"></div>
                                <span class="text_54" style="margin-left: 10px;">缺卡异常</span>
                              </div>
                              <div class="box_16 flex-row justify-between">
                                <div class="text-wrapper_14">
                                  <span class="text_55">数量：</span>
                                  <span class="text_56">{{yichangmout.qk.num}}</span>
                                </div>
                                <div class="text-wrapper_15">
                                  <span class="text_57">占比：</span>
                                  <span class="text_58">{{yichangmout.qk.bfb}}</span>
                                </div>
                              </div>
               </div>
             </div>

           </div>
         </div>
      </el-col>
      <el-col :span="9" style="padding-left: 0; ">
           <div style="background-color: #fff; border-radius: 4px;padding-top: 10px;">
             <div class="text-wrapper_1 flex-row">
               <span class="text_5">本周补卡统计</span>
             </div>
             <div class="group_2 flex-row">
               <div class="group_3 flex-col"></div>
             </div>
             <line-chart :chart-data="bukalise" />
           </div>
           <div style="margin-top: 10px;background-color: #fff; border-radius: 4px; padding-top: 10px;">
             <div class="text-wrapper_1 flex-row">
               <span class="text_5">本周请假统计</span>
             </div>
             <div class="group_2 flex-row">
               <div class="group_3 flex-col"></div>
             </div>
             <bar-chartone v-if="isqingshou" :chart-data="qjlist" />
           </div>
      </el-col>

    </el-row>

  </div>
</template>

<script>
import PanelGroup from './dashboard/PanelGroup';
import PanelGroupone from './dashboard/PanelGroupone';
import PanelGrouptwo from './dashboard/PanelGrouptwo';
import PanelGroupther from './dashboard/PanelGroupther';
import PanelGroupfour from './dashboard/PanelGroupfour';
import PanelGroupfiv from './dashboard/PanelGroupfiv';
import LineChart from './dashboard/LineChart';
import RaddarChart from './dashboard/RaddarChart';
import PieChart from './dashboard/PieChart';
import BarChart from './dashboard/BarChart';
import BarChartone from './dashboard/BarChartone';
import { listRecord, getRecord, delRecord, addRecord, updateRecord, delInyq } from "@/api/kaoqin/records";
import { abnormal, abnormalday,abnormalmonth,bk,qj,clockRecord} from "@/api/index";


const lineChartData = {
  newVisitis: {
    expectedData: [100, 120, 161, 134, 105, 160, 165],
    actualData: [120, 82, 91, 154, 162, 140, 145]
  },
  messages: {
    expectedData: [200, 192, 120, 144, 160, 130, 140],
    actualData: [180, 160, 151, 106, 145, 150, 130]
  },
  purchases: {
    expectedData: [80, 100, 121, 104, 105, 90, 100],
    actualData: [120, 90, 100, 138, 142, 130, 130]
  },
  shoppings: {
    expectedData: [130, 140, 141, 142, 145, 150, 160],
    actualData: [120, 82, 91, 154, 162, 140, 130]
  }
};
export default {
  name: 'Index',
  components: {
    PanelGroup,
    LineChart,
    RaddarChart,
    PieChart,
    BarChart,
    PanelGroupone,
    PanelGrouptwo,
    PanelGroupther,
    PanelGroupfour,
    PanelGroupfiv,
    BarChartone
  },
  data() {
    return {
      lineChartData: lineChartData.newVisitis,
      // 补卡记录表格数据
      recordList: [],
      yichang:{},
      yichangday:{},
      yichangmout:{},
      bukalise:[],
      qjlist:{},
      tableData:{},
      isqingshou:false
    };
  },
  created() {
    this.getbenzqj()
    this.getbenzbk()
    this.getmutlieg()
    this.getyich()
    this.getyichday()
    this.getyichmonth()
    this.getList()
  },
  methods: {
    /** 查询补卡记录列表 */
    getList() {
      this.loading = true;
      // 'applicationTime': this.gettime(),
      let queryParams = { 'pageNum': 1,
        'pageSize': 2,}
      listRecord(queryParams).then(response => {
        this.recordList = response.rows;
        this.recordList.filter(rou=>{
          rou.shenti = rou.applicationTime
          rou.shenti = rou.shenti.split(' ')
          rou.week = rou.shenti[0]
           const weekDay = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
          const myDate = new Date(Date.parse(rou.week))
            rou.week = weekDay[myDate.getDay()]
        })
        this.total = response.total;
        this.loading = false;
      });
    },
    // 查询异常
    getyich(){
      abnormal().then(response => {
        this.yichang = response.data;
        // console.log()
      });
    },
    // 今天打卡
    getyichday(){
      abnormalday().then(response => {
        this.yichangday = response.data;
      });
    },
    getyichmonth(){
      abnormalmonth().then(response => {
        this.yichangmout = response.data;
        // console.log()
      });
    },
    getbenzqj(){
      this.isqingshou = false
      qj().then(response => {
        this.qjlist = response.data;
        this.isqingshou = true
        // console.log()
      });
    },

    getbenzbk(){
      bk().then(response => {
        this.bukalise = response.data;
        // console.log()
      });
    },
    getmutlieg(){
      clockRecord().then(response => {
        this.tableData = response.data;
        // console.log()
      });
    },


    handleSetLineChartData(type) {
      this.lineChartData = lineChartData[type];
    },
    gettime() {
      var _this = this;
      let wk = new Date().getDay()
      let yy = new Date().getFullYear();
      let mm = new Date().getMonth() + 1;
      if(mm < 10){
        mm = '0'+mm
      }
      let dd = new Date().getDate();
      if(dd < 10){
        dd = '0'+dd
      }
      let hh = new Date().getHours() < 10 ? '0' + new Date().getHours() : new Date().getHours();
      let mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes();
      let ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds();
      let weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
      let week = weeks[wk]
      let nhgw = yy + '-' + mm+'-'+dd
      // _this.getyer = yy;
      // _this.getmor = mm;
      // _this.getday = dd;
      // _this.getshifL = hh + ':' + mf;
      // _this.getweek = week;
      // console.log(this.gettime)
      return nhgw
    },
    // 拒绝
    handleJj(row){
     const ids = row.id || this.ids;
     let nhdes = {
       id:ids,
       isPass:1,
       kaSort:row.kaSort
       }
     delInyq(nhdes).then(response => {
           this.getList();
           this.$modal.msgSuccess("操作成功");
         });
    },
    // 同意
    handleTy(row){
      const ids = row.id || this.ids;
      let nhdes = {
        id:ids,
        isPass:2,
        kaSort:row.kaSort
        }
        delInyq(nhdes).then(response => {
          this.getList();
          this.$modal.msgSuccess("操作成功");
        });
  },
  tjaow(row){
    console.log(row)
     this.$router.push({
       path: '/kaoqin/record',
       query: {
       	'id':row,
       }
     })

  }
  }
};
</script>
<style  lang="scss">
  .dashboard-editor-container{
    .el-row{
      box-shadow:none;
      -webkit-box-shadow:none;
    }
  }
  .idnetw{
    .el-table .el-table__header-wrapper th{
      background-color: #F1F1F1 !important;
      color: #343434 !important;
    }
  }
</style>

<style lang="scss" scoped>


  .flex-col {
    display: flex;
    flex-direction: column;
  }
  .flex-row {
    display: flex;
    flex-direction: row;
  }
  .justify-between {
    display: flex;
    justify-content: space-between;
  }

  .box_3 {
    background-color: rgba(255, 255, 255, 1);
    border-radius: 4px;
    height: 186px;
    width: 100%;
  }
  .text-wrapper_1 {
    width: 96px;
    height: 16px;
    margin: 5px 0 0 18px;
  }
  .text_5 {
    width: 96px;
    height: 16px;
    overflow-wrap: break-word;
    color: rgba(51, 51, 51, 1);
    font-size: 16px;
    font-family: PingFang-SC-Heavy;
    font-weight: 900;
    text-align: left;
    white-space: nowrap;
    line-height: 16px;
  }
  .group_2 {
    width: 30px;
    height: 6px;
    margin: 8px 0 0 19px;
  }
  .group_3 {
    background-color: rgba(63, 115, 253, 1);
    width: 30px;
    height: 6px;
  }
  .group_4 {
    // width: 100%;
    height: 82px;
    margin: 26px 44px 30px 44px;
  }
  .box_4 {
    width: 55px;
    height: 82px;
  }
  .text_6 {
    width: 55px;
    height: 14px;
    overflow-wrap: break-word;
    color: rgba(102, 102, 102, 1);
    font-size: 14px;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 24px;
  }
  .text_7 {
    width: 46px;
    height: 21px;
    overflow-wrap: break-word;
    color: rgba(34, 40, 56, 1);
    font-size: 28px;
    font-family: Alibaba-PuHuiTi-B;
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
    line-height: 24px;
    margin: 20px 0 0 1px;
  }
  .box_5 {
    width: 52px;
    height: 12px;
    margin-top: 15px;
  }
  .text_8 {
    width: 34px;
    height: 12px;
    overflow-wrap: break-word;
    color: rgba(102, 102, 102, 1);
    font-size: 12px;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 24px;
  }
  .thumbnail_10 {
    width: 14px;
    height: 10px;
    margin-top: 6px;
  }
  .text_9 {
    width: 29px;
    height: 10px;
    overflow-wrap: break-word;
    color: rgba(254, 90, 14, 1);
    font-size: 12px;
    font-family: PingFang-SC-Bold;
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
    line-height: 24px;
    margin: 71px 0 0 2px;
  }
  .text-wrapper_2 {
    height: 78px;
    margin-left: 9px;
    width: 58px;
  }
  .text_10 {
    width: 30px;
    height: 11px;
    overflow-wrap: break-word;
    color: rgba(63, 115, 253, 1);
    font-size: 14px;
    font-family: PingFang-SC-Bold;
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
    line-height: 24px;
    margin: 23px 0 0 14px;
  }
  .image_2 {
    width: 1px;
    height: 74px;
    margin: 4px 0 0 41px;
  }
  .box_6 {
    width: 55px;
    height: 82px;
    margin-left: 40px;
  }
  .text_11 {
    width: 55px;
    height: 14px;
    overflow-wrap: break-word;
    color: rgba(102, 102, 102, 1);
    font-size: 14px;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 24px;
  }
  .text_12 {
    width: 30px;
    height: 20px;
    overflow-wrap: break-word;
    color: rgba(34, 40, 56, 1);
    font-size: 28px;
    font-family: Alibaba-PuHuiTi-B;
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
    line-height: 24px;
    margin: 20px 0 0 1px;
  }
  .block_1 {
    width: 52px;
    height: 12px;
    margin-top: 16px;
  }
  .text_13 {
    width: 34px;
    height: 12px;
    overflow-wrap: break-word;
    color: rgba(102, 102, 102, 1);
    font-size: 12px;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 24px;
  }
  .thumbnail_11 {
    width: 14px;
    height: 10px;
    margin-top: 1px;
  }
  .text_14 {
    width: 29px;
    height: 10px;
    overflow-wrap: break-word;
    color: rgba(254, 90, 14, 1);
    font-size: 12px;
    font-family: PingFang-SC-Bold;
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
    line-height: 24px;
    margin: 71px 0 0 2px;
  }
  .text-wrapper_3 {
    height: 88px;
    margin-left: 9px;
    width: 58px;
  }
  .text_15 {
    width: 34px;
    height: 11px;
    overflow-wrap: break-word;
    color: rgba(6, 199, 112, 1);
    font-size: 14px;
    font-family: PingFang-SC-Bold;
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
    line-height: 24px;
    margin: 23px 0 0 14px;
  }
  .image_3 {
    width: 1px;
    height: 74px;
    margin: 4px 0 0 41px;
  }
  .box_7 {
    width: 56px;
    height: 82px;
    margin-left: 39px;
  }
  .text_16 {
    width: 55px;
    height: 14px;
    overflow-wrap: break-word;
    color: rgba(102, 102, 102, 1);
    font-size: 14px;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 24px;
    margin-left: 1px;
  }
  .text_17 {
    width: 31px;
    height: 21px;
    overflow-wrap: break-word;
    color: rgba(34, 40, 56, 1);
    font-size: 28px;
    font-family: Alibaba-PuHuiTi-B;
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
    line-height: 24px;
    margin-top: 20px;
  }
  .group_5 {
    width: 53px;
    height: 12px;
    margin: 15px 0 0 1px;
  }
  .text_18 {
    width: 34px;
    height: 12px;
    overflow-wrap: break-word;
    color: rgba(102, 102, 102, 1);
    font-size: 12px;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 24px;
  }
  .thumbnail_12 {
    width: 14px;
    height: 10px;
    margin-top: 1px;
  }
  .text_19 {
    width: 29px;
    height: 10px;
    overflow-wrap: break-word;
    color: rgba(40, 197, 41, 1);
    font-size: 12px;
    font-family: PingFang-SC-Bold;
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
    line-height: 24px;
    margin: 71px 0 0 2px;
  }
  .text-wrapper_4 {
    height: 88px;

    margin-left: 9px;
    width: 58px;
  }
  .text_20 {
    width: 34px;
    height: 11px;
    overflow-wrap: break-word;
    color: rgba(255, 177, 50, 1);
    font-size: 14px;
    font-family: PingFang-SC-Bold;
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
    line-height: 24px;
    margin: 23px 0 0 14px;
  }
  .image_4 {
    width: 1px;
    height: 74px;
    margin: 4px 0 0 41px;
  }
  .box_8 {
    width: 56px;
    height: 82px;
    margin-left: 40px;
  }
  .text_21 {
    width: 55px;
    height: 14px;
    overflow-wrap: break-word;
    color: rgba(102, 102, 102, 1);
    font-size: 14px;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 24px;
    margin-left: 1px;
  }
  .text_22 {
    width: 31px;
    height: 21px;
    overflow-wrap: break-word;
    color: rgba(34, 40, 56, 1);
    font-size: 28px;
    font-family: Alibaba-PuHuiTi-B;
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
    line-height: 24px;
    margin-top: 20px;
  }
  .group_6 {
    width: 52px;
    height: 12px;
    margin: 15px 0 0 1px;
  }
  .text_23 {
    width: 34px;
    height: 12px;
    overflow-wrap: break-word;
    color: rgba(102, 102, 102, 1);
    font-size: 12px;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 24px;
  }
  .thumbnail_13 {
    width: 14px;
    height: 10px;
    margin-top: 1px;
  }
  .text_24 {
    width: 29px;
    height: 10px;
    overflow-wrap: break-word;
    color: rgba(254, 90, 14, 1);
    font-size: 12px;
    font-family: PingFang-SC-Bold;
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
    line-height: 24px;
    margin: 71px 0 0 2px;
  }
  .text-wrapper_5 {
    height: 88px;
    margin-left: 9px;
    width: 58px;
  }
  .text_25 {
    width: 33px;
    height: 11px;
    overflow-wrap: break-word;
    color: rgba(150, 186, 62, 1);
    font-size: 14px;
    font-family: PingFang-SC-Bold;
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
    line-height: 24px;
    margin: 23px 0 0 15px;
  }
  .image_5 {
    width: 1px;
    height: 74px;
    margin: 4px 0 0 40px;
  }
  .box_9 {
    width: 56px;
    height: 82px;
    margin-left: 40px;
  }
  .text_26 {
    width: 55px;
    height: 14px;
    overflow-wrap: break-word;
    color: rgba(102, 102, 102, 1);
    font-size: 14px;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 24px;
    margin-left: 1px;
  }
  .text_27 {
    width: 28px;
    height: 21px;
    overflow-wrap: break-word;
    color: rgba(34, 40, 56, 1);
    font-size: 28px;
    font-family: Alibaba-PuHuiTi-B;
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
    line-height: 24px;
    margin-top: 20px;
  }
  .group_7 {
    width: 52px;
    height: 12px;
    margin: 15px 0 0 1px;
  }
  .text_28 {
    width: 34px;
    height: 12px;
    overflow-wrap: break-word;
    color: rgba(102, 102, 102, 1);
    font-size: 12px;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 24px;
  }
  .thumbnail_14 {
    width: 14px;
    height: 10px;
    margin-top: 1px;
  }
  .text_29 {
    width: 29px;
    height: 10px;
    overflow-wrap: break-word;
    color: rgba(254, 90, 14, 1);
    font-size: 12px;
    font-family: PingFang-SC-Bold;
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
    line-height: 24px;
    margin: 71px 0 0 2px;
  }
  .text-wrapper_6 {
    height: 88px;
    margin-left: 9px;
    width: 58px;
  }
  .text_30 {
    width: 34px;
    height: 11px;
    overflow-wrap: break-word;
    color: rgba(255, 105, 105, 1);
    font-size: 14px;
    font-family: PingFang-SC-Bold;
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
    line-height: 24px;
    margin: 23px 0 0 14px;
  }
.dashboard-editor-container {
  padding: 10px;
  background-color: rgb(240, 242, 245);
  position: relative;
  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

.section_6 {
  background-color: rgba(242, 245, 254, 1);
  border-radius: 4px;
  height: 78px;
  // width: 240px;
  margin: 0 0 0 0;
}
.box_14 {
  width: 100%;
  height: 14px;
  margin: 16px 0 0 0;
}
.box_15 {
  background-color: rgba(47, 125, 211, 1);
  border-radius: 50%;
  width: 10px;
  height: 10px;
  margin-top: 3px;
}
.text_54 {
  width: 100%;
  height: 14px;
  overflow-wrap: break-word;
  color: rgba(61, 69, 91, 1);
  font-size: 14px;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 15px;
}
.box_16 {
  width: 100%;
  height: 14px;
  margin: 17px 0 0 0;
}
.text-wrapper_14 {
  // width: 67px;
  height: 14px;
  overflow-wrap: break-word;
  font-size: 0;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 14px;
}
.text_55 {
  width: 67px;
  height: 14px;
  overflow-wrap: break-word;
  color: rgba(156, 163, 182, 1);
  font-size: 14px;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 14px;
}
.text_56 {
  width: 67px;
  height: 14px;
  overflow-wrap: break-word;
  color: rgba(34, 40, 56, 1);
  font-size: 14px;
  font-family: PingFang-SC-Heavy;
  font-weight: 900;
  text-align: left;
  white-space: nowrap;
  line-height: 14px;
}
.text-wrapper_15 {
  width: 82px;
  height: 14px;
  overflow-wrap: break-word;
  font-size: 0;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 14px;
}
.text_57 {
  width: 82px;
  height: 14px;
  overflow-wrap: break-word;
  color: rgba(156, 163, 182, 1);
  font-size: 14px;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 14px;
}
.text_58 {
  width: 82px;
  height: 14px;
  overflow-wrap: break-word;
  color: rgba(34, 40, 56, 1);
  font-size: 14px;
  font-family: PingFang-SC-Heavy;
  font-weight: 900;
  text-align: left;
  white-space: nowrap;
  line-height: 14px;
}
.box_19 {
  background-color: rgba(255, 255, 255, 1);
  border-radius: 4px;
  width: 100%;
  height: 290px;
}
.text-wrapper_22 {
  width: 420px;
  height: 20px;
  margin: 12px 0 0 15px;
}
.text_75 {
  width: 96px;
  height: 16px;
  overflow-wrap: break-word;
  color: rgba(51, 51, 51, 1);
  font-size: 16px;
  font-family: PingFang-SC-Heavy;
  font-weight: 900;
  text-align: left;
  white-space: nowrap;
  line-height: 80px;
  margin-top: 4px;
}
.text_76 {
  width: 75px;
  height: 14px;
  overflow-wrap: break-word;
  color: rgba(170, 170, 170, 1);
  font-size: 14px;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 24px;
}
.group_20 {
  background-color: rgba(63, 115, 253, 1);
  width: 30px;
  height: 6px;
  margin: 8px 0 0 16px;
}
.group_21 {
  background-color: rgba(247, 249, 255, 1);
  border-radius: 3px;
  width: 100%;
  height: 98px;
  border: 2px dashed rgba(63, 115, 253, 1);
  justify-content: flex-center;
  padding: 13px;
  // margin: 20px 0 0 15px;
}
.group_22 {
  width: 100%;
  height: 14px;
  // padding: 17px;
  // margin: 17px 0 0 12px;
}
.text-wrapper_23 {
  width: 218px;
  height: 13px;
  overflow-wrap: break-word;
  font-size: 0;
  font-family: PingFang-SC-Heavy;
  font-weight: 900;
  text-align: left;
  white-space: nowrap;
  line-height: 21px;
  margin-top: 1px;
}
.text_77 {
  width: 218px;
  height: 13px;
  overflow-wrap: break-word;
  color: rgba(34, 40, 56, 1);
  font-size: 14px;
  font-family: PingFang-SC-Heavy;
  font-weight: 900;
  text-align: left;
  white-space: nowrap;
  line-height: 28px;
}
.text_78 {
  width: 218px;
  height: 13px;
  overflow-wrap: break-word;
  color: rgba(61, 69, 91, 1);
  font-size: 14px;
  font-family: PingFang-SC-Bold;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
  line-height: 28px;
}
.text_79 {
  width: 218px;
  height: 13px;
  overflow-wrap: break-word;
  color: rgba(63, 115, 253, 1);
  font-size: 14px;
  font-family: PingFang-SC-Heavy;
  font-weight: 900;
  text-align: left;
  white-space: nowrap;
  line-height: 28px;
}
.text_80 {
  width: 218px;
  height: 13px;
  overflow-wrap: break-word;
  color: rgba(61, 69, 91, 1);
  font-size: 14px;
  font-family: PingFang-SC-Bold;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
  line-height: 28px;
}
.text_81 {
  width: 218px;
  height: 13px;
  overflow-wrap: break-word;
  color: rgba(34, 40, 56, 1);
  font-size: 14px;
  font-family: PingFang-SC-Heavy;
  font-weight: 900;
  text-align: left;
  white-space: nowrap;
  line-height: 28px;
}
.text_82 {
  width: 27px;
  height: 13px;
  overflow-wrap: break-word;
  color: rgba(255, 105, 105, 1);
  font-size: 14px;
  font-family: PingFang-SC-Heavy;
  font-weight: 900;
  text-align: left;
  white-space: nowrap;
  line-height: 28px;
  margin-left: 90px;
}
.thumbnail_19 {
  width: 1px;
  height: 12px;
  margin: 8px 0 0 15px;
}
.text_83 {
  width: 27px;
  height: 13px;
  overflow-wrap: break-word;
  color: rgba(63, 115, 253, 1);
  font-size: 14px;
  font-family: PingFang-SC-Heavy;
  font-weight: 900;
  text-align: left;
  white-space: nowrap;
  line-height: 28px;
  margin-left: 13px;
}
.text-wrapper_24 {
  width: 100%;
  height: 13px;
  margin: 18px 0 0 0;
}
.text_84 {
  width: 154px;
  height: 12px;
  overflow-wrap: break-word;
  color: rgba(102, 102, 102, 1);
  font-size: 12px;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 13px;
}
.text_85 {
  width: 192px;
  height: 12px;
  overflow-wrap: break-word;
  color: rgba(102, 102, 102, 1);
  font-size: 12px;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 13px;
  margin-top: 1px;
}
.text_86 {
  width: 100%;
  height: 13px;
  overflow-wrap: break-word;
  color: rgba(102, 102, 102, 1);
  font-size: 12px;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 13px;
  margin: 11px 0 0 0;
}
.group_23 {
  background-color: rgba(247, 249, 255, 1);
  border-radius: 3px;
  width: 416px;
  height: 98px;
  border: 2px solid rgba(63, 115, 253, 1);
  justify-content: flex-center;
  margin: 14px 0 14px 15px;
}
.box_20 {
  width: 391px;
  height: 14px;
  margin: 17px 0 0 12px;
}
.text-wrapper_25 {
  width: 204px;
  height: 13px;
  overflow-wrap: break-word;
  font-size: 0;
  font-family: PingFang-SC-Heavy;
  font-weight: 900;
  text-align: left;
  white-space: nowrap;
  line-height: 21px;
  margin-top: 1px;
}
.text_87 {
  width: 204px;
  height: 13px;
  overflow-wrap: break-word;
  color: rgba(34, 40, 56, 1);
  font-size: 14px;
  font-family: PingFang-SC-Heavy;
  font-weight: 900;
  text-align: left;
  white-space: nowrap;
  line-height: 28px;
}
.text_88 {
  width: 204px;
  height: 13px;
  overflow-wrap: break-word;
  color: rgba(61, 69, 91, 1);
  font-size: 14px;
  font-family: PingFang-SC-Bold;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
  line-height: 28px;
}
.text_89 {
  width: 204px;
  height: 13px;
  overflow-wrap: break-word;
  color: rgba(63, 115, 253, 1);
  font-size: 14px;
  font-family: PingFang-SC-Heavy;
  font-weight: 900;
  text-align: left;
  white-space: nowrap;
  line-height: 28px;
}
.text_90 {
  width: 204px;
  height: 13px;
  overflow-wrap: break-word;
  color: rgba(61, 69, 91, 1);
  font-size: 14px;
  font-family: PingFang-SC-Bold;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
  line-height: 28px;
}
.text_91 {
  width: 204px;
  height: 13px;
  overflow-wrap: break-word;
  color: rgba(34, 40, 56, 1);
  font-size: 14px;
  font-family: PingFang-SC-Heavy;
  font-weight: 900;
  text-align: left;
  white-space: nowrap;
  line-height: 28px;
}
.text_92 {
  width: 27px;
  height: 13px;
  overflow-wrap: break-word;
  color: rgba(255, 105, 105, 1);
  font-size: 14px;
  font-family: PingFang-SC-Heavy;
  font-weight: 900;
  text-align: left;
  white-space: nowrap;
  line-height: 28px;
  margin-left: 104px;
}
.thumbnail_20 {
  width: 1px;
  height: 12px;
  margin: 1px 0 0 15px;
}
.text_93 {
  width: 27px;
  height: 13px;
  overflow-wrap: break-word;
  color: rgba(63, 115, 253, 1);
  font-size: 14px;
  font-family: PingFang-SC-Heavy;
  font-weight: 900;
  text-align: left;
  white-space: nowrap;
  line-height: 28px;
  margin-left: 13px;
}
.text-wrapper_26 {
  width: 380px;
  height: 13px;
  margin: 13px 0 0 12px;
}
.text_94 {
  width: 154px;
  height: 12px;
  overflow-wrap: break-word;
  color: rgba(102, 102, 102, 1);
  font-size: 12px;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 13px;
}
.text_95 {
  width: 192px;
  height: 12px;
  overflow-wrap: break-word;
  color: rgba(102, 102, 102, 1);
  font-size: 12px;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 13px;
  margin-top: 1px;
}
.text_96 {
  width: 250px;
  height: 13px;
  overflow-wrap: break-word;
  color: rgba(102, 102, 102, 1);
  font-size: 12px;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 13px;
  margin: 11px 0 17px 12px;
}
.anve{
  display: flex;
  flex-wrap: wrap;
  // width: 100%;
  p{
    // flex: 1;
    width: 30%;
    background-color: #DDE7EF;
    display: flex;
    flex-direction: column;
    padding:  11px 11px;
    border-radius: 5px;
    opacity: 0.7;
    margin: 0;
    margin-bottom: 8px;
    span:nth-child(2){
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #000000;
      margin-top: 5px;
    }
  }
  p:nth-child(2){
    margin-left: 12px;
    margin-right: 12px;
  }
  p:nth-child(5){
    margin-left: 12px;
    margin-right: 12px;
  }
}
.actie{
    display: flex;
    p{
      // flex: 1;
      width: 30%;
      background-color: #DDE7EF;
      display: flex;
      flex-direction: column;
      padding:  11px 11px;
      // border-radius: 5px;
      opacity: 0.7;
      margin: 0;
      margin-bottom: 8px;
      text-align: center;

    }
    p:nth-child(1){
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      span:nth-child(2){
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: bold;
        color: #000000;
        margin-top: 5px;
        text-align: left;
      }
    }
    p:nth-child(2){
      // margin-left: 12px;
      // margin-right: 12px;
      padding-right: 0;
      padding-left: 18px;
      width: 34%;
      text-align: center;
      background-color: #F5F5F5;
    }
    p:nth-child(3){
      // margin-left: 12px;
      // margin-right: 12px;
      width: 34%;
      background-color: #F5F5F5;
    }
}
.bottom{
  div{
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14;
    font-family: PingFang SC;
    font-weight: 400;
    color: #000000;
    background-color: #fafafa ;
    opacity: 0.7;
    border-radius: 5px;
    padding: 9px 19px;
    span:nth-child(2){
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #000000;
    }
  }
}

@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
.chsye{
  width: 29px;
  height: 10px;
  overflow-wrap: break-word;
  font-size: 12px;
  font-family: PingFang-SC-Bold;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
  line-height: 24px;
  margin: 71px 0 0 2px;
  color: #747474;
}
</style>
