<template>
  <div class="app-container home index">
    <div v-if="shouzu">
      <el-row :gutter="20">
        <el-col :span="17">
          <el-row :gutter="20">
            <el-col :span="24">
              <div class="block_11 flex-col">
                <div class="box_4 flex-row justify-between">
                  <div class="group_7 flex-col"></div>
                  <span class="text_35">快捷功能</span>
                </div>
                <div class="image-wrapper_8 flex-row justify-between ">
                  <div v-hasPermi="['wuYe:houseInfo:list']"
                    style="display: flex;flex-direction: column;align-items: center;cursor: pointer;" @click="tiahe(1)">
                    <img class="label_2" referrerpolicy="no-referrer" src="../assets/images/icon_wght_kjgn_fwgl.png" />
                    <p> <span class="text_37">房屋管理</span></p>
                  </div>
                  <div v-hasPermi="['wuYe:residentInfo:list']"
                    style="display: flex;flex-direction: column; align-items: center;cursor: pointer;" @click="tiahe(2)">
                    <img class="label_2" referrerpolicy="no-referrer" src="../assets/images/icon_wght_kjgn_rygl.png" />
                    <p><span class="text_37">居住人员</span></p>
                  </div>
                  <div v-hasPermi="['wuYe:houseInfo:list']"
                    style="display: flex;flex-direction: column;align-items: center;cursor: pointer;" @click="tiahe(3)">
                    <img class="label_2" referrerpolicy="no-referrer" src="../assets/images/icon_wght_kjgn_clgk.png" />
                    <p><span class="text_36">车辆管控</span></p>
                  </div>

                  <div v-hasPermi="['wuYe:illegalParking:list']"
                    style="display: flex;flex-direction: column;align-items: center;cursor: pointer;" @click="tiahe(4)">
                    <img class="label_2" referrerpolicy="no-referrer" src="../assets/images/icon_wght_kjgn_wtgl.png" />
                    <p><span class="text_37">违停管理</span></p>
                  </div>
                  <div v-hasPermi="['wuYe:visitorManage:list']"
                    style="display: flex;flex-direction: column;align-items: center;cursor: pointer;" @click="tiahe(5)">
                    <img class="label_2" referrerpolicy="no-referrer" src="../assets/images/icon_wght_kjgn_lfgl.png" />
                    <p><span class="text_37">来访管理</span></p>
                  </div>
                  <div v-hasPermi="['wuYe:repair:add']"
                    style="display: flex;flex-direction: column;align-items: center;cursor: pointer;" @click="tiahe(6)">
                    <img class="label_2" referrerpolicy="no-referrer" src="../assets/images/icon_wght_kjgn_wybx.png" />
                    <p> <span class="text_37">物业报修</span></p>
                  </div>
                  <div v-hasPermi="['wuYe:suggestion:add']"
                    style="display: flex;flex-direction: column;align-items: center;cursor: pointer;" @click="tiahe(7)">
                    <img class="label_2" referrerpolicy="no-referrer" src="../assets/images/icon_wght_kjgn_tsjy.png" />
                    <p><span class="text_37">投诉建议</span></p>
                  </div>
                </div>
              </div>
            </el-col>
            <el-col :span="11">
              <div class="block_7 flex-col">
                <div class="section_4 flex-row justify-between">
                  <div class="section_5 flex-col"></div>
                  <span class="text_29">车辆进出统计</span>
                </div>
                <div class="section_6 flex-row" style="position: relative;">
                  <panel-group  :chart-data="carNume" />
                  <div style="position: absolute;top: 33%;left: 41%;">
                    <p style="color: #5A5A5A;font-size: 16px;font-weight: 700;margin: 0;">进入车辆</p>
                    <p
                      style="color: #FDB72D;font-size: 20px; font-weight: 700; margin: 0;margin-top: 10px;text-align: center;s">
                      {{carNume.zs}}</p>
                  </div>
                </div>
                <div class="section_7 flex-row" style="padding: 0 30px;">
                  <div style="flex: 1;">
                    <div style="display: flex;">
                      <div class="group_5 flex-col"></div>
                      <span class="text_31">内部车辆</span>
                    </div>
                    <div class="text-wrapper_11 flex-row justify-between">
                      <span class="text_33" style="margin-left: 30px;">841</span>
                    </div>
                  </div>
                  <div style="flex: 1;">
                    <div style="display: flex;">
                      <div class="group_6 flex-col"></div>
                      <span class="text_32">外来车辆</span>
                    </div>
                    <div class="text-wrapper_11 flex-row justify-between">
                      <span class="text_34" style="margin-left: 30px;">396</span>
                    </div>
                  </div>
                </div>

              </div>
            </el-col>
            <el-col :span="13">
              <div class="block_14 flex-col" v-if="isxug">
                <div class="group_9 flex-row" style="display: flex;justify-content: space-between;">
                  <div style="display: flex;">
                    <div class="block_15 flex-col"></div>
                    <span class="text_59">今日巡更</span>
                  </div>
                  <span class="text_60" style="cursor: pointer;" @click="tiahe(8)"
                    v-hasPermi="['wuYe:checkPointRecord:add']">查看更多&nbsp;→</span>
                </div>
                <div class="text-wrapper_17 flex-row justify-between">
                  <span class="text_61">巡更点</span>
                  <span class="text_62">已巡更</span>
                  <span class="text_63">未巡更</span>
                </div>
                <div class="text-wrapper_18 flex-row">
                  <span class="text_64">{{xunjiantj.checkPoint}}</span>
                  <span class="text_65">{{xunjiantj.yCheckPoint}}</span>
                  <span class="text_66">{{xunjiantj.wCheckPoint}}</span>
                </div>
                <div class="image-text_1 flex-row justify-between">
                  <span class="thumbnail_17" style="background-color: #196CFF;border-radius: 50%;"></span>
                  <span
                    class="text-group_1">{{checkPointRecordList[0].checkTime == null?'暂无数据': checkPointRecordList[0].checkTime }}</span>
                </div>
                <div class="group_10 flex-row justify-between">

                  <span class="image_7" style="background-color: #E6E6E6;"> </span>
                  <div class="section_13 flex-col">
                    <div class="text-wrapper_19 flex-row justify-between">
                      <span
                        class="text_67">{{checkPointRecordList[0].checkAddress == null?'暂无数据': checkPointRecordList[0].checkAddress }}</span>
                      <span class="text_68"><dict-tag :options="dict.type.patrol_type"
                          :value="checkPointRecordList[0].checkType" /></span>
                    </div>
                    <div class="section_14 flex-row justify-between">
                      <div class="text-wrapper_20">
                        <span class="text_69">巡检人：</span>
                        <span
                          class="text_70">{{checkPointRecordList[0].checkUserName == null?'暂无数据': checkPointRecordList[0].checkUserName }}</span>
                      </div>
                      <div class="text-wrapper_21">
                        <span class="text_71">巡检结果：</span>
                        <span class="text_72" v-if="checkPointRecordList[0].checkResult == 1">正常</span>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="image-text_2 flex-row justify-between">

                  <span class="thumbnail_18" style="background-color: #E6E6E6;border-radius: 50%;"></span>
                  <span
                    class="text-group_2">{{checkPointRecordList[1].checkTime == null?'暂无数据': checkPointRecordList[1].checkTime }}</span>
                </div>
                <div class="group_11 flex-row justify-between">
                  <span class="image_8" style="background-color: #E6E6E6;"> </span>
                  <div class="box_9 flex-col">
                    <div class="text-wrapper_22 flex-row justify-between">
                      <span
                        class="text_73">{{checkPointRecordList[1].checkAddress == null?'暂无数据': checkPointRecordList[1].checkAddress }}</span>
                      <span class="text_74"><dict-tag :options="dict.type.patrol_type"
                          :value="checkPointRecordList[1].checkType" /></span>
                    </div>
                    <div class="box_10 flex-row justify-between">
                      <div class="text-wrapper_23">
                        <span class="text_75">巡检人：</span>
                        <span
                          class="text_76">{{checkPointRecordList[1].checkUserName == null?'暂无数据': checkPointRecordList[1].checkUserName }}</span>
                      </div>
                      <div class="text-wrapper_24">
                        <span class="text_77">巡检结果：</span>
                        <span class="text_78" v-if="checkPointRecordList[1].checkResult == 2">异常</span>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="image-text_3 flex-row justify-between">
                  <span class="thumbnail_18" style="background-color: #E6E6E6;border-radius: 50%;"></span>
                  <span
                    class="text-group_3">{{checkPointRecordList[1].checkTime == null?'暂无数据': checkPointRecordList[1].checkTime }}</span>
                </div>
                <span class="thumbnail_20" style="background-color: #E6E6E6;"> </span>
              </div>
            </el-col>
          </el-row>

        </el-col>
        <el-col :span="7">
          <div class="block_19 flex-row">
            <span class="text_94">{{getyer}}</span> <span class="text_95">{{getmor}}/{{getday}}</span>
            <div class="box_16 flex-col justify-between">
              <div class="text-wrapper_30 flex-col">
                <span class="text_96">{{getshifL}}</span>
              </div>
              <span class="text_97">{{getweek}}</span>
            </div>
          </div>
          <div class="block_16 flex-col">
            <div class="group_9 flex-row" style="display: flex;justify-content: space-between;">
              <div style="display: flex;">
                <div class="block_15 flex-col"></div>
                <span class="text_59">投诉建议</span>
              </div>
              <span class="text_60" style="cursor: pointer;" @click="tiahe(7)"
                v-hasPermi="['wuYe:suggestion:add']">查看更多&nbsp;→</span>
            </div>

            <div class="box_12 flex-row" style="display: flex;justify-content: space-between;">
              <div style="display: flex;flex: 1;">
                <span class="text_81">已回投诉</span>
                <!-- <div class="section_15 flex-col"></div>
                         -->
                <div class="section_15 ">
                  <el-progress :color="customColor" :text-inside="true" :stroke-width="12"
                    :percentage="bafe"></el-progress>
                </div>
              </div>
              <span class="text_82">{{yifhufe}}</span>
            </div>
            <div class="box_12 flex-row" style="display: flex;justify-content: space-between;">
              <div style="display: flex;flex: 1;">
                <span class="text_81">投诉建议</span>
                <div class="block_18 flex-col"></div>
              </div>
              <span class="text_82">{{tatse}}</span>
            </div>
            <div class="box_14 flex-col" v-for="(item,index) in suggestionList" :key="index">
              <div class="text-wrapper_25 flex-row justify-between">
                <span class="text_85">{{item.title == null?'暂无数据' : item.title}}</span>
                <span :class="item.status == 1?'text_86' :'text_90'  ">{{item.status == 1?'待回复' :'已回复'}}</span>
              </div>
              <span class="paragraph_7">{{item.content == null?'暂无数据' : item.content}}</span>
              <div class="group_12 flex-row justify-between">
                <span class="text_87">{{item.createTime == null?'暂无数据' : item.createTime}}</span>
                <div class="text-wrapper_28 flex-col" v-if="item.isPublic == 'Y'" @click="yinange(item,index)">
                  <span class="text_92">隐藏</span>
                </div>
                <div class="text-wrapper_26 flex-col" v-if="item.status == 1" @click="tousuhuif(item)">
                  <span class="text_88">回复</span>
                </div>
              </div>

            </div>


          </div>
        </el-col>
      </el-row>
      <el-row :gutter="33">
        <el-col :span="8">
          <div class="block_1 flex-col">
            <div class="block_2 flex-row justify-between">
              <div class="block_3 flex-col"></div>
              <span class="text_4">车辆管控统计</span>
            </div>
            <div class="block_4 flex-row justify-between">
              <div :class="isacr == 0 ? 'icas section_2 flex-col ' : ' section_2 flex-col ' " @click="iszhe(0)">
                <div class="text-wrapper_2 flex-row">
                  <span class="text_5">空闲车位</span>
                </div>
                <div class="text-wrapper_3 flex-row">
                  <span class="text_6">{{chelisngguan.idlePlace}}</span>
                </div>
                <div class="text-wrapper_4 flex-row justify-between">
                  <span class="text_7">占车位比</span>
                  <span class="text_8">{{chelisngguan.idlePercentage}}</span>
                </div>
              </div>
              <div :class="isacr == 1 ? 'icas section_2 flex-col ' : ' section_2 flex-col ' " @click="iszhe(1)">
                <div class="text-wrapper_2 flex-row">
                  <span class="text_5">空闲充电桩</span>
                </div>
                <div class="text-wrapper_3 flex-row">
                  <span class="text_6">{{chelisngguan.chargePlace}}</span>
                </div>
                <div class="text-wrapper_4 flex-row justify-between">
                  <span class="text_7">占车位比</span>
                  <span class="text_8">{{chelisngguan.chargePercentage}}</span>
                </div>
              </div>

              <div :class="isacr == 2 ? 'icas section_2 flex-col istuo' : ' section_2 flex-col istuo' " @click="iszhe(2)">
                <div class="text-wrapper_2 flex-row">
                  <span class="text_5">进入车辆</span>
                </div>
                <div class="text-wrapper_3 flex-row">
                  <span class="text_6">{{chelisngguan.interCarNum}}</span>
                </div>
                <div class="text-wrapper_4 flex-row justify-between">
                  <span class="text_7">较昨日</span>
                  <img v-if="chelisngguan.interCarStatus == 'down'" class="thumbnail_14" referrerpolicy="no-referrer"
                    src="../assets/images/icon_wght_clgl_down.png" />
                  <img v-if="chelisngguan.interCarStatus == 'up'" class="thumbnail_14" referrerpolicy="no-referrer"
                    src="../assets/images/icon_wght_clgl_ip.png" />
                  <span class="text_20" v-if="chelisngguan.interCarStatus == 'flat'">持平</span>
                  <span :class="chelisngguan.interCarStatus=='up'? 'text_26' : 'text_18'"
                    v-if="chelisngguan.interCarStatus != 'flat'">{{chelisngguan.interCarPercentage}}</span>
                  <!-- <span class="text_8">{{chelisngguan.chargePercentage}}</span> -->
                </div>
              </div>
              <div :class="isacr == 3 ? 'icas section_2 flex-col istuo' : ' section_2 flex-col istuo' " @click="iszhe(3)">
                <div class="text-wrapper_2 flex-row">
                  <span class="text_5">离开车辆</span>
                </div>
                <div class="text-wrapper_3 flex-row">
                  <span class="text_6">{{chelisngguan.outCarNum}}</span>
                </div>
                <div class="text-wrapper_4 flex-row justify-between">
                  <span class="text_7">较昨日</span>
                  <img v-if="chelisngguan.outCarStatus == 'down'" class="thumbnail_14" referrerpolicy="no-referrer"
                    src="../assets/images/icon_wght_clgl_down.png" />
                  <img v-if="chelisngguan.outCarStatus == 'up'" class="thumbnail_14" referrerpolicy="no-referrer"
                    src="../assets/images/icon_wght_clgl_ip.png" />
                  <span :class="chelisngguan.outCarStatus=='up'? 'text_26' : 'text_18'"
                    v-if="chelisngguan.outCarStatus != 'flat'">{{chelisngguan.outCarPercentage}}</span>
                  <span class="text_20" v-if="chelisngguan.outCarStatus == 'flat'">持平</span>
                </div>
              </div>
              <div :class="isacr == 4 ? 'icas section_2 flex-col istuo' : ' section_2 flex-col istuo' "  @click="iszhe(4)">
                <div class="text-wrapper_2 flex-row">
                  <span class="text_5">外来车辆</span>
                </div>
                <div class="text-wrapper_3 flex-row">
                  <span class="text_6">{{chelisngguan.visitorNum}}</span>
                </div>
                <div class="text-wrapper_4 flex-row justify-between">
                  <span class="text_7">较昨日</span>
                  <img v-if="chelisngguan.visitorStatus == 'down'" class="thumbnail_14" referrerpolicy="no-referrer"
                    src="../assets/images/icon_wght_clgl_down.png" />
                  <img v-if="chelisngguan.visitorStatus == 'up'" class="thumbnail_14" referrerpolicy="no-referrer"
                    src="../assets/images/icon_wght_clgl_ip.png" />
                  <span class="text_20" v-if="chelisngguan.visitorStatus == 'flat'">持平</span>
                  <span :class="chelisngguan.visitorStatus=='up'? 'text_26' : 'text_18'"
                    v-if="chelisngguan.visitorStatus != 'flat'">{{chelisngguan.visitorPercentage}}</span>
                </div>
              </div>
              <div :class="isacr == 5 ? 'icas section_2 flex-col istuo' : ' section_2 flex-col istuo' " @click="iszhe(5)">
                <div class="text-wrapper_2 flex-row">
                  <span class="text_5">违停登记</span>
                </div>
                <div class="text-wrapper_3 flex-row">
                  <span class="text_6">{{chelisngguan.illegalNum}}</span>
                </div>
                <div class="text-wrapper_4 flex-row justify-between">
                  <span class="text_7">较上月</span>
                  <img v-if="chelisngguan.visitorStatus == 'down'" class="thumbnail_14" referrerpolicy="no-referrer"
                    src="../assets/images/icon_wght_clgl_down.png" />
                  <img v-if="chelisngguan.visitorStatus == 'up'" class="thumbnail_14" referrerpolicy="no-referrer"
                    src="../assets/images/icon_wght_clgl_ip.png" />
                  <span class="text_20" v-if="chelisngguan.visitorStatus == 'flat'">持平</span>
                  <span :class="chelisngguan.illegalStatus=='up'? 'text_26' : 'text_18'"
                    v-if="chelisngguan.illegalStatus != 'flat'">{{chelisngguan.illegalPercentage}}</span>
                </div>
              </div>

            </div>

          </div>
        </el-col>
        <el-col :span="16">
          <div class="block_12 flex-col">
            <div class="group_9 flex-row" style="display: flex;justify-content: space-between;">
              <div style="display: flex;">
                <div class="block_15 flex-col"></div>
                <span class="text_59">物业报修</span>
              </div>
              <span class="text_60" style="cursor: pointer;" @click="tiahe(6)"
                v-hasPermi="['wuYe:repair:add']">查看更多&nbsp;→</span>
            </div>
            <div class="section_9 flex-row">
              <div class="box_5 flex-col">
                <line-chart :chart-data="zhexian" />
              </div>
              <div class="box_6 flex-col justify-between">
                <div class="box_7 flex-col" v-for="(item,index) in repairList" :key="index">
                  <div class="block_13 flex-row justify-between" style="padding-right: 10px;">
                    <span class="text_55">{{item.repairTitle == null?'暂无数据' : item.repairTitle}}</span>
                    <div class="text-wrapper_14 flex-col" v-if="item.repairStatus == 1">
                      <span v-hasPermi="['wuYe:repair:assign']" class="text_56" @click="daifeng(item)">指派</span>
                    </div>
                    <dict-tag v-else :options="dict.type.repair_status" :value="item.repairStatus" />
                  </div>
                  <span
                    class="paragraph_5">联系方式：{{item.phoneNumber == null?'暂无数据' : item.phoneNumber}}<br />报修门户：{{item.houseAddress == null?'暂无数据' : item.houseAddress }}<br />
                    报修时间：{{item.repairTime == null?'暂无数据' : item.repairTime}}</span>
                </div>


              </div>
            </div>
          </div>
        </el-col>
      </el-row>
      <el-divider />
    </div>
    <div v-if="!shouzu">
      <img   style="width:100%;cursor: pointer;"
      @click="zhuhuet"
        src="../assets/images/pic_sy_wsxx_bg.png" />
    </div>

    <!-- 添加或修改投诉建议对话框 -->
    <el-dialog title="回复建议" :visible.sync="open" width="800px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="回复内容" prop="replyContent">
              <!-- <editor v-model="form.replyContent" :min-height="192"/> -->
              <el-input v-model="form.replyContent" type="textarea" placeholder="请输入内容" />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="上传附件">
              <fileUploadh :limit="20" v-model="form.suggestionFjList" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog title="指派" :visible.sync="openz" width="640px" append-to-body>
      <el-form ref="formz" :model="formz" :rules="rulesz" label-width="80px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="选择人员" prop="staffName">
              <el-select style="width: 100%;" v-model="formz.staffName" placeholder="请选择维修人员">
                <el-option @click.native="xuanse(dict)" v-for="dict in staffManageList" :key="dict.staffId"
                  :label="dict.staffName + '('+ (dict.status == null?'' : dict.status == 1?'空闲中' : '指派中') + ')'"
                  :value="dict.staffId"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFormz">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog  title="个人信息" :visible.sync="openg" width="800px" append-to-body :close-on-click-modal="false" :show-close="false">
       <el-form ref="form" :model="formg" :rules="rulesg" label-width="80px">
       <el-row>
         <el-col :span="16">
           <el-col :span="8">
              <el-form-item label="姓名" prop="name">
                <el-input v-model="form.name" placeholder="请输入姓名" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="是否常委 " prop="isMember">
                <el-select style="width:100%;" v-model="form.isMember" placeholder="请选择是否常委">
                  <el-option
                    v-for="dict in dict.type.sys_yes_no"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="工作单位及职务" prop="unit">
                <el-input v-model="form.unit" placeholder="请输入工作单位及职务" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="联系方式" prop="phonenumber">
                <el-input v-model="form.phonenumber" placeholder="请输入手机号码" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="界别" prop="boundary">
                <el-select style="width:100%;" v-model="form.boundary" placeholder="请选择界别">
                  <el-option
                    v-for="dict in dict.type.circles"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="所属工作室" prop="studio">
               <el-select style="width:100%;" v-model="form.studio" placeholder="请选择所属工作室">
                 <el-option
                   v-for="dict in dict.type.member_studio"
                   :key="dict.value"
                   :label="dict.label"
                   :value="dict.value"
                 ></el-option>
               </el-select>
              </el-form-item>
            </el-col>

            <el-col :span="8">
              <el-form-item label="身份证号" prop="card">
                <el-input v-model="form.card" placeholder="请输入委员身份证号" />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="联系地址" prop="address">
                <el-input v-model="form.address" placeholder="请输入联系地址" />
              </el-form-item>
            </el-col>
           <!-- <el-col :span="8">
              <el-form-item label="级别" prop="grade">
                <el-select multiple style="width:100%;" v-model="form.grade" placeholder="请选择级别">
                  <el-option
                    v-for="dict in dict.type.grade"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col> -->
            <el-col :span="8">
              <el-form-item label="备注" prop="remark">
                <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
              </el-form-item>
            </el-col>
         </el-col>
         <el-col :span="8">
          <el-col :span="24" style="border: 1px solid #CDCDCD;" class="quce">
            <el-form-item  prop="avatar">
              <div style=" margin-top: 10px;text-align:center;font-weight: bold;font-size: 16px;color: #343434;">
                <span style="color: #DF0024;margin-right: 10px;">*</span>头像</div>
                <image-uploadxy v-model="form.avatar"/>
            <p style="color: #DF0024;text-align:center;">请上传照片大小不超过500mb</p>
            </el-form-item>
          </el-col>
         </el-col>
       </el-row>
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="submitForm">确 定</el-button>
         <!-- <el-button @click="cancel">取 消</el-button> -->
       </div>
    </el-dialog>
  </div>
</template>

<script>
  import PanelGroup from './dashboard/PanelGroup'
  import LineChart from './dashboard/LineChart'
  import RaddarChart from './dashboard/RaddarChart'
  import PieChart from './dashboard/PieChart'
  import BarChart from './dashboard/BarChart'

  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]
    }
  }
  import {
    listSuggestion,
    getSuggestion,
    delSuggestion,
    addSuggestion,
    updateSuggestion
  } from "@/api/wuguan/suggestion";
  import {
    listRepair,
    getRepair,
    delRepair,
    addRepair,
    updateRepair,
    assign
  } from "@/api/wuguan/repair";
  import {
    listStaffManage,
    listStaffManageNoPage,
  } from "@/api/wuguan/staffManage";
  import {
    qx,
    vehicleControl,
    car
  } from "@/api/index";
  import {
    listCheckPointRecord,
    getCheckPointRecord,
    delCheckPointRecord,
    addCheckPointRecord,
    updateCheckPointRecord,
    count
  } from "@/api/wuguan/checkPointRecord";
  export default {
    name: "Index",
    dicts: ['baoxiutype', 'repair_status', 'patrol_type'],
    components: {
      PanelGroup,
      LineChart,
      RaddarChart,
      PieChart,
      BarChart,

    },
    data() {
      return {
        // 版本号
        version: "3.8.9",
        customColor: '#FFCB62',
        lineChartData: lineChartData.newVisitis,
        getyer: '',
        getmor: '',
        getday: '',
        getshifL: '',
        getweek: '',
        open: false,
        openz: false,
        openg:false,
        shouzu:false,
        // 投诉建议表格数据
        suggestionList: [],
        repairList: [],
        // 巡检点记录表格数据
        checkPointRecordList: [],
        // 表单参数
        form: {},
        formz: {},
        formg: {
          name:null,
          card:null,
          phonenumber:null,
          boundary:null,
          unit:null,
          partyAffiliation:null,
        },
        // 表单校验
        rules: {
          replyContent: [{
            required: true,
            message: "不能为空",
            trigger: "blur"
          }],
        },
        rulesz: {
          staffName: [{
            required: true,
            message: "不能为空",
            trigger: "blur"
          }],

        },
        rulesg:{
          name: [
            { required: true, message: "委员姓名不能为空", trigger: "blur" }
          ],
          card: [
            { required: true, message: "委员身份证号不能为空", trigger: "blur" },
            {
              pattern: /(^\d{8}(0\d|10|11|12)([0-2]\d|30|31)\d{3}$)|(^\d{6}(18|19|20)\d{2}(0\d|10|11|12)([0-2]\d|30|31)\d{3}(\d|X|x)$)/,
              message: "请输入正确的身份证号",
              trigger: "blur"
            }
          ],
          phonenumber: [
            { required: true, message: "不能为空", trigger: "blur" },
            {
              pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
              message: "请输入正确的手机号码",
              trigger: "blur"
            }
          ],
          boundary: [
            { required: true, message: "不能为空", trigger: "blur" }
          ],
          unit: [
            { required: true, message: "不能为空", trigger: "blur" }
          ],
          partyAffiliation: [
            { required: true, message: "不能为空", trigger: "blur" }
          ],
        },
        staffManageList: [],
        xunjiantj: {},
        tatse: 0,
        yifhufe: 0,
        isxug: false,
        bafe: 0,
        timer: null,
        zhexian: {},
        userid: 0,
        chelisngguan: {},
        isacr: 0,
        carNume:{}
      };
    },
    created() {
      this.userid = this.$store.getters.id
      clearInterval(this.timer)
      this.timer = null
      // this.getcharnae()
      // this.setTimer()
      // this.gettime()
      // this.getListtion()
      // this.getListpair()
      // this.getstaffManageList()
      // this.getListRecord()
      // this.getListRecordcun()
      // this.baozhe()
      // this.getche()

    },
    methods: {
      zhuhuet(){
        this.openg = true
      },
      // 车辆进入\
      getcharnae(){
        car().then(response => {
          this.carNume = response.data;
        });
      },
      // 车辆管控
      getche() {
        vehicleControl().then(response => {
          this.chelisngguan = response.data;
        });
      },
      // 车辆管控点击
      iszhe(val){
        this.isacr = val
      },
      // 报修折线
      baozhe() {
        qx().then(response => {
          this.zhexian = response.data;
        });
      },

      // 巡更记录
      getListRecord() {
        let sgmse = {
          'pageNum': 1,
          'pageSize': 2,
          'checkTime': this.getyer + '-' + this.getmor + '-' + this.getday,
          'checkStatus': 2,
          'userId': this.userid
        }
        this.isxug = false
        listCheckPointRecord(sgmse).then(response => {
          this.checkPointRecordList = response.rows;
          // this.checkPointRecordList .filter(rou=>{
          //   rou.imges = []
          //   if(rou.checkResultPhoto != null && rou.checkResultPhoto != ''){
          //     rou.imges = rou.checkResultPhoto.split(',')
          //   }
          // })
          if (this.checkPointRecordList.length == 0) {
            let gh = {
              'checkTime': '暂无数据',
              'checkAddress': '暂无数据',
              'checkUserName': '暂无数据',
              'checkResult': '暂无数据',
              'checkType': '暂无数据'
            }
            this.checkPointRecordList.push(gh)
            this.checkPointRecordList.push(gh)
          }
          if (this.checkPointRecordList.length == 1) {
            let gh = {
              'checkTime': '暂无数据',
              'checkAddress': '暂无数据',
              'checkUserName': '暂无数据',
              'checkResult': '暂无数据',
              'checkType': '暂无数据'
            }
            this.checkPointRecordList.push(gh)
          }
          this.isxug = true
        });
      },
      getListRecordcun() {
        count().then(response => {
          this.xunjiantj = response.data.data
        });
      },
      // 报修列表
      getListpair() {
        let sgmse = {
          'pageNum': 1,
          'pageSize': 2,
          'userId': this.userid
        }
        listRepair(sgmse).then(response => {
          this.repairList = response.rows;
          if (this.repairList.length == 0) {
            let gnsh = {
              'repairTitle': '暂无数据',
              'phoneNumber': '暂无数据',
              'houseAddress': '暂无数据',
              'repairTime': '暂无数据',
              'repairStatus': null
            }
            this.repairList.push(gnsh)
            this.repairList.push(gnsh)
          }
          if (this.repairList.length == 1) {
            let gnsh = {
              'repairTitle': '暂无数据',
              'phoneNumber': '暂无数据',
              'houseAddress': '暂无数据',
              'repairTime': '暂无数据',
              'repairStatus': null
            }
            this.repairList.push(gnsh)

          }

        });
      },
      // 待分配
      daifeng(row) {
        if (row.repairStatus == 1) {
          // 待分配
          // this.formz.maintenanceCategory = row.maintenanceCategory
          this.openz = true
          this.formz.repairId = row.repairId
        }
      },
      // 待分配提交
      submitFormz() {
        this.$refs["formz"].validate(valid => {
          if (valid) {
            assign(this.formz).then(response => {
              this.$modal.msgSuccess("操作成功");
              this.openz = false;
              this.getList();
            });
          }
        })
      },
      xuanse(val) {
        console.log(val)
        this.formz.staffName = val.staffName
        this.formz.staffId = val.staffId
        this.formz.staffPhone = val.phoneNumber
      },
      getstaffManageList(row) {
        let bsdf = {
          'staffCategory': 2
        }
        listStaffManageNoPage(bsdf).then(response => {
          this.staffManageList = response.rows;
          // this.staffManageList.filrter(rout=>{
          //   rout.lable = rout.staffName + '<p>'
          // })
        });
      },
      /** 查询投诉建议列表 */
      getListtion() {
        let sgmse = {
          'pageNum': 1,
          'pageSize': 10,
          'isPublic':'Y'
        }
        listSuggestion(sgmse).then(response => {
        if(response.rows.length !=0){
           if(response.rows.length > 2){
              this.suggestionList = response.rows.slice(0, 2);
           }else{
              this.suggestionList = response.rows;
           }
        }else{
          this.suggestionList = response.rows;
        }
          if (this.suggestionList.length == 0) {
            let gnsh = {
              'title': '暂无数据',
              'content': '暂无数据',
              'createTime': '暂无数据',
            }
            this.suggestionList.push(gnsh)
            this.suggestionList.push(gnsh)
          }
          if (this.suggestionList.length == 1) {
            let gnsh = {
              'title': '暂无数据',
              'content': '暂无数据',
              'createTime': '暂无数据',
            }
            this.suggestionList.push(gnsh)
          }


          this.getListtionesTOTL()
        });
      },
      getListtiones() {
        let sgmse = {
          'pageNum': 1,
          'pageSize': 2,
          'status': 2,
        }
        listSuggestion(sgmse).then(response => {
          this.yifhufe = response.total
          this.bafe = this.percentage() - 0
        });
      },
      getListtionesTOTL() {
        let sgmse = {
          'pageNum': 1,
           'pageSize': 10,
        }
        listSuggestion(sgmse).then(response => {
          this.tatse = response.total
          this.getListtiones()
        });
      },

      // 投诉隐藏
      yinange(row,index){
        row.isPublic = 'N'
        updateSuggestion(row).then(response => {
          this.$modal.msgSuccess("操作成功");
          // this.open = false;
          // this.getList();
        });
      },
      percentage() {
        return (this.yifhufe / this.tatse * 100).toFixed(0);
      },

      tousuhuif(row) {
        // this.form.suggestionId  =  row.suggestionId
        this.form = {
          'replyContent': null,
          'suggestionFjList': null,
          'suggestionId': row.suggestionId,
          'status': 2
        }
        // this.$set('replyContent',this.form,null)
        // this.form.replyContent = null
        // this.form.suggestionFjList = null
        this.open = true
      },
      cancel() {
        this.open = false
        this.openz = false
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            // console.log(this.form)
            if (this.form.suggestionFjList != null) {
              this.form.suggestionFjList.filter(rou => {
                rou.suggestionId = this.form.suggestionId
              })
            }
            updateSuggestion(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getListtion();
            });

          }
        });
      },
      handleSetLineChartData(type) {
        this.lineChartData = lineChartData[type]
      },
      goTarget(href) {
        window.open(href, "_blank");
      },
      format(percentage) {
        return percentage === 100 ? '${percentage}' : `${percentage}`;
      },
      gettime() {
        var _this = this;
        let wk = new Date().getDay()
        let yy = new Date().getFullYear();
        let mm = new Date().getMonth() + 1;
        let dd = new Date().getDate();
        let hh = 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]
        _this.getyer = yy;
        _this.getmor = mm;
        _this.getday = dd;
        _this.getshifL = hh + ':' + mf;
        _this.getweek = week;
        // console.log(this.gettime)
      },
      setTimer() {
        if (this.timer == null) {
          this.timer = setInterval(() => {
            this.gettime()
          }, 30000)
        }
      },
      tiahe(row) {
        if (row == 1) {
          // 房屋管理
          this.$router.push({
            path: '/housesassets/fagnwuguanli',
          })
        } else if (row == 2) {
          // 居住人员管理
          this.$router.push({
            path: '/renyuanxiangguan/renyuan',
          })
        } else if (row == 3) {
          // 车辆管控
          this.$router.push({
            path: '/communityservicesfacilities/cheliangguank',
          })
        } else if (row == 4) {
          // 违停管理
          this.$router.push({
            path: '/communitysecurityorder/weitingchel',
          })
        } else if (row == 5) {
          // 来访管理
          this.$router.push({
            path: '/communicationmanagement/visitorManage',
          })
        } else if (row == 6) {
          // 物业报修
          this.$router.push({
            path: '/communityservicesfacilities/baoxiuguanli/index',
          })
        } else if (row == 7) {
          // 投诉建议
          this.$router.push({
            path: '/communityservicesfacilities/suggestion',
          })
        } else if (row == 8) {
          // 今日巡更
          this.$router.push({
            path: '/communitysecurityorder/xungengxinx',
          })
        }

      }

    }
  };
</script>

<style  lang="scss">
  .quce{
    .el-form-item__content{
      margin-left: 0 !important;
    }
    .el-upload--picture-card{
      margin-left:50%;
      transform:translateX(-50%);
    }
  }
  </style>

<style scoped lang="scss">
  .index {
    // padding-right: 10px !important;
  }

  .home {
    blockquote {
      padding: 10px 20px;
      margin: 0 0 20px;
      font-size: 17.5px;
      border-left: 5px solid #eee;
    }

    hr {
      margin-top: 20px;
      margin-bottom: 20px;
      border: 0;
      border-top: 1px solid #eee;
    }

    .col-item {
      margin-bottom: 20px;
    }

    ul {
      padding: 0;
      margin: 0;
    }

    font-family: "open sans",
    "Helvetica Neue",
    Helvetica,
    Arial,
    sans-serif;
    font-size: 13px;
    color: #676a6c;
    overflow-x: hidden;

    ul {
      list-style-type: none;
    }

    h4 {
      margin-top: 0px;
    }

    h2 {
      margin-top: 10px;
      font-size: 26px;
      font-weight: 100;
    }

    p {
      margin-top: 10px;

      b {
        font-weight: 700;
      }
    }

    .update-log {
      ol {
        display: block;
        list-style-type: decimal;
        margin-block-start: 1em;
        margin-block-end: 1em;
        margin-inline-start: 0;
        margin-inline-end: 0;
        padding-inline-start: 40px;
      }
    }
  }

  // 蓝狐样式粘贴

  .flex-col {
    display: flex;
    flex-direction: column;
  }

  .flex-row {
    display: flex;
    flex-direction: row;
  }

  .justify-between {
    display: flex;
    justify-content: space-between;
  }

  .block_11 {
    background-color: rgba(255, 255, 255, 1);
    border-radius: 10px;
    height: 170px;
  }

  .box_4 {
    width: 80px;
    height: 24px;
    margin: 19px 0 0 16px;
  }

  .group_7 {
    background-color: rgba(25, 108, 255, 1);
    border-radius: 3px;
    width: 6px;
    height: 24px;
  }

  .text_35 {
    width: 64px;
    height: 16px;
    overflow-wrap: break-word;
    color: rgba(90, 90, 90, 1);
    font-size: 16px;
    font-family: PingFang-SC-Bold;
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
    line-height: 16px;
    margin-top: 4px;
  }

  .image-wrapper_8 {
    height: 47px;
    margin: 25px 39px 0 39px;
  }

  .label_2 {
    width: 46px;
    height: 46px;
  }

  .label_3 {
    width: 46px;
    height: 46px;
    margin-left: 65px;
  }

  .text-wrapper_12 {
    // width: 748px;
    height: 16px;
    margin: 15px 0 24px 0;
  }

  .text_36 {
    width: 63px;
    height: 15px;
    overflow-wrap: break-word;
    color: rgba(34, 35, 39, 1);
    font-size: 16px;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
    line-height: 30px;
  }

  .text_37 {
    width: 63px;
    height: 15px;
    overflow-wrap: break-word;
    color: rgba(34, 35, 39, 1);
    font-size: 16px;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    text-align: center;
    white-space: nowrap;
    line-height: 30px;
    // margin-left: 51px;
  }

  // 日期

  .block_19 {

    height: 114px;
    background: url(../assets/images/pic_wght_sjbg.png) 100% no-repeat;
    background-size: 100% 100%;

  }

  .text_94 {
    width: 13px;
    height: 37px;
    transform: rotate(90deg);
    color: rgba(255, 255, 255, 1);
    font-size: 16px;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    text-align: left;
    line-height: 37px;
    margin: 24px 0 0 41px;
  }

  .text_95 {
    width: 159px;
    height: 40px;
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 52px;
    font-family: Alibaba-PuHuiTi-H;
    font-weight: 900;
    text-align: left;
    white-space: nowrap;
    line-height: 30px;
    margin: 40px 0 0 9px;
  }

  .box_16 {
    width: 62px;
    height: 42px;
    margin: 36px 41px 0 9px;
  }

  .text-wrapper_30 {
    background-color: rgba(255, 255, 255, 1);
    height: 24px;
    width: 62px;
  }

  .text_96 {
    width: 49px;
    height: 14px;
    overflow-wrap: break-word;
    color: rgba(0, 98, 247, 1);
    font-size: 18px;
    font-family: PingFang-SC-Heavy;
    font-weight: 900;
    text-align: left;
    white-space: nowrap;
    line-height: 14px;
    margin: 5px 0 0 7px;
  }

  .text_97 {
    width: 44px;
    height: 14px;
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 14px;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 14px;
    margin: 4px 0 0 9px;
  }

  // 环形统计

  .block_7 {
    background-color: rgba(255, 255, 255, 1);
    border-radius: 10px;
    height: 340px;

    margin: 20px 0 0 0;
  }

  .section_4 {
    width: 112px;
    height: 24px;
    margin: 19px 0 0 16px;
  }

  .section_5 {
    background-color: rgba(25, 108, 255, 1);
    border-radius: 3px;
    width: 6px;
    height: 24px;
  }

  .text_29 {
    width: 96px;
    height: 16px;
    overflow-wrap: break-word;
    color: rgba(90, 90, 90, 1);
    font-size: 16px;
    font-family: PingFang-SC-Bold;
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
    line-height: 16px;
    margin-top: 4px;
  }

  .section_6 {
    height: 166px;
    margin: 30px 0 10px 0;
    display: flex;
    justify-content: center;
  }

  .block_8 {
    width: 61px;
    height: 40px;
    margin-top: 28px;
  }

  .paragraph_1 {
    width: 47px;
    height: 29px;
    overflow-wrap: break-word;
    color: rgba(170, 170, 170, 1);
    font-size: 12px;
    font-family: PingFang-SC-Bold;
    font-weight: 700;
    text-align: left;
    line-height: 18px;
    margin-left: 2px;
  }

  .image_2 {
    width: 61px;
    height: 1px;
    margin-top: 10px;
  }

  .block_9 {
    height: 166px;
    background: url(https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/dafd7ab5ea374d59a9eb586634e71df3_mergeImage.png) 100% no-repeat;
    background-size: 100% 100%;
    margin-left: 7px;
    width: 160px;
    position: relative;
  }

  .text-wrapper_10 {
    width: 63px;
    height: 44px;
    overflow-wrap: break-word;
    font-size: 0;
    font-family: PingFang-SC-Bold;
    font-weight: 700;
    text-align: center;
    line-height: 30px;
    margin: 61px 0 0 48px;
  }
  .istuo{
    margin-top: 10px;
  }

  .paragraph_2 {
    width: 63px;
    height: 44px;
    overflow-wrap: break-word;
    color: rgba(90, 90, 90, 1);
    font-size: 16px;
    font-family: PingFang-SC-Bold;
    font-weight: 700;
    text-align: left;
    line-height: 30px;
  }

  .text_30 {
    width: 63px;
    height: 44px;
    overflow-wrap: break-word;
    color: rgba(253, 183, 45, 1);
    font-size: 20px;
    font-family: FZHPJW--GB1-0;
    font-weight: normal;
    text-align: left;
    line-height: 30px;
  }

  .image_3 {
    position: absolute;
    left: -7px;
    top: 68px;
    width: 20px;
    height: 24px;
  }

  .image_4 {
    position: absolute;
    left: 149px;
    top: 81px;
    width: 20px;
    height: 23px;
  }

  .block_10 {
    width: 61px;
    height: 41px;
    margin: 40px 0 0 8px;
  }

  .paragraph_3 {
    width: 47px;
    height: 29px;
    overflow-wrap: break-word;
    color: rgba(170, 170, 170, 1);
    font-size: 12px;
    font-family: PingFang-SC-Bold;
    font-weight: 700;
    text-align: left;
    line-height: 18px;
    margin-left: 14px;
  }

  .image_5 {
    width: 61px;
    height: 1px;
    margin-top: 11px;
  }

  .section_7 {
    // width: 262px;
    height: 16px;
    margin: 16px 0 0 0;
  }

  .group_5 {
    background-color: rgba(96, 150, 251, 1);
    width: 14px;
    height: 14px;
    margin-top: 1px;
  }

  .text_31 {
    width: 62px;
    height: 16px;
    overflow-wrap: break-word;
    color: rgba(34, 35, 39, 1);
    font-size: 16px;
    font-family: PingFang-SC-Bold;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
    line-height: 16px;
    margin-left: 15px;
  }

  .group_6 {
    background-color: rgba(78, 188, 181, 1);
    width: 14px;
    height: 14px;
    margin: 1px 0 0 0;
  }

  .text_32 {
    width: 63px;
    height: 15px;
    overflow-wrap: break-word;
    color: rgba(34, 35, 39, 1);
    font-size: 16px;
    font-family: PingFang-SC-Bold;
    font-weight: 700;
    text-align: center;
    white-space: nowrap;
    line-height: 16px;
    margin: 1px 0 0 14px;
  }

  .text-wrapper_11 {
    // width: 202px;
    height: 12px;
    margin: 15px 0 35px 0;
  }

  .text_33 {
    // width: 29px;
    height: 12px;
    overflow-wrap: break-word;
    color: rgba(96, 150, 251, 1);
    font-size: 16px;
    font-family: FZHPJW--GB1-0;
    font-weight: normal;
    text-align: center;
    white-space: nowrap;
    line-height: 12px;
  }

  .text_34 {
    // width: 32px;
    height: 12px;
    overflow-wrap: break-word;
    color: rgba(78, 188, 181, 1);
    font-size: 16px;
    font-family: FZHPJW--GB1-0;
    font-weight: normal;
    text-align: center;
    white-space: nowrap;
    line-height: 12px;
  }

  // 巡更样式

  .block_14 {
    background-color: rgba(255, 255, 255, 1);
    border-radius: 10px;
    height: 385px;
    margin: 20px 0 0 0;
    padding-right: 20px;
  }

  .group_9 {
    // width: 396px;
    height: 24px;
    margin: 19px 0 0 16px;
  }

  .block_15 {
    background-color: rgba(25, 108, 255, 1);
    border-radius: 3px;
    width: 6px;
    height: 24px;
  }

  .text_59 {
    width: 64px;
    height: 16px;
    overflow-wrap: break-word;
    color: rgba(90, 90, 90, 1);
    font-size: 16px;
    font-family: PingFang-SC-Bold;
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
    line-height: 16px;
    margin: 4px 0 0 10px;
  }

  .text_60 {
    // 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: 14px;
    margin: 5px 0 0 0;
  }

  .text-wrapper_17 {
    width: 281px;
    height: 14px;
    margin: 22px 0 0 73px;
  }

  .text_61 {
    width: 42px;
    height: 14px;
    overflow-wrap: break-word;
    color: rgba(126, 126, 126, 1);
    font-size: 14px;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 14px;
  }

  .text_62 {
    width: 41px;
    height: 13px;
    overflow-wrap: break-word;
    color: rgba(126, 126, 126, 1);
    font-size: 14px;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 14px;
    margin: 1px 0 0 78px;
  }

  .text_63 {
    width: 42px;
    height: 14px;
    overflow-wrap: break-word;
    color: rgba(126, 126, 126, 1);
    font-size: 14px;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 14px;
    margin-left: 78px;
  }

  .text-wrapper_18 {
    width: 262px;
    height: 15px;
    margin: 12px 0 0 73px;
  }

  .text_64 {
    width: 26px;
    height: 15px;
    overflow-wrap: break-word;
    color: rgba(25, 108, 255, 1);
    font-size: 20px;
    font-family: FZHPJW--GB1-0;
    font-weight: normal;
    text-align: left;
    white-space: nowrap;
    line-height: 15px;
  }

  .text_65 {
    width: 13px;
    height: 14px;
    overflow-wrap: break-word;
    color: rgba(15, 216, 166, 1);
    font-size: 20px;
    font-family: FZHPJW--GB1-0;
    font-weight: normal;
    text-align: left;
    white-space: nowrap;
    line-height: 15px;
    margin: 1px 0 0 93px;
  }

  .text_66 {
    width: 23px;
    height: 15px;
    overflow-wrap: break-word;
    color: rgba(253, 182, 43, 1);
    font-size: 20px;
    font-family: FZHPJW--GB1-0;
    font-weight: normal;
    text-align: left;
    white-space: nowrap;
    line-height: 15px;
    margin-left: 107px;
  }

  .image-text_1 {
    width: 173px;
    height: 12px;
    margin: 22px 0 0 16px;
  }

  .thumbnail_17 {
    width: 12px;
    height: 12px;
  }

  .text-group_1 {
    width: 148px;
    height: 11px;
    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: 11px;
    margin-top: 1px;
  }

  .group_10 {
    // width: 389px;
    height: 90px;
    margin: 4px 0 0 22px;
  }

  .image_7 {
    width: 1px;
    height: 90px;
  }

  .section_13 {
    background-color: rgba(240, 243, 252, 1);
    border-radius: 4px;
    height: 72px;
    margin-top: 10px;
    flex: 1;
    margin-left: 20px;

  }

  .text-wrapper_19 {
    width: 339px;
    height: 16px;
    margin: 14px 0 0 16px;
  }

  .text_67 {
    height: 16px;
    overflow-wrap: break-word;
    color: rgba(5, 12, 28, 1);
    font-size: 16px;
    font-family: PingFang-SC-Bold;
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
    line-height: 16px;
  }

  .text_68 {
    width: 55px;
    height: 14px;
    overflow-wrap: break-word;
    color: rgba(25, 108, 255, 1);
    font-size: 14px;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 14px;
    margin-top: 2px;
    margin-right: 10px;
  }

  .section_14 {
    width: 268px;
    height: 14px;
    margin: 15px 0 13px 16px;
    flex: 1;
    margin-left: 20px;
  }

  .text-wrapper_20 {
    width: 97px;
    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: 18px;
  }

  .text_69 {
    width: 97px;
    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: 18px;
  }

  .text_70 {
    width: 97px;
    height: 14px;
    overflow-wrap: break-word;
    color: rgba(102, 102, 102, 1);
    font-size: 14px;
    font-family: PingFang-SC-Bold;
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
    line-height: 18px;
  }

  .text-wrapper_21 {
    width: 97px;
    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: 18px;
  }

  .text_71 {
    width: 97px;
    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: 18px;
  }

  .text_72 {
    width: 97px;
    height: 14px;
    overflow-wrap: break-word;
    color: rgba(40, 197, 41, 1);
    font-size: 14px;
    font-family: PingFang-SC-Bold;
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
    line-height: 18px;
  }

  .image-text_2 {
    width: 176px;
    height: 12px;
    margin: 6px 0 0 16px;
  }

  .thumbnail_18 {
    width: 12px;
    height: 12px;
  }

  .text-group_2 {
    width: 151px;
    height: 11px;
    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: 11px;
    margin-top: 1px;
  }

  .group_11 {
    height: 90px;
    margin: 4px 0 0 22px;
  }

  .image_8 {
    width: 1px;
    height: 90px;
  }

  .box_9 {
    background-color: rgba(248, 248, 248, 1);
    border-radius: 4px;
    height: 72px;
    margin-top: 10px;
    flex: 1;
    margin-left: 20px;

  }

  .text-wrapper_22 {
    width: 340px;
    height: 16px;
    margin: 14px 0 0 16px;
  }

  .text_73 {
    height: 16px;
    overflow-wrap: break-word;
    color: rgba(5, 12, 28, 1);
    font-size: 16px;
    font-family: PingFang-SC-Bold;
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
    line-height: 16px;
  }

  .text_74 {
    width: 56px;
    height: 13px;
    overflow-wrap: break-word;
    color: rgba(25, 108, 255, 1);
    font-size: 14px;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 13px;
    margin-top: 1px;
    margin-right: 10px;
  }

  .box_10 {
    width: 268px;
    height: 14px;
    margin: 15px 0 13px 16px;
  }

  .text-wrapper_23 {
    width: 97px;
    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: 18px;
  }

  .text_75 {
    width: 97px;
    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: 18px;
  }

  .text_76 {
    width: 97px;
    height: 14px;
    overflow-wrap: break-word;
    color: rgba(102, 102, 102, 1);
    font-size: 14px;
    font-family: PingFang-SC-Bold;
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
    line-height: 18px;
  }

  .text-wrapper_24 {
    width: 97px;
    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: 18px;
  }

  .text_77 {
    width: 97px;
    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: 18px;
  }

  .text_78 {
    width: 97px;
    height: 14px;
    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: 18px;
  }

  .image-text_3 {
    width: 176px;
    height: 12px;
    margin: 4px 0 0 16px;
  }

  .thumbnail_19 {
    width: 12px;
    height: 12px;
  }

  .text-group_3 {
    width: 151px;
    height: 11px;
    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: 11px;
    margin-top: 1px;
  }

  .thumbnail_20 {
    width: 1px;
    height: 10px;
    margin: 4px 0 9px 22px;
  }

  // 投诉建议

  .block_16 {
    background-color: rgba(255, 255, 255, 1);
    border-radius: 10px;
    // width: 334px;
    height: 441px;
    margin: 20px 0 0 0;
    padding-right: 20px;
  }

  .box_11 {
    // width: 302px;
    height: 24px;
    margin: 18px 0 0 16px;
  }

  .block_17 {
    background-color: rgba(25, 108, 255, 1);
    border-radius: 3px;
    width: 6px;
    height: 24px;
  }

  .text_79 {
    width: 64px;
    height: 16px;
    overflow-wrap: break-word;
    color: rgba(90, 90, 90, 1);
    font-size: 16px;
    font-family: PingFang-SC-Bold;
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
    line-height: 30px;
    margin: 4px 0 0 10px;
  }

  .text_80 {
    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;
    margin: 7px 0 0 0;
  }

  .box_12 {
    // width: 301px;
    height: 14px;
    margin: 24px 0 0 20px;
  }

  .text_81 {
    width: 55px;
    height: 14px;
    overflow-wrap: break-word;
    color: rgba(126, 126, 126, 1);
    font-size: 14px;
    font-family: PingFang-SC-Bold;
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
    line-height: 14px;
  }

  .section_15 {
    height: 12px;
    margin: 1px 0 0 9px;
    flex: 1;
    padding-right: 3px;

    .el-progress-bar__innerText {
      color: #AAAAAA !important;
    }
  }

  .text_82 {
    width: 15px;
    height: 10px;
    overflow-wrap: break-word;
    color: rgba(5, 12, 28, 1);
    font-size: 14px;
    font-family: PingFang-SC-Heavy;
    font-weight: 900;
    text-align: left;
    white-space: nowrap;
    line-height: 10px;
    margin: 2px 0 0 0;
  }

  .box_13 {
    width: 303px;
    height: 14px;
    margin: 17px 0 0 16px;
  }

  .text_83 {
    width: 56px;
    height: 14px;
    overflow-wrap: break-word;
    color: rgba(126, 126, 126, 1);
    font-size: 14px;
    font-family: PingFang-SC-Bold;
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
    line-height: 30px;
  }

  .block_18 {
    background-color: rgba(96, 150, 251, 1);
    border-radius: 6px;
    width: 100%;
    height: 12px;
    margin: 1px 3px 0 9px;
  }

  .text_84 {
    width: 17px;
    height: 12px;
    overflow-wrap: break-word;
    color: rgba(5, 12, 28, 1);
    font-size: 14px;
    font-family: PingFang-SC-Heavy;
    font-weight: 900;
    text-align: left;
    white-space: nowrap;
    line-height: 30px;
    margin: 1px 0 0 29px;
  }

  .box_14 {
    // box-shadow: 0px 0px 8px 0px rgba(222, 222, 222, 1);
    background-color: rgba(255, 245, 231, 1);
    border-radius: 10px;
    // width: 302px;
    height: 134px;
    justify-content: flex-center;
    margin: 18px 0 0 20px;
    padding: 0 15px;
  }

  .text-wrapper_25 {
    // width: 271px;
    height: 16px;
    margin: 15px 0 0 0;
  }

  .text_85 {
    // width: 96px;
    height: 16px;
    overflow-wrap: break-word;
    color: rgba(2, 11, 26, 1);
    font-size: 16px;
    font-family: PingFang-SC-Heavy;
    font-weight: 900;
    text-align: left;
    white-space: nowrap;
    line-height: 16px;
  }

  .text_86 {
    width: 41px;
    height: 13px;
    overflow-wrap: break-word;
    color: rgba(242, 78, 137, 1);
    font-size: 14px;
    font-family: PingFang-SC-Bold;
    font-weight: 700;
    text-align: right;
    white-space: nowrap;
    line-height: 13px;
    margin-top: 2px;
  }

  .paragraph_7 {
    // width: 265px;
    height: 33px;
    overflow-wrap: break-word;
    color: rgba(90, 90, 90, 1);
    font-size: 14px;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    text-align: left;
    line-height: 18px;
    margin: 14px 0 0 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box; //作为弹性伸缩盒子模型显示。
    -webkit-box-orient: vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
    -webkit-line-clamp: 2; //显示的行

  }

  .group_12 {
    // width: 272px;
    height: 24px;
    margin: 17px 0 15px 0;
  }

  .text_87 {
    width: 72px;
    height: 24px;
    overflow-wrap: break-word;
    color: rgba(90, 90, 90, 1);
    font-size: 12px;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 24px;
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box; //作为弹性伸缩盒子模型显示。
    -webkit-box-orient: vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
    -webkit-line-clamp: 1; //显示的行

  }

  .text-wrapper_26 {
    background-color: rgba(255, 255, 255, 1);
    border-radius: 4px;
    height: 24px;
    border: 1px solid rgba(25, 108, 255, 1);
    width: 60px;
  }

  .text_88 {
    width: 26px;
    height: 13px;
    overflow-wrap: break-word;
    color: rgba(25, 108, 255, 1);
    font-size: 14px;
    font-family: PingFang-SC-Bold;
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
    line-height: 12px;
    margin: 5px 0 0 17px;
  }

  .box_15 {
    box-shadow: 0px 0px 8px 0px rgba(222, 222, 222, 1);
    background-color: rgba(255, 245, 231, 1);
    border-radius: 10px;
    width: 302px;
    height: 134px;
    justify-content: flex-center;
    margin: 16px 0 21px 16px;
  }

  .text-wrapper_27 {
    width: 270px;
    height: 16px;
    margin: 15px 0 0 17px;
  }

  .text_89 {
    width: 96px;
    height: 16px;
    overflow-wrap: break-word;
    color: rgba(2, 11, 26, 1);
    font-size: 16px;
    font-family: PingFang-SC-Heavy;
    font-weight: 900;
    text-align: left;
    white-space: nowrap;
    line-height: 30px;
  }

  .text_90 {
    width: 40px;
    height: 13px;
    overflow-wrap: break-word;
    color: rgba(170, 170, 170, 1);
    font-size: 14px;
    font-family: PingFang-SC-Bold;
    font-weight: 700;
    text-align: right;
    white-space: nowrap;
    line-height: 18px;
    margin-top: 2px;
  }

  .paragraph_8 {
    width: 265px;
    height: 33px;
    overflow-wrap: break-word;
    color: rgba(90, 90, 90, 1);
    font-size: 14px;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    text-align: left;
    line-height: 18px;
    margin: 14px 0 0 16px;
  }

  .group_13 {
    width: 271px;
    height: 24px;
    margin: 17px 0 15px 16px;
  }

  .text_91 {
    width: 72px;
    height: 10px;
    overflow-wrap: break-word;
    color: rgba(90, 90, 90, 1);
    font-size: 12px;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 18px;
    margin-top: 2px;
  }

  .text-wrapper_28 {
    background-color: rgba(255, 255, 255, 1);
    border-radius: 4px;
    height: 24px;
    border: 1px solid rgba(254, 90, 14, 1);
    margin-left: 25px;
    width: 60px;
  }

  .text_92 {
    width: 28px;
    height: 13px;
    overflow-wrap: break-word;
    color: rgba(254, 90, 14, 1);
    font-size: 14px;
    font-family: PingFang-SC-Bold;
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
    line-height: 13px;
    margin: 4px 0 0 16px;
  }

  .text-wrapper_29 {
    background-color: rgba(255, 255, 255, 1);
    border-radius: 4px;
    height: 24px;
    border: 1px solid rgba(25, 108, 255, 1);
    margin-left: 12px;
    width: 60px;
  }

  .text_93 {
    width: 26px;
    height: 13px;
    overflow-wrap: break-word;
    color: rgba(25, 108, 255, 1);
    font-size: 14px;
    font-family: PingFang-SC-Bold;
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
    line-height: 18px;
    margin: 6px 0 0 17px;
  }

  // 车辆管控登记

  .block_1 {
    background-color: rgba(255, 255, 255, 1);
    border-radius: 10px;
    height: 400px;
    margin-top: -22px;
    // width: 364px;
  }

  .block_2 {
    width: 112px;
    height: 24px;
    margin: 19px 0 0 16px;
  }

  .block_3 {
    background-color: rgba(25, 108, 255, 1);
    border-radius: 3px;
    width: 6px;
    height: 24px;
  }

  .text_4 {
    width: 95px;
    height: 16px;
    overflow-wrap: break-word;
    color: rgba(90, 90, 90, 1);
    font-size: 16px;
    font-family: PingFang-SC-Bold;
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
    line-height: 16px;
    margin-top: 4px;
  }

  .block_4 {
    // width: 296px;
    height: 98px;
    margin: 20px 17px 0 17px;
    flex-wrap: wrap;
  }

  .section_2 {
    border-radius: 4px;
    height: 98px;
    // width: 140px;
    width: 50%;
    justify-content: flex-center;
    cursor: pointer;
  }

  .icas {
    background-color: rgba(223, 230, 242, 1);
    border: 1px solid rgba(25, 108, 255, 1);
  }

  .text-wrapper_2 {
    width: 56px;
    height: 14px;
    margin: 13px 0 0 20px;
  }

  .text_5 {
    width: 56px;
    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-wrapper_3 {
    width: 27px;
    height: 13px;
    margin: 13px 0 0 20px;
  }

  .text_6 {
    width: 27px;
    height: 13px;
    overflow-wrap: break-word;
    color: rgba(34, 35, 39, 1);
    font-size: 18px;
    font-family: Alibaba-PuHuiTi-B;
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
    line-height: 24px;
  }

  .text-wrapper_4 {
    width: 82px;
    height: 12px;
    margin: 20px 0 13px 21px;
  }

  .text_7 {
    width: 46px;
    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;
  }

  .text_8 {
    width: 26px;
    height: 10px;
    overflow-wrap: break-word;
    color: rgba(25, 108, 255, 1);
    font-size: 12px;
    font-family: PingFang-SC-Bold;
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
    line-height: 24px;
    margin-top: 1px;
  }

  .section_3 {
    width: 94px;
    height: 72px;
    margin-top: 13px;
  }

  .text_9 {
    width: 69px;
    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_10 {
    width: 20px;
    height: 14px;
    overflow-wrap: break-word;
    color: rgba(34, 35, 39, 1);
    font-size: 18px;
    font-family: Alibaba-PuHuiTi-B;
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
    line-height: 24px;
    margin-top: 13px;
  }

  .text-wrapper_5 {
    width: 92px;
    height: 12px;
    margin: 19px 0 0 2px;
  }

  .text_11 {
    width: 58px;
    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;
  }

  .text_12 {
    width: 26px;
    height: 10px;
    overflow-wrap: break-word;
    color: rgba(25, 108, 255, 1);
    font-size: 12px;
    font-family: PingFang-SC-Bold;
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
    line-height: 24px;
    margin-top: 1px;
  }

  .text-wrapper_6 {
    width: 238px;
    height: 14px;
    margin: 27px 0 0 37px;
  }

  .text_13 {
    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_14 {
    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-wrapper_7 {
    width: 214px;
    height: 14px;
    margin: 13px 0 0 36px;
  }

  .text_15 {
    width: 30px;
    height: 14px;
    overflow-wrap: break-word;
    color: rgba(34, 35, 39, 1);
    font-size: 18px;
    font-family: Alibaba-PuHuiTi-B;
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
    line-height: 24px;
  }

  .text_16 {
    width: 30px;
    height: 14px;
    overflow-wrap: break-word;
    color: rgba(34, 35, 39, 1);
    font-size: 18px;
    font-family: Alibaba-PuHuiTi-B;
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
    line-height: 24px;
  }

  .block_5 {
    width: 250px;
    height: 12px;
    margin: 19px 0 0 37px;
  }

  .text_17 {
    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: 1px 0 0 5px;
  }

  .text_18 {
    width: 35px;
    height: 10px;
    overflow-wrap: break-word;
    color: rgba(255, 105, 105, 1);
    font-size: 12px;
    font-family: PingFang-SC-Bold;
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
    line-height: 24px;
    margin: 1px 0 0 7px;
  }

  .text_19 {
    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;
    margin-left: 88px;
  }

  .text_20 {
    width: 23px;
    height: 12px;
    overflow-wrap: break-word;
    color: rgba(170, 170, 170, 1);
    font-size: 12px;
    font-family: PingFang-SC-Bold;
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
    line-height: 24px;
    margin-left: 10px;
  }

  .text-wrapper_8 {
    width: 239px;
    height: 14px;
    margin: 40px 0 0 37px;
  }

  .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;
  }

  .text_22 {
    width: 56px;
    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-wrapper_9 {
    width: 203px;
    height: 13px;
    margin: 13px 0 0 36px;
  }

  .text_23 {
    width: 20px;
    height: 13px;
    overflow-wrap: break-word;
    color: rgba(34, 35, 39, 1);
    font-size: 18px;
    font-family: Alibaba-PuHuiTi-B;
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
    line-height: 24px;
  }

  .text_24 {
    width: 19px;
    height: 13px;
    overflow-wrap: break-word;
    color: rgba(34, 35, 39, 1);
    font-size: 18px;
    font-family: Alibaba-PuHuiTi-B;
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
    line-height: 24px;
  }

  .block_6 {
    width: 276px;
    height: 12px;
    margin: 20px 0 28px 37px;
  }

  .text_25 {
    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_15 {
    width: 14px;
    height: 10px;
    margin: 1px 0 0 5px;
  }

  .text_26 {
    width: 35px;
    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: 1px 0 0 5px;
  }

  .text_27 {
    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;
    margin-left: 90px;
  }

  .thumbnail_16 {
    width: 14px;
    height: 10px;
    margin: 1px 0 0 5px;
  }

  .text_28 {
    width: 36px;
    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: 1px 0 0 4px;
  }

  // 条形图样式

  .block_12 {
    background-color: rgba(255, 255, 255, 1);
    border-radius: 10px;
    height: 352px;
    // width: 779px;
    margin: 20px 0 0 -12px;
    padding-right: 20px;
  }

  .group_8 {
    background-color: rgba(25, 108, 255, 1);
    border-radius: 3px;
    width: 6px;
    height: 24px;
  }

  .text_43 {
    width: 64px;
    height: 16px;
    overflow-wrap: break-word;
    color: rgba(90, 90, 90, 1);
    font-size: 16px;
    font-family: PingFang-SC-Bold;
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
    line-height: 30px;
    margin: 4px 0 0 10px;
  }

  .text_44 {
    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;
    margin: 2px 0 0 593px;
  }

  .section_9 {
    // width: 735px;
    height: 281px;
    margin: 15px 0 17px 28px;
  }

  .paragraph_4 {
    width: 14px;
    height: 234px;
    overflow-wrap: break-word;
    color: rgba(102, 102, 102, 1);
    font-size: 12px;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    text-align: right;
    line-height: 45px;
    margin-top: 28px;
  }

  .box_5 {
    // width: 371px;
    height: 281px;
    // margin-left: 12px;
    // margin-right: 12px;
    flex: 1;
    width: 60%;
  }

  .text_45 {
    width: 54px;
    height: 11px;
    overflow-wrap: break-word;
    color: rgba(34, 35, 39, 1);
    font-size: 12px;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 18px;
    margin-left: 316px;
  }

  .section_10 {
    background-color: rgba(218, 218, 218, 1);
    width: 370px;
    height: 1px;
    margin-top: 22px;
  }

  .section_11 {
    background-color: rgba(218, 218, 218, 1);
    width: 370px;
    height: 1px;
    margin-top: 44px;
  }

  .image_6 {
    width: 371px;
    height: 150px;
    margin-top: 4px;
  }

  .section_12 {
    background-color: rgba(218, 218, 218, 1);
    width: 370px;
    height: 1px;
    margin-top: 25px;
  }

  .text-wrapper_13 {
    width: 356px;
    height: 10px;
    margin: 12px 0 0 8px;
  }

  .text_46 {
    width: 24px;
    height: 10px;
    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: 18px;
  }

  .text_47 {
    width: 21px;
    height: 10px;
    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: 18px;
    margin-left: 24px;
  }

  .text_48 {
    width: 14px;
    height: 10px;
    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: 18px;
    margin-left: 25px;
  }

  .text_49 {
    width: 16px;
    height: 10px;
    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: 18px;
    margin-left: 25px;
  }

  .text_50 {
    width: 16px;
    height: 10px;
    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: 18px;
    margin-left: 25px;
  }

  .text_51 {
    width: 17px;
    height: 10px;
    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: 18px;
    margin-left: 26px;
  }

  .text_52 {
    width: 16px;
    height: 10px;
    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: 18px;
    margin-left: 24px;
  }

  .text_53 {
    width: 16px;
    height: 10px;
    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: 18px;
    margin-left: 26px;
  }

  .text_54 {
    width: 16px;
    height: 10px;
    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: 18px;
    margin-left: 25px;
  }

  .box_6 {
    // width: 302px;
    height: 276px;
    // flex: 1;
    width: 40%;
    margin-left: 36px;
  }

  .box_7 {
    // box-shadow: 0px 0px 8px 0px rgba(222, 222, 222, 1);
    background-color: rgba(240, 243, 252, 1);
    border-radius: 10px;
    // width: 302px;
    height: 130px;
  }

  .block_13 {
    width: 270px;
    height: 24px;
    margin: 16px 0 0 17px;
  }

  .text_55 {
    // width: 172px;
    height: 16px;
    overflow-wrap: break-word;
    color: rgba(2, 11, 26, 1);
    font-size: 16px;
    font-family: PingFang-SC-Heavy;
    font-weight: 900;
    text-align: left;
    white-space: nowrap;
    line-height: 16px;
    margin-top: 4px;
  }

  .text-wrapper_14 {
    background-color: rgba(255, 255, 255, 1);
    border-radius: 4px;
    height: 24px;
    width: 60px;
    margin-right: 15px;
  }

  .text_56 {
    width: 28px;
    height: 13px;
    overflow-wrap: break-word;
    color: rgba(25, 108, 255, 1);
    font-size: 14px;
    font-family: PingFang-SC-Bold;
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
    line-height: 13px;
    margin: 6px 0 0 16px;
  }

  .paragraph_5 {
    // width: 217px;
    height: 62px;
    overflow-wrap: break-word;
    color: rgba(90, 90, 90, 1);
    font-size: 14px;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    text-align: left;
    line-height: 24px;
    margin: 8px 0 18px 16px;
  }

  .box_8 {
    box-shadow: 0px 0px 8px 0px rgba(222, 222, 222, 1);
    background-color: rgba(240, 243, 252, 1);
    border-radius: 10px;
    height: 130px;
    margin-top: 16px;
    // width: 302px;
  }

  .text-wrapper_15 {
    width: 267px;
    height: 16px;
    margin: 20px 0 0 18px;
  }

  .text_57 {
    width: 174px;
    height: 16px;
    overflow-wrap: break-word;
    color: rgba(2, 11, 26, 1);
    font-size: 16px;
    font-family: PingFang-SC-Heavy;
    font-weight: 900;
    text-align: left;
    white-space: nowrap;
    line-height: 30px;
  }

  .text_58 {
    width: 41px;
    height: 13px;
    overflow-wrap: break-word;
    color: rgba(40, 197, 41, 1);
    font-size: 14px;
    font-family: PingFang-SC-Bold;
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
    line-height: 13px;
    margin-top: 2px;
    margin-right: 15px;
  }

  .text-wrapper_16 {
    width: 217px;
    height: 62px;
    margin: 14px 0 18px 16px;
  }

  .paragraph_6 {
    width: 217px;
    height: 62px;
    overflow-wrap: break-word;
    color: rgba(90, 90, 90, 1);
    font-size: 14px;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    text-align: left;
    line-height: 24px;
  }
</style>
