391 lines
11 KiB
Vue
391 lines
11 KiB
Vue
<!--
|
||
* @Author: XHC
|
||
* @Date: 2025-05-19 11:07:37
|
||
* @LastEditors: XHC
|
||
* @LastEditTime: 2025-05-22 09:33:17
|
||
* @Description: 首页
|
||
-->
|
||
<template>
|
||
<view class="index">
|
||
<view class="header">
|
||
<image src="/static/image/index/logo.png" mode="scaleToFill" />
|
||
<view class="title">
|
||
<view>多技术集约多部门协同综合巡检</view>
|
||
<view><text>◎ 集中管控</text> <text>◎ 部门协同</text> <text>◎ 提升效能</text></view>
|
||
</view>
|
||
</view>
|
||
<view class="nav-content">
|
||
<scroll-view
|
||
scroll-x="true"
|
||
class="content-scroll"
|
||
:show-scrollbar="false"
|
||
enable-flex
|
||
>
|
||
<view
|
||
v-for="(item, index) in departments"
|
||
:key="index"
|
||
:class="navCurIndex == index ? 'active' : ''"
|
||
class="scroll-item"
|
||
@click="changeTitle(index)"
|
||
>
|
||
{{ item.name }}
|
||
</view>
|
||
</scroll-view>
|
||
<view v-if="navCurIndex == 0">
|
||
<uni-card :is-shadow="false" class="patrol-card" >
|
||
<view class="time">巡检时间：<text>{{ patrolData.time }}</text></view>
|
||
<view class="card-info">
|
||
<view class="card-box">
|
||
<view class="total line"><text>线路总数</text><text>{{ patrolData.linesTotal }}</text></view>
|
||
<view class="lines" v-for="(item, index) in patrolData.lines" :key="index"><text class="title">{{ item.title }}</text><text class="num">{{ item.total }}</text></view>
|
||
|
||
</view>
|
||
<view class="card-box">
|
||
<view class="total point"><text>点位总数</text><text>{{ patrolData.pointTotal }}</text></view>
|
||
<view class="completion-rate">
|
||
<Dashboard :data="70.8"></Dashboard>
|
||
</view>
|
||
<div class="points-box">
|
||
<view class="points" v-for="(item, index) in patrolData.points" :key="index"><text class="title">{{ item.title }}</text><text class="num">{{ item.total }}</text></view>
|
||
</div>
|
||
</view>
|
||
</view>
|
||
<view class="inlet-box">
|
||
<view class="history">
|
||
<view class="title">
|
||
<view>历史巡检</view>
|
||
<view class="english">HISTORICAL INSPECTION</view>
|
||
</view>
|
||
<view class="go">GO</view>
|
||
</view>
|
||
<view class="report">
|
||
<view class="title">
|
||
<view>巡检报告</view>
|
||
<view class="english">INSPECTION REPORT</view>
|
||
</view>
|
||
<view class="go">GO</view>
|
||
</view>
|
||
</view>
|
||
</uni-card>
|
||
<view class="category-box">
|
||
<view
|
||
v-for="(item, index) in category"
|
||
:key="index"
|
||
:class="categoryCurIndex == index ? 'active' : ''"
|
||
class="category-item grey"
|
||
@click="changeCategory(index)"
|
||
>
|
||
{{ item.name }}
|
||
</view>
|
||
</view>
|
||
<view v-if="categoryCurIndex == 0">
|
||
<uni-card class="list-card" v-for="(item, index) in listData" :key="index">
|
||
<view class="head"><text class="title">{{ item.title }}</text><uni-tag :inverted="true" :text="item.state" :type="item.state == '未巡检' ? 'error' : item.state == '巡检中' ? 'warning' : 'success'" /></view>
|
||
<view class="num grey">线路编号：{{ item.num }}</view>
|
||
<view class="info-box grey">
|
||
<text> <i class="iconfont icon-shizhongfill"></i> {{ item.info }}</text>
|
||
<text>任务 {{ item.task }}</text>
|
||
</view>
|
||
</uni-card>
|
||
</view>
|
||
<view v-if="categoryCurIndex == 1"></view>
|
||
<view v-if="categoryCurIndex == 2"></view>
|
||
<view v-if="categoryCurIndex == 3"></view>
|
||
</view>
|
||
<view v-if="navCurIndex == 1">发电分部</view>
|
||
<view v-if="navCurIndex == 2">自动分部</view>
|
||
<view v-if="navCurIndex == 3">保护分部</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { reactive } from "vue";
|
||
import { onReachBottom } from "@dcloudio/uni-app";
|
||
import Dashboard from "@/components/echarts/dashboard.vue";
|
||
|
||
// 导航栏
|
||
let navCurIndex = ref(0)
|
||
const departments = reactive([
|
||
{ id: 1, name: "运行部" },
|
||
{ id: 2, name: "发电分部" },
|
||
{ id: 3, name: "自动分部" },
|
||
{ id: 4, name: "保护分部" },
|
||
{ id: 5, name: "测试分部" },
|
||
]);
|
||
|
||
const patrolData = reactive({
|
||
time: '2025 2-15 12:00:00',
|
||
linesTotal: 14,
|
||
lines: [
|
||
{ title: '已巡路线', total: 11 },
|
||
{ title: '未巡路线', total: 3 },
|
||
{ title: '异常问题', total: 3 },
|
||
],
|
||
pointTotal: 397,
|
||
points: [
|
||
{ title: '已巡点位', total: 285 },
|
||
{ title: '未巡点位', total: 112 },
|
||
],
|
||
completionRate: 71.8
|
||
})
|
||
// 巡检类别
|
||
let categoryCurIndex = ref(0)
|
||
const category = reactive([
|
||
{ id: 1, name: "全部" },
|
||
{ id: 2, name: "未巡检" },
|
||
{ id: 3, name: "巡检中" },
|
||
{ id: 4, name: "已巡检" },
|
||
])
|
||
|
||
// 列表数据
|
||
let listData = reactive([
|
||
{ title: '左岸白班机组', state: '巡检中', num: 'BHT-YX-XJ-L1.2', info: '白班每班一次，由当班值执行', task: '5/32' },
|
||
{ title: '左岸白班机组', state: '已巡检', num: 'BHT-YX-XJ-L1.2', info: '白班每班一次，由当班值执行', task: '5/32' },
|
||
{ title: '左岸白班机组', state: '巡检中', num: 'BHT-YX-XJ-L1.2', info: '白班每班一次，由当班值执行', task: '5/32' },
|
||
{ title: '左岸白班机组', state: '已巡检', num: 'BHT-YX-XJ-L1.2', info: '白班每班一次，由当班值执行', task: '5/32' },
|
||
{ title: '左岸白班机组', state: '未巡检', num: 'BHT-YX-XJ-L1.2', info: '白班每班一次，由当班值执行', task: '5/32' },
|
||
{ title: '左岸白班机组', state: '巡检中', num: 'BHT-YX-XJ-L1.2', info: '白班每班一次，由当班值执行', task: '5/32' },
|
||
{ title: '左岸白班机组', state: '未巡检', num: 'BHT-YX-XJ-L1.2', info: '白班每班一次，由当班值执行', task: '5/32' },
|
||
{ title: '左岸白班机组', state: '巡检中', num: 'BHT-YX-XJ-L1.2', info: '白班每班一次，由当班值执行', task: '5/32' },
|
||
{ title: '左岸白班机组', state: '巡检中', num: 'BHT-YX-XJ-L1.2', info: '白班每班一次，由当班值执行', task: '5/32' },
|
||
{ title: '左岸白班机组', state: '巡检中', num: 'BHT-YX-XJ-L1.2', info: '白班每班一次，由当班值执行', task: '5/32' },
|
||
{ title: '左岸白班机组', state: '巡检中', num: 'BHT-YX-XJ-L1.2', info: '白班每班一次，由当班值执行', task: '5/32' },
|
||
])
|
||
|
||
onReachBottom(() => {
|
||
loadMore()
|
||
})
|
||
|
||
const loadMore = async () => {
|
||
let data = [
|
||
{ title: '右岸白班机组', state: '巡检中', num: 'BHT-YX-XJ-L1.2', info: '白班每班一次，由当班值执行', task: '5/32' },
|
||
{ title: '右岸白班机组', state: '巡检中', num: 'BHT-YX-XJ-L1.2', info: '白班每班一次，由当班值执行', task: '5/32' },
|
||
{ title: '右岸白班机组', state: '巡检中', num: 'BHT-YX-XJ-L1.2', info: '白班每班一次，由当班值执行', task: '5/32' },
|
||
]
|
||
listData = [ ...listData, ...data]
|
||
}
|
||
|
||
// 切换导航
|
||
const changeTitle = (index) => {
|
||
navCurIndex.value = index
|
||
};
|
||
const changeCategory = (index) => {
|
||
categoryCurIndex.value = index
|
||
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.index {
|
||
background: url('@/static/image/index/bg.png') no-repeat;
|
||
background-size: 100% auto;
|
||
padding-top: 100rpx;
|
||
.header {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
image {
|
||
width: 200rpx;
|
||
height: 200rpx;
|
||
}
|
||
.title {
|
||
color: #fff;
|
||
view:nth-child(1) {
|
||
font-weight: 700;
|
||
font-size: 36rpx;
|
||
background-image: linear-gradient(to bottom, #fff, #ffffffef, #ffffff00); /* 渐变方向和颜色 */
|
||
-webkit-background-clip: text;
|
||
color: transparent; /* 文字颜色设置为透明，使背景色显示 */
|
||
}
|
||
view:nth-child(2) {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin: 15rpx 60rpx 0 0;
|
||
font-size: 24rpx;
|
||
border-bottom: 2rpx solid #fff;
|
||
}
|
||
}
|
||
}
|
||
.nav-content {
|
||
box-sizing: border-box;
|
||
.content-scroll {
|
||
height: 100rpx;
|
||
line-height: 100rpx;
|
||
white-space: nowrap;
|
||
.scroll-item {
|
||
height: 35rpx;
|
||
line-height: 35rpx;
|
||
display: inline-block;
|
||
text-align: center;
|
||
font-size: 31rpx;
|
||
font-weight: bold;
|
||
color: #DFE5F0;
|
||
margin-left: 30rpx;
|
||
padding: 0 20rpx;
|
||
position: relative;
|
||
&.active {
|
||
color: #2851f3;
|
||
background: #fff;
|
||
border-radius: 15rpx;
|
||
padding: 15rpx 20rpx;
|
||
&:after {
|
||
content: '';
|
||
display: inline-block;
|
||
width: 0;
|
||
height: 0;
|
||
border: 15rpx solid transparent;
|
||
border-top: 15rpx solid #fff;
|
||
position: absolute;
|
||
top: 95%;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.patrol-card {
|
||
border-radius: 10rpx;
|
||
padding: 5rpx 10rpx;
|
||
.time {
|
||
color: #808185;
|
||
}
|
||
.card-info {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
.card-box {
|
||
width: 42%;
|
||
background: #EDF3FD;
|
||
border-radius: 10rpx;
|
||
padding: 20rpx;
|
||
.total {
|
||
display: grid;
|
||
grid-template-columns: 180rpx 50rpx;
|
||
padding-left: 20rpx;
|
||
margin-bottom: 20rpx;
|
||
font-weight: 600;
|
||
border-left: 6rpx solid;
|
||
height: 30rpx;
|
||
line-height: 30rpx;
|
||
}
|
||
.lines {
|
||
display: grid;
|
||
grid-template-columns: 205rpx 50rpx;
|
||
align-items: center;
|
||
margin-top: 20rpx;
|
||
|
||
.title {
|
||
padding: 10rpx 24rpx;
|
||
border-radius: 10rpx;
|
||
background: linear-gradient(to right,#c7dcfbb5,#e7f1fd28);
|
||
}
|
||
|
||
&:nth-child(3) {
|
||
color: #E99A71;
|
||
}
|
||
&:nth-child(4) {
|
||
color: #DE503B;
|
||
}
|
||
}
|
||
.line {
|
||
border-color: #5291FF;
|
||
}
|
||
.point {
|
||
border-color: #4AC1B3;
|
||
}
|
||
|
||
.title {
|
||
color: #7E848D;
|
||
}
|
||
|
||
.num {
|
||
font-weight: 600;
|
||
}
|
||
|
||
.points-box {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.points {
|
||
display: flex;
|
||
flex-direction: column-reverse;
|
||
align-items: center;
|
||
.num {
|
||
font-size: 27rpx;
|
||
}
|
||
&:nth-last-child(1) {
|
||
color: #E99A71;
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
.inlet-box {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin: 20rpx -40rpx -20rpx -40rpx;
|
||
color: #fff;
|
||
i { font-size: 40rpx; }
|
||
.history {
|
||
background: url('@/static/image/index/history.png') no-repeat;
|
||
}
|
||
.report {
|
||
background: url('@/static/image/index/report.png');
|
||
}
|
||
.history, .report {
|
||
width: 50%;
|
||
display: grid;
|
||
grid-template-columns: 90% 50rpx;
|
||
align-items: center;
|
||
justify-items: center;
|
||
background-size: 100% 100%;
|
||
.title {
|
||
font-size: 27rpx;
|
||
font-weight: bold;
|
||
margin-left: 60rpx;
|
||
.english {
|
||
font-size: 14rpx;
|
||
color: #B6DED2;
|
||
}
|
||
}
|
||
.go {
|
||
font-size: 11rpx;
|
||
font-weight: bold;
|
||
margin: -40rpx 0 0 -100rpx;
|
||
border-radius: 15rpx;
|
||
background: #ffffff6f;
|
||
width: 40rpx;
|
||
height: 20rpx;
|
||
line-height: 20rpx;
|
||
text-align: center;
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
.category-box {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
font-weight: bold;
|
||
font-size: 31rpx;
|
||
.active {
|
||
position: relative;
|
||
color: #146FF3;
|
||
&::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: 50%;
|
||
bottom: -10rpx;
|
||
transform: translateX(-50%);
|
||
width: 30rpx;
|
||
height: 6rpx;
|
||
background: #146FF3;
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
|
||
</style> |