yuanqu/ruoyi-ui/src/views/index.vue

<template>
  <div class="serhome">
    <!-- <div class="nhgel"></div> -->
    <el-row class="ser_top" :gutter="20" style="margin-top: 20px;">
      <el-col :span="17">
         <div>
			 <img src="../assets/images/pic_yq_htgl_banner.png" alt="" style="width: 100%;">
		 </div>
		 
		 <div style=" border-radius: 5px;  margin-top: 20px;padding-bottom: 0;" >
			<div style="display: flex; justify-content: space-between; ">
				<div style="width:49%; background-color: #fff; padding: 20px 20px;border-radius: 4px;" v-if="iszhushou">
					<div style="margin-top: 20px; margin-top: 0;">
						<p style="font-size: 15px;color: #161616; font-weight: 800; padding: 20px 20px; padding-top: 0; padding-left: 0;">
							<img src="../assets/images/icon_htgl_sj.png" alt="" style="width:18px;height: 18px;">
							本周数据
						</p>
					</div> 
					<p style="margin: 20px 0; margin-top: 0;font-weight: 500;font-size: 14px;color: #666666;">本周总访客</p>
					<p style="font-weight: 400;font-size: 38px;color: #343434;margin-bottom: 20px;">{{zhuti.fkzs}} <span style="font-weight: 500;font-size: 15px;
                    color: #AAAAAA;">本周总预约</span> <span style="font-weight: 800;font-size: 15px;color: #009F3C;"> {{zhuti.yyzs}}</span></p>
                    <div>
					   <line-bar-chart :chart-data="zhuti"></line-bar-chart>
				    </div>
				</div>
				
				<div style="width:49%; background-color: #fff; padding: 20px 20px;border-radius: 4px;" v-if="isbtu">
					<div style="margin-top: 20px; margin-top: 0;">
						<p style="font-size: 15px;color: #161616; font-weight: 800; padding: 20px 20px; padding-top: 0; padding-left: 0;">
							<img src="../assets/images/icon_htgl_kq.png" alt="" style="width:18px;height: 18px;">
							今日考勤统计
						</p>
					</div> 
					<div style="position: relative; display: flex; margin-top: 20px;">
					   <panel-groupone :chart-data="yuanli" />
					   <div style="flex:1; display: flex; justify-content: space-around; position: relative; ">
						   <img src="../assets/images/pic_yqht_kqbg.png" alt="" style="width:77px;height: 77px; position: absolute;top:-67px;right: 0;">
						   <div style="display: flex; flex-direction: column; margin-top: 30px;">
							   <p style="display: flex; align-items: center;font-size: 14px;font-weight: 500;color: #666666; ">
								   <span style="width: 12px; height: 12px; background-color: #18E38A; border-radius: 12px; margin-right: 10px;"></span>
								   已打卡</p>
							   <span style="font-weight: 800;margin-top: 10px; font-size: 29px;color: #343434;margin-left: 20px;">{{yuanli.ydk}}</span>
						   </div>
						   <div style="display: flex; flex-direction: column; margin-top: 30px;">
						   	<p style="display: flex; align-items: center;font-size: 14px;font-weight: 500;color: #666666; ">
						   		<span style="width: 12px; height: 12px; background-color: #4D73F8; border-radius: 12px; margin-right: 10px;"></span>
						   	未打卡</p>
						   	<span style="font-weight: 800;margin-top: 10px; font-size: 29px;color: #343434;margin-left: 20px;">{{yuanli.wdk}}</span>
						   </div>
					   </div>
					</div>
					<div style="margin-top: 20px; margin-top: 29px;">
						<p style="font-size: 15px;color: #161616; font-weight: 800; padding: 20px 20px; padding-top: 0; padding-left: 0;">
							<img src="../assets/images/icon_htgl_dc.png" alt="" style="width:18px;height: 18px;">
							今日订餐统计
						</p>
					</div> 
					<div style="position: relative; display: flex; margin-top: 20px;">
					   <panel-grouptwo :chart-data="yuanli" />
					   <div style="flex:1; display: flex; justify-content: space-around; position: relative; ">
						   <img src="../assets/images/pic_yqht_dcbg.png" alt="" style="width:77px;height: 77px; position: absolute;top:-67px;right: 0;">
						   <div style="display: flex; flex-direction: column; margin-top: 30px;">
							   <p style="display: flex; align-items: center;font-size: 14px;font-weight: 500;color: #666666; ">
								   <span style="width: 12px; height: 12px; background-color: #FFCA5C; border-radius: 12px; margin-right: 10px;"></span>
								   午餐预定</p>
							   <span style="font-weight: 800;margin-top: 10px; font-size: 29px;color: #343434;margin-left: 20px;">{{yuanli.dcwc}}</span>
						   </div>
						   <div style="display: flex; flex-direction: column; margin-top: 30px;">
						   	<p style="display: flex; align-items: center;font-size: 14px;font-weight: 500;color: #666666; ">
						   		<span style="width: 12px; height: 12px; background-color: #F8561E; border-radius: 12px; margin-right: 10px;"></span>
						   	晚餐预定</p>
						   	<span style="font-weight: 800;margin-top: 10px; font-size: 29px;color: #343434;margin-left: 20px;">{{yuanli.dcDinner}}</span>
						   </div>
					   </div>
					</div>
				</div>
			</div>
		 </div>
		 
		 
		 <div style="background-color: #fff; border-radius: 5px; padding:20px 0; margin-top: 20px; height: 434spx;">
			 <div style="display: flex; justify-content: space-between;">
				 <div style="display: flex; justify-content: flex-start;align-items: center; margin-bottom: 20px; padding-left: 20px;">
				 				<p style="font-size: 15px;color: #161616; font-weight: 800; margin-right: 20px; ">
				 					<img src="../assets/images/icon_htgl_jl.png" alt="" style="width:18px;height: 18px;">
				 					本月访客出入记录
				 				</p> 
				 				<div class="ite" style="color:#666;">
				 				  <p v-for="(item,index) in dict.type.lafafen" :key="index" :class="kje==index?'actt':''" @click="ilw(item,index)">{{item.label}}</p>
				 				</div>
				 				
				 </div>
				 <p style="color:#666;float: left;padding-right: 20px;font-size: 14px;">查看更多>></p>
			 </div>
			    <el-table :max-height="339" v-loading="loading" :data="juelist" height="339">
			        <el-table-column type="selection" width="55" align="center" />
			        <el-table-column label="姓名" align="center" prop="recordName" width="120"  >
			        	   <template slot-scope="scope">
			        	  	  <el-tooltip class="item" effect="dark" :content="scope.row.recordName" placement="top">
			        	  	    <p style="white-space: nowrap;
			        	  text-overflow: ellipsis;
			        	  overflow: hidden;width:100%;">{{  scope.row.recordName}}</p>
			        	  	 </el-tooltip>
			        	    </template>
			        	    </el-table-column>
			        	  <el-table-column label="联系方式" align="center" prop="recordPhone" width="120"  >
			        	   <template slot-scope="scope">
			        			  <el-tooltip class="item" effect="dark" :content="scope.row.recordPhone " placement="top">
			        			  <p style="margin: 0; white-space: nowrap;
			        	  text-overflow: ellipsis;
			        	  overflow: hidden;width:100%;">{{scope.row.recordPhone}} </p>
			        	  </el-tooltip>
			        	    </template>
			        	    </el-table-column>
			        	  <el-table-column label="出入时间" align="center" prop="recordDateTime" width="180" >
			        		  <template slot-scope="scope">
			        		  	  	  <div >
			        					 <p style="margin: 0;">{{scope.row.recordDateTime}}</p>
			        		  		  </div>
			        		   </template>
			        		   </el-table-column>
			        	 <el-table-column label="人员类型 " align="center" prop="recordType" >
			        		 <template slot-scope="scope">
			        		 	  <dict-tag :options="dict.type.fange" :value="scope.row.recordType"/>
			        		 </template>
			        	</el-table-column>
			        <el-table-column label="记录来源" align="center" prop="recordSource" >
			        	  <template slot-scope="scope">
			        		  <dict-tag :options="dict.type.jluly" :value="scope.row.recordSource"/>
			        	</template>
			        </el-table-column>
			      </el-table>

			
			  <pagination
			    v-show="totals>0"
			    :total="totals"
			    :page.sync="queryParamss.pageNum"
			    :limit.sync="queryParamss.pageSize"
			    @pagination="getList"
			  />
			
		 </div>
		 
      </el-col>
	  <el-col :span="7">
		<div class="ongeg flekd" style="justify-content: space-around;margin-top: 0;">
			<img src="../assets/images/pic_yq_htgl_sfzs.png" alt="" style="width:58px;height: 58px; border-radius: 58px;">
			<div >
				<p style="font-weight: 800;font-size: 15px;color: #343434;margin-bottom: 10px;">尊敬的 {{nbdgwname}}，上午好！</p>
				<p style="font-weight: 500;font-size: 13px;color: #343434;">管理权限：<span style="color: #3464EB;" >{{ rolesName[0].roleName == undefined? '暂无数据':rolesName[0].roleName}}</span></p>
			</div>
			<img src="../assets/images/pic_yq_htgl_sfzs.png" alt="" style="width:76px;height: 60px; ">
		</div>
		  
		  <div class="ongeg ">
			<div>
							<p style="font-size: 15px;color: #161616; font-weight: 800; display: flex; align-items: center; padding-top: 0;">
								<img src="../assets/images/icon_htgl_jl.png" alt="" style="width:18px;height: 18px; margin-right: 10px;">
								快捷功能
							</p> 
			</div> 
			 <el-row>
				 <el-col :span="24" style="margin-top: 20px;">
					 <el-col :span="8" style="display: flex;flex-direction: column; cursor:pointer; justify-content: center;align-items: center;" @click="isksegh(0)">
						 <img src="../assets/images/icon_htgl_kj_jkgl.png" alt="" style="width:29px;height: 29px;" @click="isksegh(0)">
						 <span style="font-weight: bold;font-size: 15px;color: #161616;" @click="isksegh(0)">预约管理</span>
					 </el-col>
					 <el-col :span="8" style="display: flex;flex-direction: column; cursor:pointer; justify-content: center;align-items: center;" @click="isksegh(1)">
					 						 <img src="../assets/images/icon_htgl_kj_zjgl.png" alt="" style="width:29px;height: 29px;" @click="isksegh(1)">
					 						 <span style="font-weight: bold;font-size: 15px;color: #161616;" @click="isksegh(1)">设备管理</span>
					 </el-col>
					 <el-col :span="8" style="display: flex;flex-direction: column; cursor:pointer; justify-content: center;align-items: center;" @click="isksegh(2)">
					 						 <img src="../assets/images/icon_htgl_kj_fkgl.png" alt="" style="width:29px;height: 29px;" @click="isksegh(2)">
					 						 <span style="font-weight: bold;font-size: 15px;color: #161616;" @click="isksegh(2)">人员权限</span>
					 </el-col>
				 </el-col>
				 <el-col :span="24" style="margin-top: 20px;">
				 					 <el-col :span="8" style="display: flex;flex-direction: column; cursor:pointer; justify-content: center;align-items: center;" @click="isksegh(3)">
				 						 <img src="../assets/images/icon_htgl_kj_viplr.png" alt="" style="width:29px;height: 29px;" @click="isksegh(3)">
				 						 <span style="font-weight: bold;font-size: 15px;color: #161616;" @click="isksegh(3)">访客记录</span>
				 					 </el-col>
				 					 <el-col :span="8" style="display: flex;flex-direction: column; cursor:pointer; justify-content: center;align-items: center;" @click="isksegh(4)">
				 					 						 <img src="../assets/images/icon_htgl_kj_yygl.png" alt="" style="width:29px;height: 29px;" @click="isksegh(4)">
				 					 						 <span style="font-weight: bold;font-size: 15px;color: #161616;" @click="isksegh(4)">打卡记录</span>
				 					 </el-col>
				 					 <el-col :span="8" style="display: flex;flex-direction: column; cursor:pointer; justify-content: center;align-items: center;" @click="isksegh(5)">
				 					 						 <img src="../assets/images/icon_htgl_kj_rygl.png" alt="" style="width:29px;height: 29px;" @click="isksegh(5)">
				 					 						 <span style="font-weight: bold;font-size: 15px;color: #161616;" @click="isksegh(5)">人员管理</span>
				 					 </el-col>
				 </el-col>
			 </el-row>
		  </div>
		  
		  <div class="ongeg">
			<div>
							<p style="font-size: 15px;color: #161616; font-weight: 800; display: flex; align-items: center; padding-top: 0;">
								<img src="../assets/images/icon_htgl_db.png" alt="" style="width:18px;height: 18px; margin-right: 10px;">
								待办事项
							</p> 
			</div> 
			  <div style="margin-top: 15px;">
				  <Calendar
				        v-on:choseDay="clickDay"
				  	  :agoDayHide="njdes"
				        :sundayStart='false'>
				      </Calendar>
					  
			    <div>
					<div class="flekd" style="justify-content: space-between;">
						<p style="font-weight: 700;font-size: 15px;color: #161616; position: relative;">预约审核 <span style="position: absolute;top: 0;right: -8px;
						width:10px;height: 10px;background-color: red;border-radius: 5px;"></span></p>
						<p style="font-weight: 500;font-size: 15px;color: #AAAAAA;cursor:pointer;" @click="gengs('预约审核')">查看更多>></p>
					</div>
				</div>
				<div style="background-color: #F2F3FD; padding: 15px; margin-top: 10px;" v-for="(item,index) in postList" :key="index">
					<div class="flekd" style="justify-content: space-between; margin-bottom: 10px;">
						<p style="font-weight: 500;font-size: 13px;color: #666666;">人员姓名: <span style="color:#343434;">{{item.visitName == null ? '暂无数据': item.visitName}}</span></p>
						<p style="font-weight: 500;font-size: 13px;color: #666666;">访客地点：{{item.appointmentSite == null ? '暂无数据': item.appointmentSite}}</p>
					</div>
					<p style="font-weight: 500;font-size: 13px;color: #666666;">预约时间: {{item.visitDateTime == null ? '暂无数据': item.visitDateTime}}</p>
					<div class="flekd" style="justify-content: space-between;">
						<div style="flex:1;">
							<p style="font-weight: 500;font-size: 13px;color: #666666;">访问密码: <span style="color:#3464EB;">{{item.accessPassword == null ? '暂无数据': item.accessPassword}}</span></p>
						</div>
						<div class="flekd"  style="flex:1; justify-content: flex-end;">
							<p class="sgone" @click="infoBtn(item)" v-hasPermi="['system:reservat:sh']">拒绝</p>
							<p class="sgone" style="background-color: #3464EB; margin-left: 10px;" @click="getPass(item)" v-hasPermi="['system:reservat:sh']">同意</p>
						</div>
					</div>
				</div>
			  </div>
		  </div>
		  
		  
		  <div class="ongeg">
			<div class="flekd" style="justify-content: space-between;">
							<p style="font-size: 15px;color: #161616; font-weight: 800; display: flex; align-items: center; padding-top: 0;">
								<img src="../assets/images/icon_htgl_db.png" alt="" style="width:18px;height: 18px; margin-right: 10px;">
								信息通知
							</p> 
							<p style="font-weight: 500;font-size: 13px;color: #AAAAAA;cursor:pointer;" @click="gengs('信息通知')">查看更多>></p>
			</div> 
			<div  class="flekd" style="justify-content: flex-start; margin-top: 8px;" v-for="(item,index) in noticeList" :key="index">
				<span style="width: 14%;font-weight: 800;font-size: 12px;color: #3464EB; margin-right: 5px;">{{item.time}}</span>
				<p style="width: 86%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor: crosshair;">{{item.noticeTitle}}</p>
			</div>
		  </div>
	  </el-col>
      
    </el-row>
   <el-row style="background-color: #fff; padding: 20px;">
	   <div class="flekd" style="justify-content: space-between;margin-bottom: 20px;">
	   				<div style="display: flex;">
						<p style="font-size: 15px;color: #161616; font-weight: 800; display: flex; align-items: center; padding-top: 0;">
							<img src="../assets/images/icon_htgl_jk.png" alt="" style="width:18px;height: 18px; margin-right: 10px;">
							门禁信息
						</p> 
					  <div class="jiankdem">
						  <img src="../assets/images/icon_yq_ht_jk_ss.png" alt="">
						  <el-select v-model="queryParamsy.name" placeholder="请选监控名称" clearable>
						    <el-option
						      v-for="dict in postListf"
						      :key="dict.indexCode"
						      :label="dict.name"
						      :value="dict.name"
						    />
						  </el-select>
						  <p style="cursor:pointer;" @click="getListsheb()">搜索</p>
					  </div>
					</div>
	   				<p style="font-weight: 500;font-size: 13px;color: #AAAAAA;cursor:pointer;" @click="gengs('园区监控')">查看更多>></p>
	   </div> 
      <el-col :span="24">
      	<div class="ihgswq wrapper ihgswqht"  ref="wrapper" style=" overflow: hidden;" >
      			  <div class="fijge content bgr" ref="content">
      				  <!-- <el-row :gutter="20"> -->
      					  <!-- <el-col  :span="8"> -->
      						<div class='shotw '   v-for="(item,index) in postListf" :key="index" @click="isfgw(item)" >
      								  <img src="../assets/images/fengm.png" alt=""> 
      									<img src="../assets/images/icon_spjk_play.png" alt="" class="iges"> 
      								  <p class="psge"><span></span>{{item.name}}</p>
      						</div>  
      					  <!-- </el-col> -->
      				  <!-- </el-row> -->
      			  		   
      			  </div> 
      	</div>
      </el-col>
    </el-row>

    <el-dialog  :title="title" :visible.sync="open" width="600px" append-to-body>
        <div>
          <p style="text-align: center; color: #333; font-size: 16px; margin-top: 0; font-weight: 700;">{{form.title}}</p>
          <div>
            <p style="display: flex; justify-content:center;align-items: center; font-size: 12px; text-align: center;"><span>发布时间：{{form.releaseTime}}</span>  <span style="margin-left: 20px;">文章来源：{{form.source}}</span>  </p>
          </div>
          <div v-html="form.content" ></div>
        </div>
    </el-dialog>
	<el-dialog  :title="titleg" :visible.sync="openg" width="89%" append-to-body>
		<div class="isindesta">
			
			<el-tabs :tab-position="tabPosition" style="height: 500px;">
			    <el-tab-pane v-for="(item,index) in postListf" :key="index">
				<span slot="label"  @click="isfgw(item)"><i class="el-icon-setting"></i> {{item.name}}</span>
				</el-tab-pane>
			  </el-tabs>
			  <div style="position: absolute; top: 70px; right: 0;">
				  <video
				        class="videosmall"
				        ref="videosmallone"
				        preload="auto"
				        muted
				        autoplay
				  	   width="95%"
				  	  height="550px"
				        type="rtmp/flv"
				      >
				        <source src="" />
				      </video>
			  </div>
		</div>
		
		
	</el-dialog>
	


   </div>
</template>

<script>
	  import { mapGetters } from 'vuex'
	import myBMap from "../utils/myBMap";
	import { gettq,zhelist,bingtlist,renlir,appointment,kqdc } from "@/api/index";
  import LineBarChart from './dashboard/lineBarChart'
  import BoldChart from './dashboard/BoldChart'
  import GaugeChart from './dashboard/GaugeChart'
  import PanelGroupone from './dashboard/PanelGroupone';
  import PanelGrouptwo from './dashboard/PanelGrouptwo';
  import Calendar from 'vue-calendar-component';
  import { listneris, listnli,delener } from "@/api/kaoch/neirong";
  import { listReservat, listReservatd, getReservat, delReservat, addReservat, updateReservat,setPass } from "@/api/tongj/reservat";
  import { listNews, getNews, delNews, addNews, updateNews } from "@/api/fabux/news";
  import { listNotice, getNotice, delNotice, addNotice, updateNotice } from "@/api/system/notice";
  import { camera,cameraIndexCode} from "@/api/tonggi/houtai";
  import Bscroll from "better-scroll";
  import flvjs from "flv.js";
  const defaultSettings = require("@/settings.js");
  const lineChartData = {
    newVisitis: {
      expectedData: [80, 120, 111, 104, 105, 100, 105],
      actualData: [120, 140, 130, 110, 162, 140, 145],
      linedata:[80,110,160,150,110,135,178],
	  x:['1月','2月','3月']
    },
    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",
   dicts: ['sys_normal_disable','sys_yes_no','fange','jluly','lafafen'],
  components:{
   LineBarChart,BoldChart,GaugeChart,PanelGroupone,Calendar,PanelGrouptwo
  },

  data() {
    return {
      // 版本号
      version: "3.8.6",
      hover:'hover',
       kje:0,
       title:'详细信息',
       open:false,
      defaultSettings:defaultSettings,
      lineChartDatag: lineChartData.newVisitis,
      boldChartData:lineChartData.messages,
      total:20,
      timedata:'',
      queryParams: {
        pageNum: 1,
        pageSize: 2,
        postCode: undefined,
        postName: undefined,
        status: undefined,
        reservatType:undefined
      },
      queryParamss:{
        pageNum: 1,
        pageSize: 10,
        postCode: undefined,
        postName: undefined,
        status: undefined,
        reservatType:undefined
      },
      queryParamssg:{
        pageNum: 1,
        pageSize: 10,
        status:1,
        type:4
      },
	  queryParamsy:{
		name:null  
	  },
	  querzhell:{
		  type:1
	  },
	  isben:1,
	  zhedui:{
	  				  yearYy:null,
	  				  monthYy:null,
	  				  todayYy:null,
	  				  todayVisit:null,
	  },
	  bingt:{
		  one:null,
		  two:null,
		  three:null,
		  four:null,
		  five:null,
		  six:null,
		  rj:null
	  },
	   tabPosition: 'left',
	  iszhe:false,
	  isbtu:false,
	  titleg:'查看信息',
      tableData: [{
                date: '合肥市考察学习代表团前往潜山考察交流',
                name: '2023.11.23 - 11.25',
                province: '潜山XXX大酒店',
                city: '林柏瑞',
                address: '180****8888',
                zip: 1
              }, {
                date: '合肥市考察学习代表团前往潜山考察交流',
                name: '2023.11.23 - 11.25',
                province: '潜山XXX大酒店',
                city: '林柏瑞',
                address: '180****8888',
                zip: 2
              },{
                date: '合肥市考察学习代表团前往潜山考察交流',
                name: '2023.11.23 - 11.25',
                province: '潜山XXX大酒店',
                city: '林柏瑞',
                address: '180****8888',
                zip: 3
              }, {
                date: '合肥市考察学习代表团前往潜山考察交流',
                name: '2023.11.23 - 11.25',
                province: '潜山XXX大酒店',
                city: '林柏瑞',
                address: '180****8888',
                zip: 1
              },],
			  cent:'',
			  shitw:'',
			  local:{// 所在城市温度
			  temperature: '',
			  // 天气类型
			  type: '',
			  // 班级人数
			  getdeptug:[],
			  

			  },
        tijet:'全部',
        juelist:[],
        postList:[],
        isdfl:0,
        totals:0.,
        tosjlist:[],
        form:{},
        ijfe:{},
        nowTime:{
          day:'',
          ht:'',
          hao:'',
          week:''
        },
        renyle:{},
        iszheg:false,
        timel:'',
        disabled:true,
		pin:{},
		njdes:null,
		timdke:'',
		rolesName:'',
		nbdgwname:'',
		postListf:[],
		isshiwa:false,
		openg:false,
		player: null,
		noticeList:[],
        zhuti:{},
		iszhushou:false,
		yuanli:{}

    };
  },
  created() {
	  
	  // this.njdes = new Date()
  	// this.getLocation()
 
 //            this.getLists()
 //            this.getListsd()
 //            this.getListsdsdi()
            this.getNowDate()
			this.getListsheb()
			this.getListgg()
			this.zhuty()
 //            this.getren()
 //            this.getzhelist()
        if (!this.disabled) {
          // this.sendMsg = this.time + "秒后重新发送";
          this.disabled = true;
          const that = this;
          setInterval(() => {
            this.getList()
            this.getLists()
            this.getListsd()
            this.getListsdsdi()
            this.getNowDate()
            this.getren()
            // this.getzhelist()
          }, 100000);
        }
		this.rolesName = this.$store.state.user.rolesName
		this.nbdgwname = this.$store.state.user.name
	this.getbint()

  },
  beforeDestroy() {
      this.disabled = false; //销毁时清除定时器
},
  mounted(){
	  this.$nextTick(() => {
	          this.initScroll()
	      })  
  },
  methods: {
	  getPartTime(val){
	            // let ti = val.split(' ');
	            var timearr = val.replace(" ", ":").replace(/:/g, "-").split("-");
				
				let thge = Number(timearr[1])
				let gkwti = Number(timearr[2])
				if (thge >= 1 && thge <= 9) {
				     thge = "0" + thge;
				}
				if (gkwti >= 1 && gkwti <= 9) {
				     gkwti = "0" + gkwti;
				}
	            var timestr = thge+ "-" + gkwti;
				
	            return timestr;
	       },
	  /** 查询公告列表 */
	  getListgg() {
	    this.loading = true;
		let nbhs={pageNum: 1,
        pageSize: 3,}
	    listNotice(nbhs).then(response => {
	      this.noticeList = response.rows;
		  if(this.noticeList.length != 0){
			  this.noticeList.filter(rout=>{
				 rout.time =  this.getPartTime(rout.createTime)
			  })
		  }
		  if(this.noticeList.length == 0){
			  this.noticeList.push(
			  {noticeTitle:'暂无数据',createTime:'暂无数据'},
			  {noticeTitle:'暂无数据',createTime:'暂无数据'},
			  {noticeTitle:'暂无数据',createTime:'暂无数据'}
			  )
		  }else if(this.noticeList.length == 1){
			 this.noticeList.push(
			 {noticeTitle:'暂无数据',createTime:'暂无数据'},
			 {noticeTitle:'暂无数据',createTime:'暂无数据'}
			 ) 
		  }else if(this.noticeList.length == 2){
			this.noticeList.push(
			{noticeTitle:'暂无数据',createTime:'暂无数据'},
			)   
		  }
	      // this.total = response.total;
		  console.log(this.noticeList,3)
	      this.loading = false;
	    });
	  },
	  getListsheb() {
	    this.loading = true;
	    // this.queryParams
		let nghet={ pageNo: 1,pageSize: 500,name:this.queryParamsy.name}
	    camera(nghet).then(response => {
	      this.postListf = response.data.data.list;
	  	if(response.data.data != null){
	  	// if(response.data.data.list.length != 0){
	  	// 	this.isfgw(response.data.data.list[0])
	  	// }	
	  	}
	      // this.postList=[{'nsje':null,'visitPhone':null,'isReception':'Y'}]
	      this.total = response.data.data.total;
	      this.loading = false;
	    });
	  },
	  isfgw(val){
	  	let nhge={cameraIndexCode:val.indexCode}
	  	this.isshiwa = false
	     cameraIndexCode(nhge.cameraIndexCode).then(response => {
	  	   console.log(response.data.data.url)
		    this.openg = true
	  	  this.init(response.data.data.url)
	  	   this.isshiwa = true
	    // this.postList = response.rows;
	    // this.total = response.total;
	    });
	  	console.log(val)
	  },
	  init(val) { //这个val 就是一个地址，例如： http://192.168.2.201:85/live/9311272c49b845baa2b2810ad9bf3f68.flv 这是个服务器返回给我的一个监控视频流地址
	       console.log(val,3)
			setTimeout(() => { //使用定时器是因为，在mounted声明周期里调用，可能会出现DOM没加载出来的原因
	          var videoElement = this.$refs.videosmallone; // 获取到html中的video标签
	          if (flvjs.isSupported()) {
	          //因为我这个是复用组件，进来先判断 player是否存在，如果存在，销毁掉它，不然会占用TCP名额
	            if (this.player !== null) {
	              this.player.pause();
	              this.player.unload();
	              this.player.detachMediaElement();
	              this.player.destroy();
	              this.player = null;
	            }
	            this.player = flvjs.createPlayer( //创建直播流，加载到DOM中去
	              {
	                type: "flv",
	                url: val, //你的url地址
	                isLive: true, //数据源是否为直播流
	                hasAudio: false, //数据源是否包含有音频
	                hasVideo: true, //数据源是否包含有视频
	                enableStashBuffer: true, //是否启用缓存区
	              },
	              {
	                enableWorker: false, //不启用分离线程
	                enableStashBuffer: false, //关闭IO隐藏缓冲区
	                autoCleanupSourceBuffer: true, //自动清除缓存
	                lazyLoad: false,
	              }
	            );
	            this.player.attachMediaElement(videoElement); //放到dom中去
	            this.player.load();//准备完成
	            //!!!!!!这里需要注意，有的时候load加载完成不一定可以播放，要是播放不成功，用settimeout 给下面的this.player.play() 延时几百毫秒再播放
	            this.player.play();//播放
	  				
	          }
	        }, 500);
	      },
	  initScroll() {
	    	  // 给内层盒子设置宽度，不设置宽度的话无法滚动
	    	  // let width = this.goods.length * 60
	    	  // // 如果有外边距，可以这样写。需要去掉最后一个元素的外边距，在后面减一下
	    	  // let width = this.goodslength * (60 + 10) - 10
	  			  let width = 6 * (220 + 10) - 10
	        this.$refs.content.style.width = width + 'px'
	        this.$nextTick(()=>{
	          if(!this.Scroll) {
	            this.Scroll = new Bscroll(this.$refs.wrapper,{
	              click: true,      // 配置允许点击事件
	              scrollX: true,    // 开启横向滚动
	              eventPassthrough: 'vertical'  // 当设置 eventPassthrough 为 'vertical' 的时候，scrollY 无效
	            })
	          } else {
	            this.Scroll.refresh()     // 重新计算 better-scroll，当 DOM 结构发生变化的时确保滚动效果正常
	          }
	        })
	      },
 clickDay(val){
	 let date = val.split('/')
	    if (date[1].length < 2) {
	      date[1] = '0' + date[1]
	    }
	    if (date[2].length < 2) {
	      date[2] = '0' + date[2]
	    }
		let nhgh  = date.join('-')
		this.timdke =  date.join('-')
		this.timdke  = this.timdke  +' ' + '00:00:00'
		console.log(this.timdke )
	    // this.time = date.join('-')
 	this.getList(nhgh) 
 },
// 历史数据触发
	handleCommands(command, row) {
	  switch (command) {
	    case "xinlse":
	      this.xinlse(2);
	      break;
		  case "wihde":
		    this.wihde(1);
		    break;
        case "quse":
          this.quse(0);
          break;

	    default:
	      break;
	  }
	},
  zhuty(val){
  this.loading = true
  this.iszhushou = false
  appointment().then(response => {
  	this.zhuti = response.data
	this.iszhushou = true
    this.loading = false;
  });


  },
  // 历史数据
  xinlse(val){
  	this.tijet = '散客'
     this.kje = val
      this.queryParams.reservatType = 2
     this.getList()
  },
  quse(val){
  	this.tijet = '全部'
     this.kje = val
     this.queryParams.reservatType = undefined
     this.getList()

  },
	  // 饼图
	  getbint(){
		 this.loading = true
		 this.isbtu = false
		 kqdc().then(response => {
		 	this.yuanli = response.data
		   this.isbtu = true
		   this.loading = false;
		 });
	  },
    getren(){
      renlir().then(response => {
      	this.renyle = response.data
        if(this.renyle.total != null){
          this.renyle.total = this.renyle.total  - 0
          if(this.renyle.current != null){
            this.renyle.current = this.renyle.current  - 0
            if(this.renyle.current < this.renyle.total){
              // 昨天小于今天
              this.iszheg = false
            }else{
              this.iszheg = true
            }
            console.log(this.iszhe)
          }
        }
        this.loading = false;
      });
    },
	  benls(val){
		  this.isben = val
		if(val  == 1){
			// 本年
			this.querzhell.type = 1

		}else if(val == 2){
			// 本月
			this.querzhell.type = 2

		}
		this.getzhelist()
	  },

	  // 折线
	  getzhelist(){
		  this.iszhe = false
		  this.loading = true
      // this.querzhell
		 zhelist().then(response => {
			 this.zhedui = response.data
		   this.lineChartDatag = response.data.sevenMap;
		   // this.total = response.total;
		   this.iszhe = true
		   this.loading = false;
		 });
	  },
	  ilw(row,val){
	   this.kje = val
	     // console.log(row)
	     if(row.value == 0){
	         this.queryParamss.reservatType = undefined
	     }else{
	       this.queryParamss.reservatType = row.value
	     }
	   console.log(this.kje)
	    this.queryParamss.pageNum  = 1
	    this.getLists()
	  },
	  // 列表数据
	  getList(val) {
	    this.loading = true;
		this.queryParams.visitDateTime = this.timdke
		this.queryParams.visitType = 1
	    listReservat(this.queryParams).then(response => {
	      this.postList = response.rows;
		  if(this.postList.length == 0){
			 this.postList.push(
			 {visitName:'暂无数据',visitPhone:'暂无数据',visitDateTime:'暂无数据',isReception:'暂无数据'},
			 {visitName:'暂无数据',visitPhone:'暂无数据',visitDateTime:'暂无数据',isReception:'暂无数据'}
			 ) 
		  }
	      this.total = response.total;
	      this.loading = false;
	    });
	  },
    getLists() {
      this.loading = true;
      listNews(this.queryParamss).then(response => {
        this.juelist = response.rows;
        this.totals = response.total;
        this.loading = false;
      });
    },
    getListsd() {
      this.loading = true;
      listNews(this.queryParamssg).then(response => {
        this.tosjlist = response.rows;
        // this.totals = response.total;
        this.loading = false;
      });
    },

    getListsdsdi() {
      this.loading = true;
      listNotice().then(response => {
        if(response.rows.lenrgh != 0){
           this.ijfe = response.rows[0]
           console.log(this.ijfe,3)
        }else{

        }

        // this.totals = response.total;
        this.loading = false;
      });
    },



    goTarget(href) {
      window.open(href, "_blank");
    },
    getTime(e){
		// console.log(e)
      this.timedata=e
    },
	getLocation() {
	      //Toast("如长时间未获取办理区域请手动选择");
	      myBMap.init().then(() => {
	        let that = this;
	        let geolocation = new BMap.Geolocation();
	        // 创建百度地理位置实例，代替 navigator.geolocation
	        geolocation.getCurrentPosition(function (e) {
	          if (this.getStatus() == BMAP_STATUS_SUCCESS) {
	            // 百度 geolocation 的经纬度属性不同，此处是 point.lat 而不是 coords.latitude
	            let point = new BMap.Point(e.point.lng, e.point.lat);
	            let gc = new BMap.Geocoder();
	            gc.getLocation(point, function (rs) {
	              console.log(rs,2);
						that.cent = rs.addressComponents.city,
						that.shitw = rs.addressComponents.district
						that.gtr(that.cent)
	              //<<<<<<<<<<<<<<<<需要的位置信息在这获取
	            });
	          } else {
	            // Toast("定位失败，请手动选择区域或重新定位");
	            this.showloading = false;
	          }
	        });
	      });
	    },
	gtr(val){
				  let nhe={}
				  nhe.appid = 53647117
				  nhe.appsecret = '6ypEVXPh'
				  nhe.version = 'v61'
				  nhe.vue = 1

				  gettq(val).then(response => {
					  console.log(response)
				    let todayWeather = response.data.forecast[0]
				    if (todayWeather !== '') {
				      // 获取温度，取平均值
				      let high = todayWeather.high.split(' ')[1].slice(0, -1)
				      let low = todayWeather.low.split(' ')[1].slice(0, -1)
				      this.local.temperature = (parseInt(low) + parseInt(high)) / 2
				      // 获取天气类型
				      this.local.type = todayWeather.type
				    console.log(response,this.local,19)
					}
				  });
				},
	// 列表跳转更多
	jngsl(){
		this.$router.push({
		  path: '/renyuan',
		})
	},
	handleClick(val){
		this.$router.push({
		  path: '/kaochnr/bjq',
				query: {
					'id':val.investigateDispositionId,
					'name':val.title,
		      		'kcid':val.investigateTableId,
					'endTime':val.endTime,
		      		'isxz':2
				}
		})
	},
  getNowDate() {
             var date = new Date();
             var sign2 = ":";
             var year = date.getFullYear() // 年
             var month = date.getMonth() + 1; // 月
             var day = date.getDate(); // 日
             var hour = date.getHours(); // 时
             var minutes = date.getMinutes(); // 分
             var seconds = date.getSeconds() //秒
             var weekArr = ['日','一', '二', '三', '四', '五', '六' ];
             var week = weekArr[date.getDay()];
              // 给一位数的数据前面加 “0”
             if (month >= 1 && month <= 9) {
                  month = "0" + month;
             }
              if (day >= 0 && day <= 9) {
                  day = "0" + day;
              }
              if (hour >= 0 && hour <= 9) {
               hour = "0" + hour;
               }
             if (minutes >= 0 && minutes <= 9) {
                minutes = "0" + minutes;
              }
             if (seconds >= 0 && seconds <= 9) {
                seconds = "0" + seconds;
            }
        // this.timel = year +
        year = year + ''
        this.nowTime.day =  year.slice(2) ;
        console.log(this.nowTime.day)
		this.timdke = year +'-' + month + '-' + day + ' ' + '00:00:00'
		this.njdes = year +'-' + month + '-' + day 
        this.nowTime.ht=month;
        this.nowTime.hao=day;
        this.nowTime.week=week;
		this.getList()
       },
	khgel(val){
		console.log(2)
		if(val ==1){
			this.$router.push({
			  path: '/reny/renyuan',
			})
		}else if(val == 2){
			this.$router.push({
			  path: '/kaochpz/pzhi',
			})
		}
	},
 isksegh(val){
	 console.log(val)
	 if(val == 0){
		this.$router.push({
		  path: '/fangke/tongj/canguan',
		}) 
	 }else if(val == 1){
		this.$router.push({
		  path: '/menjing/configuration',
		})  
	 }else if(val == 2){
		this.$router.push({
		  path: '/fangke/yuangong',
		})   
	 }else if(val == 3){
		this.$router.push({
		  path: '/fangke/tongj/houtai',
		})  
	 }else if(val == 4){
		this.$router.push({
		  path: '/kaoqin/record',
		})  
	 }else if(val == 5){
		this.$router.push({
		  path: '/system/user',
		})  
	 }
 },
  nhgrt(row,val){
  	this.isdfl = row.value
  	this.queryParamss.type = row.value
  	this.queryParamss.pageNum = 1
  	this.getLists()
  },
  addxa(row){
    console.log(1)
    this.open = true
      getNews(row.newsId).then(response => {
    	  this.form = response.data
      });
  },
  getPass(row) {
    const _this = this
    this.$confirm('是否审核通过', "提醒", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning"
    }).then(function() {
      return setPass({
      visitType: 3,
      reservatId: row.reservatId,
      // xmStatus:row.xmStatus
    })
    }).then(() => {
  	   _this.getList();
      _this.msgSuccess("提交成功");
    })
  },
  infoBtn(row) {
  	const _this = this
  	this.$confirm('是否拒绝', "提醒", {
  	  confirmButtonText: "确定",
  	  cancelButtonText: "取消",
  	  type: "warning"
  	}).then(function() {
  	  return setPass({
  	  visitType: 2,
  	   reservatId: row.reservatId,
  	  // xmStatus:row.xmStatus
  	})
  	}).then(() => {
  	  _this.getList();
  	  _this.msgSuccess("提交成功");
  	})
  
  },
  gengs(val){
	 if(val == '预约审核'){
		this.$router.push({
		  path: '/fangke/tongj/canguan',
		}) 
	 }else if(val=='信息通知'){
		this.$router.push({
		  path: '/notice',
		}) 
	 }else if(val=='园区监控'){
		this.$router.push({
		  path: '/menjing/shebe',
		}) 
	 }
  }
  }
};
</script>
<style  lang="scss" scoped>
	.ite{
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  p{
	    cursor:pointer;
	    margin: 0;
	    font-size: 15px;
	    font-family: PingFang SC;
	    font-weight: 500;
	    color:#666666;
	    padding: 4px 12px;
	    background: #Fff;
	    border-radius: 4px;
	    margin-right: 20px;
		position: relative;
	  }
	  .actt{
	    // background: #fff;
	    // border-bottom: 3px solid #5974E0;
	    // border-radius: 0;
		// border-bottom-right-radius: 4px;
	    color: #fff;
	  }
	  .actt{
		    padding: 0 15px;
		    height: 28px;
			line-height: 28px;
		    background: #3464EB;
		    border-radius: 6px;
	
	  }
	
	}
</style>
<style  lang="scss" >
	.isindesta{
		.el-tabs--left .el-tabs__item.is-left{
			text-align:left;
			font-size:15px;
		}
	}
	
	p{
		margin: 0;
	}
	.ongeg{
		background-color: #fff;
		margin-top: 20px;
		padding: 20px   20px;
		border-radius: 5px;
	}
	.flekd{
		display: flex;
		align-items: center;
		
	}
	.sgone{
		padding: 7px 10px !important;
		font-weight: 500;
		font-size: 13px;
		color: #FFFFFF;
		background-color: red;
		border-radius: 3px;
		margin-left: 10px;
	}
	.wh_content_item .wh_isToday{
		background-color:#fff !important;
		color:#3464EB !important;
	}
	.wh_item_date:hover{
		background-color:#3464EB !important;
		color:#fff !important;
	}
	.wh_content_item .wh_chose_day{
		background-color:#3464EB !important;
		color:#fff !important;
	}
	.jiankdem{
		.el-input--medium .el-input__inner{
			height: 30px;
			background-color: #EEEEEE;
			border:none;
			padding-left: 28px;
		}
	}
	
</style>
<style scoped lang="scss">
	.ihgswqht{
		height: 175px;
	}
	.jiankdem{
		display: flex;
		position: relative;
		margin-left: 20px;
		img{
			position: absolute;
			left: 10px;
			top:50%;
			transform: translateY(-50%);
			width: 10px;
			height: 10px;
			z-index: 99;
		}
		p{
			width: 40px;
			text-align: center;
			height: 30px;
			line-height: 30px;
			color:#fff;
			background: #3464EB;
			border-radius: 6px;
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 12px;
			color: #FFFFFF;
			margin-left: 10px;
		}
	}
	.bgr{
		width: 1610px !important;
	}
	.fijge{
			// width: 110%;
			display: flex;
			display: -webkit-flex; 
			justify-content: space-between;
			.shotw{
				position: relative;
				// width:32%;
				width: 190px;
				height: 140px;
				margin-left: 0;
				margin-right: 20px;
				margin-bottom: 15px;
				img{
					height: 100%;
					cursor:pointer;
				}
			  p{
				  // bottom:-10px;
				  margin: 0;
				  font-weight: bold;
				  font-size: 16px;
				   padding: 5px  10px;
				   cursor:pointer;
			  }
			  .iges{
				position: absolute;
				top:50%;
				left:50%;  
				width:30px;
				height: 30px;
				transform: translate(-50%,-50%);
				cursor:pointer;
			  }
			}
		}
		.shotw{
			position: relative;
			margin-left: -20px;
			margin-right: -20px;
			img{
				width:100%;
				height: 80vh;
			}
		  p{
		     position: absolute;  
			 bottom: 0;
			 left:0;
			 background-color: rgba(0, 0, 0, .5);
			 width: 100%;
			 padding: 13px  5px;
			 color:#fff;
			 font-weight: bold;
			 font-size: 18px;
		  }
		  .psge{
			  background-color: #fff;
			  bottom: -35px;
			  font-family: PingFang SC;
			  font-weight: 800;
			  font-size: 14px !important;
			  color: #161616;
			  display: flex;
			  align-items: center;
			  overflow: hidden;
			  white-space: nowrap;
			  text-overflow: ellipsis;
			  span{
				  width: 10px;
				  height: 10px;
				  background: #3464EB;
				  border-radius: 50%;
				  margin-right: 5px;
			  }
		  }
		  .p{
			  top:0px;
			  height: 60px;
			  margin: 0;
			  padding-left: 20px;
		  }
		}
</style>

<style  lang="scss">
	.wh_content_all{
		background-color: #fff !important;
	}
	.wh_top_changge li{
		color: #161616 !important;
	}
	.wh_jiantou1{
		border-color: #161616 !important;
	}
	.wh_jiantou2{
		border-color: #161616 !important;
	}
	.wh_content{
		.wh_content_item{
			color: #161616 !important;
		}
	}
	
	
  .nhgetka{
    border-bottom: 1px solid #e6e6e6;
  }
  .iuewgt{
    span{
      font-size: 13px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #666666;
      line-height: 24px;
    }
  }
  .la{
  	display:flex;
  	align-items: center;
  	span{
  		width:6px;
  		height: 6px;
  		background-color: #3A9FF1;
  		border-radius: 50%;
  		margin-right: 10px;
  	}
  }
  .nae{
  	white-space: nowrap;
  	text-overflow: ellipsis;
  	overflow: hidden;
  	width:100%;
  }
  .okjeghn{
  	display: flex;
  	align-items: center;
  	justify-content: space-between;
    margin-top: 20px;
  	.okjegh{
  		display: flex;
  		p{
  			margin:0;
  			font-size: 12px;
         background: #CDCDCD;
  			border-radius: 2px;
  			color:#9C9C9C;
  			margin-right: 10px;
  			padding:4px 9px;
        cursor:pointer;
  		}
  		.p{
  			background: rgba(216,236,252,0.8);
  			color:#313B61;
  		}

  	}
  }
  .inher{
    .pjgr{
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #161616;
      margin-bottom: 13px !important;
    }
  	p{

  		// margin-top: 10px !important;
  	}
  	div:nth-child(2){
  		font-size: 14px;
  		font-family: PingFang SC;
  		font-weight: 400;
  		color: #666666;
  		overflow: hidden;
  		text-overflow: ellipsis;
  		display: -webkit-box;
  		-webkit-line-clamp: 1;
  		-webkit-box-orient: vertical;
  	}
  	// div:nth-child(3){
  		p:nth-child(3){
  			font-size: 12px;
  			font-family: PingFang SC;
  			font-weight: 400;
  			color: #AAAAAA;
  			cursor:pointer;
        margin-top:  10px; 		}


  	// }
  }
  .nhwer{
  	text-align: center;
  }
  .nhgrs{
  	position: relative;
  	height: 120px;
  	display: flex;
  	align-items: center;

  	.ujhgh{
  		width:100%;
  		height: 80%;
  	}
  }
  .ujhg{
  	position: absolute;
  	top:5px;
  	left:5px;
  	width: 20px;
  	height: 20px;
  }
  .nhgrsl{
  	border: 1px solid #3A9FF1;
  	box-shadow: 0px 0px 4px 0px #BFBFBF;
  }
  .nhwer:hover{
  	.nhgrs{
  		border: 1px solid #3A9FF1;
  		box-shadow: 0px 0px 4px 0px #BFBFBF;
  	}
  }
  .app-container{
  	background-color: #f3f4f6;
  	padding-top: 10px;
     
  }
  .ntg{
  	background-color: #fff;
  	padding: 20px;
  	border-radius: 5px;
  	.pagination-container{
  		height: 50px;
  	}
  }
  .nghf{
  	background-color: #fff;
  	padding: 5px;
  	border-radius: 5px;
  	margin-bottom: 20px;
  }
  .stuoe{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    p{
      margin: 0;
      margin-right: 10px !important;
    }
    span{
      color:#5974E0 !important;
      font-size: 15px !important;
      font-family: PingFang SC;
      font-weight: 800;
    }
  }
  .flex-col {
    display: flex;
    flex-direction: column;
  }
  .flex-row {
    display: flex;
    flex-direction: row;
  }
  .justify-between {
    display: flex;
    justify-content: space-between;
  }
  .section_5 {
    box-shadow: 0px 0px 9px 0px rgba(117, 117, 117, 0.26);
    background-color: rgba(255, 255, 255, 1);
    border-radius: 6px;
    // height: 230px;
    width: 100%;
    padding-bottom: 20px;
    // position: absolute;
    // left: 204px;
    // top: 92px;
  }
  .box_36 {
    // width: 541px;
    width:100%;
    height: 19px;
    // margin: 30px 0 0 26px;
    padding: 20px 20px;
    margin-bottom: 10px;
  }
  .image_16 {
    width: 193px;
    height: 19px;
  }
  .text_67 {
    // width: 259px;
    height: 16px;
    overflow-wrap: break-word;
    color: rgba(102, 102, 102, 1);
    font-size: 16px;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    line-height: 16px;
   padding: 0 20px;
  }
  .box_37 {
    // width: 494px;
    height: 135px;
    // margin: 25px 0 21px 29px;
    padding: 0 20px;
    margin-top: 15px;
  }
  .box_38 {
    box-shadow: 0px 0px 9px 0px rgba(117, 117, 117, 0.5);
    background-color: rgba(222, 229, 245, 1);
    border-radius: 4px;
    width: 210px;
    height: 134px;
    border: 3px solid rgba(255, 255, 255, 1);
  }
  .box_39 {
    // width: 250px;
    height: 121px;
    // margin-top: 14px;
  }
  .box_40 {
    // width: 148px;
    height: 42px;
  }
  .paragraph_23 {
    // width: 20px;
    height: 40px;
    overflow-wrap: break-word;
    color: rgba(22, 22, 22, 1);
    font-size: 20px;
    // font-family: -;
    font-weight: NaN;
    text-align: left;
    line-height: 24px;
    margin-top: 1px;
  }
  .text_68 {
    // width: 81px;
    height: 42px;
    overflow-wrap: break-word;
    color: rgba(22, 22, 22, 1);
    font-size: 42px;
    // font-family: -;
    font-weight: NaN;
    text-align: left;
    white-space: nowrap;
    line-height: 56px;
    margin-left: 7px;
  }
  .text-wrapper_29 {
    border-radius: 50%;
    height: 30px;
    border: 1px solid rgba(103, 130, 231, 1);
    width: 30px;
    margin: 13px 0 0 10px;
  }
  .text_69 {
    width: 15px;
    height: 15px;
    overflow-wrap: break-word;
    color: rgba(103, 130, 231, 1);
    font-size: 16px;
    font-family: PingFang-SC-Heavy;
    font-weight: 900;
    text-align: left;
    white-space: nowrap;
    line-height: 24px;
    margin: 2px 0 0 6px;
  }
  .text_70 {
    width: 139px;
    height: 16px;
    overflow-wrap: break-word;
    color: rgba(102, 102, 102, 1);
    font-size: 14px;
    font-family: PingFang-SC-Regular;
    font-weight: NaN;
    text-align: left;
    white-space: nowrap;
    line-height: 24px;
    margin: 36px 0 0 4px;
  }
  .text_71 {
    width: 247px;
    height: 16px;
    overflow-wrap: break-word;
    color: rgba(102, 102, 102, 1);
    font-size: 14px;
    font-family: PingFang-SC-Regular;
    font-weight: NaN;
    text-align: left;
    white-space: nowrap;
    line-height: 32px;
    margin: 11px 0 0 3px;
  }
  .align-center {
    display: flex;
    align-items: center;
  }

  .section_6 {
    box-shadow: 0px 0px 9px 0px rgba(117, 117, 117, 0.26);
    background-color: rgba(255, 255, 255, 1);
    border-radius: 6px;
    height: 220px;
    // width: 597px;
    // position: absolute;
    // left: 820px;
    // top: 92px;
  }
  .text-wrapper_30 {
    // width: 162px;
    height: 18px;
    // margin: 30px 0 0 27px;
    padding: 18px 20px;
  }
  .text_72 {
    width: 162px;
    height: 18px;
    overflow-wrap: break-word;
    color: rgba(22, 22, 22, 1);
    font-size: 18px;
    font-family: PingFang-SC-Heavy;
    font-weight: 900;
    text-align: left;
    white-space: nowrap;
    line-height: 24px;
  }
  .box_41 {
    width: 504px;
    height: 160px;
    margin: 7px 0 15px 44px;
  }
  .block_1 {
    height: 160px;
    background: url(../assets/images/lkjd.png)
      100% no-repeat;
    background-size: 100% 100%;
    width: 147px;
  }
  .box_42 {
    height: 138px;

    background: url(../assets/images/lmade.png) -1px
      0px no-repeat;
    background-size: 138px 139px;
    width: 137px;
    margin: 11px 0 0 7px;
  }
  .box_43 {
    width: 137px;
    height: 138px;
    background: url(../assets/images/yuanh.png) -1px -1px
      no-repeat;
    background-size: 138px 139px;
  }
  .text-wrapper_31 {
    width: 56px;
    height: 49px;
    overflow-wrap: break-word;
    font-size: 0;
    font-family: PingFang-SC-Bold;
    font-weight: 700;
    text-align: center;
    line-height: 25px;
    margin: 43px 0 0 41px;
  }
  .paragraph_24 {
    width: 56px;
    height: 49px;
    overflow-wrap: break-word;
    color: rgba(69, 203, 153, 1);
    font-size: 18px;
    font-family: PingFang-SC-Bold;
    font-weight: 700;
    text-align: left;
    line-height: 22px;
  }
  .text_73 {
    width: 56px;
    height: 49px;
    overflow-wrap: break-word;
    color: rgba(22, 22, 22, 1);
    font-size: 25px;
    font-family: PingFang-SC-Heavy;
    font-weight: 900;
    text-align: left;
    line-height: 22px;
  }
  .thumbnail_14 {
    width: 13px;
    height: 13px;
    margin: 90px 2px 0 25px;
  }
  .block_2 {
    width: 334px;
    height: 126px;
    margin-top: 18px;
  }
  .box_44 {
    width: 288px;
    height: 52px;
    margin-left: 23px;
  }
  .text_74 {
    width: 69px;
    height: 28px;
    overflow-wrap: break-word;
    color: rgba(89, 116, 224, 1);
    font-size: 36px;
    font-family: PingFang-SC-Heavy;
    font-weight: 900;
    text-align: left;
    white-space: nowrap;
    line-height: 24px;
  }
  .text_75 {
    width: 15px;
    height: 14px;
    overflow-wrap: break-word;
    color: rgba(22, 22, 22, 1);
    font-size: 14px;
    font-family: PingFang-SC-Regular;
    font-weight: NaN;
    text-align: left;
    white-space: nowrap;
    line-height: 14px;
    margin: 14px 0 0 16px;
  }
  .image_17 {
    width: 1px;
    height: 30px;
    margin: 22px 0 0 45px;
  }
  .text_76 {
    width: 64px;
    height: 28px;
    overflow-wrap: break-word;
    color: rgba(49, 59, 97, 1);
    font-size: 36px;
    font-family: PingFang-SC-Heavy;
    font-weight: 900;
    text-align: left;
    white-space: nowrap;
    line-height: 24px;
    margin-left: 47px;
  }
  .text_77 {
    width: 15px;
    height: 14px;
    overflow-wrap: break-word;
    color: rgba(22, 22, 22, 1);
    font-size: 14px;
    font-family: PingFang-SC-Regular;
    font-weight: NaN;
    text-align: left;
    white-space: nowrap;
    line-height: 14px;
    margin: 14px 0 0 16px;
  }
  .text-wrapper_32 {
    width: 275px;
    height: 14px;
    margin: 7px 0 0 31px;
  }
  .text_78 {
    width: 83px;
    height: 14px;
    overflow-wrap: break-word;
    color: rgba(145, 145, 145, 1);
    font-size: 14px;
    font-family: PingFang-SC-Regular;
    font-weight: NaN;
    text-align: left;
    white-space: nowrap;
    line-height: 14px;
  }
  .text_79 {
    width: 84px;
    height: 14px;
    overflow-wrap: break-word;
    color: rgba(145, 145, 145, 1);
    font-size: 14px;
    font-family: PingFang-SC-Regular;
    font-weight: NaN;
    text-align: left;
    white-space: nowrap;
    line-height: 14px;
  }
  .box_45 {
    background-color: rgba(137, 213, 92, 0.2);
    border-radius: 4px;
    // width: 334px;
    height: 30px;
    margin-top: 23px;
    margin-right: 20px  }
  .box_46 {
    background-color: rgba(69, 203, 153, 1);
    border-radius: 50%;
    width: 10px;
    height: 10px;
    margin: 10px 5px 0 23px;
  }
  .text-wrapper_33 {
    width: 252px;
    height: 14px;
    overflow-wrap: break-word;
    font-size: 0;
    font-family: PingFang-SC-Regular;
    font-weight: NaN;
    text-align: left;
    white-space: nowrap;
    line-height: 14px;
    margin: 3px 31px 0 0;
  }
  .text_80 {
    width: 252px;
    height: 14px;
    overflow-wrap: break-word;
    color: rgba(102, 102, 102, 1);
    font-size: 14px;
    font-family: PingFang-SC-Regular;
    font-weight: NaN;
    text-align: left;
    white-space: nowrap;
    line-height: 24px;
  }
  .text_81 {
    width: 252px;
    height: 14px;
    overflow-wrap: break-word;
    color: rgba(69, 203, 153, 1);
    font-size: 14px;
    font-family: PingFang-SC-Bold;
    font-weight: 700;
    text-align: left;
    white-space: nowrap;
    line-height: 24px;
  }
  .text_82 {
    width: 252px;
    height: 14px;
    overflow-wrap: break-word;
    color: rgba(102, 102, 102, 1);
    font-size: 14px;
    font-family: PingFang-SC-Regular;
    font-weight: NaN;
    text-align: left;
    white-space: nowrap;
    line-height: 24px;
  }

.box_2 {
  box-shadow: 0px 0px 9px 0px rgba(117, 117, 117, 0.26);
  background-color: rgba(255, 255, 255, 1);
  border-radius: 6px;
  width: 100%;
  height: 70px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 0 20px;
  // margin-top: 10px;
  margin-bottom: 15px;
}
.label_1 {
  width: 42px;
  height: 42px;
  margin-right: 20px;
  // margin: 14px 0 0 27px;
}
.box_3 {
  background-color: rgba(89, 116, 224, 1);
  border-radius: 50%;
  width: 8px;
  height: 8px;
  // margin: 31px 0 0 20px;
}
.text_1{
 height: 15px;
 font-size: 15px;
 font-family: PingFang SC;
 font-weight: bold;
 color: #161616;
 line-height: 15px;
}
.text_2{
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #A9B5C4;
}



.text_8 {
  width: 117px;
  height: 14px;
  overflow-wrap: break-word;
  color: rgba(158, 170, 225, 1);
  font-size: 14px;
  font-family: PingFang-SC-Bold;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
  line-height: 24px;
  margin: 29px 0 0 29px;
}
.image-text_1 {
  width: 149px;
  height: 29px;
  margin: 21px 0 22px 29px;
}
.image_1 {
  width: 23px;
  height: 19px;
  margin-top: 4px;
}
.text-group_1 {
  width: 112px;
  height: 29px;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 30px;
  font-family: SourceHanSansSC-Bold;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
  line-height: 24px;
}

.box_9 {
  width: 100%;
  height: 324px;
  margin-top: 20px;
}
.group_5 {
  width: 100%;
  height: 115px;
  background: url(../assets/images/pic_httj_cgtj_bg.png)
    100% no-repeat;
  background-size: 100% 100%;
}
.text_8 {
  width: 117px;
  height: 14px;
  overflow-wrap: break-word;
  color: rgba(158, 170, 225, 1);
  font-size: 14px;
  font-family: PingFang-SC-Bold;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
  line-height: 24px;
  margin: 29px 0 0 29px;
}
.image-text_1 {
  width: 149px;
  height: 29px;
  margin: 21px 0 22px 29px;
}
.image_1 {
  width: 23px;
  height: 19px;
  margin-top: 4px;
}
.text-group_1 {
  width: 112px;
  height: 29px;
  overflow-wrap: break-word;
  color: rgba(255, 255, 255, 1);
  font-size: 30px;
  font-family: SourceHanSansSC-Bold;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
  line-height: 24px;
}
.group_6 {
  // width: 346px;
  height: 32px;
  margin-top: 39px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.box_10 {
  background-color: rgba(89, 116, 224, 1);
  width: 9px;
  height: 30px;
}
.text_9 {
  // width: 134px;
  width: 60%;
  height: 16px;
  overflow-wrap: break-word;
  color: rgba(174, 180, 214, 1);
  font-size: 16px;
  font-family: PingFang-SC-Heavy;
  font-weight: 900;
  text-align: left;
  white-space: nowrap;
  line-height: 16px;
  // margin: 7px 0 0 22px;
}
.text-wrapper_1 {
  // width: 98px;
 width: 30%;
 text-align: right;
  height: 25px;
  overflow-wrap: break-word;
  font-size: 0;
  font-family: SourceHanSansSC-Heavy;
  font-weight: 900;
  text-align: right;
  white-space: nowrap;
  line-height: 25px;
  // margin: 7px 0 0 83px;
}
.text_10 {
  width: 98px;
  height: 25px;
  overflow-wrap: break-word;
  color: rgba(31, 32, 41, 1);
  font-size: 26px;
  font-family: SourceHanSansSC-Heavy;
  font-weight: 900;
  text-align: left;
  white-space: nowrap;
  line-height: 25px;
}
.text_11 {
  width: 98px;
  height: 25px;
  overflow-wrap: break-word;
  color: rgba(31, 32, 41, 1);
  font-size: 16px;
  font-family: PingFang-SC-Heavy;
  font-weight: 900;
  text-align: left;
  white-space: nowrap;
  line-height: 25px;
}
.text_12 {
  width: 98px;
  height: 25px;
  overflow-wrap: break-word;
  color: rgba(169, 181, 196, 1);
  font-size: 16px;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 25px;
}
.text_13 {
  width: 98px;
  height: 25px;
  overflow-wrap: break-word;
  color: rgba(31, 32, 41, 1);
  font-size: 16px;
  font-family: PingFang-SC-Heavy;
  font-weight: 900;
  text-align: left;
  white-space: nowrap;
  line-height: 25px;
}
.image_2 {
  // width: 345px;
  height: 1px;
  margin-top: 17px;
}
.group_7 {
  width: 100%;
  height: 30px;
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.section_2 {
  background-color: rgba(242, 174, 85, 1);
  width: 9px;
  height: 30px;
}
.text_14 {
  // width: 134px;
  width:60%;
  height: 16px;
  overflow-wrap: break-word;
  color: rgba(174, 180, 214, 1);
  font-size: 16px;
  font-family: PingFang-SC-Heavy;
  font-weight: 900;
  text-align: left;
  white-space: nowrap;
  line-height: 16px;
  // margin: 7px 0 0 22px;
}
.text-wrapper_2 {
  // width: 74px;
  width: 30%;

  height: 21px;
  overflow-wrap: break-word;
  font-size: 0;
  font-family: SourceHanSansSC-Heavy;
  font-weight: 900;
  text-align: right;
  white-space: nowrap;
  line-height: 21px;
  // margin: 7px 0 0 107px;
}
.text_15 {
  width: 74px;
  height: 21px;
  overflow-wrap: break-word;
  color: rgba(31, 32, 41, 1);
  font-size: 26px;
  font-family: SourceHanSansSC-Heavy;
  font-weight: 900;
  text-align: left;
  white-space: nowrap;
  line-height: 21px;
}
.text_16 {
  width: 74px;
  height: 21px;
  overflow-wrap: break-word;
  color: rgba(31, 32, 41, 1);
  font-size: 16px;
  font-family: PingFang-SC-Heavy;
  font-weight: 900;
  text-align: left;
  white-space: nowrap;
  line-height: 21px;
}
.text_17 {
  width: 74px;
  height: 21px;
  overflow-wrap: break-word;
  color: rgba(169, 181, 196, 1);
  font-size: 16px;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 21px;
}
.text_18 {
  width: 74px;
  height: 21px;
  overflow-wrap: break-word;
  color: rgba(31, 32, 41, 1);
  font-size: 16px;
  font-family: PingFang-SC-Heavy;
  font-weight: 900;
  text-align: left;
  white-space: nowrap;
  line-height: 21px;
}
.image_3 {
  // width: 345px;
  height: 1px;
  margin-top: 19px;
}
.group_8 {
  width: 100%;
  height: 30px;
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.group_9 {
  background-color: rgba(113, 200, 212, 1);
  width: 9px;
  height: 30px;
}
.text_19 {
 width:60%;
 height: 16px;
 overflow-wrap: break-word;
 color: rgba(174, 180, 214, 1);
 font-size: 16px;
 font-family: PingFang-SC-Heavy;
 font-weight: 900;
 text-align: left;
 white-space: nowrap;
 line-height: 16px;
}
.text-wrapper_3 {
  // width: 74px;
  width: 30%;
  height: 21px;
  overflow-wrap: break-word;
  font-size: 0;
  font-family: SourceHanSansSC-Heavy;
  font-weight: 900;
  text-align: right;
  white-space: nowrap;
  line-height: 24px;
  // margin: 7px 0 0 107px;
}
.text_20 {
  width: 74px;
  height: 21px;
  overflow-wrap: break-word;
  color: rgba(31, 32, 41, 1);
  font-size: 26px;
  font-family: SourceHanSansSC-Heavy;
  font-weight: 900;
  text-align: left;
  white-space: nowrap;
  line-height: 24px;
}
.text_21 {
  width: 74px;
  height: 21px;
  overflow-wrap: break-word;
  color: rgba(31, 32, 41, 1);
  font-size: 16px;
  font-family: PingFang-SC-Heavy;
  font-weight: 900;
  text-align: left;
  white-space: nowrap;
  line-height: 24px;
}
.text_22 {
  width: 74px;
  height: 21px;
  overflow-wrap: break-word;
  color: rgba(169, 181, 196, 1);
  font-size: 16px;
  font-family: PingFang-SC-Medium;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  line-height: 24px;
}
.text_23 {
  width: 74px;
  height: 21px;
  overflow-wrap: break-word;
  color: rgba(31, 32, 41, 1);
  font-size: 16px;
  font-family: PingFang-SC-Heavy;
  font-weight: 900;
  text-align: left;
  white-space: nowrap;
  line-height: 24px;
}




.serhome{
  position: relative;
  padding-top: 10px;
  p{margin: 0;padding:  0 ;}
   background-color: #f0f2f5;overflow: hidden;
   padding:0 20px;
   .ser_top{
     // background: #FFFFFF;border-radius: 6px;padding:22px 23px;
     margin-bottom: 16px;
      .ser_tit{font-size: 17px;font-weight: bold;color: #161616;margin-bottom: 22px;}
	  .ser_tlist:hover{
		  cursor:pointer
	  }
      .ser_tlist{  background: #F5F6F8;border-radius: 5px;padding: 18px 29px;display: flex;align-items: center;
        .limg{width: 23px;height: 25px;flex: 0 0 auto;margin-right: 18px;}
        .rimg{width: 8px;height: 13px;flex: 0 0 auto;margin-left: 18px;}
        .ser_txt{flex: 1;
            div{font-size: 15px;font-weight: bold;color: #161616;position: relative;display: inline-block;}
            p{font-size: 15px;font-weight: 500;color: #AAAAAA;margin-top: 6px;}
            span{width: 10px;height: 10px;background: #F64144;border-radius: 50%;position: absolute;right: -5px;top: 0;}
        }
      }
   }
  .sercount{background: #FFFFFF;border-radius: 6px;padding:20px 24px 35px;

    .serc_num{padding: 15px;
      .serc_numa{font-size: 15px;font-weight: 500;color: #AAAAAA;margin-bottom: 16px;}
      .serc_numb{font-size: 23px;color: #161616;
        span{font-size: 15px;padding-left: 6px;}
      }
    }
    .serc_charts{
      .serc_day{position: absolute;right: 0;top: 16px;display: flex;align-items: center;z-index: 2;cursor: pointer;
        div{padding: 0 14px;font-size: 15px;font-weight: bold;color: #AAAAAA;
          &.act{color: #04BFA1;}
        }
        span{width: 1px;height: 13px;background: #DADADA;display: block;flex: 0 0 auto;}
      }
    }
  }
  .serc_ra{
    background: #FFFFFF;border-radius: 6px;padding:0 10px 0 0;margin-bottom: 16px;display: flex;align-items: center;
    .serc_rat{width: 85px;height: 80px;}
    .line{width: 1px;height: 19px;background: #DADADA;
    }
    .serc_rad{margin-left: 9px;flex: 1;
      div{font-size: 15px;font-weight: 500;color: #161616;
        span{font-family: BankGothicBT-Medium;}
      }
      p{font-size: 15px;font-weight: 500;color: #666666;}
    }
    .serc_raw{display: flex;flex-direction: column;align-items: center;padding: 0 4px;min-width: 64px;box-sizing:border-box;flex:0 0 auto;
      img{width: 44px;height: 35px;margin-bottom: 7px;}
      p{font-size: 13px;font-weight: 500;color: #161616;}
    }
  }
  .serc_rb{
    background: #FFFFFF;border-radius: 6px;padding: 20px 22px 3px;
    padding-bottom: 30px;
    .serc_rl{background: #F5F6F8;
border-radius: 8px;padding: 15px 15px 10px;margin-bottom: 17px;
      div{font-size: 15px;font-weight: 500;color: #666666;margin-bottom: 5px;}
      p{font-size: 23px;font-weight: bold;
color: #000000;
        span{font-size: 15px;}
}
    }
  }
  // 头
  .serc_top{display: flex;align-items: center;margin-bottom: 15px;
    .serc_topa{font-size: 17px;font-weight: bold;color: #161616;flex: 1;margin-right: 4px;
      span{font-size: 13px;color: #666666;}
    }
    .serc_topb{font-size: 13px;font-weight: 500;color: #161616;flex: 0 0 auto;cursor: pointer;
      img{width: 13px;height: 13px;margin-left: 10px;}
    }
  }
  .ser_table{background: #FFFFFF;border-radius: 6px;padding:20px 23px;margin-top: 16px;
    .tabst{font-size: 13px;color: #161616;
      span{width: 9px;height: 9px;border-radius: 50%;display: inline-block;margin-right: 5px;
        &.ta{background: #AAAAAA;}
        &.tb{background: #F64144;}
        &.tc{background: #04BFA1;}
      }
    }
    .el-table{
      .el-table__cell{border-bottom: none !important;}
      th{color: #161616 !important;}
    }

    .el-button{height: 23px;padding: 0 15px;line-height: 21px;}
    // .el-button--success{border-color: #04BFA1;color: #04BFA1;background-color: rgba(4, 191, 161, 0.06);
    // &.is-plain{background-color: #04BFA1;color: #ffffff;}
    // }
  }
}










.nhgel{
  height: 170px;
  background-color: #313b61;
  width: 100%;
  position: absolute;
  top:0;
  left:0;
  z-index: 0;
}


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