ahyd_DIB/pages/newamine/index.vue
2023-08-14 18:34:05 +08:00

2353 lines
74 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">
<view class="headerBg"></view>
<!-- <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/commercial/navigation-left.svg"></image>
<view class="selectDateBox">
<image class="leftIcon" style="transform: rotate(-180deg)" src="/static/images/newExamine/rightIcon.svg"/>
<view class="dateBox">
<image class="dateIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex/1stDateTime.svg"></image>
<text class="dateText">2023/08/09</text>
</view>
<image class="leftIcon" src="/static/images/newExamine/rightIcon.svg"/>
</view>
</view>
</view>
<view class="tabBox" :style="{top:(menu.bottom+18)+'px'}">
<view :class="selectTab===item.value?'tabItem bigItem':'tabItem'" v-for="(item,index) in tabList" :key="index" @click="handleChangeTab(item.value)">{{item.label}}</view>
</view>
<view class="dataSummary" :style="{top:(menu.bottom+62)+'px'}">
<!-- 考核管理 -->
<view class="dataDetail" v-if="selectTab===1">
<view class="dataDetailTop">
<image class="topIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex/examinePosition.svg"/>
<text class="topTitle">数据汇总</text>
<span class="unit">月度</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="detailContent">
<view class="contentItem">
<image class="typeIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex/good.svg"/>
<view class="typeBox">
<text class="typeNum">92</text>
<text class="typeLabel">优秀<text class="typeUnit">/个</text></text>
</view>
</view>
<view class="contentItem">
<image class="typeIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex/normal.svg"/>
<view class="typeBox">
<text class="typeNum">92</text>
<text class="typeLabel">良好<text class="typeUnit">/个</text></text>
</view>
</view>
<view class="contentItem">
<image class="typeIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex/bad.svg"/>
<view class="typeBox">
<text class="typeNum">92</text>
<text class="typeLabel">一般<text class="typeUnit">/个</text></text>
</view>
</view>
</view>
</view>
<!-- 日常巡检 -->
<view class="dataDetail" v-if="selectTab===2">
<view class="dataDetailTop">
<image class="topIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/newIndex/examineQuestion.svg"/>
<text class="topTitle">数据汇总</text>
</view>
<view class="detailDaily">
<view class="dailyItem">
<text class="itemValue">17</text>
<text class="itemLabel">整改中<text class="itemValue">/个</text></text>
</view>
<view class="dailyItem">
<text class="itemValue">6</text>
<text class="itemLabel">未整改<text class="itemValue">/个</text></text>
</view>
<view class="otherItem">
<view class="otherLeft">
<YearCharts :success="rate"/>
</view>
<view class="otherDetail">
<text class="itemValue">92.81%</text>
<text class="itemLabel">达标率<text class="itemUnit">/全省</text></text>
</view>
</view>
</view>
</view>
</view>
</view>
</view>
<view class="pageContent">
<!-- 考核管理 -->
<view class="contentBox" v-if="selectTab===1">
<view class="contentTop">
<text class="contentTitle">服务区排名</text>
<view class="sort">
<text class="sortLabel">排序</text>
<image class="sortIcon" src="/static/images/newExamine/sort.svg"/>
</view>
</view>
<view class="contentTab">
<view :class="selectContentTab===item.value?'selectItem contentTabItem':'contentTabItem'" v-for="(item,index) in contentTabList" :key="index" @click="handleChangeContentTab(item.value)">{{item.label}}</view>
</view>
<view class="contentList">
<scroll-view class="big" :show-scrollbar="false" scroll-with-animation scroll-y="true" enable-flex>
<view class="scrollItem" v-for="(item,index) in serviceList" :key="index" @click="handleDetail(item,index)">
<view class="scrollItemTop">
<view class="itemTopLeft">
<text class="itemName">{{item.SERVERPART_NAME}}</text>
<!-- <span class="unit">月度</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>
<image class="rightIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/rightArrow.svg"/>
</view>
<view class="itemDetail">
<view class="detailItem" v-for="(subItem,subIndex) in item.list">
<view class="fixBox">{{ subItem.REGION_NAME }}</view>
<view class="markBox">
<text class="markValue">{{subItem.SERVERPARTList[0].EXAMINE_SCORE}}<text class="markUnit">分</text></text>
<view class="progress">
<view class="have" :style="{width: subItem.SERVERPARTList[0].EXAMINE_SCORE+'%'}"></view>
</view>
</view>
</view>
</view>
</view>
</scroll-view>
</view>
</view>
<!-- 日常巡检 -->
<view class="contentBox" v-if="selectTab===2">
<view class="contentTop">
<text class="contentTitle">服务区排名</text>
<view class="sort">
<text class="sortLabel">排序</text>
<image class="sortIcon" src="/static/images/newExamine/sort.svg"/>
</view>
</view>
<view class="contentTab">
<view :class="selectDaily===item.value?'selectItem contentTabItem':'contentTabItem'" v-for="(item,index) in dailyTabList" :key="index" @click="handleChangeDailyTab(item.value)">{{item.label}}</view>
</view>
<view class="dailyList">
<scroll-view class="big" :show-scrollbar="false" scroll-with-animation scroll-y="true" enable-flex>
<view class="scrollItem" v-for="(item,index) in 20" :key="index">
<view class="scrollItemTop">
<view class="scrollTopLeft">
<text class="scrollName">黄山服务区</text>
<image class="rightIcon" src="https://eshangtech.com/ShopICO/ahyd-BID/commercial/rightArrow.svg"/>
</view>
<view class="scrollTopRight">
<text class="scueessNum">1</text>
<text class="all">/6</text>
</view>
</view>
<view class="detailMark">
<text class="wordHeader">描述</text>
<text class="wordValue">广场、洗漱台、绿化带、宣传栏、标识标牌、垃圾桶、玻璃门窗、镜面保洁</text>
</view>
</view>
</scroll-view>
</view>
</view>
</view>
<uniPopup type="bottom" :round="true" :showIndex="1" :show="showPop" @hidePopup="hidePopup">
<view class="popup" :style="{height:'85vh'}">
<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">
<view class="popupDetail">
<scroll-view :show-scrollbar="false" scroll-with-animation scroll-y="true" enable-flex class="detailLeft" :scrollIntoView="selectMenu">
<view :id="index" :class="index===selectMenu?'serviceSelect currentSelect':'serviceSelect'" v-for="(item,index) in serviceList" :key="index" @click="handleChangeMenu(index,item)">{{item.SERVERPART_NAME.split('服务区')[0]}}</view>
</scroll-view>
<view class="serviceDetail">
<view class="serviceDetailItem" v-for="(item,index) in currentObj.list" :key="index">
<view class="detailItemTop">
<view class="fixedName">{{item.REGION_NAME}}</view>
<view class="store"><text class="unit">分</text></view>
</view>
<view class="detailItemMessage" v-for="(subItem,subIndex) in item.SERVERPARTList" :key="subIndex">
<view class="messageItem">
<image class="itemIcon" src="/static/images/newExamine/userIcon.svg"/>
<text class="itemValue">{{subItem.EXAMINE_PERSON}}</text>
</view>
<view class="messageItem">
<image class="itemIcon" src="/static/images/newExamine/timeIcon.svg"/>
<text class="itemValue">{{subItem.EXAMINE_OPERATEDATE}}</text>
</view>
<view class="messageBox">
<view class="messageBoxTop">
<view class="messageBoxTopLeft">
<image class="fixedIcon" src="/static/images/newExamine/fixedIcon.svg"/>
<text class="name">便利店</text>
</view>
<view class="messageBoxTopRight">
<text class="mark">-2<text class="unit">分</text></text>
</view>
</view>
<view class="desc">便利店标签内容与信息不符, 酒类商品无温馨提示; </view>
<view 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>-->
</view>
</view>
</view>
</view>
</view>
</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";
import YearCharts from "./component/yearCharts.vue";
export default {
components:{
YearCharts,
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}],// tab选项卡 ,{label:'晨会管理',value:3}
selectTab:1,// 选中的tab选项卡
serviceAllList:[],// 三种类型总的服务区考核信息
serviceList:[],// 服务区列表
inspectionList:[],// 日常巡检列表
meetDetailList:[],// 晨会管理列表
scrollTop:0,// 页面整体滚动了多少
windowHeight:0,// 页面高度
dateList:[],// 日历滚动条
selectDate:'',// 当前选中的日期
currentDate:'',// 当前选中的月份
popupShow:1,
popupTab:[],// 弹出框中的选项卡
popupTabSelect:0,// 选中的弹出框选项卡
popupServiceList:[],// tab选中第二个的时候的点击更多记录全部表单
popupServiceShowList:[],// 显示的表单内容
popupServiceName:'',// 点击更多记录的表单名称
popupMeetDetail:{},// 弹出框的会议详情内容
come:'',// 来自首页还是用户页
examineList:[],
showImgUrl:{},// 展示的图片地址
queryTime:'',// 传入的时间
contentTabList:[{label:'优秀',value:1},{label:'良好',value:2},{label:'一般',value:3}],
dailyTabList:[{label:'已整改',value:1},{label:'未整改',value:2}],
selectDaily:1,
selectContentTab:1,
rate:0,
currentObj:{},// 考核弹出框的内容
selectMenu:0,// 选中左侧菜单的第几个
}
},
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)
setTimeout(()=>{
this.rate = 92.81
},100)
},
onReady(){
// 只有在页面已经渲染好了 才能把选中的日期 移到可视区域里面
var _this = this;
_this.getThisMonth()
},
methods:{
handleDetail(item,index){
this.selectMenu = index
console.log(item)
this.handleGetExamineDetail(item.list[0],true)
},
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}`)
if (this.selectTab===1){
// 考核管理列表
this.getManagerList(date)
}else if(this.selectTab===2){
// 日常巡检列表
this.getDailyInspectionList()
}
},
// 是否显示弹出框
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,type){
uni.showLoading({
title: '正在加载...'
})
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
uni.hideLoading()
if (type){
this.showPop = true
}
},
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()
}
},
handleChangeContentTab(value){
this.selectContentTab = value
this.serviceList = this.serviceAllList[value - 1]
},
handleChangeMenu(value,obj){
this.selectMenu = value
this.currentObj = obj
console.log('obj',this.currentObj)
},
handleChangeDailyTab(value){
this.selectDaily = value
},
// 点击选项卡改变选择的种类
// 根据点击的 去请求这个种类下面的列表
handleChangeTab(value){
this.selectTab = value
uni.showLoading({
title: '正在加载...'
})
if (value===1){
// 考核管理列表
this.getManagerList()
}else if(value===2){
// 日常巡检列表
this.getDailyInspectionList()
}
},
// 返回按钮的方法
handleBack(){
if (this.come==='index'){
uni.switchTab({
url: '/pages/index/index'
})
}else{
uni.switchTab({
url: '/pages/userCenter/userCenter'
})
}
},
// 选择日期的方法
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
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}-${d}`
}
const res = await request.$webGet(`CommercialApi/Examine/WeChat_GetExamineList`,{
// SearchStartDate: startTime,// 考核日期开始时间
// SearchEndDate: endTime,// 考核日期结束时间
SearchStartDate: '2023-07-01',
SearchEndDate: '2023-07-31'
})
let list = []
let good = []
let normal = []
let bad = []
res.Result_Data.forEach(item=>{
item.list.forEach(subItem=>{
subItem.SERVERPARTList.forEach(thirdItem=>{
if (thirdItem.EXAMINE_SCORE>=90){
good.push(item)
}else if(thirdItem.EXAMINE_SCORE>=80 && thirdItem.EXAMINE_SCORE<90){
normal.push(item)
}else if (thirdItem.EXAMINE_SCORE<80){
bad.push(item)
}
})
})
})
console.log('res',res)
list = [good,normal,bad]
this.serviceAllList = JSON.parse(JSON.stringify(list))
this.serviceList = this.serviceAllList[this.selectContentTab - 1]
console.log('this.serviceAllList',this.serviceAllList)
console.log('this.serviceList',this.serviceList)
uni.hideLoading()
},
// 日常巡检列表
async getDailyInspectionList(){
const res = await request.$webGet(`CommercialApi/Examine/WeChat_GetPatrolList`,{
SearchStartDate:this.selectDate,// 巡检日期开始时间
SearchEndDate:this.selectDate,// 巡检日期结束时间
})
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);
.heard{
width: 100%;
height: 666rpx;
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;
align-items: 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;
}
.selectDateBox{
position: absolute;
left: 112rpx;
display: flex;
align-items: center;
box-sizing: border-box;
padding: 16rpx 30rpx;
background: #FFFFFF;
border-radius: 32rpx;
.leftIcon{
width: 26rpx;
height: 26rpx;
}
.dateBox{
margin: 0 24rpx;
display: flex;
align-items: center;
.dateIcon{
width: 30rpx;
height: 30rpx;
margin-right: 8rpx;
}
.dateText{
font-size: 28rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #EC6C00;
line-height: 30rpx;
}
}
}
}
}
.tabBox{
position: absolute;
width: 100%;
display: flex;
align-items: center;
.tabItem{
margin-right: 40rpx;
font-size: 32rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #160002;
line-height: 44rpx;
}
.bigItem{
font-size: 40rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #160002;
line-height: 56rpx;
position: relative;
}
.bigItem:after{
content:url("/static/images/newExamine/tabIcon.svg");
width: 56rpx;
height: 16rpx;
position: absolute;
left: 50%;bottom: -4px;
transform: translateX(-50%);
}
}
.dataSummary{
width: calc(100% - 64rpx);
height: 216rpx;
background: #FFFFFF;
border-radius: 20rpx;
position: absolute;
left: 32rpx;
box-sizing: border-box;
padding: 4rpx;
.dataDetail{
width: 100%;
height: 100%;
background: linear-gradient(180deg, #FEEDE5 0%, #FFFEFD 100%);
border-radius: 16rpx;
box-sizing: border-box;
padding: 24rpx;
.dataDetailTop{
display: flex;
align-items: center;
.topIcon{
width: 38rpx;
height: 38rpx;
}
.topTitle{
font-size: 32rpx;
font-family: Alimama ShuHeiTi;
font-weight: bold;
color: #EC6C00;
line-height: 40rpx;
margin: 0 0 0 16rpx;
}
.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;
}
}
.detailContent{
width: 100%;
height: 72rpx;
margin-top: 40rpx;
display: flex;
.contentItem{
width: 33.3%;
height: 100%;
display: flex;
.typeIcon{
width: 64rpx;
height: 64rpx;
margin-top: 8rpx;
margin-right: 16rpx;
}
.typeBox{
display: flex;
flex-direction: column;
.typeNum{
font-size: 36rpx;
font-family: DINAlternate-Bold, DINAlternate;
font-weight: bold;
color: #160002;
line-height: 44rpx;
}
.typeLabel{
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #786B6C;
line-height: 36rpx;
.typeUnit{
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #A69E9F;
line-height: 36rpx;
}
}
}
}
}
.detailDaily{
width: 100%;
margin-top: 32rpx;
display: flex;
.dailyItem{
width: 30%;
display: flex;
flex-direction: column;
.itemValue{
font-size: 36rpx;
font-family: DINAlternate-Bold, DINAlternate;
font-weight: bold;
color: #020E1A;
line-height: 44rpx;
}
.itemLabel{
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #786B6C;
line-height: 36rpx;
.itemValue{
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #A69E9F;
line-height: 36rpx;
margin-left: 4rpx;
}
}
}
.otherItem{
width: 40%;
display: flex;
align-items: center;
.otherLeft{
width: 56rpx;
height: 56rpx;
margin-right: 12rpx;
}
.otherDetail{
display: flex;
flex-direction: column;
.itemValue{
font-size: 36rpx;
font-family: DINAlternate-Bold, DINAlternate;
font-weight: bold;
color: #E83944;
line-height: 44rpx;
}
.itemLabel{
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #786B6C;
line-height: 36rpx;
.itemUnit{
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #A69E9F;
line-height: 36rpx;
margin-left: 4rpx;
}
}
}
}
}
}
}
.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: 666rpx;
background: linear-gradient(180deg, #FFC692 0%, rgba(255,225,193,0) 100%);
z-index: 1;
}
}
.pageContent{
position: relative;
z-index:9;
width: 100%;
height: calc(100vh - 536rpx);
background: #fff;
transform: translateY(-130rpx);
border-radius: 32rpx 32rpx 6rpx 6rpx;
box-sizing: border-box;
padding: 24rpx 32rpx;
.contentBox{
width: 100%;
height: 100%;
.contentTop{
display: flex;
align-items: center;
justify-content: space-between;
.contentTitle{
font-size: 32rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #160002;
line-height: 44rpx;
}
.sort{
display: flex;
align-items: center;
.sortLabel{
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #786B6C;
line-height: 40rpx;
}
.sortIcon{
width: 30rpx;
height: 30rpx;
margin-left: 8rpx;
}
}
}
.contentTab{
margin-top: 32rpx;
.contentTabItem{
padding: 8rpx 44rpx;
background: #F2F0EF;
border-radius: 30rpx;
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #786B6C;
line-height: 40rpx;
display: inline-block;
margin-right: 16rpx;
}
.selectItem{
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #FEFFFE;
line-height: 40rpx;
background: #EC6C00;
}
}
.contentList{
width: 100%;
height: calc(100% - 172rpx);
margin-top: 24rpx;
.big{
width: 100%;
height: 100%;
.scrollItem{
width: 100%;
height: 208rpx;
background: #F8F8F8;
border-radius: 12rpx;
box-sizing: border-box;
padding: 24rpx;
margin-bottom: 24rpx;
.scrollItemTop{
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
.itemTopLeft{
display: flex;
align-items: center;
.itemName{
font-size: 28rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #160002;
line-height: 40rpx;
margin-right: 16rpx;
}
.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;
}
}
.rightIcon{
width: 30rpx;
height: 30rpx;
}
}
.itemDetail{
width: 100%;
height: 104rpx;
background: #FFFFFF;
border-radius: 12rpx;
box-sizing: border-box;
padding: 24rpx;
margin-top: 20rpx;
display: flex;
.detailItem{
width: 50%;
height: 100%;
display: flex;
.fixBox{
width: 62rpx;
height: 62rpx;
background: rgba(236, 108, 0, 0.1);
margin-right: 16rpx;
border-radius: 10rpx;
font-size: 28rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #EC6C00;
line-height: 40rpx;
display: flex;
align-items: center;
justify-content: center;
}
.markBox{
width: 120rpx;
.markValue{
font-size: 36rpx;
font-family: DINAlternate-Bold, DINAlternate;
font-weight: bold;
color: #160002;
line-height: 36rpx;
.markUnit{
margin-left: 4rpx;
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #A69E9F;
line-height: 36rpx;
}
}
.progress{
width: 100%;
height: 12rpx;
border-radius: 7rpx;
position: relative;
background: #FBE2CC;
.have{
position: absolute;
left: 0;top: 0;
border-radius: 7rpx;
height: 100%;
background: #EC6C00;
}
}
}
}
}
}
}
}
.dailyList{
width: 100%;
height: calc(100% - 172rpx);
margin-top: 24rpx;
.big{
width: 100%;
height: 100%;
.scrollItem{
width: 100%;
background: #F8F8F8;
border-radius: 12rpx;
margin-bottom: 24rpx;
box-sizing: border-box;
padding: 24rpx;
.scrollItemTop{
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
.scrollTopLeft{
display: flex;
align-items: center;
.scrollName{
font-size: 28rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #160002;
line-height: 40rpx;
}
.rightIcon{
width: 30rpx;
height: 30rpx;
margin-left: 14rpx;
}
}
.scrollTopRight{
.scueessNum{
font-size: 36rpx;
font-family: DINAlternate-Bold, DINAlternate;
font-weight: bold;
color: #EC6C00;
line-height: 40rpx;
}
.all{
font-size: 36rpx;
font-family: DINAlternate-Bold, DINAlternate;
font-weight: bold;
color: #160002;
line-height: 40rpx;
}
}
}
.detailMark{
width: 100%;
box-sizing: border-box;
padding: 24rpx 16rpx;
margin-top: 20rpx;
background: #FFFFFF;
border-radius: 12rpx;
.wordHeader{
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #A69E9F;
line-height: 40rpx;
}
.wordValue{
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #160002;
line-height: 36rpx;
display: inline-block;
margin-left: 16rpx;
}
}
}
}
}
}
}
.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;
position: relative;
.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: 100vw;
margin-top: 12px;
overflow-y: scroll;
position: absolute;
left: 0;
.popupDetail{
width: 100%;
height: 100%;
display: flex;
.detailLeft{
width: 184rpx;
height: calc(100vh - 108rpx);
.serviceSelect{
padding:24rpx 32rpx;
font-size: 32rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #160002;
line-height: 44rpx
}
.currentSelect{
font-size: 32rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #EC6C00;
line-height: 44rpx;
position: relative;
}
.currentSelect:before{
content:'';
display: inline-block;
width: 6rpx;
height: 32rpx;
background: #EC6C00;
position: absolute;
left: 0;top: 50%;
transform: translateY(-50%);
}
}
.serviceDetail{
width: calc(100vw - 184rpx);
height: calc(100vh - 108rpx);
.serviceDetailItem{
width: 100%;
box-sizing: border-box;
padding: 24rpx;
.detailItemTop{
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
.fixedName{
padding: 8rpx 14rpx;
font-size: 28rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #EC6C00;
line-height: 40rpx;
background: #F6E9DE;
border-radius: 10rpx;
}
.store{
font-size: 36rpx;
font-family: DINAlternate-Bold, DINAlternate;
font-weight: bold;
color: #160002;
line-height: 44rpx;
.unit{
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #A69E9F;
line-height: 36rpx;
}
}
}
.detailItemMessage{
margin-top: 16rpx;
.messageItem{
display: flex;
justify-content: flex-start;
margin-bottom: 8rpx;
.itemIcon{
width: 32rpx;
height: 32rpx;
margin-right: 12rpx;
}
.itemValue{
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #786B6C;
line-height: 40rpx;
}
}
.messageBox{
width: 100%;
box-sizing: border-box;
padding: 16rpx;
margin-top: 8rpx;
.messageBoxTop{
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
.messageBoxTopLeft{
display: flex;
.fixedIcon{
width: 27rpx;
height: 32rpx;
margin-right: 12rpx;
}
.name{
font-size: 32rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #160002;
line-height: 44rpx;
}
}
.messageBoxTopRight{
.mark{
font-size: 36rpx;
font-family: DINAlternate-Bold, DINAlternate;
font-weight: bold;
color: #160002;
line-height: 44rpx;
.unit{
font-size: 24rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #A69E9F;
line-height: 36rpx;
}
}
}
}
.desc{
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #160002;
line-height: 40rpx;
}
.imgList{
width: 100%;
.img{
width: 88rpx;
height: 88rpx;
margin-right: 16rpx;
}
}
}
}
}
}
}
}
.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>