master
tangyi 2022-03-25 18:33:33 +08:00
parent 6caa02508a
commit 3bbd8c3701
14 changed files with 2552 additions and 2448 deletions

View File

@ -1,345 +1,346 @@
<template> <template>
<view class="content"> <view class="content">
<statusNav navBarTitle="项目详情"></statusNav> <statusNav navBarTitle="项目详情"></statusNav>
<container-subgroup-two>
<view class="head-top"> <view slot="content" style="margin: 0 -30rpx;">
<view class="details-head"> <view class="head-top">
<view class="swiper-head"> <view class="details-head">
<swiper class="swiper" @change="changeAutoplay" :autoplay="autoplay" :interval="interval" <view class="swiper-head">
> <swiper class="swiper" @change="changeAutoplay" :autoplay="autoplay" :interval="interval">
<swiper-item> <swiper-item>
<view class="swiper-item uni-bg-red"> <view class="swiper-item uni-bg-red">
<image class="img" src="../../static/del/img001.png" mode="aspectFill"></image> <image class="img" src="../../static/del/img001.png" mode="aspectFill"></image>
</view> </view>
</swiper-item> </swiper-item>
<swiper-item> <swiper-item>
<view class="swiper-item uni-bg-red"> <view class="swiper-item uni-bg-red">
<image class="img" src="../../static/del/img001.png" mode="aspectFill"></image> <image class="img" src="../../static/del/img001.png" mode="aspectFill"></image>
</view> </view>
</swiper-item> </swiper-item>
<swiper-item> <swiper-item>
<view class="swiper-item uni-bg-red"> <view class="swiper-item uni-bg-red">
<image class="img" src="../../static/del/img001.png" mode="aspectFill"></image> <image class="img" src="../../static/del/img001.png" mode="aspectFill"></image>
</view> </view>
</swiper-item> </swiper-item>
</swiper> </swiper>
<view class="indication-point "> <view class="indication-point ">
{{index}}/3 {{index}}/3
</view> </view>
</view> </view>
<view class="title"> <view class="title">
湖南工业大学生化学院会议室P2.5全彩LED显示屏 湖南工业大学生化学院会议室P2.5全彩LED显示屏
</view> </view>
<view class="code"> <view class="code">
XM20220108-1001 XM20220108-1001
</view> </view>
<view class="address"> <view class="address">
<image class="img" src="../../static/iocn/im.png" mode=""></image> <image class="img" src="../../static/iocn/im.png" mode=""></image>
<view class="text"> <view class="text">
湖南省长沙市高新开发区谷园路109号像素大厦1205 湖南省长沙市高新开发区谷园路109号像素大厦1205
</view> </view>
</view> </view>
</view> </view>
<view class="last-date"> <view class="last-date">
<view class="last-date-content"> <view class="last-date-content">
<image class="icon" src="../../static/iocn/gzzt.png" mode=""></image> <image class="icon" src="../../static/iocn/gzzt.png" mode=""></image>
<view class="text"> <view class="text">
最近一次故障时间2021-11-18 170016 最近一次故障时间2021-11-18 170016
</view> </view>
</view> </view>
</view> </view>
</view>
<view class="project-message-title">
<view class="icon">
</view>
<view class="text">
项目概况
</view>
</view>
<view class="project-message-content">
<view class="li">
<view class="title-one">
客户名称
</view>
<view class="text">
上海弘焱电子科技有限公司
</view>
</view>
<view class="li">
<view class="title-one">
竣工日期
</view>
<view class="text">
2022/2/26
</view>
</view>
<view class="li">
<view class="title-one">
质保年限
</view>
<view class="text">
1
</view>
</view>
<view class="li">
<view class="title-one">
产品品类
</view>
<view class="text">
单色LED屏
</view>
</view>
<view class="li">
<view class="title-one">
品牌
</view>
<view class="text">
海康威视
</view>
</view>
<view class="li">
<view class="title-one">
维保次数
</view>
<view class="text">
4
</view>
</view>
<view class="li">
<view class="title">
规格型号
</view>
<view class="text">
DS-CK15FI
</view>
</view>
<view class="li">
<view class="title">
尺寸
</view>
<view class="text">
4.57m*2.88m
</view>
</view>
<view class="li">
<view class="title">
合同类型
</view>
<view class="text">
制作安装
</view>
</view>
<view class="li">
<view class="title">
合同开始
</view>
<view class="text">
2021/02/26
</view>
</view>
<view class="li">
<view class="title">
合同结束
</view>
<view class="text">
2021/02/2
</view>
</view>
<view class="li">
<view class="title">
应用场景 </view>
<view class="text">
会议室
</view>
</view>
<view class="li">
<view class="title">
安装位置
</view>
<view class="text">
地下负二层总控电机室
</view>
</view>
</view>
<view class="project-message-title">
<view class="icon">
</view>
<view class="text">
项目材料
</view>
</view>
<view class="project-materials-content">
<view class="project-materials-title">
<view class="text">
名称
</view>
<view class="text">
品牌
</view>
<view class="text">
型号
</view>
<view class="text">
批次
</view>
<view class="text">
尺寸
</view>
<view class="text">
数量
</view>
</view>
<view class="project-materials-text">
<view class="text">
接收卡
</view>
<view class="text">
卡莱特
</view> </view>
<view class="text"> <view class="project-message-title">
5A-75E <view class="icon">
</view>
<view class="text">
项目概况
</view>
</view> </view>
<view class="text"> <view class="project-message-content">
1033876 <view class="li">
<view class="title-one">
客户名称
</view>
<view class="text">
上海弘焱电子科技有限公司
</view>
</view>
<view class="li">
<view class="title-one">
竣工日期
</view>
<view class="text">
2022/2/26
</view>
</view>
<view class="li">
<view class="title-one">
质保年限
</view>
<view class="text">
1
</view>
</view>
<view class="li">
<view class="title-one">
产品品类
</view>
<view class="text">
单色LED屏
</view>
</view>
<view class="li">
<view class="title-one">
品牌
</view>
<view class="text">
海康威视
</view>
</view>
<view class="li">
<view class="title-one">
维保次数
</view>
<view class="text">
4
</view>
</view>
<view class="li">
<view class="title">
规格型号
</view>
<view class="text">
DS-CK15FI
</view>
</view>
<view class="li">
<view class="title">
尺寸
</view>
<view class="text">
4.57m*2.88m
</view>
</view>
<view class="li">
<view class="title">
合同类型
</view>
<view class="text">
制作安装
</view>
</view>
<view class="li">
<view class="title">
合同开始
</view>
<view class="text">
2021/02/26
</view>
</view>
<view class="li">
<view class="title">
合同结束
</view>
<view class="text">
2021/02/2
</view>
</view>
<view class="li">
<view class="title">
应用场景 </view>
<view class="text">
会议室
</view>
</view>
<view class="li">
<view class="title">
安装位置
</view>
<view class="text">
地下负二层总控电机室
</view>
</view>
</view> </view>
<view class="text"> <view class="project-message-title">
* <view class="icon">
</view>
<view class="text">
项目材料
</view>
</view> </view>
<view class="text"> <view class="project-materials-content">
1 <view class="project-materials-title">
<view class="text">
名称
</view>
<view class="text">
品牌
</view>
<view class="text">
型号
</view>
<view class="text">
批次
</view>
<view class="text">
尺寸
</view>
<view class="text">
数量
</view>
</view>
<view class="project-materials-text">
<view class="text">
接收卡
</view>
<view class="text">
卡莱特
</view>
<view class="text">
5A-75E
</view>
<view class="text">
1033876
</view>
<view class="text">
*
</view>
<view class="text">
1
</view>
</view>
</view> </view>
</view> <view class="record-nav">
</view> <view class="li" @click="recordNav(index)" :class="item.state?'on':''" v-for="(item,index) in recordState">
{{item.title}}
<view class="record-nav"> </view>
<view class="li" @click="recordNav(index)" :class="item.state?'on':''" v-for="(item,index) in recordState"> </view>
{{item.title}} <view class="record-content">
</view> <view class="title">
</view> 维修追踪
</view>
<view class="list">
<view class="li on">
<view class="icon">
<view class="icon-con">
</view>
</view>
<view class="con">
<view class="text clips1">
黑屏故障 某某已处理
</view>
<view class="date">
2020-05-15 16:00
</view>
</view>
</view>
<view class="li">
<view class="icon">
</view>
<view class="con">
<view class="text clips1">
黑屏故障 某某已处理
</view>
<view class="date">
2020-05-15 16:00
</view>
</view>
</view>
<view class="li">
<view class="icon">
</view>
<view class="con">
<view class="text clips1">
黑屏故障 某某已处理
</view>
<view class="date">
2020-05-15 16:00
</view>
</view>
</view>
<view class="li">
<view class="icon">
</view>
<view class="con">
<view class="text clips1">
黑屏故障 某某已处理
</view>
<view class="date">
2020-05-15 16:00
</view>
</view>
</view>
<view class="li">
<view class="icon">
</view>
<view class="con">
<view class="text clips1">
黑屏故障 某某已处理
</view>
<view class="date">
2020-05-15 16:00
</view>
</view>
</view>
<view class="li">
<view class="icon">
</view>
<view class="con">
<view class="text">
黑屏故障 某某已处理
</view>
<view class="date">
2020-05-15 16:00
</view>
</view>
</view>
<view class="li">
<view class="icon">
</view>
<view class="con">
<view class="text clips1">
黑屏故障 某某已处理
</view>
<view class="date">
2020-05-15 16:00
</view>
</view>
</view>
</view>
</view>
</view>
</container-subgroup-two>
<view class="record-content">
<view class="title">
维修追踪
</view>
<view class="list">
<view class="li on">
<view class="icon">
<view class="icon-con">
</view>
</view>
<view class="con">
<view class="text clips1">
黑屏故障 某某已处理
</view>
<view class="date">
2020-05-15 16:00
</view>
</view>
</view>
<view class="li">
<view class="icon">
</view>
<view class="con">
<view class="text clips1">
黑屏故障 某某已处理
</view>
<view class="date">
2020-05-15 16:00
</view>
</view>
</view>
<view class="li">
<view class="icon">
</view>
<view class="con">
<view class="text clips1">
黑屏故障 某某已处理
</view>
<view class="date">
2020-05-15 16:00
</view>
</view>
</view>
<view class="li">
<view class="icon">
</view>
<view class="con">
<view class="text clips1">
黑屏故障 某某已处理
</view>
<view class="date">
2020-05-15 16:00
</view>
</view>
</view>
<view class="li">
<view class="icon">
</view>
<view class="con">
<view class="text clips1">
黑屏故障 某某已处理
</view>
<view class="date">
2020-05-15 16:00
</view>
</view>
</view>
<view class="li">
<view class="icon">
</view>
<view class="con">
<view class="text">
黑屏故障 某某已处理
</view>
<view class="date">
2020-05-15 16:00
</view>
</view>
</view>
<view class="li">
<view class="icon">
</view>
<view class="con">
<view class="text clips1">
黑屏故障 某某已处理
</view>
<view class="date">
2020-05-15 16:00
</view>
</view>
</view>
</view>
</view>
</view> </view>
</template> </template>
<script> <script>
import statusNav from "../../components/status-nav.vue" import containerSubgroupTwo from '@/components/containers/container-subgroup-two.vue';
export default { import statusNav from "../../components/status-nav.vue"
components:{ export default {
statusNav components: {
}, statusNav,
containerSubgroupTwo
},
data() { data() {
return { return {
autoplay: true, autoplay: true,
@ -382,7 +383,7 @@
.content { .content {
padding: 16rpx 0; padding: 16rpx 0;
padding-top: 100rpx;
} }
.swiper { .swiper {
@ -481,10 +482,10 @@
display: flex; display: flex;
padding: 0 33rpx; padding: 0 33rpx;
align-items: center; align-items: center;
border-top:2rpx solid #ebebeb; border-top: 2rpx solid #ebebeb;
border-bottom: 2rpx solid #ebebeb; border-bottom: 2rpx solid #ebebeb;
padding-top: 23rpx; padding-top: 23rpx;
background-color: #FFFFFF; background-color: #FFFFFF;
padding-bottom: 21rpx; padding-bottom: 21rpx;
} }
@ -521,7 +522,7 @@
.project-message-content .li { .project-message-content .li {
display: flex; display: flex;
margin-bottom: 31rpx; margin-bottom: 31rpx;
margin-right: 20rpx; margin-right: 20rpx;
} }
@ -539,8 +540,8 @@
.record-nav { .record-nav {
padding: 33rpx 50rpx 33rpx; padding: 33rpx 50rpx 33rpx;
display: flex; display: flex;
margin-top: 10rpx; margin-top: 10rpx;
background-color: #FFFFFF; background-color: #FFFFFF;
justify-content: space-between; justify-content: space-between;
border-bottom: 2rpx solid #D5D4D4; border-bottom: 2rpx solid #D5D4D4;
} }
@ -568,7 +569,7 @@
} }
.record-content { .record-content {
padding: 0 52rpx; padding: 0 52rpx;
padding-top: 33rpx; padding-top: 33rpx;
overflow: hidden; overflow: hidden;
@ -608,16 +609,18 @@
background-color: #999999; background-color: #999999;
top: 14rpx; top: 14rpx;
} }
.record-content .list .li .icon:last-child::after{ .record-content .list .li .icon:last-child::after {
content: ""; content: "";
width: 2rpx; width: 2rpx;
position: absolute; position: absolute;
left: 7rpx; left: 7rpx;
height: 102rpx; height: 102rpx;
background-color: #999999; background-color: #999999;
top: 14rpx;; top: 14rpx;
} ;
}
.record-content .list .li .con { .record-content .list .li .con {
display: flex; display: flex;
align-items: center; align-items: center;
@ -636,61 +639,70 @@
position: relative; position: relative;
z-index: 1; z-index: 1;
} }
.record-content .list .on .icon .icon-con{
background-color: #0084ff; .record-content .list .on .icon .icon-con {
width: 13rpx; background-color: #0084ff;
height: 13rpx; width: 13rpx;
border-radius: 50%; height: 13rpx;
} border-radius: 50%;
.record-content .list .on .icon::after { }
content: "";
width: 2rpx; .record-content .list .on .icon::after {
position: absolute; content: "";
left: 9rpx; width: 2rpx;
height: 170rpx; position: absolute;
z-index: -1; left: 9rpx;
background-color: #0084ff; height: 170rpx;
top: 20rpx; z-index: -1;
} background-color: #0084ff;
.record-content .list .on .con{ top: 20rpx;
display: block; }
color: #0084ff;
} .record-content .list .on .con {
.record-content .list .on .con .text{ display: block;
margin-bottom: 35rpx; color: #0084ff;
} }
.record-content .list .on .con .date{
margin-bottom: 35rpx; .record-content .list .on .con .text {
} margin-bottom: 35rpx;
.record-content .list .on{ }
align-items: flex-start;
} .record-content .list .on .con .date {
margin-bottom: 35rpx;
.project-materials-title{ }
display: flex;
color: #00a2e9; .record-content .list .on {
font-size: 24rpx; align-items: flex-start;
background-color: #FFFFFF; }
border-bottom: 2rpx solid #EDEDED;
.project-materials-title {
font-weight: bold; display: flex;
padding: 26rpx 20rpx; color: #00a2e9;
justify-content: space-between; font-size: 24rpx;
} background-color: #FFFFFF;
.project-materials-title .text{ border-bottom: 2rpx solid #EDEDED;
width: 16%;
text-align: center; font-weight: bold;
} padding: 26rpx 20rpx;
.project-materials-text{ justify-content: space-between;
display: flex; }
background-color: #FFFFFF;
border-bottom: 2rpx solid #EDEDED; .project-materials-title .text {
padding: 26rpx 20rpx; width: 16%;
font-size: 24rpx; text-align: center;
justify-content: space-between; }
}
.project-materials-text .text{ .project-materials-text {
width: 16%; display: flex;
text-align: center; background-color: #FFFFFF;
} border-bottom: 2rpx solid #EDEDED;
padding: 26rpx 20rpx;
font-size: 24rpx;
justify-content: space-between;
}
.project-materials-text .text {
width: 16%;
text-align: center;
}
</style> </style>

View File

@ -1,7 +1,8 @@
<template> <template>
<view class="content"> <view class="content">
<statusNav navBarTitle="(项目)查询结果"></statusNav> <statusNav navBarTitle="(项目)查询结果"></statusNav>
<container-subgroup-two>
<view slot="content" style="margin: 0 -30rpx;">
<view class="project-list"> <view class="project-list">
<view class="li" @click="projectDetailsFun()"> <view class="li" @click="projectDetailsFun()">
<view class="message"> <view class="message">
@ -118,17 +119,17 @@
</view> </view>
</view> </view>
</view> </view>
</view>
<footTabOne :current="1"></footTabOne> </container-subgroup-two>
</view> </view>
</template> </template>
<script> <script>
import statusNav from '../../components/status-nav.vue'; import statusNav from '../../components/status-nav.vue';
import footTabOne from "../../components/foot-tabs/foot-tab-one.vue" import containerSubgroupTwo from '@/components/containers/container-subgroup-two.vue';
export default { export default {
components:{ components:{
footTabOne, containerSubgroupTwo,
statusNav statusNav
}, },
data() { data() {
@ -175,7 +176,6 @@
} }
.content{ .content{
padding-top: 100rpx;
} }
.project-list-input { .project-list-input {
width: 100%; width: 100%;
@ -183,7 +183,10 @@
position: relative; position: relative;
padding: 20rpx 16rpx; padding: 20rpx 16rpx;
box-sizing: border-box; box-sizing: border-box;
background-color: #FFFFFF background-color: #FFFFFF;
} }
.project-list-input .int { .project-list-input .int {

View File

@ -1,6 +1,8 @@
<template> <template>
<view> <view>
<view class="head"> <view class="head">
<view class="text"> <view class="text">
查询功能 查询功能
@ -49,10 +51,10 @@
</view> </view>
</view> </view>
<view class="imgJCon"> <view class="imgJCon">
<image class="imgJ" src="../../static/iocn/jh.png" mode=""></image> <image class="imgJ" src="../../static/iocn/jh.png" mode=""></image>
</view> </view>
</view> </view>
</template> </template>
@ -242,14 +244,15 @@
height: 40rpx; height: 40rpx;
position: fixed; position: fixed;
display: block; display: block;
margin: auto; margin: auto;
} }
.imgJCon{
.imgJCon {
display: flex; display: flex;
justify-content: center; justify-content: center;
height: 40rpx; height: 40rpx;
margin-top: 180rpx; margin-top: 180rpx;
} }
</style> </style>

View File

@ -1,187 +1,196 @@
<template> <template>
<view class="content"> <view class="content">
<statusNav navBarTitle="故障统计"></statusNav> <statusNav navBarTitle="故障统计"></statusNav>
<view class="faultStatistics-nav">
<view class="li" @click="navlistIndexFun(index)" :class="navlistIndex==index?'on':''" <container-subgroup-two>
v-for="(item,index) in navlist"> <view slot="content" style="margin: 0 -30rpx;">
{{item.title}} <view class="faultStatistics-nav">
</view> <view class="li" @click="navlistIndexFun(index)" :class="navlistIndex==index?'on':''"
</view> v-for="(item,index) in navlist">
<view class="settlement-type"> {{item.title}}
<view class="settlement-type-title"> </view>
结算类型 </view>
</view> <view class="settlement-type">
<view class="settlement-type-title">
<view class="settlement-type-content"> 结算类型
<view class="li liB"> </view>
<view class="text">
单次收费 <view class="settlement-type-content">
</view> <view class="li liB">
<view class="num"> <view class="text">
20 单次收费
</view> </view>
</view> <view class="num">
20
<view class="li liC"> </view>
<view class="text"> </view>
验收扫尾
</view> <view class="li liC">
<view class="num"> <view class="text">
3 验收扫尾
</view> </view>
</view> <view class="num">
<view class="li liD"> 3
<view class="text"> </view>
质保免费 </view>
</view> <view class="li liD">
<view class="num"> <view class="text">
46 质保免费
</view> </view>
</view> <view class="num">
<view class="li"> 46
<view class="text"> </view>
包年签单 </view>
</view> <view class="li">
<view class="num"> <view class="text">
10 包年签单
</view> </view>
</view> <view class="num">
</view> 10
</view> </view>
</view>
<view class="fault-type"> </view>
<view class="settlement-type-title"> </view>
故障类型
</view> <view class="fault-type">
<view class="charts-box"> <view class="settlement-type-title">
<qiun-data-charts type="ring" :chartData="chartData" background="none" /> 故障类型
</view> </view>
</view> <view class="charts-box">
<view class="brand-analysis"> <qiun-data-charts type="ring" :chartData="chartData" background="none" />
<view class="settlement-type-title"> </view>
品牌分析 </view>
</view> <view class="brand-analysis">
<view class="settlement-type-title">
<view class="brand-analysis-box"> 品牌分析
<view class="li"> </view>
<view class="serial-number">
1 <view class="brand-analysis-box">
</view> <view class="li">
<view class="serial-number">
<view class="brand-analysis-center"> 1
<view class="title-box"> </view>
<view class="title">
海康威视 <view class="brand-analysis-center">
</view> <view class="title-box">
<view class="cor"> <view class="title">
10 海康威视
</view> </view>
<view class="cor1"> <view class="cor">
23.3% 10
</view> </view>
</view> <view class="cor1">
23.3%
<view class="percentage"> </view>
<view class="percentage-box" :style="{width:getPercentage(33,900)}"> </view>
</view> <view class="percentage">
</view> <view class="percentage-box" :style="{width:getPercentage(33,900)}">
</view>
</view>
<image class="icon" src="../../static/iocn/xl.png" mode=""></image> </view>
</view> </view>
<view class="li">
<view class="serial-number"> <image class="icon" src="../../static/iocn/xl.png" mode=""></image>
2 </view>
</view> <view class="li">
<view class="serial-number">
<view class="brand-analysis-center"> 2
<view class="title-box"> </view>
<view class="title">
海康威视 <view class="brand-analysis-center">
</view> <view class="title-box">
<view class="cor"> <view class="title">
10 海康威视
</view> </view>
<view class="cor1"> <view class="cor">
23.3% 10
</view> </view>
</view> <view class="cor1">
23.3%
<view class="percentage"> </view>
<view class="percentage-box" :style="{width:getPercentage(33,900)}"> </view>
</view> <view class="percentage">
</view> <view class="percentage-box" :style="{width:getPercentage(33,900)}">
</view>
</view>
<image class="icon" src="../../static/iocn/xl.png" mode=""></image> </view>
</view> </view>
<view class="li">
<view class="serial-number"> <image class="icon" src="../../static/iocn/xl.png" mode=""></image>
3 </view>
</view> <view class="li">
<view class="serial-number">
<view class="brand-analysis-center"> 3
<view class="title-box"> </view>
<view class="title">
海康威视 <view class="brand-analysis-center">
</view> <view class="title-box">
<view class="cor"> <view class="title">
10 海康威视
</view> </view>
<view class="cor1"> <view class="cor">
23.3% 10
</view> </view>
</view> <view class="cor1">
23.3%
<view class="percentage"> </view>
<view class="percentage-box" :style="{width:getPercentage(33,900)}"> </view>
</view> <view class="percentage">
</view> <view class="percentage-box" :style="{width:getPercentage(33,900)}">
</view>
</view>
<image class="icon" src="../../static/iocn/xl.png" mode=""></image> </view>
</view> </view>
<view class="li">
<view class="serial-number"> <image class="icon" src="../../static/iocn/xl.png" mode=""></image>
4 </view>
</view> <view class="li">
<view class="serial-number">
<view class="brand-analysis-center"> 4
<view class="title-box"> </view>
<view class="title">
海康威视 <view class="brand-analysis-center">
</view> <view class="title-box">
<view class="cor"> <view class="title">
10 海康威视
</view> </view>
<view class="cor1"> <view class="cor">
23.3% 10
</view> </view>
</view> <view class="cor1">
23.3%
<view class="percentage"> </view>
<view class="percentage-box percentage-box-ber" :style="{width:getPercentage(33,80)}"> </view>
</view> <view class="percentage">
</view> <view class="percentage-box percentage-box-ber" :style="{width:getPercentage(33,80)}">
</view>
</view>
<image class="icon" src="../../static/iocn/xl.png" mode=""></image> </view>
</view> </view>
</view>
</view> <image class="icon" src="../../static/iocn/xl.png" mode=""></image>
</view>
</view>
</view>
</view> </container-subgroup-two>
</view> </view>
</template> </template>
<script> <script>
import containerSubgroupTwo from '@/components/containers/container-subgroup-two.vue';
import statusNav from '../../components/status-nav.vue'; import statusNav from '../../components/status-nav.vue';
export default { export default {
components: { components: {
statusNav statusNav,
containerSubgroupTwo
}, },
data() { data() {
return { return {
@ -263,8 +272,6 @@
<style> <style>
.content { .content {
padding: 0rpx 15rpx; padding: 0rpx 15rpx;
padding-top: 80rpx;
padding-bottom: 80rpx;
} }
@ -410,7 +417,7 @@
width: 100%; width: 100%;
border-radius: 15rpx; border-radius: 15rpx;
padding-bottom: 120rpx; padding-bottom: 120rpx;
box-shadow: 0rpx 10rpx 20rpx rgba(0, 0, 0, 0.1); box-shadow: 0rpx 10rpx 20rpx rgba(0, 0, 0, 0.1);
box-sizing: border-box; box-sizing: border-box;
margin-top: 30rpx; margin-top: 30rpx;
} }
@ -473,7 +480,8 @@
background-color: #2d8efd; background-color: #2d8efd;
border-radius: 25rpx; border-radius: 25rpx;
} }
.percentage-box-ber{
background-color: #ffb503; .percentage-box-ber {
background-color: #ffb503;
} }
</style> </style>

View File

@ -1,322 +1,328 @@
<template> <template>
<view class="content"> <view class="content">
<statusNav navBarTitle="数据看板"></statusNav> <statusNav navBarTitle="数据看板"></statusNav>
<container-subgroup-two>
<view class="project-overview"> <view slot="content" style="margin: 0 -30rpx;">
<view class="settlement-type-title"> <view class="project-overview">
项目概况 <view class="settlement-type-title">
</view> 项目概况
<view class="project-gross"> </view>
<view class="project-gross-title"> <view class="project-gross">
累计总项目量 <view class="project-gross-title">
累计总项目量
</view>
<view class="project-gross-num">
<view class="li">
0
</view>
<view class="li">
2
</view>
<view class="li">
9
</view>
<view class="li">
8
</view>
<view class="li">
5
</view>
</view>
<view class="project-gross-box">
<view class="li">
<view class="date">
今日
</view>
<view class="date-con">
<view class="date-con-li">
<view class="text">
新增项目量
</view>
<view class="single-amount">
0
</view>
</view>
<view class="date-con-li">
<view class="text">
新增工单量
</view>
<view class="single-amount">
0
</view>
</view>
<view class="date-con-li">
<view class="text">
项目故障率
</view>
<view class="single-amount">
0
</view>
</view>
</view>
</view>
<view class="li">
<view class="date">
本周
</view>
<view class="date-con">
<view class="date-con-li">
<view class="text">
新增项目量
</view>
<view class="single-amount">
0
</view>
</view>
<view class="date-con-li">
<view class="text">
新增工单量
</view>
<view class="single-amount">
0
</view>
</view>
<view class="date-con-li">
<view class="text">
项目故障率
</view>
<view class="single-amount">
0
</view>
</view>
</view>
</view>
<view class="li">
<view class="date">
本月
</view>
<view class="date-con">
<view class="date-con-li">
<view class="text">
新增项目量
</view>
<view class="single-amount">
0
</view>
</view>
<view class="date-con-li">
<view class="text">
新增工单量
</view>
<view class="single-amount">
0
</view>
</view>
<view class="date-con-li">
<view class="text">
项目故障率
</view>
<view class="single-amount">
0
</view>
</view>
</view>
</view>
</view>
</view>
</view>
<view class="data-icon">
<view class="settlement-type-title">
年度项目数据明细
</view>
<view class="">
<view class="charts-box">
<qiun-data-charts type="mix" :chartData="chartData" background="none" />
</view>
</view>
</view>
<view class="serve-data">
<view class="settlement-type-title">
服务数据
</view>
<view class="serve-data-box">
<view class="serve-data-left">
<view class="title">
本月服务量
</view>
<view class="text-con">
<view class="li">
<view class="text">
维保工单:
</view>
<view class="num">
3
</view>
</view>
<view class="li">
<view class="text">
巡检服务单:
</view>
<view class="num">
65465
</view>
</view>
<view class="li">
<view class="text">
移屏服务单:
</view>
<view class="num">
32132
</view>
</view>
<view class="li">
<view class="text">
拆屏工单:
</view>
<view class="num">
32132
</view>
</view>
</view>
</view>
<view class="serve-data-left">
<view class="title">
累计服务量
</view>
<view class="text-con">
<view class="li">
<view class="text">
维保工单:
</view>
<view class="num">
3
</view>
</view>
<view class="li">
<view class="text">
巡检服务单:
</view>
<view class="num">
65465
</view>
</view>
<view class="li">
<view class="text">
移屏服务单:
</view>
<view class="num">
32132
</view>
</view>
<view class="li">
<view class="text">
拆屏工单:
</view>
<view class="num">
32132
</view>
</view>
</view>
</view>
</view>
</view>
<view class="data-icon">
<view class="settlement-type-title">
年度项目数据明细
</view>
<view class="">
<view class="charts-box">
<qiun-data-charts type="mix" :chartData="chartDataA" background="none" />
</view>
</view>
</view>
<view class="expire-project">
<view class="settlement-type-title settlement-type-titlea">
质保即将到期项目
</view>
<view class="expire-project-box">
<view class="li-title li">
<view class="name">
项目名称
</view>
<view class="work-order">
工单
</view>
<view class="date">
日期
</view>
</view>
<view class="li-text li">
<view class="name">
1.五岭新天地二期停车场xxxxxxxxxxxxx
</view>
<view class="work-order">
6
</view>
<view class="date">
22/2/24
</view>
</view>
<view class="li-text li">
<view class="name">
1.五岭新天地二期停车场xxxxxxxxxxxxx
</view>
<view class="work-order">
6
</view>
<view class="date">
22/2/24
</view>
</view>
<view class="li-text li">
<view class="name">
1.五岭新天地二期停车场xxxxxxxxxxxxx
</view>
<view class="work-order">
6
</view>
<view class="date">
22/2/24
</view>
</view>
<view class="li-text li">
<view class="name">
1.五岭新天地二期停车场xxxxxxxxxxxxx
</view>
<view class="work-order">
6
</view>
<view class="date">
22/2/24
</view>
</view>
</view>
</view>
</view> </view>
<view class="project-gross-num"> </container-subgroup-two>
<view class="li"> </view>
0
</view>
<view class="li">
2
</view>
<view class="li">
9
</view>
<view class="li">
8
</view>
<view class="li">
5
</view>
</view>
<view class="project-gross-box">
<view class="li">
<view class="date">
今日
</view>
<view class="date-con">
<view class="date-con-li">
<view class="text">
新增项目量
</view>
<view class="single-amount">
0
</view>
</view>
<view class="date-con-li">
<view class="text">
新增工单量
</view>
<view class="single-amount">
0
</view>
</view>
<view class="date-con-li">
<view class="text">
项目故障率
</view>
<view class="single-amount">
0
</view>
</view>
</view>
</view>
<view class="li">
<view class="date">
本周
</view>
<view class="date-con">
<view class="date-con-li">
<view class="text">
新增项目量
</view>
<view class="single-amount">
0
</view>
</view>
<view class="date-con-li">
<view class="text">
新增工单量
</view>
<view class="single-amount">
0
</view>
</view>
<view class="date-con-li">
<view class="text">
项目故障率
</view>
<view class="single-amount">
0
</view>
</view>
</view>
</view>
<view class="li">
<view class="date">
本月
</view>
<view class="date-con">
<view class="date-con-li">
<view class="text">
新增项目量
</view>
<view class="single-amount">
0
</view>
</view>
<view class="date-con-li">
<view class="text">
新增工单量
</view>
<view class="single-amount">
0
</view>
</view>
<view class="date-con-li">
<view class="text">
项目故障率
</view>
<view class="single-amount">
0
</view>
</view>
</view>
</view>
</view>
</view>
</view>
<view class="data-icon">
<view class="settlement-type-title">
年度项目数据明细
</view>
<view class="">
<view class="charts-box">
<qiun-data-charts type="mix" :chartData="chartData" background="none" />
</view>
</view>
</view>
<view class="serve-data">
<view class="settlement-type-title">
服务数据
</view>
<view class="serve-data-box">
<view class="serve-data-left">
<view class="title">
本月服务量
</view>
<view class="text-con">
<view class="li">
<view class="text">
维保工单:
</view>
<view class="num">
3
</view>
</view>
<view class="li">
<view class="text">
巡检服务单:
</view>
<view class="num">
65465
</view>
</view>
<view class="li">
<view class="text">
移屏服务单:
</view>
<view class="num">
32132
</view>
</view>
<view class="li">
<view class="text">
拆屏工单:
</view>
<view class="num">
32132
</view>
</view>
</view>
</view>
<view class="serve-data-left">
<view class="title">
累计服务量
</view>
<view class="text-con">
<view class="li">
<view class="text">
维保工单:
</view>
<view class="num">
3
</view>
</view>
<view class="li">
<view class="text">
巡检服务单:
</view>
<view class="num">
65465
</view>
</view>
<view class="li">
<view class="text">
移屏服务单:
</view>
<view class="num">
32132
</view>
</view>
<view class="li">
<view class="text">
拆屏工单:
</view>
<view class="num">
32132
</view>
</view>
</view>
</view>
</view>
</view>
<view class="data-icon">
<view class="settlement-type-title">
年度项目数据明细
</view>
<view class="">
<view class="charts-box">
<qiun-data-charts type="mix" :chartData="chartDataA" background="none" />
</view>
</view>
</view>
<view class="expire-project">
<view class="settlement-type-title settlement-type-titlea">
质保即将到期项目
</view>
<view class="expire-project-box">
<view class="li-title li">
<view class="name">
项目名称
</view>
<view class="work-order">
工单
</view>
<view class="date">
日期
</view>
</view>
<view class="li-text li">
<view class="name">
1.五岭新天地二期停车场xxxxxxxxxxxxx
</view>
<view class="work-order">
6
</view>
<view class="date">
22/2/24
</view>
</view>
<view class="li-text li">
<view class="name">
1.五岭新天地二期停车场xxxxxxxxxxxxx
</view>
<view class="work-order">
6
</view>
<view class="date">
22/2/24
</view>
</view>
<view class="li-text li">
<view class="name">
1.五岭新天地二期停车场xxxxxxxxxxxxx
</view>
<view class="work-order">
6
</view>
<view class="date">
22/2/24
</view>
</view>
<view class="li-text li">
<view class="name">
1.五岭新天地二期停车场xxxxxxxxxxxxx
</view>
<view class="work-order">
6
</view>
<view class="date">
22/2/24
</view>
</view>
</view>
</view>
</view>
</template> </template>
<script> <script>
import containerSubgroupTwo from '@/components/containers/container-subgroup-two.vue';
import statusNav from '../../components/status-nav.vue'; import statusNav from '../../components/status-nav.vue';
export default { export default {
components: { components: {
statusNav statusNav,
containerSubgroupTwo
}, },
data() { data() {
return { return {
@ -450,9 +456,7 @@
<style> <style>
.content { .content {
padding: 10rpx; padding:0rpx 10rpx;
padding-top: 90rpx;
padding-bottom: 80rpx;
} }
.charts-box{ .charts-box{
width: 100%; width: 100%;

View File

@ -1,70 +1,79 @@
<template> <template>
<view class="content"> <view class="">
<statusNav navBarTitle="意见反馈"></statusNav> <statusNav navBarTitle="意见反馈"></statusNav>
<view class="opinion-type"> <container-subgroup-two>
意见类型 <view slot="content" style="margin: 0 -30rpx;">
</view> <view class="opinion-type">
意见类型
<view class="opinion-type-content">
<view class="li" @click="opinionType(index)" :class="item.state?'on':''" v-for="(item,index) in typeData">
{{item.title}}
</view>
</view>
<view class="feedback-input">
<input type="text" class="inputCss" placeholder="请填写您的意见或建议内容" placeholder-class="inputCss-input"
value="" />
<input type="text" class="inputCss" placeholder="请输入联系人姓名" placeholder-class="inputCss-input" value="" />
<input type="text" class="inputCss" placeholder="请输入联系人电话" placeholder-class="inputCss-input" value="" />
<view class="fault-pictures">
<image class="img" src="../../static/iocn/gz.png" mode="aspectFill"></image>
<view class="text">
请上传图片
</view> </view>
</view>
</view> <view class="opinion-type-content">
<view class="li" @click="opinionType(index)" :class="item.state?'on':''"
<view class="feedback-approach"> v-for="(item,index) in typeData">
<view class="feedback-con"> {{item.title}}
<image class="icon" src="../../static/iocn/tel.png" mode=""></image> </view>
<view class="feedback-tel-con">
<view class="text">
服务监督电话
</view> </view>
<view class="tel">
156 1566 0510 <view class="feedback-input">
<input type="text" class="inputCss" placeholder="请填写您的意见或建议内容" placeholder-class="inputCss-input"
value="" />
<input type="text" class="inputCss" placeholder="请输入联系人姓名" placeholder-class="inputCss-input"
value="" />
<input type="text" class="inputCss" placeholder="请输入联系人电话" placeholder-class="inputCss-input"
value="" />
<view class="fault-pictures">
<image class="img" src="../../static/iocn/gz.png" mode="aspectFill"></image>
<view class="text">
请上传图片
</view>
</view>
</view> </view>
<view class="feedback-approach">
<view class="feedback-con">
<image class="icon" src="../../static/iocn/tel.png" mode=""></image>
<view class="feedback-tel-con">
<view class="text">
服务监督电话
</view>
<view class="tel">
156 1566 0510
</view>
</view>
</view>
<view class="feedback-con">
<image class="icon" src="../../static/iocn/date.png" mode=""></image>
<view class="feedback-tel-con">
<view class="text">
反馈受理时间
</view>
<view class="tel">
9:00 - 18:00
</view>
</view>
</view>
</view>
<button class="submit-button" type="default">提交反馈</button>
</view> </view>
</view> </container-subgroup-two>
<view class="feedback-con">
<image class="icon" src="../../static/iocn/date.png" mode=""></image> <footTabOne :current="3"></footTabOne>
<view class="feedback-tel-con">
<view class="text">
反馈受理时间
</view>
<view class="tel">
9:00 - 18:00
</view>
</view>
</view>
</view>
<button class="submit-button" type="default">提交反馈</button>
<footTabOne :current="3"></footTabOne>
</view> </view>
</template> </template>
<script> <script>
import statusNav from '../../components/status-nav.vue'; import statusNav from '../../components/status-nav.vue';
import footTabOne from "../../components/foot-tabs/foot-tab-one.vue" import footTabOne from "../../components/foot-tabs/foot-tab-one.vue"
import containerSubgroupTwo from '@/components/containers/container-subgroup-two.vue';
export default { export default {
components:{ components: {
footTabOne, footTabOne,
statusNav statusNav,
containerSubgroupTwo
}, },
data() { data() {
return { return {
@ -96,12 +105,12 @@
} }
}, },
methods: { methods: {
opinionType(index){ opinionType(index) {
for (var i = 0; i < this.typeData.length; i++) { for (var i = 0; i < this.typeData.length; i++) {
this.typeData[i].state=false this.typeData[i].state = false
} }
this.typeData[index].state=true this.typeData[index].state = true
} }
} }
} }
</script> </script>
@ -110,22 +119,19 @@
page { page {
background-color: #F7F7F7; background-color: #F7F7F7;
} }
.content{
padding-top: 76rpx;
padding-bottom: 180rpx; .opinion-type{
} width: 100%;
.opinion-type { height: 80rpx;
width: 100%; line-height: 80rpx;
height: 80rpx; padding: 0 40rpx;
line-height: 80rpx; border-top: 2rpx solid #EAEAEA;
padding: 0 40rpx; border-bottom: 2rpx solid #EAEAEA;
border-top: 2rpx solid #EAEAEA; background-color: #FFFFFF;
border-bottom: 2rpx solid #EAEAEA; font-size: 36rpx;
margin-top: 24rpx; font-weight: bold;
background-color: #FFFFFF; }
font-size: 36rpx;
font-weight: bold;
}
.opinion-type-content .li { .opinion-type-content .li {
width: 214rpx; width: 214rpx;
@ -197,8 +203,9 @@
color: #9f9898; color: #9f9898;
} }
.feedback-con{
width: 320rpx; .feedback-con {
width: 320rpx;
height: 100rpx; height: 100rpx;
border-radius: 8rpx; border-radius: 8rpx;
background-color: #ffe5e5; background-color: #ffe5e5;
@ -207,27 +214,32 @@
box-sizing: border-box; box-sizing: border-box;
padding-left: 26rpx; padding-left: 26rpx;
} }
.feedback-con .icon{
.feedback-con .icon {
width: 40rpx; width: 40rpx;
height: 40rpx; height: 40rpx;
margin-right: 18rpx; margin-right: 18rpx;
} }
.feedback-tel-con .text{
.feedback-tel-con .text {
font-size: 24rpx; font-size: 24rpx;
margin-bottom: 10rpx; margin-bottom: 10rpx;
} }
.feedback-tel-con .tel{
.feedback-tel-con .tel {
font-size: 28rpx; font-size: 28rpx;
} }
.feedback-approach{
.feedback-approach {
padding: 0 40rpx; padding: 0 40rpx;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
margin-top: 14rpx; margin-top: 14rpx;
} }
.submit-button { .submit-button {
width: 686rpx; width: 686rpx;
margin-top: 58rpx; margin-top: 58rpx;

View File

@ -1,234 +1,241 @@
<template> <template>
<view class="content"> <view class="content">
<statusNav navBarTitle="项目详情"></statusNav> <statusNav navBarTitle="项目详情"></statusNav>
<container-subgroup-two>
<view class="head-top"> <view slot="content" style="margin: -25rpx -30rpx;">
<view class="details-head">
<view class="swiper-head"> <view class="head-top">
<swiper class="swiper" @change="changeAutoplay" :autoplay="autoplay" :interval="interval" <view class="details-head">
:duration="duration"> <view class="swiper-head">
<swiper-item> <swiper class="swiper" @change="changeAutoplay" :autoplay="autoplay" :interval="interval"
<view class="swiper-item uni-bg-red"> >
<image class="img" src="../../static/del/img001.png" mode="aspectFill"></image> <swiper-item>
<view class="swiper-item uni-bg-red">
<image class="img" src="../../static/del/img001.png" mode="aspectFill"></image>
</view>
</swiper-item>
<swiper-item>
<view class="swiper-item uni-bg-red">
<image class="img" src="../../static/del/img001.png" mode="aspectFill"></image>
</view>
</swiper-item>
<swiper-item>
<view class="swiper-item uni-bg-red">
<image class="img" src="../../static/del/img001.png" mode="aspectFill"></image>
</view>
</swiper-item>
</swiper>
<view class="indication-point ">
{{index}}/3
</view>
</view> </view>
</swiper-item>
<swiper-item> <view class="title">
<view class="swiper-item uni-bg-red"> 湖南工业大学生化学院会议室P2.5全彩LED显示屏
<image class="img" src="../../static/del/img001.png" mode="aspectFill"></image>
</view> </view>
</swiper-item> <view class="code">
<swiper-item> XM20220108-1001
<view class="swiper-item uni-bg-red">
<image class="img" src="../../static/del/img001.png" mode="aspectFill"></image>
</view> </view>
</swiper-item>
</swiper> <view class="address">
<image class="img" src="../../static/iocn/im.png" mode=""></image>
<view class="indication-point "> <view class="text">
{{index}}/3 湖南省长沙市高新开发区谷园路109号像素大厦1205
</view>
</view>
</view>
<view class="last-date">
<view class="last-date-content">
<image class="icon" src="../../static/iocn/gzzt.png" mode=""></image>
<view class="text">
最近一次故障时间2021-11-18 170016
</view>
</view>
</view>
</view> </view>
</view>
<view class="project-message-title">
<view class="title"> <view class="icon">
湖南工业大学生化学院会议室P2.5全彩LED显示屏
</view> </view>
<view class="code"> <view class="text">
XM20220108-1001 项目概况
</view> </view>
</view>
<view class="address">
<image class="img" src="../../static/iocn/im.png" mode=""></image> <view class="project-message-content">
<view class="text"> <view class="li">
湖南省长沙市高新开发区谷园路109号像素大厦1205 <view class="title-one">
</view>
</view> <text></text>
<text></text>
</view> </view>
<view class="last-date"> <view class="text">
<view class="last-date-content"> 海康威视
<image class="icon" src="../../static/iocn/gzzt.png" mode=""></image> </view>
<view class="text"> </view>
最近一次故障时间2021-11-18 170016 <view class="li">
</view> <view class="title-one">
</view> <text></text>
</view> <text></text>
</view>
</view>
<view class="text">
DS-CK25FI/H
<view class="project-message-title"> </view>
<view class="icon"> </view>
<view class="li">
</view> <view class="title-one">
<view class="text">
项目概况 <text></text>
<text></text>
</view>
<view class="text">
3.94*2.02m
</view>
</view>
<view class="li">
<view class="title">
安装位置
</view>
<view class="text">
xx综合楼2楼会议室403
</view>
</view>
<view class="li">
<view class="title">
竣工日期
</view>
<view class="text">
2022/01/08
</view>
</view>
</view>
<view class="record-nav">
<view class="li" @click="recordNav(index)" :class="item.state?'on':''" v-for="(item,index) in recordState">
{{item.title}}
</view>
</view>
<view class="record-content">
<view class="title">
维修追踪
</view>
<view class="list">
<view class="li on">
<view class="icon">
<view class="icon-con">
</view>
</view>
<view class="con">
<view class="text">
黑屏故障 某某已处理
</view>
<view class="date">
2020-05-15 16:00
</view>
</view>
</view>
<view class="li">
<view class="icon">
</view>
<view class="con">
<view class="text">
黑屏故障 某某已处理
</view>
<view class="date">
2020-05-15 16:00
</view>
</view>
</view>
<view class="li">
<view class="icon">
</view>
<view class="con">
<view class="text">
黑屏故障 某某已处理
</view>
<view class="date">
2020-05-15 16:00
</view>
</view>
</view>
<view class="li">
<view class="icon">
</view>
<view class="con">
<view class="text">
黑屏故障 某某已处理
</view>
<view class="date">
2020-05-15 16:00
</view>
</view>
</view>
<view class="li">
<view class="icon">
</view>
<view class="con">
<view class="text">
黑屏故障 某某已处理
</view>
<view class="date">
2020-05-15 16:00
</view>
</view>
</view>
<view class="li">
<view class="icon">
</view>
<view class="con">
<view class="text">
黑屏故障 某某已处理
</view>
<view class="date">
2020-05-15 16:00
</view>
</view>
</view>
<view class="li">
<view class="icon">
</view>
<view class="con">
<view class="text">
黑屏故障 某某已处理
</view>
<view class="date">
2020-05-15 16:00
</view>
</view>
</view>
</view>
</view>
</view> </view>
</container-subgroup-two>
</view> </view>
<view class="project-message-content">
<view class="li">
<view class="title-one">
<text></text>
<text></text>
</view>
<view class="text">
海康威视
</view>
</view>
<view class="li">
<view class="title-one">
<text></text>
<text></text>
</view>
<view class="text">
DS-CK25FI/H
</view>
</view>
<view class="li">
<view class="title-one">
<text></text>
<text></text>
</view>
<view class="text">
3.94*2.02m
</view>
</view>
<view class="li">
<view class="title">
安装位置
</view>
<view class="text">
xx综合楼2楼会议室403
</view>
</view>
<view class="li">
<view class="title">
竣工日期
</view>
<view class="text">
2022/01/08
</view>
</view>
</view>
<view class="record-nav">
<view class="li" @click="recordNav(index)" :class="item.state?'on':''" v-for="(item,index) in recordState">
{{item.title}}
</view>
</view>
<view class="record-content">
<view class="title">
维修追踪
</view>
<view class="list">
<view class="li on">
<view class="icon">
<view class="icon-con">
</view>
</view>
<view class="con">
<view class="text">
黑屏故障 某某已处理
</view>
<view class="date">
2020-05-15 16:00
</view>
</view>
</view>
<view class="li">
<view class="icon">
</view>
<view class="con">
<view class="text">
黑屏故障 某某已处理
</view>
<view class="date">
2020-05-15 16:00
</view>
</view>
</view>
<view class="li">
<view class="icon">
</view>
<view class="con">
<view class="text">
黑屏故障 某某已处理
</view>
<view class="date">
2020-05-15 16:00
</view>
</view>
</view>
<view class="li">
<view class="icon">
</view>
<view class="con">
<view class="text">
黑屏故障 某某已处理
</view>
<view class="date">
2020-05-15 16:00
</view>
</view>
</view>
<view class="li">
<view class="icon">
</view>
<view class="con">
<view class="text">
黑屏故障 某某已处理
</view>
<view class="date">
2020-05-15 16:00
</view>
</view>
</view>
<view class="li">
<view class="icon">
</view>
<view class="con">
<view class="text">
黑屏故障 某某已处理
</view>
<view class="date">
2020-05-15 16:00
</view>
</view>
</view>
<view class="li">
<view class="icon">
</view>
<view class="con">
<view class="text">
黑屏故障 某某已处理
</view>
<view class="date">
2020-05-15 16:00
</view>
</view>
</view>
</view>
</view>
</view>
</template> </template>
<script> <script>
import statusNav from "../../components/status-nav.vue" import statusNav from "../../components/status-nav.vue"
import containerSubgroupTwo from '@/components/containers/container-subgroup-two.vue';
export default { export default {
components:{ components:{
statusNav statusNav,
containerSubgroupTwo
}, },
data() { data() {
return { return {
@ -272,8 +279,6 @@
.content { .content {
padding: 16rpx 0; padding: 16rpx 0;
padding-top: 80rpx;
padding-bottom: 80rpx;
} }
.swiper { .swiper {

View File

@ -1,58 +1,65 @@
<template> <template>
<view class="content" :style="{paddingTop: statusHeight + 'px'}"> <view class="content" :style="{paddingTop: statusHeight + 'px'}">
<statusNav navBarTitle="项目列表" :ifReturn="false"></statusNav> <statusNav navBarTitle="项目列表" :ifReturn="false"></statusNav>
<view class="project-list-input"> <container-subgroup-two>
<input type="text" class="int" value="" placeholder="请输入关键字" /> <view slot="content" style="margin: -100rpx -30rpx;">
<view class="xian">
</view> <view class="project-list-input">
<image class="search" src="../../static/iocn/ss.png" mode="aspectFill" lazy-load></image> <input type="text" class="int" value="" placeholder="请输入关键字" />
</view> <view class="xian">
<view class="screen bbot mar-sx20">
<picker @change="bindPickerChange" :value="index" :range="array"> </view>
<view class="li"> <image class="search" src="../../static/iocn/ss.png" mode="aspectFill" lazy-load></image>
<view class="text">产品类型</view> </view>
<image class="img" src="../../static/iocn/xla.png" mode="aspectFill" lazy-load></image> <view class="screen bbot mar-sx20">
</view> <picker @change="bindPickerChange" :value="index" :range="array">
</picker> <view class="li">
<picker mode="date" :value="date" @change="bindDateChange"> <view class="text">产品类型</view>
<view class="li"> <image class="img" src="../../static/iocn/xla.png" mode="aspectFill" lazy-load></image>
<view class="text">竣工日期</view> </view>
<image class="img" src="../../static/iocn/xla.png" mode="aspectFill" lazy-load></image> </picker>
</view> <picker mode="date" :value="date" @change="bindDateChange">
</picker> <view class="li">
<view class="li"> <view class="text">竣工日期</view>
<view class="text">筛选</view> <image class="img" src="../../static/iocn/xla.png" mode="aspectFill" lazy-load></image>
<image class="imgA" src="../../static/iocn/sx.png" mode="aspectFill" lazy-load></image> </view>
</view> </picker>
</view> <view class="li">
<view class="project-list"> <view class="text">筛选</view>
<view class="li" @click="projectDetailsFun()" v-for="(item,index) in 10" :key="index"> <image class="imgA" src="../../static/iocn/sx.png" mode="aspectFill" lazy-load></image>
<view class="message"> </view>
<image class="img" src="../../static/del/img001.png" mode="aspectFill" lazy-load></image> </view>
<view class="text disjb fc" style="height: 180rpx;"> <view class="project-list">
<view class="clips1 fon24 bold">湖南工业大学化工学院会议室P2.5全彩LED显示屏</view> <view class="li" @click="projectDetailsFun()" v-for="(item,index) in 10" :key="index">
<view class="disjb fc" style="margin-left: -20rpx;height: 80%;"> <view class="message">
<view class="serial-number scal09">项目编号20220108-1001</view> <image class="img" src="../../static/del/img001.png" mode="aspectFill" lazy-load></image>
<view class="specification scal09">规格型号DS-CK25FI/H</view> <view class="text disjb fc" style="height: 180rpx;">
<view class="specification scal09">产品尺寸3.94*2.02</view> <view class="clips1 fon24 bold">湖南工业大学化工学院会议室P2.5全彩LED显示屏</view>
<view class="installation-site scal09">安装位置xxx综合楼2楼会议室</view> <view class="disjb fc" style="margin-left: -20rpx;height: 80%;">
</view> <view class="serial-number scal09">项目编号20220108-1001</view>
</view> <view class="specification scal09">规格型号DS-CK25FI/H</view>
</view> <view class="specification scal09">产品尺寸3.94*2.02</view>
<view class="project-list-address col6 mar-s20 disjbac"> <view class="installation-site scal09">安装位置xxx综合楼2楼会议室</view>
<view class="address"> </view>
<image class="img flexs" src="../../static/iocn/im.png" mode="scaleToFill" lazy-load></image> </view>
<view class="text scal09" style="margin-left: -26rpx;">湖南省长沙市高新开发区谷园路109号像素大厦1205</view> </view>
</view> <view class="project-list-address col6 mar-s20 disjbac">
<view class="date scal09">2022/01/08</view> <view class="address">
</view> <image class="img flexs" src="../../static/iocn/im.png" mode="scaleToFill" lazy-load></image>
<!-- <view class="icon iconBera">质保中</view> --> <view class="text scal09" style="margin-left: -26rpx;">湖南省长沙市高新开发区谷园路109号像素大厦1205</view>
<view class="icon iconBer">质保到期</view> </view>
</view> <view class="date scal09">2022/01/08</view>
</view>
</view> <!-- <view class="icon iconBera">质保中</view> -->
<view class="icon iconBer">质保到期</view>
</view>
</view>
</view>
</container-subgroup-two>
<footTabOne :current="1"></footTabOne> <footTabOne :current="1"></footTabOne>
</view> </view>
</template> </template>
@ -60,10 +67,12 @@
<script> <script>
import statusNav from '../../components/status-nav.vue'; import statusNav from '../../components/status-nav.vue';
import footTabOne from "../../components/foot-tabs/foot-tab-one.vue" import footTabOne from "../../components/foot-tabs/foot-tab-one.vue"
import containerSubgroupTwo from '@/components/containers/container-subgroup-two.vue';
export default { export default {
components: { components: {
footTabOne, footTabOne,
statusNav statusNav,
containerSubgroupTwo
}, },
data() { data() {
const currentDate = this.getDate({ const currentDate = this.getDate({
@ -113,11 +122,6 @@
background-color: #F7F7F7; background-color: #F7F7F7;
} }
.content {
/* padding-top: 76rpx; */
padding-bottom: 160rpx;
}
.project-list-input { .project-list-input {
width: 100%; width: 100%;
height: 114rpx; height: 114rpx;

File diff suppressed because it is too large Load Diff

View File

@ -1,64 +1,69 @@
<template> <template>
<view class="content"> <view class="content">
<statusNav navBarTitle="工单回访"></statusNav> <statusNav navBarTitle="工单回访"></statusNav>
<view class="hint"> <container-subgroup-two>
客户服务重在回访仔细倾听以服务质量求发展 <view slot="content" style="margin: -25rpx -30rpx 0rpx;">
</view> <view class="hint">
<view class="payReturnVisit-from"> 客户服务重在回访仔细倾听以服务质量求发展
<view class="payReturnVisit-input"> </view>
<view class="title"> <view class="payReturnVisit-from">
<text></text> <view class="payReturnVisit-input">
<text></text> <view class="title">
<text></text> <text></text>
<text></text>
<text></text>
</view>
<input class="input" placeholder="请填写联系人称呼" type="text" value="" />
</view>
<view class="payReturnVisit-input">
<view class="title">
联系电话
</view>
<input class="input" placeholder="请输入手机号码" type="text" value="" />
</view>
<view class="payReturnVisit-input">
<view class="title">
<text></text>
<text></text>
<text></text>
</view>
<input class="input" placeholder="请输入微信号码" type="text" value="" />
</view>
<view class="payReturnVisit-textarea">
<view class="title">
回访内容
</view>
<textarea class="textarea" value="" placeholder="请输入回访内容" />
</view>
<view class="payReturnVisit-input">
<view class="title">
客服电话
</view>
<input class="input" placeholder="400-765-9876" type="text" value="" />
</view>
<view class="payReturnVisit-input">
<view class="title">
回访时间
</view>
<input class="input" placeholder="2022/02/13 14:18:00" type="text" value="" />
</view>
</view>
<button class="submit-button" type="default">确认发送</button>
</view> </view>
<input class="input" placeholder="请填写联系人称呼" type="text" value="" /> </container-subgroup-two>
</view>
<view class="payReturnVisit-input">
<view class="title">
联系电话
</view>
<input class="input" placeholder="请输入手机号码" type="text" value="" />
</view>
<view class="payReturnVisit-input">
<view class="title">
<text></text>
<text></text>
<text></text>
</view>
<input class="input" placeholder="请输入微信号码" type="text" value="" />
</view>
<view class="payReturnVisit-textarea">
<view class="title">
回访内容
</view>
<textarea class="textarea" value="" placeholder="请输入回访内容" />
</view>
<view class="payReturnVisit-input">
<view class="title">
客服电话
</view>
<input class="input" placeholder="400-765-9876" type="text" value="" />
</view>
<view class="payReturnVisit-input">
<view class="title">
回访时间
</view>
<input class="input" placeholder="2022/02/13 14:18:00" type="text" value="" />
</view>
</view>
<button class="submit-button" type="default">确认发送</button>
</view> </view>
</template> </template>
<script> <script>
import statusNav from '../../components/status-nav.vue'; import statusNav from '../../components/status-nav.vue';
import containerSubgroupTwo from '@/components/containers/container-subgroup-two.vue';
export default { export default {
components: { components: {
statusNav, statusNav,
containerSubgroupTwo,
}, },
data() { data() {
return { return {
@ -72,15 +77,15 @@
</script> </script>
<style> <style>
.content{
padding-top: 80rpx;
}
.hint { .hint {
color: #358ff0; color: #358ff0;
font-size: 24rpx; font-size: 24rpx;
padding: 25rpx 30rpx; padding: 25rpx 30rpx;
} }
.submit-button {
.submit-button {
width: 686rpx; width: 686rpx;
border-radius: 50rpx; border-radius: 50rpx;
height: 90rpx; height: 90rpx;
@ -91,13 +96,14 @@
text-align: center; text-align: center;
font-size: 30rpx; font-size: 30rpx;
} }
.payReturnVisit-input { .payReturnVisit-input {
background-color: #FFFFFF; background-color: #FFFFFF;
height: 103rpx; height: 103rpx;
display: flex; display: flex;
align-items: center; align-items: center;
width: 700rpx; width: 700rpx;
border-bottom: 2rpx solid #f4f4f4; border-bottom: 2rpx solid #f4f4f4;
margin: auto; margin: auto;
} }
@ -118,26 +124,30 @@
font-size: 30rpx; font-size: 30rpx;
margin-top: 2rpx; margin-top: 2rpx;
} }
.payReturnVisit-from{
.payReturnVisit-from {
background-color: #FFFFFF; background-color: #FFFFFF;
} }
.payReturnVisit-textarea{
.payReturnVisit-textarea {
width: 700rpx; width: 700rpx;
border-bottom: 2rpx solid #f4f4f4; border-bottom: 2rpx solid #f4f4f4;
margin: auto; margin: auto;
padding-bottom: 30rpx; padding-bottom: 30rpx;
} }
.payReturnVisit-textarea .title{
.payReturnVisit-textarea .title {
padding: 30rpx 0rpx; padding: 30rpx 0rpx;
font-size: 30rpx; font-size: 30rpx;
font-weight: bold; font-weight: bold;
}
.payReturnVisit-textarea .textarea {
width: 100%;
height: 200rpx;
background-color: #F5F5F5;
border-radius: 10rpx;
padding: 20rpx;
box-sizing: border-box;
} }
.payReturnVisit-textarea .textarea{
width: 100%;
height: 200rpx;
background-color: #F5F5F5;
border-radius: 10rpx;
padding: 20rpx;
box-sizing: border-box;
}
</style> </style>

View File

@ -1,152 +1,160 @@
<template> <template>
<view class="content"> <view class="content">
<statusNav navBarTitle="处理工单"></statusNav> <statusNav navBarTitle="处理工单"></statusNav>
<container-subgroup-two>
<view class="work-order-schedule"> <view slot="content" style="margin: 0 -25rpx;">
<view class="li"> <view class="work-order-schedule">
<view class="icon on icon-after"> <view class="li">
1 <view class="icon on icon-after">
</view> 1
<view class="text">
签到执行
</view>
</view> </view>
<view class="li"> <view class="text">
<view class="icon icon-after"> 签到执行
2
</view>
<view class="text">
填写维保单
</view>
</view>
<view class="li">
<view class="icon">
3
</view>
<view class="text">
结算审核
</view>
</view> </view>
</view> </view>
<view class="li">
<view class="work-order-from"> <view class="icon icon-after">
<view class="li"> 2
<view class="title">
工单编号
</view>
<input type="text" class="input" placeholder="" value="GD20211203-001" />
</view> </view>
<view class="text">
<view class="li"> 填写维保单
<view class="title">
项目编号
</view>
<input type="text" class="input" placeholder="" value="GD20211203-001" />
</view> </view>
<view class="li"> </view>
<view class="title"> <view class="li">
项目名称 <view class="icon">
</view> 3
<input type="text" class="input input-black
" placeholder="" value="湖南省林业科学院11楼会议室P2.5" />
</view> </view>
<view class="li"> <view class="text">
<view class="title"> 结算审核
产品类型
</view>
<input type="text" class="input" placeholder="" value="Q2.5-E" />
</view> </view>
<view class="li"> </view>
<view class="title"> </view>
<view class="work-order-from">
<view class="li">
<view class="title">
工单编号
</view>
<input type="text" class="input" placeholder="" value="GD20211203-001" />
</view>
<view class="li">
<view class="title">
项目编号
</view>
<input type="text" class="input" placeholder="" value="GD20211203-001" />
</view>
<view class="li">
<view class="title">
项目名称
</view>
<input type="text" class="input input-black
" placeholder="" value="湖南省林业科学院11楼会议室P2.5" />
</view>
<view class="li">
<view class="title">
产品类型
</view>
<input type="text" class="input" placeholder="" value="Q2.5-E" />
</view>
<view class="li">
<view class="title">
安装位置 安装位置
</view>
<input type="text" class="input" placeholder="" value="详细地址+某某栋11楼会议室" />
</view> </view>
<view class="li"> <input type="text" class="input" placeholder="" value="详细地址+某某栋11楼会议室" />
<view class="title">
故障类型 </view>
</view> <view class="li">
<input type="text" class="input" placeholder="" value="供电不足" /> <view class="title">
故障类型
</view> </view>
<view class="li"> <input type="text" class="input" placeholder="" value="供电不足" />
<view class="title">
紧急程度 </view>
</view> <view class="li">
<input type="text" class="input" placeholder="" value="紧急" /> <view class="title">
紧急程度
</view> </view>
<view class="li"> <input type="text" class="input" placeholder="" value="紧急" />
<view class="title">
</view>
故障说明 <view class="li">
</view> <view class="title">
<textarea auto-height class="input" value="*********************************************************************************************************" placeholder="" /> 故障说明
</view> </view>
<view class="li">
<view class="title"> <textarea auto-height class="input"
value="*********************************************************************************************************"
故障图片 placeholder="" />
</view> </view>
<view class="li">
<view class="input"> <view class="title">
<image class="img" src="../../static/del/img001.png" mode="aspectFill"></image>
<image class="img" src="../../static/del/img001.png" mode="aspectFill"></image> 故障图片
</view> </view>
<view class="input">
<image class="img" src="../../static/del/img001.png" mode="aspectFill"></image>
<image class="img" src="../../static/del/img001.png" mode="aspectFill"></image>
</view> </view>
</view> </view>
</view>
<view class="work-order-from">
<view class="li"> <view class="work-order-from">
<view class="title"> <view class="li">
<view class="title">
</view>
<input type="text" class="input" placeholder="" value="林某" />
</view> </view>
<input type="text" class="input" placeholder="" value="林某" />
<view class="li">
<view class="title"> </view>
报单时间
</view> <view class="li">
<input type="text" class="input" placeholder="" value="2021/12/3 12:00:05" /> <view class="title">
报单时间
</view> </view>
<view class="li"> <input type="text" class="input" placeholder="" value="2021/12/3 12:00:05" />
<view class="title">
服务方式 </view>
</view> <view class="li">
<input type="text" class="input input-black" placeholder="" value="上门服务" /> <view class="title">
服务方式
</view> </view>
<view class="li"> <input type="text" class="input input-black" placeholder="" value="上门服务" />
<view class="title">
定位地址 </view>
</view> <view class="li">
<input type="text" class="input" placeholder="" value="*******************************" /> <view class="title">
定位地址
</view> </view>
</view> <input type="text" class="input" placeholder="" value="*******************************" />
<button class="submit-button" type="default">签到</button> </view>
</view>
<button class="submit-button" type="default">签到</button>
</view>
</container-subgroup-two>
</view> </view>
</template> </template>
<script> <script>
import containerSubgroupTwo from '@/components/containers/container-subgroup-two.vue';
import statusNav from '../../components/status-nav.vue'; import statusNav from '../../components/status-nav.vue';
import footTabOne from "../../components/foot-tabs/foot-tab-one.vue" import footTabOne from "../../components/foot-tabs/foot-tab-one.vue"
export default { export default {
components: { components: {
footTabOne, footTabOne,
statusNav statusNav,
containerSubgroupTwo
}, },
data() { data() {
return { return {
@ -160,11 +168,8 @@
</script> </script>
<style> <style>
.content {
padding-top: 80rpx; .submit-button {
padding-bottom: 80rpx;
}
.submit-button {
width: 686rpx; width: 686rpx;
border-radius: 50rpx; border-radius: 50rpx;
height: 90rpx; height: 90rpx;
@ -175,6 +180,7 @@
text-align: center; text-align: center;
font-size: 30rpx; font-size: 30rpx;
} }
.work-order-schedule { .work-order-schedule {
display: flex; display: flex;
padding: 22rpx 29rpx; padding: 22rpx 29rpx;
@ -231,7 +237,7 @@
.work-order-from .li .title { .work-order-from .li .title {
font-size: 26rpx; font-size: 26rpx;
width: 133rpx; width: 133rpx;
} }
@ -241,12 +247,14 @@
flex: 1; flex: 1;
padding-left: 15rpx; padding-left: 15rpx;
} }
.work-order-from .li .input .img{
width: 169rpx; .work-order-from .li .input .img {
height: 127rpx; width: 169rpx;
margin-right: 10rpx; height: 127rpx;
} margin-right: 10rpx;
.work-order-from .li .input-black { }
color: #292929;
} .work-order-from .li .input-black {
color: #292929;
}
</style> </style>

View File

@ -1,218 +1,225 @@
<template> <template>
<view class="content"> <view class="content">
<status-nav navBarTitle="工单列表" returnColor="#c2c2c2"></status-nav> <status-nav navBarTitle="工单列表" returnColor="#c2c2c2"></status-nav>
<view class="project-list-input">
<input type="text" class="int" value="" placeholder="请输入关键字" /> <container-subgroup-two>
<image class="search" src="../../static/iocn/ss.png" mode=""></image> <view slot="content" style="margin: 0 -25rpx;">
<view class="xian"> <view class="project-list-input">
<input type="text" class="int" value="" placeholder="请输入关键字" />
<image class="search" src="../../static/iocn/ss.png" mode=""></image>
<view class="xian">
</view>
</view>
<view class="screen">
<picker @change="bindPickerChange" :value="index" :range="array">
<view class="li">
<view class="text">
工单状态
</view>
<image class="img" src="../../static/iocn/xla.png" mode="aspectFill"></image>
</view>
</picker>
<picker mode="date" :value="date" @change="bindDateChange">
<view class="li">
<view class="text">
工单日期
</view>
<image class="img" src="../../static/iocn/xla.png" mode="aspectFill"></image>
</view>
</picker>
<view class="li">
<view class="text">
筛选
</view>
<image class="imgA" src="../../static/iocn/sx.png" mode="aspectFill"></image>
</view>
</view>
<view class="project-list">
<view class="li" @click="projectDetailsFun()">
<view class="work-order-code">
工单编号222226666558
</view>
<view class="message">
<image class="img" src="../../static/del/img001.png" mode="aspectFill"></image>
<view class="text">
<view class="title">
<view class="text clips1">
长沙市望城区xxxxxx项目名称
</view>
<view class="icon">
待维修
</view>
</view>
<view class="serial-number">
<view class="type">
#网络故障#
</view>
<view class="date">
已故障2小时37分
</view>
</view>
<view class="specification">
紧急程度<view class="text"> 加急
</view>
</view>
<view class="specification">
主负责人陈志远
</view>
<view class="installation-site clips2">
故障描述LED显示屏开机后闪屏不显示内容主控电
脑提示网络不通
</view>
</view>
</view>
<view class="project-list-address">
<view class="address clips2">
<image class="img" src="../../static/iocn/dz2.png" mode="aspectFill"></image>
<view class="text">
湖南省长沙市高新开发区谷园路109号像素大厦1205
</view>
</view>
<view class="date">
催一催 <image class="img" src="../../static/iocn/ld.png" mode=""></image>
</view>
</view>
</view>
<view class="li" @click="projectDetailsFun()">
<view class="work-order-code">
工单编号222226666558
</view>
<view class="message">
<image class="img" src="../../static/del/img001.png" mode="aspectFill"></image>
</view>
</view>
<view class="screen">
<picker @change="bindPickerChange" :value="index" :range="array">
<view class="li">
<view class="text">
工单状态
</view>
<image class="img" src="../../static/iocn/xla.png" mode="aspectFill"></image>
</view>
</picker>
<picker mode="date" :value="date" @change="bindDateChange">
<view class="li">
<view class="text">
工单日期
</view>
<image class="img" src="../../static/iocn/xla.png" mode="aspectFill"></image>
</view>
</picker>
<view class="li">
<view class="text">
筛选
</view>
<image class="imgA" src="../../static/iocn/sx.png" mode="aspectFill"></image>
</view>
</view>
<view class="project-list">
<view class="li" @click="projectDetailsFun()">
<view class="work-order-code">
工单编号222226666558
</view>
<view class="message">
<image class="img" src="../../static/del/img001.png" mode="aspectFill"></image>
<view class="text">
<view class="title">
<view class="text clips1">
长沙市望城区xxxxxx项目名称
</view>
<view class="icon">
待维修
</view>
</view>
<view class="serial-number">
<view class="type">
#网络故障#
</view>
<view class="date">
已故障2小时37分
</view>
</view>
<view class="specification">
紧急程度<view class="text"> 加急
</view>
</view>
<view class="specification">
主负责人陈志远
</view>
<view class="installation-site clips2">
故障描述LED显示屏开机后闪屏不显示内容主控电
脑提示网络不通
</view>
</view>
</view>
<view class="project-list-address">
<view class="address clips2">
<image class="img" src="../../static/iocn/dz2.png" mode="aspectFill"></image>
<view class="text"> <view class="text">
湖南省长沙市高新开发区谷园路109号像素大厦1205 <view class="title">
<view class="text clips1">
长沙市望城区xxxxxx项目名称
</view>
<view class="icon icon1">
已完成
</view>
</view>
<view class="serial-number">
<view class="type">
#网络故障#
</view>
<view class="date">
已故障2小时37分
</view>
</view>
<view class="specification">
紧急程度<view class="text"> 加急
</view>
</view>
<view class="specification">
主负责人陈志远
</view>
<view class="installation-site clips2">
故障描述LED显示屏开机后闪屏不显示内容主控电
脑提示网络不通
</view>
</view> </view>
</view> </view>
<view class="date">
催一催 <image class="img" src="../../static/iocn/ld.png" mode=""></image> <view class="project-list-address">
</view> <view class="address clips2">
</view> <image class="img" src="../../static/iocn/dz2.png" mode="aspectFill"></image>
<view class="text">
</view> 湖南省长沙市高新开发区谷园路109号像素大厦1205
<view class="li" @click="projectDetailsFun()">
<view class="work-order-code">
工单编号222226666558
</view>
<view class="message">
<image class="img" src="../../static/del/img001.png" mode="aspectFill"></image>
<view class="text">
<view class="title">
<view class="text clips1">
长沙市望城区xxxxxx项目名称
</view>
<view class="icon icon1">
已完成
</view> </view>
</view> </view>
<view class="serial-number"> <view class="date">
<view class="type"> 催一催 <image class="img" src="../../static/iocn/ld.png" mode=""></image>
#网络故障#
</view>
<view class="date">
已故障2小时37分
</view>
</view>
<view class="specification">
紧急程度<view class="text"> 加急
</view>
</view>
<view class="specification">
主负责人陈志远
</view>
<view class="installation-site clips2">
故障描述LED显示屏开机后闪屏不显示内容主控电
脑提示网络不通
</view> </view>
</view> </view>
</view> </view>
<view class="li" @click="projectDetailsFun()">
<view class="project-list-address"> <view class="work-order-code">
<view class="address clips2"> 工单编号222226666558
<image class="img" src="../../static/iocn/dz2.png" mode="aspectFill"></image> </view>
<view class="message">
<image class="img" src="../../static/del/img001.png" mode="aspectFill"></image>
<view class="text"> <view class="text">
湖南省长沙市高新开发区谷园路109号像素大厦1205 <view class="title">
<view class="text clips1">
长沙市望城区xxxxxx项目名称
</view>
<view class="icon icon3">
等待派工
</view>
</view>
<view class="serial-number">
<view class="type">
#网络故障#
</view>
<view class="date">
已故障2小时37分
</view>
</view>
<view class="specification">
紧急程度<view class="text"> 加急
</view>
</view>
<view class="specification">
主负责人陈志远
</view>
<view class="installation-site clips2">
故障描述LED显示屏开机后闪屏不显示内容主控电
脑提示网络不通
</view>
</view> </view>
</view> </view>
<view class="date">
催一催 <image class="img" src="../../static/iocn/ld.png" mode=""></image> <view class="project-list-address">
<view class="address clips2">
<image class="img" src="../../static/iocn/dz2.png" mode="aspectFill"></image>
<view class="text">
湖南省长沙市高新开发区谷园路109号像素大厦1205
</view>
</view>
<view class="date">
催一催 <image class="img" src="../../static/iocn/ld.png" mode=""></image>
</view>
</view> </view>
</view> </view>
</view> </view>
<view class="li" @click="projectDetailsFun()">
<view class="work-order-code">
工单编号222226666558
</view>
<view class="message">
<image class="img" src="../../static/del/img001.png" mode="aspectFill"></image>
<view class="text"> </view>
<view class="title"> </container-subgroup-two>
<view class="text clips1">
长沙市望城区xxxxxx项目名称
</view>
<view class="icon icon3">
等待派工
</view>
</view>
<view class="serial-number">
<view class="type">
#网络故障#
</view>
<view class="date">
已故障2小时37分
</view>
</view>
<view class="specification">
紧急程度<view class="text"> 加急
</view>
</view>
<view class="specification">
主负责人陈志远
</view>
<view class="installation-site clips2">
故障描述LED显示屏开机后闪屏不显示内容主控电
脑提示网络不通
</view>
</view>
</view>
<view class="project-list-address">
<view class="address clips2">
<image class="img" src="../../static/iocn/dz2.png" mode="aspectFill"></image>
<view class="text">
湖南省长沙市高新开发区谷园路109号像素大厦1205
</view>
</view>
<view class="date">
催一催 <image class="img" src="../../static/iocn/ld.png" mode=""></image>
</view>
</view>
</view>
</view>
<footTabOne :current="1"></footTabOne> <footTabOne :current="1"></footTabOne>
</view> </view>
</template> </template>
<script> <script>
import containerSubgroupTwo from '@/components/containers/container-subgroup-two.vue';
import statusNav from '../../components/status-nav.vue'; import statusNav from '../../components/status-nav.vue';
import footTabOne from "../../components/foot-tabs/foot-tab-one.vue" import footTabOne from "../../components/foot-tabs/foot-tab-one.vue"
export default { export default {
components: { components: {
footTabOne, footTabOne,
statusNav statusNav,
containerSubgroupTwo
}, },
data() { data() {
const currentDate = this.getDate({ const currentDate = this.getDate({
@ -263,10 +270,7 @@
background-color: #F7F7F7; background-color: #F7F7F7;
} }
.content {
padding-top: 76rpx;
padding-bottom: 140rpx;
}
.project-list-input .xian { .project-list-input .xian {
width: 3rpx; width: 3rpx;
height: 35rpx; height: 35rpx;
@ -473,7 +477,6 @@
height: 30rpx; height: 30rpx;
margin-right: 10rpx; margin-right: 10rpx;
} }
.project-list-address .address { .project-list-address .address {
display: flex; display: flex;
align-items: center; align-items: center;

View File

@ -1,220 +1,228 @@
<template> <template>
<view class="content"> <view class="content">
<statusNav navBarTitle="处理工单"></statusNav> <statusNav navBarTitle="处理工单"></statusNav>
<view class="work-order-schedule">
<view class="li"> <container-subgroup-two>
<view class="icon icon-after"> <view slot="content" style="margin: 0 -25rpx;">
1 <view class="work-order-schedule">
</view> <view class="li">
<view class="text"> <view class="icon icon-after">
签到执行 1
</view> </view>
</view> <view class="text">
<view class="li"> 签到执行
<view class="icon icon-after"> </view>
2 </view>
</view> <view class="li">
<view class="text"> <view class="icon icon-after">
填写维保单 2
</view> </view>
</view> <view class="text">
<view class="li"> 填写维保单
<view class="icon on"> </view>
3 </view>
</view> <view class="li">
<view class="text"> <view class="icon on">
结算审核 3
</view> </view>
</view> <view class="text">
</view> 结算审核
</view>
<view class="clearing-form"> </view>
<view class="title"> </view>
结算方式
</view> <view class="clearing-form">
<view class="clearing-form-content"> <view class="title">
<view class="li" @click="clearingFormFun(index)" v-for="(item,index) in clearingForm"> 结算方式
<image class="icon" v-if="item.state" src="../../static/iocn/xuanz.png" mode=""></image> </view>
<image class="icon" v-else src="../../static/iocn/xuan.png" mode=""></image> <view class="clearing-form-content">
{{item.title}} <view class="li" @click="clearingFormFun(index)" v-for="(item,index) in clearingForm">
</view> <image class="icon" v-if="item.state" src="../../static/iocn/xuanz.png" mode=""></image>
</view> <image class="icon" v-else src="../../static/iocn/xuan.png" mode=""></image>
</view> {{item.title}}
</view>
</view>
<view class="work-order-from"> </view>
<picker mode="date" :value="date" @change="serveDate">
<view class="serve-date">
<view class="text"> <view class="work-order-from">
请选择服务时间 <picker mode="date" :value="date" @change="serveDate">
</view> <view class="serve-date">
<image class="icon" src="../../static/iocn/jt.png" mode=""></image> <view class="text">
</view> 请选择服务时间
</picker> </view>
<image class="icon" src="../../static/iocn/jt.png" mode=""></image>
</view>
<view class="total-cost"> </picker>
<view class="li">
<view class="text">
上门费 <view class="total-cost">
</view> <view class="li">
<view class="price"> <view class="text">
120.00 上门费
</view> </view>
</view> <view class="price">
120.00
<view class="li"> </view>
<view class="text on"> </view>
税金
</view> <view class="li">
<view class="price"> <view class="text on">
120.00 税金
</view> </view>
</view> <view class="price">
<view class="li"> 120.00
<view class="text"> </view>
材料费 </view>
</view> <view class="li">
<view class="price"> <view class="text">
120.00 材料费
</view> </view>
</view> <view class="price">
<view class="li"> 120.00
<view class="text"> </view>
其他费用 </view>
</view> <view class="li">
<view class="price"> <view class="text">
120.00 其他费用
</view> </view>
</view> <view class="price">
</view> 120.00
</view>
<view class="total-price"> </view>
费用合计<text class="money">580.00</text> </view>
</view>
<picker @change="bindPickerChange" :value="index" :range="array"> <view class="total-price">
<view class="serve-date"> 费用合计<text class="money">580.00</text>
<view class="text"> </view>
请选择付款方式 <picker @change="bindPickerChange" :value="index" :range="array">
</view> <view class="serve-date">
<image class="icon" src="../../static/iocn/jt.png" mode=""></image> <view class="text">
</view> 请选择付款方式
</picker> </view>
<image class="icon" src="../../static/iocn/jt.png" mode=""></image>
<view class="is-invoice"> </view>
<view class="text"> </picker>
是否开票
</view> <view class="is-invoice">
<view class="radio" @click="isInvoiceFun(true)"> <view class="text">
是否开票
<image v-if="isInvoice" src="../../static/iocn/xz.png" class="icon" mode=""></image> </view>
<view v-else class="icon1"> <view class="radio" @click="isInvoiceFun(true)">
</view> <image v-if="isInvoice" src="../../static/iocn/xz.png" class="icon" mode=""></image>
<view v-else class="icon1">
<text></text> </view>
</view>
<view class="radio" @click="isInvoiceFun(false)"> <text></text>
<image v-if="!isInvoice" src="../../static/iocn/xz.png" class="icon" mode=""></image> </view>
<view class="radio" @click="isInvoiceFun(false)">
<view v-else class="icon1">
</view> <image v-if="!isInvoice" src="../../static/iocn/xz.png" class="icon" mode=""></image>
<text></text>
<view v-else class="icon1">
</view> </view>
</view> <text></text>
<view class="is-invoice">
<view class="text"> </view>
是否收款 </view>
</view> <view class="is-invoice">
<view class="radio" @click="isMoneyFun(true)"> <view class="text">
是否收款
<image v-if="isMoney" src="../../static/iocn/xz.png" class="icon" mode=""></image> </view>
<view v-else class="icon1"> <view class="radio" @click="isMoneyFun(true)">
</view> <image v-if="isMoney" src="../../static/iocn/xz.png" class="icon" mode=""></image>
<view v-else class="icon1">
<text></text> </view>
</view>
<view class="radio" @click="isMoneyFun(false)"> <text></text>
<image v-if="!isMoney" src="../../static/iocn/xz.png" class="icon" mode=""></image> </view>
<view class="radio" @click="isMoneyFun(false)">
<view v-else class="icon1">
</view> <image v-if="!isMoney" src="../../static/iocn/xz.png" class="icon" mode=""></image>
<text></text>
<view v-else class="icon1">
</view> </view>
</view> <text></text>
</view>
<view class="customerSignature"> </view>
<view class="title">
客户签名
</view> <view class="customerSignature">
<view class='contents'> <view class="title">
客户签名
<canvas class='firstCanvas' canvas-id="firstCanvas" @touchmove='move' @touchstart='start($event)' </view>
@touchend='end' @touchcancel='cancel' @longtap='tap' disable-scroll='true' @error='error'> <view class='contents'>
</canvas>
<canvas class='firstCanvas' canvas-id="firstCanvas" @touchmove='move' @touchstart='start($event)'
<!-- <button @click='clearClick'>清除</button> --> @touchend='end' @touchcancel='cancel' @longtap='tap' disable-scroll='true' @error='error'>
<!-- <button @click='saveClick'>保存图片</button> --> </canvas>
<!-- <button @click='clearClick'>清除</button> -->
</view> <!-- <button @click='saveClick'>保存图片</button> -->
<view class="text" v-if="isCanvas">
请在此签名 </view>
</view>
</view> <view class="text" v-if="isCanvas">
请在此签名
<view class="money-receiving-code"> </view>
<view class="title"> </view>
<image src="../../static/iocn/shoukuan.png" class="icon" mode=""></image>
<view class="money-receiving-code">
<view class="text"> <view class="title">
微信支付宝等收款码 <image src="../../static/iocn/shoukuan.png" class="icon" mode=""></image>
</view>
</view> <view class="text">
<image src="../../static/iocn/jt.png" mode="" class="img"></image> 微信支付宝等收款码
</view>
</view> </view>
<image src="../../static/iocn/jt.png" mode="" class="img"></image>
<view class="address">
<image class="icon" src="../../static/iocn/dizi.png" mode=""></image> </view>
<view class="text ">
湖南省株洲市荷塘区红旗中路456号(五矿二十三冶) <view class="address">
</view> <image class="icon" src="../../static/iocn/dizi.png" mode=""></image>
</view> <view class="text ">
湖南省株洲市荷塘区红旗中路456号(五矿二十三冶)
</view>
<view class="remark"> </view>
<view class="title">
备注内容
</view> <view class="remark">
<view class="title">
备注内容
</view>
<textarea class="textarea" value="" placeholder="请输入备注内容" />
</view>
</view>
<button class="submit-button" type="default">提交审核</button>
<textarea class="textarea" value="" placeholder="请输入备注内容" />
</view> </view>
</view> </container-subgroup-two>
<button class="submit-button" type="default">提交审核</button>
</view> </view>
</template> </template>
<script> <script>
import statusNav from '../../components/status-nav.vue'; import statusNav from '../../components/status-nav.vue';
import footTabOne from "../../components/foot-tabs/foot-tab-one.vue" import footTabOne from "../../components/foot-tabs/foot-tab-one.vue"
import containerSubgroupTwo from '@/components/containers/container-subgroup-two.vue';
var content = null; var content = null;
var touchs = []; var touchs = [];
var canvasw = 0; var canvasw = 0;
@ -230,7 +238,7 @@
components: { components: {
footTabOne, footTabOne,
statusNav, statusNav,
containerSubgroupTwo
}, },
data() { data() {
return { return {
@ -379,10 +387,7 @@
</script> </script>
<style> <style>
.content {
padding-top: 80rpx;
padding-bottom: 80rpx;
}
.submit-button { .submit-button {
width: 686rpx; width: 686rpx;
@ -604,8 +609,8 @@
content { content {
width: 100%; width: 100%;
} }
.customerSignature .text { .customerSignature .text {
position: absolute; position: absolute;
top: 50%; top: 50%;
width: 100%; width: 100%;
@ -634,67 +639,76 @@
width: 100%; width: 100%;
height: 80rpx; height: 80rpx;
display: flex; display: flex;
padding: 0rpx 13rpx; padding: 0rpx 13rpx;
align-items: center; align-items: center;
margin-top: 13rpx; margin-top: 13rpx;
box-sizing: border-box; box-sizing: border-box;
background-color: #FFFFFF; background-color: #FFFFFF;
justify-content: space-between; justify-content: space-between;
} }
.money-receiving-code .title{ .money-receiving-code .title {
display: flex; display: flex;
align-items: center; align-items: center;
} }
.money-receiving-code .title .icon{
.money-receiving-code .title .icon {
width: 22rpx; width: 22rpx;
height: 22rpx; height: 22rpx;
margin-right: 30rpx; margin-right: 30rpx;
} }
.money-receiving-code .title .text{
.money-receiving-code .title .text {
font-size: 26rpx; font-size: 26rpx;
color: #333333; color: #333333;
} }
.money-receiving-code .img{
.money-receiving-code .img {
width: 22rpx; width: 22rpx;
height: 12rpx; height: 12rpx;
transform: rotateZ(-90deg); transform: rotateZ(-90deg);
} }
.address{
.address {
width: 100%; width: 100%;
height: 80rpx; height: 80rpx;
background-color: #FFFFFF; background-color: #FFFFFF;
display: flex; display: flex;
align-items: center; align-items: center;
margin-top: 13rpx; margin-top: 13rpx;
box-sizing: border-box; box-sizing: border-box;
padding: 0rpx 13rpx; padding: 0rpx 13rpx;
} }
.address .icon{
.address .icon {
width: 24rpx; width: 24rpx;
height: 32rpx; height: 32rpx;
margin-right: 30rpx; margin-right: 30rpx;
} }
.address .text{
.address .text {
font-size: 26rpx; font-size: 26rpx;
color: #5d5c5c; color: #5d5c5c;
} }
.remark{
width: 100%; .remark {
margin-top: 13rpx; width: 100%;
background-color: #FFFFFF; margin-top: 13rpx;
padding: 20rpx 14rpx; background-color: #FFFFFF;
height: 360rpx; padding: 20rpx 14rpx;
box-sizing: border-box; height: 360rpx;
box-sizing: border-box;
} }
.remark .title{
.remark .title {
margin-bottom: 30rpx; margin-bottom: 30rpx;
font-size: 28rpx; font-size: 28rpx;
font-weight: bold; font-weight: bold;
} }
.remark .textarea{
.remark .textarea {
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
background-color: #f5f5f5; background-color: #f5f5f5;

View File

@ -1,7 +1,8 @@
<template> <template>
<view class="content"> <view class="content">
<statusNav navBarTitle="处理工单"></statusNav> <statusNav navBarTitle="处理工单"></statusNav>
<container-subgroup-two>
<view slot="content" style="margin: 0 -25rpx;">
<view class="work-order-schedule"> <view class="work-order-schedule">
<view class="li"> <view class="li">
<view class="icon icon-after"> <view class="icon icon-after">
@ -28,64 +29,64 @@
</view> </view>
</view> </view>
</view> </view>
<view class="work-order-from"> <view class="work-order-from">
<view class="li"> <view class="li">
<view class="title"> <view class="title">
工单编号 工单编号
</view> </view>
<input type="text" class="input" placeholder="" value="GD20211203-001" /> <input type="text" class="input" placeholder="" value="GD20211203-001" />
</view> </view>
<view class="li"> <view class="li">
<view class="title"> <view class="title">
项目编号 项目编号
</view> </view>
<input type="text" class="input" placeholder="" value="XM20211203-001" /> <input type="text" class="input" placeholder="" value="XM20211203-001" />
</view> </view>
<view class="li"> <view class="li">
<view class="title"> <view class="title">
项目名称 项目名称
</view> </view>
<input type="text" class="input input-black" placeholder="" value="湖南省林业科学院11楼会议室P2.5" /> <input type="text" class="input input-black" placeholder="" value="湖南省林业科学院11楼会议室P2.5" />
</view> </view>
<view class="li"> <view class="li">
<view class="title"> <view class="title">
产品类型 产品类型
</view> </view>
<input type="text" class="input input-black" placeholder="" value="Q2.5-E" /> <input type="text" class="input input-black" placeholder="" value="Q2.5-E" />
</view> </view>
<view class="li"> <view class="li">
<view class="title"> <view class="title">
安装位置 安装位置
</view> </view>
<input type="text" class="input input-black" placeholder="" value="详细地址+某某栋11楼会议室" /> <input type="text" class="input input-black" placeholder="" value="详细地址+某某栋11楼会议室" />
</view> </view>
<view class="li"> <view class="li">
<view class="title"> <view class="title">
故障类型 故障类型
</view> </view>
<input type="text" class="input input-black" placeholder="" value="供电不足" /> <input type="text" class="input input-black" placeholder="" value="供电不足" />
</view> </view>
<view class="li"> <view class="li">
<view class="title"> <view class="title">
服务方式 服务方式
</view> </view>
<input type="text" class="input input-black" placeholder="" value="上门服务" /> <input type="text" class="input input-black" placeholder="" value="上门服务" />
</view> </view>
<view class="li"> <view class="li">
<view class="title"> <view class="title">
故障说明 故障说明
</view> </view>
<textarea auto-height class="input input-black" <textarea auto-height class="input input-black"
value="*********************************************************************************************************" value="*********************************************************************************************************"
placeholder="" /> placeholder="" />
@ -94,61 +95,61 @@
<view class="title"> <view class="title">
故障图片 故障图片
</view> </view>
<view class="input add-display"> <view class="input add-display">
<view class=""> <view class="">
<image class="img" src="../../static/del/img001.png" mode="aspectFill"></image> <image class="img" src="../../static/del/img001.png" mode="aspectFill"></image>
<image class="img" src="../../static/del/img001.png" mode="aspectFill"></image> <image class="img" src="../../static/del/img001.png" mode="aspectFill"></image>
</view> </view>
<view class="add-img"> <view class="add-img">
<image class="icon" src="../../static/iocn/jia.png" mode=""></image> <image class="icon" src="../../static/iocn/jia.png" mode=""></image>
</view> </view>
</view> </view>
</view> </view>
<view class="li"> <view class="li">
<view class="title"> <view class="title">
开始时间 开始时间
</view> </view>
<input type="text" class="input " placeholder="" value="2022-01-25 09:39" /> <input type="text" class="input " placeholder="" value="2022-01-25 09:39" />
</view> </view>
<view class="li"> <view class="li">
<view class="title"> <view class="title">
结束时间 结束时间
</view> </view>
<input type="text" class="input input-black" placeholder="" value="2022-01-25 15:30" /> <input type="text" class="input input-black" placeholder="" value="2022-01-25 15:30" />
</view> </view>
<view class="li"> <view class="li">
<view class="title"> <view class="title">
维保用时 维保用时
</view> </view>
<input type="text" class="input " placeholder="" value="5小时51分钟" /> <input type="text" class="input " placeholder="" value="5小时51分钟" />
</view> </view>
<view class="li"> <view class="li">
<view class="title"> <view class="title">
维保费用 维保费用
</view> </view>
<input type="text" class="input input-black" placeholder="" value="¥500.00元" /> <input type="text" class="input input-black" placeholder="" value="¥500.00元" />
</view> </view>
<view class="li"> <view class="li">
<view class="title"> <view class="title">
等待时长 等待时长
</view> </view>
<input type="text" class="input " placeholder="" value="1天6小时35分钟" /> <input type="text" class="input " placeholder="" value="1天6小时35分钟" />
</view> </view>
<view class="li"> <view class="li">
<view class="title"> <view class="title">
主维保人 主维保人
</view> </view>
<input type="text" class="input input-black" placeholder="" value="陈志远" /> <input type="text" class="input input-black" placeholder="" value="陈志远" />
</view> </view>
<view class="li"> <view class="li">
<view class="title"> <view class="title">
@ -176,36 +177,36 @@
</view> </view>
</view> </view>
</view> </view>
</view> </view>
</view> </view>
<view class="work-order-from"> <view class="work-order-from">
<view class="li"> <view class="li">
<view class="title"> <view class="title">
工作描述 工作描述
</view> </view>
<textarea auto-height class="input input-black" <textarea auto-height class="input input-black"
value="*********************************************************************************************************" value="*********************************************************************************************************"
placeholder="" /> placeholder="" />
</view> </view>
<view class="li"> <view class="li">
<view class="title"> <view class="title">
维保图片 维保图片
</view> </view>
<view class="input add-display"> <view class="input add-display">
<view class=""> <view class="">
<image class="img" src="../../static/del/img001.png" mode="aspectFill"></image> <image class="img" src="../../static/del/img001.png" mode="aspectFill"></image>
<image class="img" src="../../static/del/img001.png" mode="aspectFill"></image> <image class="img" src="../../static/del/img001.png" mode="aspectFill"></image>
</view> </view>
<view class="add-img"> <view class="add-img">
<image class="icon" src="../../static/iocn/jia.png" mode=""></image> <image class="icon" src="../../static/iocn/jia.png" mode=""></image>
</view> </view>
@ -213,10 +214,10 @@
</view> </view>
<view class="li"> <view class="li">
<view class="title"> <view class="title">
故障原因 故障原因
</view> </view>
<textarea auto-height class="input input-black" <textarea auto-height class="input input-black"
value="*********************************************************************************************************" value="*********************************************************************************************************"
placeholder="" /> placeholder="" />
@ -226,7 +227,7 @@
维保人员 维保人员
</view> </view>
<input type="text" class="input input-black" placeholder="" value="罗帅 陈志远" /> <input type="text" class="input input-black" placeholder="" value="罗帅 陈志远" />
</view> </view>
</view> </view>
<view class="cost-breakdown"> <view class="cost-breakdown">
@ -239,7 +240,7 @@
</view> </view>
</view> </view>
</view> </view>
<view class="cost-breakdown-content"> <view class="cost-breakdown-content">
<view class="title"> <view class="title">
<view class="li"> <view class="li">
@ -271,16 +272,22 @@
</view> </view>
</view> </view>
<button class="submit-button" type="default">下一步</button> <button class="submit-button" type="default">下一步</button>
</view>
</container-subgroup-two>
</view> </view>
</template> </template>
<script> <script>
import statusNav from '../../components/status-nav.vue'; import statusNav from '../../components/status-nav.vue';
import footTabOne from "../../components/foot-tabs/foot-tab-one.vue" import footTabOne from "../../components/foot-tabs/foot-tab-one.vue"
import containerSubgroupTwo from '@/components/containers/container-subgroup-two.vue';
export default { export default {
components: { components: {
footTabOne, footTabOne,
statusNav statusNav,
containerSubgroupTwo
}, },
data() { data() {
return { return {
@ -318,11 +325,7 @@ isrideoFun(is){
</script> </script>
<style> <style>
.content {
padding-top: 80rpx;
padding-bottom: 20rpx;
}
.submit-button { .submit-button {
width: 686rpx; width: 686rpx;
border-radius: 50rpx; border-radius: 50rpx;