991 lines
26 KiB
Vue
991 lines
26 KiB
Vue
<template>
|
||
<view class="page">
|
||
<u-navbar
|
||
class="u-navbar"
|
||
title="首页"
|
||
placeholder
|
||
@leftClick="leftClick"
|
||
leftIconColor="#fff"
|
||
bgColor="#00337A"
|
||
:titleStyle="{ color: '#FFF', fontSize: '32rpx' }"
|
||
/>
|
||
|
||
<scroll-view :scroll-top="scrollTop" scroll-y="true">
|
||
<!-- 轮播图区域 -->
|
||
<swiper class="swiper-container" circular indicator-dots>
|
||
<!-- 轮播图 1 -->
|
||
<swiper-item class="item_1 swiper-item-container">
|
||
<view>
|
||
<image
|
||
class="img-container"
|
||
src="../../../static/images/img-phase-two/index_img_one_person.png"
|
||
mode=""
|
||
></image>
|
||
<text>今日考勤：6</text>
|
||
<text>今日考勤：6</text>
|
||
<text>今日考勤：6</text>
|
||
</view>
|
||
<view>
|
||
<image
|
||
class="img-container"
|
||
src="../../../static/images/img-phase-two/index_img_one_att.png"
|
||
mode=""
|
||
></image>
|
||
<text>在场考勤率：20%</text>
|
||
<text>计划考勤率：20%</text>
|
||
<text class="none-box">计划考勤率：20%</text>
|
||
</view>
|
||
</swiper-item>
|
||
<!-- 轮播图 2 -->
|
||
<swiper-item class="item_2 swiper-item-container">
|
||
<view>
|
||
<image
|
||
class="img-container-2"
|
||
src="../../../static/images/img-phase-two/index_img_two_risk.png"
|
||
mode=""
|
||
></image>
|
||
<text>今日风险</text>
|
||
</view>
|
||
<view>
|
||
<text>高风险：0</text>
|
||
<text>中风险：0</text>
|
||
<text>低风险：0</text>
|
||
<text>计划作业人数：0</text>
|
||
</view>
|
||
</swiper-item>
|
||
<!-- 轮播图 3 -->
|
||
<swiper-item class="item_3 swiper-item-container">
|
||
<view>
|
||
<image
|
||
class="img-container"
|
||
src="../../../static/images/img-phase-two/index_img_three_ein.png"
|
||
mode=""
|
||
></image>
|
||
<text>在场人数：6</text>
|
||
<text>固定人数：6</text>
|
||
<text>临时人数：6</text>
|
||
</view>
|
||
<view>
|
||
<image
|
||
class="img-container"
|
||
src="../../../static/images/img-phase-two/index_img_three_light.png"
|
||
mode=""
|
||
></image>
|
||
<text>绿灯人数：20%</text>
|
||
<text>黄灯人数：20%</text>
|
||
<text>红灯灯人数：20%</text>
|
||
</view>
|
||
</swiper-item>
|
||
<swiper-item class="item_4 swiper-item-container">
|
||
<view>
|
||
<image
|
||
class="img-container-2"
|
||
src="../../../static/images/img-phase-two/index_img_four_pro.png"
|
||
mode=""
|
||
></image>
|
||
<text>项目信息</text>
|
||
</view>
|
||
<view>
|
||
<text>在建工程：0</text>
|
||
<text>投入分包：0</text>
|
||
<text>在用班组：0</text>
|
||
<text>在场人员：0</text>
|
||
</view>
|
||
</swiper-item>
|
||
</swiper>
|
||
|
||
<!-- 风险提示 -->
|
||
<view class="today-warning">
|
||
<image class="warning-img" src="../../../static/images/img-phase-two/index_news.png" mode=""></image>
|
||
<text>今日风险</text>
|
||
<swiper class="swiper-warning" circular>
|
||
<swiper-item>高风险：0</swiper-item>
|
||
<swiper-item>中风险0</swiper-item>
|
||
<swiper-item>低风险0</swiper-item>
|
||
</swiper>
|
||
</view>
|
||
|
||
<!-- 数据概览 -->
|
||
<view class="data-overview common-style">
|
||
<h3>数据概览</h3>
|
||
<view class="data-overview-content">
|
||
<view v-for="item in dataOverviewList" :key="item.data_title">
|
||
<image class="data-overview-img" :src="item.data_img_src" mode=""></image>
|
||
<view class="data-overview-item">
|
||
<text>{{ item.data_num }}</text>
|
||
<text>{{ item.data_title }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 人员考勤 -->
|
||
<view class="check-work-attendance common-style">
|
||
<h3>人员考勤率</h3>
|
||
<view class="check-work-attendance-container">
|
||
<view v-for="item in progressList" :key="item.progress_title">
|
||
<view class="top-title">
|
||
<text>{{ item.progress_title }}</text>
|
||
<text :style="{ color: item.textColor }">{{ item.progress_proportion }}%</text>
|
||
</view>
|
||
<view class="bottom-progress">
|
||
<view class="progress-box">
|
||
<progress :activeColor="item.textColor" :percent="item.progress_proportion" stroke-width="6" />
|
||
</view>
|
||
<text>{{ item.progress_ready }}/{{ item.progress_amount }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 工程概况 -->
|
||
<view class="project-container common-style">
|
||
<h3>工程概况</h3>
|
||
<view class="project-content">
|
||
<view v-for="item in projectList" :key="item.project_title">
|
||
<view class="top-title">
|
||
<text>{{ item.project_title }}</text>
|
||
<text>{{ item.project_num }}</text>
|
||
</view>
|
||
<view class="bottom-progress">
|
||
<view class="progress-box">
|
||
<progress :activeColor="item.textColor" :percent="item.project_ratio" stroke-width="6" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<!-- 饼图 -->
|
||
<view class="charts_container">
|
||
<PieChartsModel />
|
||
</view>
|
||
<!-- 柱状图 -->
|
||
<view class="charts_container">
|
||
<BarChartsModel />
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 在场人员概况 -->
|
||
<view class="person-container common-style">
|
||
<h3>在场人员概况</h3>
|
||
<view class="person-content">
|
||
<view>
|
||
<image class="person-img" src="../../../static/images/img-phase-two/index_green_light.png" mode=""></image>
|
||
<text class="text-strong">83.67%</text>
|
||
<text>5294</text>
|
||
</view>
|
||
<view>
|
||
<image class="person-img" src="../../../static/images/img-phase-two/index_yellow_light.png" mode=""></image>
|
||
<text class="text-strong">83.67%</text>
|
||
<text>5294</text>
|
||
</view>
|
||
<view>
|
||
<image class="person-img" src="../../../static/images/img-phase-two/index_red_light.png" mode=""></image>
|
||
<text class="text-strong">83.67%</text>
|
||
<text>5294</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="gender-content">
|
||
<view class="man-left">
|
||
<view>
|
||
<view>87.58%</view>
|
||
<view>男(633)</view>
|
||
</view>
|
||
|
||
<view class="gender-img" style="margin-left: 30rpx">图片占位</view>
|
||
</view>
|
||
<view class="girl-right">
|
||
<view class="gender-img" style="margin-right: 30rpx">图片占位</view>
|
||
<view>
|
||
<view>87.58%</view>
|
||
<view>女(755)</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<h5>固定、临时人员</h5>
|
||
|
||
<view class="person-num">
|
||
<view style="color: #04cdfa">
|
||
<image
|
||
style="width: 60rpx; height: 60rpx; margin-left: 10rpx"
|
||
src="../../../static/images/img-phase-two/index_img_person.png"
|
||
mode=""
|
||
></image>
|
||
5560
|
||
</view>
|
||
<view style="color: #fd8d01">
|
||
<image
|
||
style="width: 60rpx; height: 60rpx; margin-right: 10rpx"
|
||
src="../../../static/images/img-phase-two/index_img_person.png"
|
||
mode=""
|
||
></image>
|
||
767
|
||
</view>
|
||
</view>
|
||
<view class="person-num-progress">
|
||
<progress activeColor="#52bff3" backgroundColor="#fac13b" percent="60" stroke-width="6" />
|
||
</view>
|
||
|
||
<view class="person-proportion">
|
||
<text style="color: #04cdfa">固定占比87.88%</text>
|
||
<text style="color: #fd8d01">流动占比12.122%</text>
|
||
</view>
|
||
|
||
<view class="charts_container">
|
||
<PieChartsModelRing />
|
||
</view>
|
||
<view class="charts_container">
|
||
<PieChartsModelRing />
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
|
||
<m-tabbar fixed fill :current="0" :tabbar="tabbar"></m-tabbar>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import TabbarConfig from '../util/tabbar.js'
|
||
// import face from '../../../uni_modules/mcc-face/index'
|
||
import { getStudentStudyWorkList } from '@/api/eduApp'
|
||
import config from '@/config'
|
||
import AES from '@/utils/realNameAes.js'
|
||
import * as echarts from 'echarts'
|
||
|
||
import PieChartsModel from './components/pie-charts-model'
|
||
import BarChartsModel from './components/bar-charts-model'
|
||
import PieChartsModelRing from './components/pie-charts-model-ring'
|
||
export default {
|
||
components: {
|
||
PieChartsModel,
|
||
BarChartsModel,
|
||
PieChartsModelRing
|
||
},
|
||
data() {
|
||
return {
|
||
userId: uni.getStorageSync('userId'),
|
||
tabbar: TabbarConfig,
|
||
|
||
imgList: [
|
||
{
|
||
image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
|
||
title: '昨夜星辰昨夜风，画楼西畔桂堂东'
|
||
},
|
||
{
|
||
image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
|
||
title: '身无彩凤双飞翼，心有灵犀一点通'
|
||
},
|
||
{
|
||
image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
|
||
title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
|
||
}
|
||
],
|
||
msgList: [],
|
||
dataOverviewList: [
|
||
{
|
||
data_title: '在建工程',
|
||
data_num: 170,
|
||
data_img_src: '../../../static/images/img-phase-two/index_img_pro.png'
|
||
},
|
||
{
|
||
data_title: '在用分包单位',
|
||
data_num: 170,
|
||
data_img_src: '../../../static/images/img-phase-two/index_img_sub.png'
|
||
},
|
||
{
|
||
data_title: '在用班组',
|
||
data_num: 170,
|
||
data_img_src: '../../../static/images/img-phase-two/index_img_team.png'
|
||
},
|
||
{
|
||
data_title: '在场人数',
|
||
data_num: 170,
|
||
data_img_src: '../../../static/images/img-phase-two/index_img_person.png'
|
||
},
|
||
{
|
||
data_title: '日计划打卡数',
|
||
data_num: 170,
|
||
data_img_src: '../../../static/images/img-phase-two/index_img_plan_person.png'
|
||
},
|
||
{
|
||
data_title: '今日打卡',
|
||
data_num: 170,
|
||
data_img_src: '../../../static/images/img-phase-two/index_img_att.png'
|
||
}
|
||
],
|
||
|
||
progressList: [
|
||
{
|
||
progress_title: '在场出勤率',
|
||
progress_proportion: 10,
|
||
progress_amount: 6325,
|
||
progress_ready: 200,
|
||
textColor: '#17cef3'
|
||
},
|
||
{
|
||
progress_title: '作业考勤率',
|
||
progress_proportion: 10,
|
||
progress_amount: 6325,
|
||
progress_ready: 200,
|
||
textColor: '#25c294'
|
||
},
|
||
{
|
||
progress_title: '在场人员（固定）',
|
||
progress_proportion: 10,
|
||
progress_amount: 6325,
|
||
progress_ready: 200,
|
||
textColor: '#f2df55'
|
||
},
|
||
{
|
||
progress_title: '在场人员（临时）',
|
||
progress_proportion: 10,
|
||
progress_amount: 6325,
|
||
progress_ready: 200,
|
||
textColor: '#186ff0'
|
||
},
|
||
{
|
||
progress_title: '考勤率（固定人员）',
|
||
progress_proportion: 10,
|
||
progress_amount: 6325,
|
||
progress_ready: 200,
|
||
textColor: '#f9971e'
|
||
},
|
||
{
|
||
progress_title: '考勤率（临时人员）',
|
||
progress_proportion: 10,
|
||
progress_amount: 6325,
|
||
progress_ready: 200,
|
||
textColor: '#f44d46'
|
||
}
|
||
],
|
||
|
||
projectList: [
|
||
{
|
||
project_title: '在建',
|
||
project_ratio: 30,
|
||
project_num: 160,
|
||
textColor: '#186ff0'
|
||
},
|
||
{
|
||
project_title: '筹建',
|
||
project_ratio: 30,
|
||
project_num: 160,
|
||
textColor: '#f2df55'
|
||
},
|
||
{
|
||
project_title: '停工',
|
||
project_ratio: 30,
|
||
project_num: 160,
|
||
textColor: '#f9971e'
|
||
},
|
||
{
|
||
project_title: '完工',
|
||
project_ratio: 30,
|
||
project_num: 160,
|
||
textColor: '#25c294'
|
||
}
|
||
]
|
||
}
|
||
},
|
||
onLoad() {
|
||
console.log('?? ~ mounted ~ mounted-index:')
|
||
this.getLogin()
|
||
// this.getMsgList()
|
||
},
|
||
|
||
onLoad() {
|
||
setTimeout(() => {
|
||
//模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
|
||
let res = {
|
||
series: [
|
||
{
|
||
data: [
|
||
{ name: '110kv', value: 8, labelShow: false },
|
||
{ name: '220kv', value: 10, labelShow: false },
|
||
{ name: '500kv', value: 20, labelShow: false },
|
||
{ name: '800kv', value: 18, labelShow: false },
|
||
{ name: '1000kv及以上', value: 6, labelShow: false },
|
||
{ name: '其他', value: 6, labelShow: false }
|
||
]
|
||
}
|
||
]
|
||
}
|
||
this.chartData = JSON.parse(JSON.stringify(res))
|
||
}, 500)
|
||
},
|
||
methods: {
|
||
getLogin() {
|
||
const realParams = {
|
||
username: AES.encrypt(uni.getStorageSync('userPhone')),
|
||
password: AES.encrypt('YNsbd@123456'),
|
||
jwtToken: uni.getStorageSync('App-Token')
|
||
}
|
||
uni.request({
|
||
url: config.realLoginUrl + 'login',
|
||
method: 'POST',
|
||
data: JSON.stringify(realParams),
|
||
header: {
|
||
'Content-Type': 'application/json'
|
||
},
|
||
success: res => {
|
||
console.log('?? ~ gotoYy ~ res:', res)
|
||
// console.log('?? ~ gotoYy ~ res:', res.data.token)
|
||
if (res.data.code == 200) {
|
||
// uni.setStorageSync('tjToken', res.data.token)
|
||
uni.setStorageSync('realNameToken', res.data.data.access_token)
|
||
uni.setStorageSync('realNameUser', res.data.data.loginUser.sysUser)
|
||
uni.setStorageSync('realNamePermissions', res.data.data.loginUser.permissions)
|
||
uni.removeStorageSync('hasChosenPro')
|
||
} else {
|
||
uni.showToast({
|
||
title: res.message,
|
||
icon: 'none'
|
||
})
|
||
}
|
||
},
|
||
fail: err => {
|
||
console.log('?? ~ gotoYy ~ err:', err)
|
||
uni.showToast({
|
||
title: err.message,
|
||
icon: 'none'
|
||
})
|
||
}
|
||
})
|
||
},
|
||
// 获取消息列表
|
||
async getMsgList() {
|
||
uni.request({
|
||
url: config.bmwUrl + '/studentUsers/getNoticeList',
|
||
method: 'post',
|
||
data: {},
|
||
header: {
|
||
Authorization: uni.getStorageSync('access_token')
|
||
},
|
||
success: res => {
|
||
console.log('?? ~ getMsgList ~ res:', res)
|
||
this.msgList = res.data
|
||
console.log('?? ~ getMsgList ~ this.msgList:', this.msgList)
|
||
}
|
||
})
|
||
},
|
||
// 点击消息
|
||
handleMsg() {
|
||
uni.navigateTo({
|
||
url: '/pages/realName/my/myMsg'
|
||
})
|
||
},
|
||
|
||
openFaceScan() {
|
||
face.open(['a', 'c'], function (e) {
|
||
face.close()
|
||
})
|
||
},
|
||
|
||
// 返回
|
||
leftClick() {
|
||
console.log('返回')
|
||
// // 退出登录
|
||
// uni.removeStorageSync('access_token')
|
||
// uni.removeStorageSync('userId')
|
||
// uni.removeStorageSync('userName')
|
||
// uni.removeStorageSync('className')
|
||
// uni.removeStorageSync('facePath')
|
||
uni.reLaunch({
|
||
url: '/pages/gzt/index'
|
||
})
|
||
},
|
||
|
||
/* 初始化图表 */
|
||
async initChart() {
|
||
// 等待 canvas 元素渲染完成（对于 H5 环境可能需要）
|
||
|
||
// const pieChartDom = document.getElementById('pieChartDom')
|
||
|
||
const query = uni.createSelectorQuery()
|
||
const pieChartDom = query
|
||
.select('#pieChartDom')
|
||
.boundingClientRect(data => {
|
||
console.log(data)
|
||
})
|
||
.exec()
|
||
this.pieChart = echarts.init(pieChartDom)
|
||
|
||
const option = {
|
||
title: {
|
||
text: 'ECharts 示例'
|
||
},
|
||
tooltip: {},
|
||
xAxis: {
|
||
data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
|
||
},
|
||
yAxis: {},
|
||
series: [
|
||
{
|
||
name: '销量',
|
||
type: 'bar',
|
||
data: [5, 20, 36, 10, 10, 20]
|
||
}
|
||
]
|
||
}
|
||
|
||
// 使用刚指定的配置项和数据显示图表
|
||
this.pieChart.setOption(option)
|
||
|
||
// console.log('初始化图表--')
|
||
// await this.$nextTick()
|
||
// 获取元素
|
||
// const pieChartRef = this.$refs.pieChartRef
|
||
|
||
// console.log('pieChartRef', pieChartRef)
|
||
// // 初始化 ECharts 实例
|
||
// this.pieChart = echarts.init(pieChartRef)
|
||
|
||
// console.log(' this.pieChart', this.pieChart)
|
||
// 设置图表配置项
|
||
// const option = {
|
||
// // ...具体的图表配置项
|
||
|
||
// tooltip: {
|
||
// trigger: 'item',
|
||
// formatter: '{a} <br/>{b} : {c} ({d}%)'
|
||
// },
|
||
// legend: {
|
||
// orient: 'vertical',
|
||
// x: 'right',
|
||
// y: 'center',
|
||
// itemGap: 4,
|
||
// icon: 'rect',
|
||
// align: 'left'
|
||
// // data: ['rose1', 'rose2', 'rose3', 'rose4', 'rose5', 'rose6', 'rose7', 'rose8']
|
||
// },
|
||
// series: [
|
||
// {
|
||
// name: 'Radius Mode',
|
||
// type: 'pie',
|
||
// radius: [20, 140],
|
||
// center: ['25%', '50%'],
|
||
// roseType: 'radius',
|
||
// itemStyle: {
|
||
// borderRadius: 5
|
||
// },
|
||
// label: {
|
||
// show: false
|
||
// },
|
||
// emphasis: {
|
||
// label: {
|
||
// show: true
|
||
// }
|
||
// },
|
||
// data: [
|
||
// { value: 40, name: 'rose 1' },
|
||
// { value: 33, name: 'rose 2' },
|
||
// { value: 28, name: 'rose 3' },
|
||
// { value: 22, name: 'rose 4' },
|
||
// { value: 20, name: 'rose 5' },
|
||
// { value: 15, name: 'rose 6' },
|
||
// { value: 12, name: 'rose 7' },
|
||
// { value: 10, name: 'rose 8' }
|
||
// ]
|
||
// }
|
||
// ]
|
||
// }
|
||
|
||
// 载入图表
|
||
this.pieChart.setOption(option)
|
||
}
|
||
},
|
||
onShow() {
|
||
// this.initChart()
|
||
/*uni.showModal({
|
||
title: '人脸识别',
|
||
content: '开启人脸识别？',
|
||
success:(res) => {
|
||
if(res.confirm) this.openFaceScan()
|
||
}
|
||
})*/
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
/* 修改U-Navbar中链接的字体颜色 */
|
||
/deep/.u-navbar .navbar-nav > li > a {
|
||
color: #fff; /* 将颜色改为红色 */
|
||
}
|
||
/* 如果你想修改当前激活链接的字体颜色 */
|
||
/deep/.u-navbar .navbar-nav > li.active > a {
|
||
color: #fff; /* 将激活链接的颜色改为绿色 */
|
||
}
|
||
.page {
|
||
width: 100vw;
|
||
height: 100vh;
|
||
background-color: #efefef;
|
||
box-sizing: border-box;
|
||
padding: 0 10rpx;
|
||
|
||
.search {
|
||
width: 100%;
|
||
margin: 0 auto;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.opt-grids {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
margin: 3vh auto;
|
||
|
||
view {
|
||
width: 25%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
//margin-bottom: 2vh;
|
||
|
||
image {
|
||
width: 60%;
|
||
height: 7vh;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
span {
|
||
font-size: 26rpx;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
}
|
||
|
||
.swipe-area {
|
||
width: 100%;
|
||
height: 20vh;
|
||
border-radius: 15rpx;
|
||
overflow: hidden;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
|
||
.my-task {
|
||
width: 100%;
|
||
height: 40vh;
|
||
background-color: #fff;
|
||
border-radius: 15rpx;
|
||
box-shadow: 3px 3px 3px #f4f4f4;
|
||
box-sizing: border-box;
|
||
padding: 15rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
.task-list {
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
|
||
.list-item {
|
||
margin: 10px 0;
|
||
background-color: #efefef;
|
||
border-radius: 5px;
|
||
padding: 5px;
|
||
font-size: 13px;
|
||
.item-title {
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
margin-bottom: 5px;
|
||
}
|
||
.item-progress {
|
||
display: flex;
|
||
align-items: center;
|
||
.u-line-progress {
|
||
width: 80%;
|
||
margin-right: 10px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.no-task {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
|
||
.no-task-img {
|
||
width: 80%;
|
||
height: 80%;
|
||
margin: auto;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
image {
|
||
width: 100%;
|
||
height: 90%;
|
||
}
|
||
span {
|
||
font-size: 14px;
|
||
color: #c2c2c2;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
h3 {
|
||
padding: 30rpx 20rpx;
|
||
letter-spacing: 3rpx;
|
||
}
|
||
|
||
.common-style {
|
||
margin-top: 20rpx;
|
||
border-radius: 20rpx;
|
||
background-color: #fff;
|
||
}
|
||
// 轮播图
|
||
.swiper-container {
|
||
height: 400rpx;
|
||
color: #fff;
|
||
.swiper-item-container {
|
||
height: 100%;
|
||
padding-bottom: 20rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-around;
|
||
|
||
view {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
font-size: 28rpx;
|
||
font-weight: bold;
|
||
|
||
text {
|
||
padding: 10rpx 0;
|
||
letter-spacing: 5rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.item_2 view:last-child {
|
||
align-items: flex-start;
|
||
}
|
||
.item_1 {
|
||
background: url('../../../static/images/img-phase-two/index_img_one.png');
|
||
background-size: 100% 100%;
|
||
}
|
||
.item_2 {
|
||
background: url('../../../static/images/img-phase-two/index_img_two.png');
|
||
background-size: 100% 100%;
|
||
}
|
||
.item_3 {
|
||
background: url('../../../static/images/img-phase-two/index_img_three.png');
|
||
background-size: 100% 100%;
|
||
}
|
||
.item_4 {
|
||
background: url('../../../static/images/img-phase-two/index_img_four.png');
|
||
background-size: 100% 100%;
|
||
}
|
||
|
||
.img-container {
|
||
width: 90rpx;
|
||
height: 90rpx;
|
||
}
|
||
.img-container-2 {
|
||
width: 140rpx;
|
||
height: 140rpx;
|
||
}
|
||
|
||
.none-box {
|
||
color: transparent;
|
||
}
|
||
}
|
||
|
||
// 今日风险
|
||
.today-warning {
|
||
margin: 30rpx 0;
|
||
height: 68rpx;
|
||
padding: 0 30rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
border: 1rpx solid #ccc;
|
||
background: #fff;
|
||
border-radius: 58rpx;
|
||
|
||
.warning-img {
|
||
width: 46rpx;
|
||
height: 46rpx;
|
||
}
|
||
|
||
.swiper-warning {
|
||
flex: 1;
|
||
height: 50rpx;
|
||
line-height: 50rpx;
|
||
// background-color: orange;
|
||
}
|
||
}
|
||
|
||
// 数据概览
|
||
.data-overview {
|
||
.data-overview-content {
|
||
padding: 0 10rpx;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: flex-start;
|
||
view {
|
||
width: 33.33%;
|
||
display: flex;
|
||
align-items: center;
|
||
.data-overview-img {
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
}
|
||
.data-overview-item {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-around;
|
||
align-items: flex-start;
|
||
font-size: 24rpx;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 人员考勤率
|
||
.check-work-attendance {
|
||
.check-work-attendance-container {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: flex-start;
|
||
|
||
view {
|
||
width: calc(50% - 40rpx);
|
||
padding: 0 10rpx;
|
||
margin-bottom: 15rpx;
|
||
.top-title,
|
||
.bottom-progress {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
.progress-box {
|
||
flex: 1;
|
||
margin-right: 15rpx;
|
||
}
|
||
}
|
||
.top-title text:last-child {
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 工程概况
|
||
.project-container {
|
||
.project-content {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: flex-start;
|
||
|
||
view {
|
||
width: calc(50% - 40rpx);
|
||
padding: 0 10rpx;
|
||
margin-bottom: 15rpx;
|
||
.top-title,
|
||
.bottom-progress {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
.progress-box {
|
||
flex: 1;
|
||
margin-right: 15rpx;
|
||
}
|
||
}
|
||
.top-title text:last-child {
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.charts_container {
|
||
width: 100%;
|
||
height: 460rpx;
|
||
}
|
||
|
||
// 在场人员概况
|
||
.person-container .person-content {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-around;
|
||
|
||
.person-img {
|
||
width: 160rpx;
|
||
height: 160rpx;
|
||
}
|
||
|
||
view {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
}
|
||
|
||
.text-strong {
|
||
font-size: 24rpx;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
|
||
.gender-content {
|
||
display: flex;
|
||
.man-left,
|
||
.girl-right {
|
||
width: 50%;
|
||
height: 300rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
.gender-img {
|
||
width: 120rpx;
|
||
height: 240rpx;
|
||
background-color: orange;
|
||
}
|
||
}
|
||
}
|
||
|
||
h5 {
|
||
font-weight: normal;
|
||
margin: 30rpx 0 15rpx;
|
||
text-align: center;
|
||
letter-spacing: 2rpx;
|
||
font-size: 28rpx;
|
||
}
|
||
.person-num {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 0 40rpx;
|
||
image {
|
||
vertical-align: middle;
|
||
}
|
||
}
|
||
|
||
.person-num-progress {
|
||
padding: 0 15rpx;
|
||
margin: 20rpx 0;
|
||
}
|
||
|
||
.person-proportion {
|
||
margin: 15rpx 0;
|
||
padding: 0 25rpx;
|
||
display: flex;
|
||
align-content: center;
|
||
justify-content: space-between;
|
||
}
|
||
}
|
||
|
||
.charts-box {
|
||
width: 70%;
|
||
height: 460rpx;
|
||
margin: 0 auto;
|
||
}
|
||
</style>
|