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 slot="content" style="margin: 0 -30rpx;">
<view class="head-top">
<view class="details-head">
<view class="swiper-head">
<swiper class="swiper" @change="changeAutoplay" :autoplay="autoplay" :interval="interval">
<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="head-top"> <view class="indication-point ">
<view class="details-head"> {{index}}/3
<view class="swiper-head"> </view>
<swiper class="swiper" @change="changeAutoplay" :autoplay="autoplay" :interval="interval"
>
<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 "> </view>
{{index}}/3
</view>
</view> <view class="title">
湖南工业大学生化学院会议室P2.5全彩LED显示屏
</view>
<view class="code">
XM20220108-1001
</view>
<view class="title"> <view class="address">
湖南工业大学生化学院会议室P2.5全彩LED显示屏 <image class="img" src="../../static/iocn/im.png" mode=""></image>
</view> <view class="text">
<view class="code"> 湖南省长沙市高新开发区谷园路109号像素大厦1205
XM20220108-1001 </view>
</view> </view>
<view class="address"> </view>
<image class="img" src="../../static/iocn/im.png" mode=""></image> <view class="last-date">
<view class="text"> <view class="last-date-content">
湖南省长沙市高新开发区谷园路109号像素大厦1205 <image class="icon" src="../../static/iocn/gzzt.png" mode=""></image>
</view> <view class="text">
</view> 最近一次故障时间2021-11-18 170016
</view>
</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 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>
</view>
<view class="record-content">
<view class="title">
维修追踪
</view>
<view class="list">
<view class="li on">
<view class="icon">
<view class="icon-con">
<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="con">
</view> <view class="text clips1">
</view> 黑屏故障 某某已处理
</view>
<view class="date">
2020-05-15 16:00
</view>
</view>
</view>
<view class="li">
<view class="icon">
<view class="record-content"> </view>
<view class="title"> <view class="con">
维修追踪 <view class="text clips1">
</view> 黑屏故障 某某已处理
<view class="list"> </view>
<view class="li on"> <view class="date">
<view class="icon"> 2020-05-15 16:00
<view class="icon-con"> </view>
</view>
</view>
<view class="li">
<view class="icon">
</view> </view>
</view> <view class="con">
<view class="con"> <view class="text clips1">
<view class="text clips1"> 黑屏故障 某某已处理
黑屏故障 某某已处理 </view>
</view> <view class="date">
<view class="date"> 2020-05-15 16:00
2020-05-15 16:00 </view>
</view> </view>
</view> </view>
</view> <view class="li">
<view class="li"> <view class="icon">
<view class="icon">
</view> </view>
<view class="con"> <view class="con">
<view class="text clips1"> <view class="text clips1">
黑屏故障 某某已处理 黑屏故障 某某已处理
</view> </view>
<view class="date"> <view class="date">
2020-05-15 16:00 2020-05-15 16:00
</view> </view>
</view> </view>
</view> </view>
<view class="li"> <view class="li">
<view class="icon"> <view class="icon">
</view> </view>
<view class="con"> <view class="con">
<view class="text clips1"> <view class="text clips1">
黑屏故障 某某已处理 黑屏故障 某某已处理
</view> </view>
<view class="date"> <view class="date">
2020-05-15 16:00 2020-05-15 16:00
</view> </view>
</view> </view>
</view> </view>
<view class="li"> <view class="li">
<view class="icon"> <view class="icon">
</view> </view>
<view class="con"> <view class="con">
<view class="text clips1"> <view class="text">
黑屏故障 某某已处理 黑屏故障 某某已处理
</view> </view>
<view class="date"> <view class="date">
2020-05-15 16:00 2020-05-15 16:00
</view> </view>
</view> </view>
</view> </view>
<view class="li"> <view class="li">
<view class="icon"> <view class="icon">
</view> </view>
<view class="con"> <view class="con">
<view class="text clips1"> <view class="text clips1">
黑屏故障 某某已处理 黑屏故障 某某已处理
</view> </view>
<view class="date"> <view class="date">
2020-05-15 16:00 2020-05-15 16:00
</view> </view>
</view> </view>
</view> </view>
<view class="li"> </view>
<view class="icon"> </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>
<view class="con"> </container-subgroup-two>
<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;
} }
@ -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;
} }
@ -609,15 +610,17 @@
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;
width: 13rpx;
height: 13rpx;
border-radius: 50%;
}
.record-content .list .on .icon::after {
content: "";
width: 2rpx;
position: absolute;
left: 9rpx;
height: 170rpx;
z-index: -1;
background-color: #0084ff;
top: 20rpx;
}
.record-content .list .on .con{
display: block;
color: #0084ff;
}
.record-content .list .on .con .text{
margin-bottom: 35rpx;
}
.record-content .list .on .con .date{
margin-bottom: 35rpx;
}
.record-content .list .on{
align-items: flex-start;
}
.project-materials-title{ .record-content .list .on .icon .icon-con {
display: flex; background-color: #0084ff;
color: #00a2e9; width: 13rpx;
font-size: 24rpx; height: 13rpx;
background-color: #FFFFFF; border-radius: 50%;
border-bottom: 2rpx solid #EDEDED; }
font-weight: bold; .record-content .list .on .icon::after {
padding: 26rpx 20rpx; content: "";
justify-content: space-between; width: 2rpx;
} position: absolute;
.project-materials-title .text{ left: 9rpx;
width: 16%; height: 170rpx;
text-align: center; z-index: -1;
} background-color: #0084ff;
.project-materials-text{ top: 20rpx;
display: flex; }
background-color: #FFFFFF;
border-bottom: 2rpx solid #EDEDED; .record-content .list .on .con {
padding: 26rpx 20rpx; display: block;
font-size: 24rpx; color: #0084ff;
justify-content: space-between; }
}
.project-materials-text .text{ .record-content .list .on .con .text {
width: 16%; margin-bottom: 35rpx;
text-align: center; }
}
.record-content .list .on .con .date {
margin-bottom: 35rpx;
}
.record-content .list .on {
align-items: flex-start;
}
.project-materials-title {
display: flex;
color: #00a2e9;
font-size: 24rpx;
background-color: #FFFFFF;
border-bottom: 2rpx solid #EDEDED;
font-weight: bold;
padding: 26rpx 20rpx;
justify-content: space-between;
}
.project-materials-title .text {
width: 16%;
text-align: center;
}
.project-materials-text {
display: flex;
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,9 +51,9 @@
</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>
@ -246,10 +248,11 @@
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':''"
v-for="(item,index) in navlist">
{{item.title}}
</view>
</view>
<view class="settlement-type">
<view class="settlement-type-title">
结算类型
</view>
<view class="settlement-type-content"> <container-subgroup-two>
<view class="li liB"> <view slot="content" style="margin: 0 -30rpx;">
<view class="text"> <view class="faultStatistics-nav">
单次收费 <view class="li" @click="navlistIndexFun(index)" :class="navlistIndex==index?'on':''"
</view> v-for="(item,index) in navlist">
<view class="num"> {{item.title}}
20 </view>
</view> </view>
</view> <view class="settlement-type">
<view class="settlement-type-title">
结算类型
</view>
<view class="li liC"> <view class="settlement-type-content">
<view class="text"> <view class="li liB">
验收扫尾 <view class="text">
</view> 单次收费
<view class="num"> </view>
3 <view class="num">
</view> 20
</view> </view>
<view class="li liD"> </view>
<view class="text">
质保免费
</view>
<view class="num">
46
</view>
</view>
<view class="li">
<view class="text">
包年签单
</view>
<view class="num">
10
</view>
</view>
</view>
</view>
<view class="fault-type"> <view class="li liC">
<view class="settlement-type-title"> <view class="text">
故障类型 验收扫尾
</view> </view>
<view class="charts-box"> <view class="num">
<qiun-data-charts type="ring" :chartData="chartData" background="none" /> 3
</view> </view>
</view> </view>
<view class="brand-analysis"> <view class="li liD">
<view class="settlement-type-title"> <view class="text">
品牌分析 质保免费
</view> </view>
<view class="num">
46
</view>
</view>
<view class="li">
<view class="text">
包年签单
</view>
<view class="num">
10
</view>
</view>
</view>
</view>
<view class="brand-analysis-box"> <view class="fault-type">
<view class="li"> <view class="settlement-type-title">
<view class="serial-number"> 故障类型
1 </view>
</view> <view class="charts-box">
<qiun-data-charts type="ring" :chartData="chartData" background="none" />
</view>
</view>
<view class="brand-analysis">
<view class="settlement-type-title">
品牌分析
</view>
<view class="brand-analysis-center"> <view class="brand-analysis-box">
<view class="title-box"> <view class="li">
<view class="title"> <view class="serial-number">
海康威视 1
</view> </view>
<view class="cor">
10
</view>
<view class="cor1">
23.3%
</view>
</view>
<view class="percentage"> <view class="brand-analysis-center">
<view class="percentage-box" :style="{width:getPercentage(33,900)}"> <view class="title-box">
<view class="title">
海康威视
</view>
<view class="cor">
10
</view>
<view class="cor1">
23.3%
</view>
</view>
</view> <view class="percentage">
</view> <view class="percentage-box" :style="{width:getPercentage(33,900)}">
</view>
<image class="icon" src="../../static/iocn/xl.png" mode=""></image> </view>
</view> </view>
<view class="li"> </view>
<view class="serial-number">
2
</view>
<view class="brand-analysis-center"> <image class="icon" src="../../static/iocn/xl.png" mode=""></image>
<view class="title-box"> </view>
<view class="title"> <view class="li">
海康威视 <view class="serial-number">
</view> 2
<view class="cor"> </view>
10
</view>
<view class="cor1">
23.3%
</view>
</view>
<view class="percentage"> <view class="brand-analysis-center">
<view class="percentage-box" :style="{width:getPercentage(33,900)}"> <view class="title-box">
<view class="title">
海康威视
</view>
<view class="cor">
10
</view>
<view class="cor1">
23.3%
</view>
</view>
</view> <view class="percentage">
</view> <view class="percentage-box" :style="{width:getPercentage(33,900)}">
</view>
<image class="icon" src="../../static/iocn/xl.png" mode=""></image> </view>
</view> </view>
<view class="li"> </view>
<view class="serial-number">
3
</view>
<view class="brand-analysis-center"> <image class="icon" src="../../static/iocn/xl.png" mode=""></image>
<view class="title-box"> </view>
<view class="title"> <view class="li">
海康威视 <view class="serial-number">
</view> 3
<view class="cor"> </view>
10
</view>
<view class="cor1">
23.3%
</view>
</view>
<view class="percentage"> <view class="brand-analysis-center">
<view class="percentage-box" :style="{width:getPercentage(33,900)}"> <view class="title-box">
<view class="title">
海康威视
</view>
<view class="cor">
10
</view>
<view class="cor1">
23.3%
</view>
</view>
</view> <view class="percentage">
</view> <view class="percentage-box" :style="{width:getPercentage(33,900)}">
</view>
<image class="icon" src="../../static/iocn/xl.png" mode=""></image> </view>
</view> </view>
<view class="li"> </view>
<view class="serial-number">
4
</view>
<view class="brand-analysis-center"> <image class="icon" src="../../static/iocn/xl.png" mode=""></image>
<view class="title-box"> </view>
<view class="title"> <view class="li">
海康威视 <view class="serial-number">
</view> 4
<view class="cor"> </view>
10
</view>
<view class="cor1">
23.3%
</view>
</view>
<view class="percentage"> <view class="brand-analysis-center">
<view class="percentage-box percentage-box-ber" :style="{width:getPercentage(33,80)}"> <view class="title-box">
<view class="title">
海康威视
</view>
<view class="cor">
10
</view>
<view class="cor1">
23.3%
</view>
</view>
</view> <view class="percentage">
</view> <view class="percentage-box percentage-box-ber" :style="{width:getPercentage(33,80)}">
</view>
<image class="icon" src="../../static/iocn/xl.png" mode=""></image> </view>
</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 slot="content" style="margin: 0 -30rpx;">
<view class="project-overview">
<view class="settlement-type-title">
项目概况
</view>
<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-overview"> <view class="project-gross-box">
<view class="settlement-type-title"> <view class="li">
项目概况 <view class="date">
</view> 今日
<view class="project-gross"> </view>
<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="date-con">
<view class="li"> <view class="date-con-li">
<view class="date"> <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>
<view class="date-con"> <view class="data-icon">
<view class="date-con-li"> <view class="settlement-type-title">
<view class="text"> 年度项目数据明细
新增项目量
</view>
<view class="single-amount">
0
</view>
</view> </view>
<view class="date-con-li"> <view class="">
<view class="text"> <view class="charts-box">
新增工单量 <qiun-data-charts type="mix" :chartData="chartData" background="none" />
</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="li">
<view class="date">
本周
</view>
<view class="date-con"> <view class="serve-data">
<view class="date-con-li"> <view class="settlement-type-title">
<view class="text"> 服务数据
新增项目量
</view>
<view class="single-amount">
0
</view>
</view> </view>
<view class="date-con-li"> <view class="serve-data-box">
<view class="text"> <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 class="single-amount"> <view class="serve-data-left">
0 <view class="title">
</view> 累计服务量
</view> </view>
<view class="date-con-li"> <view class="text-con">
<view class="text"> <view class="li">
项目故障率 <view class="text">
</view> 维保工单:
<view class="single-amount"> </view>
0 <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>
</view> </view>
</view>
<view class="li"> <view class="data-icon">
<view class="date"> <view class="settlement-type-title">
本月 年度项目数据明细
</view>
<view class="date-con">
<view class="date-con-li">
<view class="text">
新增项目量
</view>
<view class="single-amount">
0
</view>
</view> </view>
<view class="date-con-li"> <view class="">
<view class="text"> <view class="charts-box">
新增工单量 <qiun-data-charts type="mix" :chartData="chartDataA" background="none" />
</view> </view>
<view class="single-amount"> </view>
0 </view>
</view>
</view> <view class="expire-project">
<view class="date-con-li"> <view class="settlement-type-title settlement-type-titlea">
<view class="text"> 质保即将到期项目
项目故障率 </view>
</view>
<view class="single-amount"> <view class="expire-project-box">
0 <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>
</view>
</view> </view>
</container-subgroup-two>
</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="feedback-approach"> <view class="opinion-type-content">
<view class="feedback-con"> <view class="li" @click="opinionType(index)" :class="item.state?'on':''"
<image class="icon" src="../../static/iocn/tel.png" mode=""></image> v-for="(item,index) in typeData">
{{item.title}}
<view class="feedback-tel-con"> </view>
<view class="text">
服务监督电话
</view> </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="feedback-input">
<view class="text">
反馈受理时间 <input type="text" class="inputCss" placeholder="请填写您的意见或建议内容" placeholder-class="inputCss-input"
</view> value="" />
<view class="tel"> <input type="text" class="inputCss" placeholder="请输入联系人姓名" placeholder-class="inputCss-input"
9:00 - 18:00 value="" />
</view> <input type="text" class="inputCss" placeholder="请输入联系人电话" placeholder-class="inputCss-input"
</view> value="" />
</view>
</view> <view class="fault-pictures">
<button class="submit-button" type="default">提交反馈</button> <image class="img" src="../../static/iocn/gz.png" mode="aspectFill"></image>
<view class="text">
请上传图片
</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>
</container-subgroup-two>
<footTabOne :current="3"></footTabOne> <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 slot="content" style="margin: -25rpx -30rpx;">
<view class="head-top"> <view class="head-top">
<view class="details-head"> <view class="details-head">
<view class="swiper-head"> <view class="swiper-head">
<swiper class="swiper" @change="changeAutoplay" :autoplay="autoplay" :interval="interval" <swiper class="swiper" @change="changeAutoplay" :autoplay="autoplay" :interval="interval"
:duration="duration"> >
<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 class="title">
湖南工业大学生化学院会议室P2.5全彩LED显示屏
</view>
<view class="code">
XM20220108-1001
</view>
<view class="address">
<image class="img" src="../../static/iocn/im.png" mode=""></image>
<view class="text">
湖南省长沙市高新开发区谷园路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="title">
湖南工业大学生化学院会议室P2.5全彩LED显示屏
</view>
<view class="code">
XM20220108-1001
</view>
<view class="address">
<image class="img" src="../../static/iocn/im.png" mode=""></image>
<view class="text">
湖南省长沙市高新开发区谷园路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 class="project-message-title">
<view class="icon">
<view class="project-message-title"> </view>
<view class="icon"> <view class="text">
项目概况
</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> </view>
<view class="text"> </container-subgroup-two>
项目概况
</view>
</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,57 +1,64 @@
<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 class="li">
<view class="text">产品类型</view>
<image class="img" src="../../static/iocn/xla.png" mode="aspectFill" lazy-load></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" lazy-load></image>
</view>
</picker>
<view class="li">
<view class="text">筛选</view>
<image class="imgA" src="../../static/iocn/sx.png" mode="aspectFill" lazy-load></image>
</view>
</view>
<view class="project-list">
<view class="li" @click="projectDetailsFun()" v-for="(item,index) in 10" :key="index">
<view class="message">
<image class="img" src="../../static/del/img001.png" mode="aspectFill" lazy-load></image>
<view class="text disjb fc" style="height: 180rpx;">
<view class="clips1 fon24 bold">湖南工业大学化工学院会议室P2.5全彩LED显示屏</view>
<view class="disjb fc" style="margin-left: -20rpx;height: 80%;">
<view class="serial-number scal09">项目编号20220108-1001</view>
<view class="specification scal09">规格型号DS-CK25FI/H</view>
<view class="specification scal09">产品尺寸3.94*2.02</view>
<view class="installation-site scal09">安装位置xxx综合楼2楼会议室</view>
</view>
</view>
</view>
<view class="project-list-address col6 mar-s20 disjbac">
<view class="address">
<image class="img flexs" src="../../static/iocn/im.png" mode="scaleToFill" lazy-load></image>
<view class="text scal09" style="margin-left: -26rpx;">湖南省长沙市高新开发区谷园路109号像素大厦1205</view>
</view>
<view class="date scal09">2022/01/08</view>
</view>
<!-- <view class="icon iconBera">质保中</view> -->
<view class="icon iconBer">质保到期</view>
</view>
</view> </view>
<image class="search" src="../../static/iocn/ss.png" mode="aspectFill" lazy-load></image>
</view>
<view class="screen bbot mar-sx20">
<picker @change="bindPickerChange" :value="index" :range="array">
<view class="li">
<view class="text">产品类型</view>
<image class="img" src="../../static/iocn/xla.png" mode="aspectFill" lazy-load></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" lazy-load></image>
</view>
</picker>
<view class="li">
<view class="text">筛选</view>
<image class="imgA" src="../../static/iocn/sx.png" mode="aspectFill" lazy-load></image>
</view>
</view>
<view class="project-list">
<view class="li" @click="projectDetailsFun()" v-for="(item,index) in 10" :key="index">
<view class="message">
<image class="img" src="../../static/del/img001.png" mode="aspectFill" lazy-load></image>
<view class="text disjb fc" style="height: 180rpx;">
<view class="clips1 fon24 bold">湖南工业大学化工学院会议室P2.5全彩LED显示屏</view>
<view class="disjb fc" style="margin-left: -20rpx;height: 80%;">
<view class="serial-number scal09">项目编号20220108-1001</view>
<view class="specification scal09">规格型号DS-CK25FI/H</view>
<view class="specification scal09">产品尺寸3.94*2.02</view>
<view class="installation-site scal09">安装位置xxx综合楼2楼会议室</view>
</view>
</view>
</view>
<view class="project-list-address col6 mar-s20 disjbac">
<view class="address">
<image class="img flexs" src="../../static/iocn/im.png" mode="scaleToFill" lazy-load></image>
<view class="text scal09" style="margin-left: -26rpx;">湖南省长沙市高新开发区谷园路109号像素大厦1205</view>
</view>
<view class="date scal09">2022/01/08</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>
@ -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>
</view> <text></text>
<input class="input" placeholder="请填写联系人称呼" type="text" value="" /> <text></text>
</view> </view>
<view class="payReturnVisit-input"> <input class="input" placeholder="请填写联系人称呼" type="text" value="" />
<view class="title"> </view>
联系电话 <view class="payReturnVisit-input">
</view> <view class="title">
<input class="input" placeholder="请输入手机号码" type="text" value="" /> 联系电话
</view> </view>
<view class="payReturnVisit-input"> <input class="input" placeholder="请输入手机号码" type="text" value="" />
<view class="title"> </view>
<text></text> <view class="payReturnVisit-input">
<text></text> <view class="title">
<text></text> <text></text>
</view> <text></text>
<input class="input" placeholder="请输入微信号码" type="text" value="" /> <text></text>
</view> </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 class="payReturnVisit-textarea">
<view class="title">
回访内容
</view> </view>
<textarea class="textarea" value="" placeholder="请输入回访内容" /> </container-subgroup-two>
</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>
<input type="text" class="input" placeholder="" value="供电不足" />
</view>
<view class="li">
<view class="title">
故障类型
</view> </view>
<view class="li"> <input type="text" class="input" placeholder="" value="供电不足" />
<view class="title">
紧急程度
</view>
<input type="text" class="input" placeholder="" value="紧急" />
</view>
<view class="li">
<view class="title">
紧急程度
</view> </view>
<view class="li"> <input type="text" class="input" placeholder="" value="紧急" />
<view class="title">
故障说明 </view>
</view> <view class="li">
<view class="title">
<textarea auto-height class="input" value="*********************************************************************************************************" placeholder="" /> 故障说明
</view> </view>
<view class="li">
<view class="title">
故障图片 <textarea auto-height class="input"
</view> value="*********************************************************************************************************"
placeholder="" />
</view>
<view class="li">
<view class="title">
<view class="input"> 故障图片
<image class="img" src="../../static/del/img001.png" mode="aspectFill"></image> </view>
<image class="img" src="../../static/del/img001.png" mode="aspectFill"></image>
</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="work-order-from">
<view class="li"> <view class="li">
<view class="title"> <view class="title">
</view>
<input type="text" class="input" placeholder="" value="林某" />
</view> </view>
<input type="text" class="input" placeholder="" value="林某" />
<view class="li"> </view>
<view class="title">
报单时间
</view>
<input type="text" class="input" placeholder="" value="2021/12/3 12:00:05" />
<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>
<input type="text" class="input input-black" placeholder="" value="上门服务" />
</view>
<view class="li">
<view class="title">
服务方式
</view> </view>
<view class="li"> <input type="text" class="input input-black" placeholder="" value="上门服务" />
<view class="title">
定位地址
</view>
<input type="text" class="input" placeholder="" value="*******************************" />
</view>
<view class="li">
<view class="title">
定位地址
</view> </view>
</view> <input type="text" class="input" placeholder="" value="*******************************" />
</view>
</view>
<button class="submit-button" type="default">签到</button>
</view>
</container-subgroup-two>
<button class="submit-button" type="default">签到</button>
</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;
@ -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="请输入关键字" />
<image class="search" src="../../static/iocn/ss.png" mode=""></image>
<view class="xian">
</view> <container-subgroup-two>
</view> <view slot="content" style="margin: 0 -25rpx;">
<view class="project-list-input">
<input type="text" class="int" value="" placeholder="请输入关键字" />
<view class="screen"> <image class="search" src="../../static/iocn/ss.png" mode=""></image>
<picker @change="bindPickerChange" :value="index" :range="array"> <view class="xian">
<view class="li">
<view class="text">
工单状态
</view>
<image class="img" src="../../static/iocn/xla.png" mode="aspectFill"></image>
</view> </view>
</picker> </view>
<picker mode="date" :value="date" @change="bindDateChange">
<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="li">
<view class="text"> <view class="text">
工单日期 筛选
</view> </view>
<image class="img" src="../../static/iocn/xla.png" mode="aspectFill"></image> <image class="imgA" src="../../static/iocn/sx.png" mode="aspectFill"></image>
</view> </view>
</picker>
<view class="li">
<view class="text">
筛选
</view>
<image class="imgA" src="../../static/iocn/sx.png" mode="aspectFill"></image>
</view> </view>
</view>
<view class="project-list"> <view class="project-list">
<view class="li" @click="projectDetailsFun()"> <view class="li" @click="projectDetailsFun()">
<view class="work-order-code"> <view class="work-order-code">
工单编号222226666558 工单编号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> <view class="message">
<image class="img" src="../../static/del/img001.png" mode="aspectFill"></image>
<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">
待维修
</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>
</view>
</view> <view class="project-list-address">
<view class="li" @click="projectDetailsFun()"> <view class="address clips2">
<view class="work-order-code"> <image class="img" src="../../static/iocn/dz2.png" mode="aspectFill"></image>
工单编号222226666558 <view class="text">
</view> 湖南省长沙市高新开发区谷园路109号像素大厦1205
<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 class="project-list-address"> </view>
<view class="address clips2"> <view class="li" @click="projectDetailsFun()">
<image class="img" src="../../static/iocn/dz2.png" mode="aspectFill"></image> <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="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>
</view>
</view> <view class="project-list-address">
<view class="li" @click="projectDetailsFun()"> <view class="address clips2">
<view class="work-order-code"> <image class="img" src="../../static/iocn/dz2.png" mode="aspectFill"></image>
工单编号222226666558 <view class="text">
</view> 湖南省长沙市高新开发区谷园路109号像素大厦1205
<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 icon3">
等待派工
</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 class="project-list-address"> </view>
<view class="address clips2"> <view class="li" @click="projectDetailsFun()">
<image class="img" src="../../static/iocn/dz2.png" mode="aspectFill"></image> <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="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> </view>
</container-subgroup-two>
<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">
<view class="icon icon-after">
1
</view>
<view class="text">
签到执行
</view>
</view>
<view class="li">
<view class="icon icon-after">
2
</view>
<view class="text">
填写维保单
</view>
</view>
<view class="li">
<view class="icon on">
3
</view>
<view class="text">
结算审核
</view>
</view>
</view>
<view class="clearing-form"> <container-subgroup-two>
<view class="title"> <view slot="content" style="margin: 0 -25rpx;">
结算方式 <view class="work-order-schedule">
</view> <view class="li">
<view class="clearing-form-content"> <view class="icon icon-after">
<view class="li" @click="clearingFormFun(index)" v-for="(item,index) in clearingForm"> 1
<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="text">
{{item.title}} 签到执行
</view> </view>
</view> </view>
</view> <view class="li">
<view class="icon icon-after">
2
</view>
<view class="text">
填写维保单
</view>
</view>
<view class="li">
<view class="icon on">
3
</view>
<view class="text">
结算审核
</view>
</view>
</view>
<view class="clearing-form">
<view class="title">
结算方式
</view>
<view class="clearing-form-content">
<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>
<image class="icon" v-else src="../../static/iocn/xuan.png" mode=""></image>
{{item.title}}
</view>
</view>
</view>
<view class="work-order-from"> <view class="work-order-from">
<picker mode="date" :value="date" @change="serveDate"> <picker mode="date" :value="date" @change="serveDate">
<view class="serve-date"> <view class="serve-date">
<view class="text"> <view class="text">
请选择服务时间 请选择服务时间
</view> </view>
<image class="icon" src="../../static/iocn/jt.png" mode=""></image> <image class="icon" src="../../static/iocn/jt.png" mode=""></image>
</view> </view>
</picker> </picker>
<view class="total-cost"> <view class="total-cost">
<view class="li"> <view class="li">
<view class="text"> <view class="text">
上门费 上门费
</view> </view>
<view class="price"> <view class="price">
120.00 120.00
</view> </view>
</view> </view>
<view class="li"> <view class="li">
<view class="text on"> <view class="text on">
税金 税金
</view> </view>
<view class="price"> <view class="price">
120.00 120.00
</view> </view>
</view> </view>
<view class="li"> <view class="li">
<view class="text"> <view class="text">
材料费 材料费
</view> </view>
<view class="price"> <view class="price">
120.00 120.00
</view> </view>
</view> </view>
<view class="li"> <view class="li">
<view class="text"> <view class="text">
其他费用 其他费用
</view> </view>
<view class="price"> <view class="price">
120.00 120.00
</view> </view>
</view> </view>
</view> </view>
<view class="total-price"> <view class="total-price">
费用合计<text class="money">580.00</text> 费用合计<text class="money">580.00</text>
</view> </view>
<picker @change="bindPickerChange" :value="index" :range="array"> <picker @change="bindPickerChange" :value="index" :range="array">
<view class="serve-date"> <view class="serve-date">
<view class="text"> <view class="text">
请选择付款方式 请选择付款方式
</view> </view>
<image class="icon" src="../../static/iocn/jt.png" mode=""></image> <image class="icon" src="../../static/iocn/jt.png" mode=""></image>
</view> </view>
</picker> </picker>
<view class="is-invoice"> <view class="is-invoice">
<view class="text"> <view class="text">
是否开票 是否开票
</view> </view>
<view class="radio" @click="isInvoiceFun(true)"> <view class="radio" @click="isInvoiceFun(true)">
<image v-if="isInvoice" src="../../static/iocn/xz.png" class="icon" mode=""></image> <image v-if="isInvoice" src="../../static/iocn/xz.png" class="icon" mode=""></image>
<view v-else class="icon1"> <view v-else class="icon1">
</view> </view>
<text></text> <text></text>
</view> </view>
<view class="radio" @click="isInvoiceFun(false)"> <view class="radio" @click="isInvoiceFun(false)">
<image v-if="!isInvoice" src="../../static/iocn/xz.png" class="icon" mode=""></image> <image v-if="!isInvoice" src="../../static/iocn/xz.png" class="icon" mode=""></image>
<view v-else class="icon1"> <view v-else class="icon1">
</view> </view>
<text></text> <text></text>
</view> </view>
</view> </view>
<view class="is-invoice"> <view class="is-invoice">
<view class="text"> <view class="text">
是否收款 是否收款
</view> </view>
<view class="radio" @click="isMoneyFun(true)"> <view class="radio" @click="isMoneyFun(true)">
<image v-if="isMoney" src="../../static/iocn/xz.png" class="icon" mode=""></image> <image v-if="isMoney" src="../../static/iocn/xz.png" class="icon" mode=""></image>
<view v-else class="icon1"> <view v-else class="icon1">
</view> </view>
<text></text> <text></text>
</view> </view>
<view class="radio" @click="isMoneyFun(false)"> <view class="radio" @click="isMoneyFun(false)">
<image v-if="!isMoney" src="../../static/iocn/xz.png" class="icon" mode=""></image> <image v-if="!isMoney" src="../../static/iocn/xz.png" class="icon" mode=""></image>
<view v-else class="icon1"> <view v-else class="icon1">
</view> </view>
<text></text> <text></text>
</view> </view>
</view> </view>
<view class="customerSignature"> <view class="customerSignature">
<view class="title"> <view class="title">
客户签名 客户签名
</view> </view>
<view class='contents'> <view class='contents'>
<canvas class='firstCanvas' canvas-id="firstCanvas" @touchmove='move' @touchstart='start($event)' <canvas class='firstCanvas' canvas-id="firstCanvas" @touchmove='move' @touchstart='start($event)'
@touchend='end' @touchcancel='cancel' @longtap='tap' disable-scroll='true' @error='error'> @touchend='end' @touchcancel='cancel' @longtap='tap' disable-scroll='true' @error='error'>
</canvas> </canvas>
<!-- <button @click='clearClick'>清除</button> --> <!-- <button @click='clearClick'>清除</button> -->
<!-- <button @click='saveClick'>保存图片</button> --> <!-- <button @click='saveClick'>保存图片</button> -->
</view> </view>
<view class="text" v-if="isCanvas"> <view class="text" v-if="isCanvas">
请在此签名 请在此签名
</view> </view>
</view> </view>
<view class="money-receiving-code"> <view class="money-receiving-code">
<view class="title"> <view class="title">
<image src="../../static/iocn/shoukuan.png" class="icon" mode=""></image> <image src="../../static/iocn/shoukuan.png" class="icon" mode=""></image>
<view class="text"> <view class="text">
微信支付宝等收款码 微信支付宝等收款码
</view> </view>
</view> </view>
<image src="../../static/iocn/jt.png" mode="" class="img"></image> <image src="../../static/iocn/jt.png" mode="" class="img"></image>
</view>
<view class="address">
<image class="icon" src="../../static/iocn/dizi.png" mode=""></image>
<view class="text ">
湖南省株洲市荷塘区红旗中路456号(五矿二十三冶)
</view>
</view>
<view class="remark">
<view class="title">
备注内容
</view>
<textarea class="textarea" value="" placeholder="请输入备注内容" />
</view>
</view>
<button class="submit-button" type="default">提交审核</button>
</view> </view>
</container-subgroup-two>
<view class="address">
<image class="icon" src="../../static/iocn/dizi.png" mode=""></image>
<view class="text ">
湖南省株洲市荷塘区红旗中路456号(五矿二十三冶)
</view>
</view>
<view class="remark">
<view class="title">
备注内容
</view>
<textarea class="textarea" value="" placeholder="请输入备注内容" />
</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 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;
@ -605,7 +610,7 @@
width: 100%; width: 100%;
} }
.customerSignature .text { .customerSignature .text {
position: absolute; position: absolute;
top: 50%; top: 50%;
width: 100%; width: 100%;
@ -634,66 +639,75 @@
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;

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">
@ -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,10 +325,6 @@ isrideoFun(is){
</script> </script>
<style> <style>
.content {
padding-top: 80rpx;
padding-bottom: 20rpx;
}
.submit-button { .submit-button {
width: 686rpx; width: 686rpx;