ahyd_DIB/pages/examine/index.vue
2023-08-18 18:33:55 +08:00

1705 lines
72 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="main">
<view class="heard">
<image class="headerBg" src="https://eshangtech.com/ShopICO/ahyd-BID/examine/bg.png"></image>
<view class="contentHeard">
<!-- 顶部标题 -->
<view class="top" :style="{height:menu.bottom+'px'}">
<view class="titleModule" :style="{height:(menu.bottom-menu.top)+'px'}">
<image @click="handleBack" class="img" src="https://eshangtech.com/ShopICO/ahyd-BID/examine/leftArrowWhite.svg"></image>
<text class="title">考评考核</text>
</view>
</view>
<view :style="{height:menu.bottom+'px'}">
</view>
<!-- 选择片区 -->
<div class="picker">
<div class="selectService" @click="handleShowPopup(1)">
<image class="img" src="https://eshangtech.com/ShopICO/ahyd-BID/examine/fixed.svg"></image>
<view class="select">
<view class="name">{{selectAreaName}}</view>
<p class="area">片区</p>
<div style="width: 24px;height: 12px"></div>
<image class="rightArrow" src="https://eshangtech.com/ShopICO/ahyd-BID/examine/headMore.svg"></image>
</view>
</div>
</div>
<!-- 选择月份 -->
<view class="monthTabs">
<scroll-view class="big" :show-scrollbar="false" scroll-with-animation scroll-x="true" enable-flex :scrollIntoView="current" >
<div :id="'item'+item.value" :class="selectMonth===item.value?'monthItem selectItem':'monthItem'" v-for="(item,index) in monthList" :key="index" @click="handleSelectMonth(item.value)">{{item.label}}</div>
</scroll-view>
</view>
</view>
</view>
<view class="content">
<view class="date" v-if="selectTab!==1">
<scroll-view class="dateList" :show-scrollbar="false" scroll-with-animation scroll-x="true" enable-flex :scrollIntoView="currentDate">
<view :id="'item'+item.value" :class="selectDate===item.value?'dateItem selectDateItem':'dateItem'" v-for="(item,index) in dateList" :key="index" @click="handleChangeDate(item.value)">{{item.label}}</view>
</scroll-view>
</view>
<view style="height: 50px">
<view class="tab">
<view :class="selectTab===item.value?'tabItem selectItem':'tabItem'" v-for="(item,index) in tabList" :key="index" @click="handleChangeTab(item.value)">{{item.label}}</view>
</view>
</view>
<scroll-view scroll-y="true">
<view v-if="selectTab===1" class="serviceList" style="height:calc(100vh - 260px);">
<view v-if="serviceList.length>0">
<view class="serviceItem" v-for="(item,index) in serviceList" :key="index" @click="handleOpenDetail(item)">
<view class="itemTitle">
<span class="title">{{item.SERVERPART_NAME}}</span>
<span :class="item.EXAMINE_MQUARTER!=='0'?'secondUnit':'unit'">{{item.EXAMINE_MQUARTER!=='0'?item.EXAMINE_MQUARTER==='1'?'一'+'季度':item.EXAMINE_MQUARTER==='2'?'二'+'季度':item.EXAMINE_MQUARTER==='3'?'三'+'季度':'四' + '季度':'月度'}}</span>
</view>
<view class="detail" v-for="(subItem,subIndex) in item.list" :key="subIndex">
<view class="detailTop">
<view class="left">
<image class="icon" :src="subItem.REGION_NAME==='南' || subItem.REGION_NAME==='北'?'https://eshangtech.com/ShopICO/ahyd-BID/examine/NS.svg':'/static/images/examine/ES.svg'"></image>
<span class="type">{{subItem.REGION_NAME}}区</span>
</view>
<view class="right">
{{subItem.SERVERPARTList[0].EXAMINE_SCORE }}
<text class="unit">分</text>
</view>
</view>
<view class="detailMessage">
<view class="message" style="margin-bottom: 4px;display: flex;justify-content: space-between">
<div class="box">
<image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/examine/time.svg"></image>
<span class="value">{{subItem.SERVERPARTList[0].EXAMINE_DATE}}</span>
</div>
<div style="display: inline-block;width: 40px;height: 16px;display: flex;justify-content: flex-end" @click="handleShowPopup(4,subItem)" >
<image class="moreIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/rightArrow.svg"/>
</div>
</view>
<view class="message">
<image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/examine/user.svg"></image>
<span class="value">{{subItem.SERVERPARTList[0].EXAMINE_PERSON}}</span>
</view>
</view>
</view>
</view>
</view>
<view v-if="serviceList.length>0" class="load-more" style="height: 20px">
<text>{{'——— 我是有底线的 ———'}}</text>
</view>
<view class="noData" v-else>
<image class="img" src="https://eshangtech.com/ShopICO/ahyd-BID/examine/noData.svg"></image>
<p class="text">暂无数据</p>
</view>
</view>
<view v-if="selectTab===2" class="serviceList" style="height:calc(100vh - 300px);">
<view v-if="inspectionList.length && inspectionList.length>0 ">
<view class="dailyInspection" v-for="(item,index) in inspectionList" :key="index">
<view class="itemTitle">
<span class="title">{{item.SERVERPART_NAME}}</span>
<view class="more" @click="handleShowPopup(2,item)">
<span class="moreText">更多记录</span>
<image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/rightArrow.svg"></image>
</view>
</view>
<view class="detail" v-for="(subItem,subIndex) in item.list" :key="subIndex">
<view class="detailTop">
<view class="left">
<image class="icon" :src="subItem.REGION_NAME==='南' || subItem.REGION_NAME==='北'?'https://eshangtech.com/ShopICO/ahyd-BID/examine/NS.svg':'/static/images/examine/ES.svg'" />
<span class="type">{{subItem.REGION_NAME}}区</span>
<span class="number">({{subItem.SERVERPARTList.length}})</span>
</view>
<image class="right" :src="subItem.warning===true?'https://eshangtech.com/ShopICO/ahyd-BID/examine/success.svg':'/static/images/examine/warning.svg'"></image>
<!-- <image v-if="subItem.SERVERPARTList[0].COMPLETE_STATE === 0" class="right" src="/static/images/examine/warning.svg"></image>-->
</view>
<view class="detailMessage">
<view class="person">
<p class="value">{{subItem.SERVERPARTList[0].PATROL_PERSON}}</p>
<p class="label">检查人</p>
</view>
<view class="person">
<p class="value">{{subItem.SERVERPARTList[0].PATROL_DATE}}</p>
<p class="label">检查日期</p>
</view>
<view class="person">
<p class="value">{{subItem.SERVERPARTList[0].PATROL_ROUTE}}</p>
<p class="label">路线</p>
</view>
<view class="person">
<image v-if="subItem.SERVERPARTList[0].PATROL_IMG" class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/examine/haveImg.svg"></image>
<p v-if="subItem.SERVERPARTList[0].PATROL_IMG" class="label">图片</p>
</view>
</view>
</view>
</view>
</view>
<view v-if="inspectionList.length && inspectionList.length>0" class="load-more" style="height: 20px">
<text>{{'——— 我是有底线的 ———'}}</text>
</view>
<view class="noData" v-else>
<image class="img" src="https://eshangtech.com/ShopICO/ahyd-BID/examine/noData.svg"></image>
<p class="text">暂无数据</p>
</view>
</view>
<view v-if="selectTab===3" class="serviceList" style="height:calc(100vh - 300px);">
<view v-if="meetDetailList.length>0">
<view class="meeting" v-for="(item,index) in meetDetailList">
<p class="title">{{item.SERVERPART_NAME}}</p>
<view class="meetContent">
<view class="left">
<image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/examine/personList.svg"></image>
<span class="text">会议内容</span>
</view>
<view class="right">
<image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/examine/place.svg"></image>
<span class="text">{{item.list[0].SERVERPARTList[0].MEETING_PLACE}}</span>
</view>
</view>
<view class="noDataItem" v-if="!item.list[0].SERVERPARTList[0].MEETING_PERSONS && !item.list[0].SERVERPARTList[0].MEETING_CONTENT">
<image class="img" src="https://eshangtech.com/ShopICO/ahyd-BID/examine/noData.svg"></image>
<p class="text">暂无会议内容</p>
</view>
<view v-else>
<view class="detail">
<view class="message" style="margin-bottom: 6px">
<image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/examine/time.svg"></image>
<span class="value">{{item.list[0].SERVERPARTList[0].MEETING_DATE}}</span>
</view>
<view class="message" style="margin-bottom: 6px" @click="handleShowPopup(3,item)">
<image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/examine/user.svg"></image>
<span class="value" v-if="item.list[0].SERVERPARTList[0].MEETING_PERSONS.length>16">{{item.list[0].SERVERPARTList[0].MEETING_PERSONS.slice(0,16)}}{{`等${10}人`}}</span>
<image class="more" v-if="item.list[0].SERVERPARTList[0].MEETING_PERSONS.length>16" src="https://eshangtech.com/ShopICO/ahyd-BID/examine/headMore.svg"></image>
<span class="value" v-if="item.list[0].SERVERPARTList[0].MEETING_PERSONS.length<=16">{{item.list[0].SERVERPARTList[0].MEETING_PERSONS}}</span>
</view>
<view class="other" @click="handleShowPopup(3,item)">
<image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/examine/detail.svg"></image>
<span class="value" v-if="item.list[0].SERVERPARTList[0].MEETING_CONTENT.length>40">{{item.list[0].SERVERPARTList[0].MEETING_CONTENT}}</span>
<image class="more" v-if="item.list[0].SERVERPARTList[0].MEETING_CONTENT.length>40" src="https://eshangtech.com/ShopICO/ahyd-BID/examine/headMore.svg"></image>
<span class="value" v-if="item.list[0].SERVERPARTList[0].MEETING_CONTENT.length<=40">{{item.list[0].SERVERPARTList[0].MEETING_CONTENT}}</span>
</view>
</view>
</view>
</view>
</view>
<view v-if="meetDetailList.length>0" class="load-more" style="height: 20px">
<text>{{'——— 我是有底线的 ———'}}</text>
</view>
<view class="noData" v-else>
<image class="img" src="https://eshangtech.com/ShopICO/ahyd-BID/examine/noData.svg"></image>
<p class="text">暂无数据</p>
</view>
</view>
</scroll-view>
</view>
<uniPopup type="bottom" :round="true" :showIndex="1" :show="showPop" @hidePopup="hidePopup">
<view class="popup" :style="{height:selectTab!==2?'60vh':'78vh'}">
<view class="top">
<text class="popupTitle">{{ selectTab===1?popupShow===4?'':'选择片区':selectTab===2?`${popupServiceName}`:'会议内容' }}</text>
<image @click="hidePopup" class="close" src="https://eshangtech.com/ShopICO/ahyd-BID/examine/close.svg"></image>
</view>
<view class="areaList" v-if="popupShow===1">
<view @click="handleChangeArea(item)" :class="selectAreaValue===item.value?'selectItem item':'item'" v-for="(item,index) in areaList" :key="index">{{item.label}}<text class="unit">片区</text></view>
</view>
<view class="serviceList" v-if="popupShow===2">
<view class="tab">
<view :class="popupTabSelect===item.value?'tabItem selectTabItem':'tabItem'" v-for="(item,index) in popupTab" :key="index" @click="handleChangePopupTab(item.value)">{{item.label}}</view>
</view>
<scroll-view scroll-y="true" class="assessmentTable" v-if="popupServiceShowList.DetailList && popupServiceShowList.DetailList.length>0">
<view class="bigBox" v-for="(item,index) in popupServiceShowList.DetailList" :key="index" >
<view class="assessmentItem" @click="handleNoShow(item)" :style="{borderBottomWidth:!item.showChild?'0px':'1px'}">
<view class="left">{{item.PATROL_POSITION}}</view>
<view class="right">
<image :style="{transform:item.showChild?'':'rotate(-90deg)'}" class="more" src="https://eshangtech.com/ShopICO/ahyd-BID/newCommercial/arrow_bottom.svg"/>
</view>
</view>
<view v-if="item.showChild">
<view class="smallItem" v-for="(subItem,subIndex) in item.PositionDetailList" :key="subIndex" :style="{borderBottomWidth:subIndex===item.PositionDetailList.length-1 ?'0px':'2px'}" @click="handleShowImgDetail(subItem)">
<view class="top">
<view class="time">{{subItem.PATROL_DATE.split(' ')[1]}}</view>
<view class="label">检查人: <span class="name">{{subItem.PATROL_PERSON}}</span></view>
</view>
<view class="itemBox" v-if="subItem.PATROL_SITUATION" @click="changeDetail(subItem)">
<view class="detailItem">
<view class="detailValue">
<view class="detailText">{{ subItem.PATROL_SITUATION || "-"}}</view>
</view>
<view class="detailLabel">情况及问题</view>
</view>
<view class="detailItem">
<view class="detailValue">{{ subItem.RECTIFICATION_PERIOD || "-" }}</view>
<view class="detailLabel">整改期限</view>
</view>
<view class="detailItem">
<view class="detailValue">{{ subItem.RECTIFICATION_RESULT || "-" }}</view>
<view class="detailLabel">整改结果</view>
</view>
</view>
</view>
</view>
</view>
</scroll-view>
<view class="list" v-else>
<view class="item" v-for="(item,index) in popupServiceShowList.SERVERPARTList" :key="index">
<view class="person">
<p class="value">{{item.PATROL_PERSON}}</p>
<p class="label">检查人</p>
</view>
<view class="person">
<p class="value">{{item.PATROL_DATE}}</p>
<p class="label">检查日期</p>
</view>
<view class="person">
<p class="value">{{item.PATROL_ROUTE}}</p>
<p class="label">路线</p>
</view>
<view class="person">
<image v-if="item.PATROL_IMG && item.PATROL_IMG.length>0" class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/examine/haveImg.svg"></image>
<p v-if="item.PATROL_IMG && item.PATROL_IMG.length>0" class="label">图片</p>
</view>
</view>
</view>
</view>
<view class="meetList" v-if="popupShow===3">
<view class="message" style="margin-bottom: 8px">
<image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/examine/time.svg"></image>
<span class="value">{{popupMeetDetail.MEETING_DATE}}</span>
</view>
<view class="message" style="margin-bottom: 8px" >
<image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/examine/user.svg"></image>
<span class="value" >{{popupMeetDetail.MEETING_PERSONS}}</span>
</view>
<view class="message">
<image class="icon" src="https://eshangtech.com/ShopICO/ahyd-BID/examine/detail.svg"></image>
<span class="value">{{popupMeetDetail.MEETING_CONTENT}}</span>
</view>
</view>
<view class="examineList" v-if="popupShow===4">
<scroll-view scroll-y="true" style="height: calc(60vh - 40px)">
<view class="examineItem" v-for="(item,index) in examineList" :key="index">
<view class="itemTop">{{item.REGION_NAME}}<span style="margin-left: 4px">(<span style="color: red">{{`${item.mark}`}}</span>)</span></view>
<div class="itemMessage" v-for="(subItem,subIndex) in item.SERVERPARTList" :key="subIndex" @click="handleChangeChild(subItem)">
{{subItem.EXAMINE_CONTENT}}<span style="margin-left: 4px">(<span style="color: red">{{subItem.DEDUCTION_SCORE}}</span>)</span>
<view class="childItem" v-if="subItem.showChild">
<span>{{subItem.DEDUCTION_REASON}}</span>
<span>(<span style="color: red">{{subItem.DEDUCTION_SCORE}}</span>;</span>
<span style="margin-left: 4px">备注: {{subItem.EXAMINEDETAIL_DESC}})</span>
<div class="imgList">
<image v-for="(imgItem,imgIndex) in subItem.imgList" :key="imgIndex" class="img" :src="imgItem" :data-src="imgItem" @click.stop="previewImage($event,subItem)"></image>
</div>
</view>
</div>
</view>
</scroll-view>
</view>
</view>
</uniPopup>
<uniPopup type="bottom" :round="true" :showIndex="2" :show="showImg" @hidePopup="hideShowImg" style="z-index: 1001!important;">
<view class="previewImg">
<view class="top">
<text class="popupTitle"></text>
<image @click="hideShowImg" class="close" src="https://eshangtech.com/ShopICO/ahyd-BID/examine/close.svg"></image>
</view>
<view class="content">
<view class="contentTitle">整改前</view>
<image class="img" :src="showImgUrl.PATROLDETAIL_URL" @click="previewShowImage($event,showImgUrl)"/>
<view class="contentTitle" v-if="showImgUrl.PATROLDEAL_URL">整改后</view>
<image v-if="showImgUrl.PATROLDEAL_URL" class="img" :src="showImgUrl.PATROLDEAL_URL" @click="previewShowImage($event,showImgUrl)"/>
<view class="contentTitle" v-if="!showImgUrl.PATROLDEAL_URL">暂未整改完成</view>
</view>
</view>
</uniPopup>
</view>
</template>
<script>
import request from '@/util/index.js'
import uniPopup from '@/components/uni-popup'
import Store from "../../store/store";
export default {
components:{
uniPopup
},
data(){
return {
searchTime:'',// 查询的时间默认是拿首页的时间
lastDay:'',// 首页的时间
monthList:[{label:'1月',value:'01'},{label:'2月',value:'02'},{label:'3月',value:'03'},{label:'4月',value:'04'},{label:'5月',value:'05'},{label:'6月',value:'06'},{label:'7月',value:'07'},
{label:'8月',value:'08'},{label:'9月',value:'09'},{label:'10月',value:'10'},{label:'11月',value:'11'},{label:'12月',value:'12'}],
selectMonth:0,
current:'',
menu:{},
statusBarHeight:'',
showPop:false,
showImg:false,// 整改图片的弹出
areaList:[],// 片区列表
selectAreaValue:'',// 选择的片区value
selectAreaName:'',// 选择的片区名字
tabList:[{label:'考核管理',value:1},{label:'日常巡检',value:2},{label:'晨会管理',value:3}],// tab选项卡
selectTab:1,// 选中的tab选项卡
serviceList:[],// 服务区列表
inspectionList:[],// 日常巡检列表
meetDetailList:[],// 晨会管理列表
scrollTop:0,// 页面整体滚动了多少
windowHeight:0,// 页面高度
dateList:[],// 日历滚动条
selectDate:'',// 当前选中的日期
currentDate:'',// 当前选中的月份
popupShow:1,
popupTab:[],// 弹出框中的选项卡
popupTabSelect:0,// 选中的弹出框选项卡
popupServiceList:[],// tab选中第二个的时候的点击更多记录全部表单
popupServiceShowList:[],// 显示的表单内容
popupServiceName:'',// 点击更多记录的表单名称
popupMeetDetail:{},// 弹出框的会议详情内容
come:'',// 来自首页还是用户页
examineList:[],
showImgUrl:{},// 展示的图片地址
queryTime:'',// 传入的时间
}
},
onLoad(query){
console.log('query',query)
this.come = query.come
if (query.type){
this.selectTab = Number(query.type)
}
if (query.time){
this.queryTime = query.time
}
// 获取手机参数对页面进行适配
let systemInfo = uni.getSystemInfoSync()
this.windowHeight = systemInfo.windowHeight
this.statusBarHeight = Number(systemInfo.statusBarHeight)
this.menu = uni.getMenuButtonBoundingClientRect()
// 先拿到首页的时间 作为调用接口的统一时间 存的lastDay存当前月份的具体日期切换回本月的日期判断有用
this.searchTime = new Date()
this.lastDay = uni.getStorageSync('lastDay')
// 拿到当前时间
const date = new Date()
let month = date.getMonth() + 1
// 滚动的月份列表
let list = []
this.monthList.forEach((item)=>{
if (item.value<=month){
list.push(item)
}
})
this.monthList = list
// 日历数组
// this.dateList = this.$util.getThisMonthDateList(date)
console.log('this.dateList',this.dateList)
},
onReady(){
// 只有在页面已经渲染好了 才能把选中的日期 移到可视区域里面
var _this = this;
_this.getThisMonth()
},
methods:{
handleOpenDetail(item){
console.log('item',item)
},
// 拿到当前月份 用于页面一开始自动滚动到相对应的月份
getThisMonth(){
const date = this.queryTime ? new Date(this.queryTime): new Date()
let year = date.getFullYear()
let month = date.getMonth() + 1
if (month<10){
month = '0' + month
}
let day = date.getDate()
let showDay = day - 4 >0? day - 4:1
if (showDay<10){
showDay = '0'+showDay
}
// 月份选择器 拿到当前月份 和自动滚动到当前月份
this.selectMonth = month
this.current='item'+month
// 日期选择器
if (day<10){
day = '0' + day
}
const realDate = new Date(this.lastDay)
let realMonth = realDate.getMonth() + 1
if (realMonth>month){
// let d = this.$util.getThisMonthDay(`${year}-${month}`)
this.selectDate = `${year}-${month}-01`
this.dateList = this.$util.getThisMonthDateList(`${year}-${month}`)
this.currentDate = 'item'+`${year}-${month}-01`
}else{
this.selectDate = `${year}-${month}-${day}`
this.dateList = this.$util.getThisMonthDateList(`${year}-${month}`)
}
console.log('this.selectDate',this.selectDate)
this.currentDate = 'item'+`${year}-${month}-${showDay}`
// 获得片区列表
this.getAreaList(`${year}-${month}-${day}`)
},
// 是否显示弹出框
handleShowPopup(value,obj){
console.log('value',value)
console.log('obj',obj)
this.popupShow = value
if (value===2){
// 是日常巡检时
// 显示的服务区名称从点击的更多记录的那个item里面拿 方法的第二个形参就是item这个对象
this.popupServiceName = obj.SERVERPART_NAME
// 两个区一起的数组
this.popupServiceList = obj.list
this.popupServiceList.forEach(item=>{
item.DetailList.forEach(subItem=>{
subItem.showChild = true
})
// 反转给的考核列表 让时间从小到大
// item.DetailList.reverse()
})
// 页面上展示的数组
this.popupServiceShowList = this.popupServiceList[0]
console.log('this.popupServiceShowList',this.popupServiceShowList)
console.log('obj',obj)
// 方位选项卡的数组判断
let list = []
obj.list.forEach((item,index)=>{
list.push({label:`${item.REGION_NAME}`,value:index})
})
this.popupTab = list
}else if (value===3){
this.popupMeetDetail = obj.list[0].SERVERPARTList[0]
}else if(value===4){
this.handleGetExamineDetail(obj)
}
// 弹出框显示
this.showPop = true
},
async handleGetExamineDetail(obj){
const total = await request.$webGet(`CommercialApi/Examine/WeChat_GetExamineDetail`,{ExamineId: obj.SERVERPARTList[0].EXAMINE_ID})
let list = total.Result_Data.List
list.forEach(item=>{
let mark = 0
item.SERVERPARTList.forEach(subItem=>{
subItem.showChild = true
mark+=subItem.DEDUCTION_SCORE
subItem.imgList = subItem.EXAMINEDETAIL_URL.split(',')
})
item.mark = mark
})
console.log('list',list)
this.examineList = list
},
handleChangeChild(subItem){
console.log('subItem',subItem)
subItem.showChild = !subItem.showChild
},
// 打开看整改图片的弹出框
handleShowImgDetail(subItem){
if (subItem.PATROL_SITUATION){
this.showImg = true
}
},
changeDetail(subItem){
this.showImgUrl = subItem
this.$forceUpdate()
},
previewImage(event,subItem){
console.log('event',event)
console.log('subItem',subItem)
// 预览图片的方法
wx.previewImage({
current: event.currentTarget.dataset.src, // 当前显示图片的http链接
urls: subItem.imgList // 需要预览的图片http链接列表 数组形式
})
},
// 整改的预览图片
previewShowImage(event,subItem){
let _this = this
wx.previewImage({
current: event.currentTarget.dataset.src, // 当前显示图片的http链接
urls: _this.showImgUrl.PATROLDEAL_URL?[_this.showImgUrl.PATROLDETAIL_URL,_this.showImgUrl.PATROLDEAL_URL]:[_this.showImgUrl.PATROLDETAIL_URL] // 需要预览的图片http链接列表
})
},
// 弹出框点击蒙层关闭
hidePopup(){
this.showPop = false
// 弹出框选择的选项卡变回默认
this.popupTabSelect = 0
},
// 点击月份改变选中月份
handleSelectMonth(value){
this.selectMonth = value
// 当前时间
const nowDate = new Date()
let nowMonth = nowDate.getMonth() + 1
if (nowMonth<10){
nowMonth = '0' + nowMonth
}
// 搜索时间
const date = new Date(this.searchTime)
let y = date.getFullYear()
// 如果当前的时间 选中的时间一样 那么 搜索的时间就是当前时间的前一天 否则就是当前月份的最后一天
if (nowMonth === this.selectMonth){
// this.searchTime = this.lastDay
this.searchTime = new Date()
}else{
let howDay = this.$util.getThisMonthDay(`${y}-${this.selectMonth}`)
this.searchTime = `${y}-${this.selectMonth}-${howDay}`
}
let howDay = this.$util.getThisMonthDay(`${y}-${this.selectMonth}`)
const listDate = new Date(`${y}-${this.selectMonth}`)
let listY = listDate.getFullYear()
let listM = listDate.getMonth() + 1
let list = []
for (let i = 0;i <= howDay,++i;) {
if (i>howDay){
break
}else{
list.push({label:`${listM}${i}`,value:`${listY}-${listM<10?'0'+listM:listM}-${i<10?'0'+i:i}`})
}
}
// 月份改变之后 重新渲染选择日期的数组
this.dateList = list
// 当月份改变了之后 日期栏也会根据当前选中的时间 选择新月份默认的时间
this.selectDate = this.$util.handleReduceAMonth(`${this.selectDate}`,`${y}-${this.selectMonth}`)
// 日期的自动滚动设置
const selectTime = new Date(this.selectDate)
let selectY = selectTime.getFullYear()
let selectM = selectTime.getMonth() + 1
// 要让选中的日期展示在最右边 不展示最左边
let selectD = selectTime.getDate() - 4 > 0?selectTime.getDate() - 4:1
this.currentDate = 'item' + `${selectY}-${selectM<10?'0'+selectM:selectM}-${selectD<10?'0'+selectD:selectD}`
if (this.selectTab===1){
// 选中的是考核管理 调用拿到考核管理的列表
this.getManagerList()
}else if (this.selectTab===2){
// 选中日常巡检 就调用拿到日常巡检的方法
// 调用日常巡检的方法
this.getDailyInspectionList()
}else if(this.selectTab===3){
// 选中日常巡检 就调用拿到日常巡检的方法
// 晨会管理列表
this.getMeetingDetail()
}
},
// 点击选项卡改变选择的种类
// 根据点击的 去请求这个种类下面的列表
handleChangeTab(value){
this.selectTab = value
uni.showLoading({
title: '正在加载...'
})
if (value===1){
// 考核管理列表
this.getManagerList()
}else if(value===2){
// 日常巡检列表
this.getDailyInspectionList()
}else if (value===3){
// 晨会管理列表
this.getMeetingDetail()
}
},
// 返回按钮的方法
handleBack(){
if (this.come==='index'){
uni.switchTab({
url: '/pages/index/index'
})
}else{
uni.navigateBack({
delta: 1
});
}
},
// 选择日期的方法
handleChangeDate(value){
const date = new Date()
let m = date.getMonth() +1
let d = date.getDate()
const selectDay = new Date(value)
let selectM = selectDay.getMonth() +1
let selectD = selectDay.getDate()
if (d < selectD && m <= selectM){
uni.showModal({
title: `日常巡检仅支持查看${m}${d}号及之前的数据`,
icon:'none',
showCancel: false,
duration:3000
})
}else{
uni.showLoading({
title: '正在加载...'
})
this.selectDate = value
// 切换日期日常巡检列表 选项卡为2的时候调用
if (this.selectTab===2){
this.getDailyInspectionList()
}else if(this.selectTab===3){
// 晨会管理列表
this.getMeetingDetail()
}
}
},
// 搜索
handleNoShow(item){
console.log('item',item)
item.showChild = !item.showChild
this.$forceUpdate()
},
hideShowImg(){
this.showImg = false
this.showImgUrl = {}
},
// 改变弹出框中的选项卡
handleChangePopupTab(value){
this.popupTabSelect = value
// 弹出框选项卡切换 表单内容切换
this.popupServiceShowList = this.popupServiceList[this.popupTabSelect]
},
// 片区列表
async getAreaList(date){
const total = await request.$webGet(`CommercialApi/BaseInfo/GetSPRegionList`,{Province_Code:Store.state.userData.ProvinceCode})
uni.hideLoading()
if (total.Result_Code===100){
let list = []
total.Result_Data.List.forEach(item=>{
list.push({label:item.name.split('片区')[0],value:item.value})
})
this.areaList = list
// 默认选中第一个片区
this.selectAreaValue = this.areaList[0].value
this.selectAreaName = this.areaList[0].label
// 只能先拿到 selectAreaValue 再去请求列表
// 获得考核管理列表 第一次进度肯定是考核管理
if (this.selectTab===1){
// 考核管理列表
this.getManagerList(date)
}else if(this.selectTab===2){
// 日常巡检列表
this.getDailyInspectionList()
}
}
},
// 修改当前选中的片区
handleChangeArea(item){
// 选择的片区名称和片区id
this.selectAreaValue = item.value
this.selectAreaName = item.label
uni.showLoading({
title: '正在加载...'
})
if (this.selectTab===1){
// 考核管理列表重新调用
this.getManagerList()
}else if (this.selectTab===2){
// 日常巡检列表重新调用
this.getDailyInspectionList()
}else if(this.selectTab===3){
// 晨会管理列表
this.getMeetingDetail()
}
// 关闭弹出框方法
this.hidePopup()
},
// 考核管理列表
async getManagerList(time){
console.log('time123',time)
uni.showLoading({
title: '正在加载...'
})
const realDate = new Date(this.lastDay)
let realMonth = realDate.getMonth() + 1
let realDay = realDate.getDate()
const date = time ? new Date(time) :new Date(this.searchTime)
let y = date.getFullYear()
let m = date.getMonth() + 1
let d = date.getDate()
if (d<10){
d = '0' + d
}
let startTime
let endTime
console.log('realMonth',realMonth)
console.log('m',m)
if (realMonth>m){
if (m<10){
m = '0' + m
}
let day = this.$util.getThisMonthDay(`${y}-${m}`)
startTime=`${y}-${m}-01`
endTime=`${y}-${m}-${day}`
}else{
if (m<10){
m = '0' + m
}
startTime=`${y}-${m}-01`
endTime=`${y}-${m}-${realDay}`
}
const res = await request.$webGet(`CommercialApi/Examine/WeChat_GetExamineList`,{
SearchStartDate: startTime,// 考核日期开始时间
SearchEndDate: endTime,// 考核日期结束时间
SPRegionType_ID: this.selectAreaValue,// 片区内码多个片区用","隔开
Serverpart_ID:'',// 服务区内码多个服务区用","隔开
})
this.serviceList = res.Result_Data
uni.hideLoading()
},
// 日常巡检列表
async getDailyInspectionList(){
uni.showLoading({
title: '正在加载...'
})
const res = await request.$webGet(`CommercialApi/Examine/WeChat_GetPatrolList`,{
SearchStartDate:this.selectDate,// 巡检日期开始时间
SearchEndDate:this.selectDate,// 巡检日期结束时间
SPRegionType_ID:this.selectAreaValue,// 片区内码多个片区用","隔开
Serverpart_ID:'',// 服务区内码多个服务区用","隔开
})
this.inspectionList = res.Result_Data
this.inspectionList.forEach(item=>{
item.list.forEach(subItem=>{
let i = 0
subItem.SERVERPARTList.forEach(thirdItem=>{
if (thirdItem.COMPLETE_STATE===0){
i++
}
})
if (i>0){
subItem.warning=false
}else{
subItem.warning=true
}
})
})
console.log('inspectionList',this.inspectionList)
uni.hideLoading()
},
// 晨会管理列表
async getMeetingDetail(){
const res = await request.$webGet(`CommercialApi/Examine/WeChat_GetMeetingList`,{
SearchStartDate:this.selectDate,// 巡检日期(开始时间)
SearchEndDate:this.selectDate,// 巡检日期(结束时间)
SPRegionType_ID:this.selectAreaValue,// 片区内码,多个片区用","隔开
Serverpart_ID:'',// 服务区内码,多个服务区用","隔开
})
this.meetDetailList = res.Result_Data
uni.hideLoading()
}
}
}
</script>
<style scoped lang="scss">
@import '/static/public/font/stylesheet.css';
.main{
width: 100%;
height: calc(100vh - 80px);
background: #fff;
.heard{
width: 100%;
height: 185px;
position: relative;
.contentHeard{
width: 100%;
height: 100%;
position: absolute;
box-sizing: border-box;
padding: 0 16px;
top: 0;left: 0;
z-index: 2;
.top{
position: absolute;
top: 0;left: 0;
width: 100%;
.titleModule{
width: 100%;
bottom: 0;
position: absolute;
display: flex;
justify-content: center;
.img{
width: 24px;
height: 24px;
position: absolute;
left: 16px;
}
.title{
font-size: 18px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #FFFFFF;
line-height: 28px;
}
}
}
.picker{
.selectService{
display: flex;
align-items: center;
.img{
width: 40px;
height: 40px;
z-index: 2;
}
.select{
height: 32px;
min-width: 110px;
background: #F8F8FA;
border-radius: 0 16px 16px 0;
transform: translateX(-20px);
box-sizing: border-box;
padding-left: 25px;
display: flex;
align-items: center;
position: relative;
.name{
font-size: 14px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #160002;
}
.area{
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #786B6C;
margin-left: 2px;
}
.rightArrow{
position: absolute;
right: 2px;
width: 24px;
height: 12px;
}
}
}
}
.monthTabs{
width: 100%;
height: 34px;
border-radius: 17px;
box-sizing: border-box;
border: 1px solid #BF99FE;
background: linear-gradient(180deg, #8338FF 0%, #A976FF 100%);
overflow: hidden;
padding: 2px 0;
margin-top: 16px;
.big{
width: 100%;
height: 100%;
white-space: nowrap;
.monthItem{
display: inline-block;
font-size: 14px;
padding: 2px 16px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #B8C2FF;
line-height: 24px;
margin-right: 4px;
text-align: center;
border-radius: 12px;
}
.selectItem{
background: #fff;
}
.monthItem:first-child{
margin-left: 4px;
}
}
}
}
.headerBg{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 366px;
z-index: 1;
}
}
.content{
width: 100%;
box-sizing: border-box;
padding: 16px 16px 4px;
border-top-left-radius: 16px;
border-top-right-radius: 16px;
position: relative;
background: #fff;
z-index:99;
.date{
width: 100%;
height: 31px;
border-bottom: 1px solid #F3F1F5;
margin-bottom: 12px;
.dateList{
height: 100%;
white-space: nowrap;
.dateItem{
display: inline-block;
margin-right: 16px;
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #786B6C;
line-height: 20px;
}
.selectDateItem{
font-size: 14px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #8441F3;
line-height: 20px;
position: relative;
}
.selectDateItem:after{
content:'';
display: block;
position: absolute;
width: 100%;
height: 3px;
background: rgba(132, 65, 243, 1);
bottom: -4px;
}
}
}
.tab{
width: 100%;
height: 38px;
background: #F3F1F5;
border-radius: 4px;
box-sizing: border-box;
padding: 4px;
display: flex;
justify-content: space-between;
align-items: center;
.tabItem{
width: 33%;
height: 100%;
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #786B6C;
text-align: center;
line-height: 30px;
}
.selectItem{
background: #fff;
font-size: 14px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #8441F3;
border-radius: 4px;
}
}
.serviceList{
width: 100%;
.serviceItem{
width: 100%;
box-sizing: border-box;
padding: 16px;
border-radius: 8px;
margin-bottom: 12px;
background: linear-gradient(314deg, #FFF1F8 0%, #F2F2FF 32%, #FCFAFF 54%, #FCF6FF 70%, #F2EAFF 100%);
.itemTitle{
display: flex;
align-items: center;
.title{
font-size: 18px;
font-family: Alimama ShuHeiTi;
color: #33077A;
line-height: 26px;
}
.unit{
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #3B48E3;
line-height: 12px;
padding: 3px 4px;
background: rgba(59, 72, 227, 0.1);
margin-left: 8px;
border-radius: 2px;
}
.secondUnit{
background:rgba(0, 147, 46, 0.1);
border-radius: 2px;
font-size: 12px;
padding: 3px 4px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #00932E;
margin-left: 8px;
line-height: 12px;
}
}
.detail{
margin-top: 18px;
.detailTop{
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid rgba(212, 196, 244, 0.2);
padding: 0 0 8px;
.left{
display: flex;
align-items: center;
.icon{
width: 22px;
height: 22px;
}
.type{
font-size: 14px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #160002;
line-height: 20px;
margin-left: 8px;
}
}
.right{
font-size: 22px;
font-family: DINAlternate-Bold, DINAlternate;
font-weight: bold;
color: #160002;
line-height: 22px;
.unit{
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #786B6C;
line-height: 18px;
margin-left: 2px;
}
}
}
.detailMessage{
margin-top: 14px;
.message{
display: flex;
align-items: center;
.icon{
width: 16px;
height: 16px;
}
.value{
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #160002;
line-height: 20px;
margin-left: 8px;
width: 90%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.moreIcon{
width: 16px;
height: 16px;
}
}
}
}
}
.dailyInspection{
width: 100%;
height: 267px;
background: linear-gradient(314deg, #FFF1F8 0%, #F2F2FF 32%, #FCFAFF 54%, #FCF6FF 70%, #F2EAFF 100%);
border-radius: 8px;
margin-bottom: 12px;
box-sizing: border-box;
padding: 16px;
.itemTitle{
display: flex;
align-items: center;
justify-content: space-between;
.title{
font-size: 18px;
font-family: Alimama ShuHeiTi;
color: #33077A;
line-height: 26px;
}
.more{
display: flex;
align-items: center;
.moreText{
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #786B6C;
line-height: 20px;
}
.icon{
width: 15px;
height: 15px;
margin-left: 7px;
}
}
}
.detail{
margin-top: 19px;
.detailTop{
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
.left{
display: flex;
align-items: center;
.icon{
width: 22px;
height: 22px;
margin-right: 8px;
}
.type{
font-size: 14px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #160002;
line-height: 20px;
margin-right: 4px;
}
.number{
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #786B6C;
line-height: 20px;
}
}
.right{
width: 20px;
height: 20px;
}
}
.detailMessage{
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 16px;
.person{
margin-top: 12px;
.value{
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #160002;
line-height: 20px;
margin-bottom: 2px;
}
.label{
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #786B6C;
line-height: 18px;
}
.icon{
margin-bottom:-2px;
width: 16px;
height: 19px;
}
}
}
}
}
.meeting{
width: 100%;
height: 209px;
background: linear-gradient(314deg, #FFF1F8 0%, #F2F2FF 32%, #FCFAFF 54%, #FCF6FF 70%, #F2EAFF 100%);
border-radius: 8px;
margin-bottom: 12px;
box-sizing: border-box;
padding: 16px;
.title{
font-size: 18px;
font-family: Alimama ShuHeiTi;
color: #33077A;
line-height: 26px;
margin-bottom: 18px;
}
.meetContent{
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding-bottom: 8px;
border-bottom: 1px solid rgba(212, 196, 244, 0.2);
.left{
display: flex;
align-items: center;
.icon{
width: 24px;
height: 24px;
margin-right: 8px;
}
.text{
font-size: 14px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #160002;
line-height: 20px;
}
}
.right{
display: flex;
align-items: center;
.icon{
width: 12px;
height: 12px;
margin-right: 4px;
}
.text{
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #160002;
line-height: 20px
}
}
}
.noDataItem{
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-top: 6px;
.img{
width: 80px;
height: 80px;
}
.text{
text-align: center;
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #A69E9F;
}
}
.detail{
margin-top: 12px;
.message{
display: flex;
align-items: center;
position: relative;
.icon{
width: 16px;
height: 16px;
}
.value{
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #160002;
line-height: 20px;
margin-left: 8px;
width: 90%;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.more{
width: 12px;
height: 12px;
position: absolute;
right: 0;
}
}
.other{
display: flex;
align-items: flex-start;
position: relative;
.icon{
width: 16px;
height: 16px;
margin-top: 2px;
}
.value{
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #160002;
line-height: 20px;
margin-left: 8px;
width: 90%;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.more{
width: 12px;
height: 12px;
position: absolute;
right: 0;bottom: 3px;
}
}
}
}
.noData{
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
margin-top: 20vh;
.img{
width: 80px;
height: 80px;
}
.text{
text-align: center;
font-size: 20px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #A69E9F;
line-height: 20px;
margin-top: 8px;
}
}
}
}
.popup{
width: 100%;
box-sizing: border-box;
padding: 16px;
.top{
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
.popupTitle{
font-size: 16px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #160002;
line-height: 22px;
}
.close{
width: 20px;
height: 20px;
}
}
.areaList{
width: 100%;
height: calc(60vh - 70px);
margin-top: 12px;
overflow-y: scroll;
.item{
width: 100%;
font-size: 14px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #160002;
line-height: 20px;
text-align: left;
padding:9px 12px;
box-sizing: border-box;
.unit{
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #786B6C;
line-height: 18px;
}
}
.selectItem{
background: RGBA(243, 235, 255, 0.5);
}
}
.serviceList{
.assessmentTable{
width: 100%;
height: calc(78vh - 150px);
box-sizing: border-box;
overflow-y: scroll;
.bigBox{
border-radius: 16rpx;
border: 2rpx solid #D9DBE0;
margin-top: 12px;
.assessmentItem{
width: 100%;
box-sizing: border-box;
padding: 16px;
display: flex;
justify-content: space-between;
align-items: center;
background: linear-gradient(314deg, #EAEFFF 0%, #F3F5FF 32%, #F5FCFF 50%, #F0F7FF 67%, #DBE5FF 100%);
border-radius: 16rpx;
border-bottom: 2rpx solid #D9DBE0;
.left{
font-size: 16px;
font-family: AlimamaShuHeiTi;
color: #1A5FFF;
line-height: 22px;
background: rgba(26, 95, 255, 0.1);
border-radius: 14px;
padding: 4px 16px;
display: inline-block;
}
.right{
display: flex;
align-items: center;
.label{
font-size: 14px;
font-family: DINAlternate-Bold, DINAlternate;
font-weight: 400;
color: #160002;
.name{
font-size: 16px;
font-family: DINAlternate-Bold, DINAlternate;
font-weight: 600;
color: #160002;
margin-left: 4px;
}
}
.more{
width: 14px;
height: 26px;
margin-left: 8px;
}
}
}
.smallItem{
box-sizing: border-box;
padding: 16px;
border-bottom: 2px solid #EEEEEE;
.top{
width: 100%;
display: flex;
justify-content: space-between;
margin-bottom: 12px;
.time{
font-size: 16px;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #160002;
}
.label{
font-size: 14px;
font-family: DINAlternate-Bold, DINAlternate;
font-weight: 400;
color: #160002;
.name{
font-size: 16px;
font-family: DINAlternate-Bold, DINAlternate;
font-weight: 600;
color: #160002;
margin-left: 4px;
}
}
}
.itemBox{
width: 100%;
display: flex;
align-items: flex-end;
.detailItem{
width: 100%;
.detailValue{
.right{
width: 20px;
height: 20px;
}
.detailText{
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #160002;
line-height: 20px;
}
}
.detailLabel{
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #786B6C;
line-height: 36rpx;
}
}
}
}
}
}
.tab{
width: 100%;
height: 38px;
background: #F3F1F5;
border-radius: 4px;
margin-top: 16px;
box-sizing: border-box;
padding: 4px;
margin-bottom: 8px;
.tabItem{
display: inline-block;
width: 50%;
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #786B6C;
line-height: 30px;
}
.selectTabItem{
background: #fff;
border-radius: 4px;
}
}
.list{
margin-top: 12px;
height: calc(78vh - 130px);
overflow-y: scroll;
.item{
display: flex;
justify-content: space-between;
.person{
margin-top: 12px;
text-align: left;
.value{
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #160002;
line-height: 20px;
margin-bottom: 2px;
}
.label{
font-size: 12px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #786B6C;
line-height: 18px;
}
.icon{
margin-bottom:-2px;
width: 16px;
height: 19px;
}
}
}
}
}
.meetList{
margin-top: 16px;
height: calc(60vh - 80px);
overflow-y: scroll;
.message{
display: flex;
align-items: flex-start;
.icon{
width: 16px;
height: 16px;
margin-top: 2px;
}
.value{
display: inline-block;
text-align: left;
font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #160002;
line-height: 20px;
margin-left: 8px;
width: 90%;
}
}
}
.examineList{
.examineItem{
width: 100%;
background: #F5F2F2;
box-sizing: border-box;
text-align: left;
border: 1px solid #ccc;
margin-bottom: 12px;
.itemTop{
font-size: 16px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #000;
line-height: 18px;
box-sizing: border-box;
padding: 8px;
border-bottom: 1px solid #ccc;
}
.itemMessage{
width: 100%;
box-sizing: border-box;
padding: 8px;
border-bottom: 1px solid #ccc;
.box{
width: 100%;
}
.childItem{
width: 100%;
box-sizing: border-box;
padding: 8px;
background: #fff;
.imgList{
width: 100%;
.img{
width: 40px;
height: 40px;
margin-right: 8px;
}
}
}
}
}
}
}
.previewImg{
width: 100%;
height: 60vh;
box-sizing: border-box;
padding: 16px;
.top{
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
.close{
width: 20px;
height: 20px;
}
}
.content{
width: 100%;
height: 55vh;
overflow-y: scroll;
}
}
::-webkit-scrollbar {
width: 4px;
height: 4px;
color:transparent;
}
/*定义滚动条轨道 内阴影+圆角*/
::-webkit-scrollbar-track {
border-radius: 10px;
background-color:transparent;
}
/*定义滑块 内阴影+圆角*/
::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color:transparent;
}
.notice{
font-size: 12px;
color: gray;
}
}
</style>