|
|
@@ -1,6 +1,251 @@
|
|
|
<template>
|
|
|
<view>
|
|
|
- <u-navbar title="工单管理" title-color="#101010" ></u-navbar>
|
|
|
+
|
|
|
+ <view class="navbar-c">
|
|
|
+ <view class="back" @click="toStatistics">
|
|
|
+ <image class="img" src="@/assets/img/riLine-road-map-line.svg" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="title">
|
|
|
+ 工单管理
|
|
|
+ </view>
|
|
|
+ <view class="right" >
|
|
|
+ 故障上报
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 搜索 -->
|
|
|
+ <view class="search-box">
|
|
|
+ <u-search placeholder="搜索" bg-color="#fff" height="80" :show-action="true" v-model="keyword">
|
|
|
+
|
|
|
+
|
|
|
+ </u-search>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <!-- 我的工单 -->
|
|
|
+ <view class="my-work-order">
|
|
|
+ <view class="title">
|
|
|
+ <view class="name">
|
|
|
+ <view class="icon">
|
|
|
+ <image class="img" src="@/assets/img/riFill-bar-chart-fill.svg" mode=""></image>
|
|
|
+ </view>
|
|
|
+ 我的工单
|
|
|
+ </view>
|
|
|
+ <view class="more">
|
|
|
+ 工单统计<u-icon name="arrow-right" color="#777777"></u-icon>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 分类 -->
|
|
|
+ <view class="classify">
|
|
|
+ <view class="item item-checked" >
|
|
|
+ 全部18
|
|
|
+ <view class="checked-circle">
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="item">
|
|
|
+ 待指派 2
|
|
|
+ </view>
|
|
|
+ <view class="item">
|
|
|
+ 进行中 3
|
|
|
+ </view>
|
|
|
+ <view class="item">
|
|
|
+ 已解决 13
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 工单详情 -->
|
|
|
+ <view class="work-order">
|
|
|
+ <!-- 紧急 -->
|
|
|
+ <view class="urgency">
|
|
|
+ 紧急
|
|
|
+ </view>
|
|
|
+ <view class="order-item">
|
|
|
+ <view class="item-icon">
|
|
|
+ <image class="img" src="@/assets/img/riFill-building-fill1.svg" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="item-value value-bold">
|
|
|
+ 荆鹏集团-荆鹏软件园01
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="order-item">
|
|
|
+ <view class="item-icon">
|
|
|
+ <image class="img" src="@/assets/img/riFill-alert-fill.svg" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="item-value value-bold">
|
|
|
+ 温度过高
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="order-item">
|
|
|
+ <view class="item-icon">
|
|
|
+ <image class="img" src="@/assets/img/riFill-map-pin-fill.svg" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="item-value">
|
|
|
+ 沙市区江津东路附155号
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="order-item">
|
|
|
+ <view class="item-icon">
|
|
|
+ <image class="img" src="@/assets/img/riFill-time-fill.svg" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="item-value">
|
|
|
+ 2024-02-04 20:00:00
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="button">
|
|
|
+ <view class="state">
|
|
|
+ 待指派
|
|
|
+ </view>
|
|
|
+ <view class="btn">
|
|
|
+ <button class="close">关闭</button>
|
|
|
+ <button class="reminder">催单</button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="work-order">
|
|
|
+
|
|
|
+ <view class="order-item">
|
|
|
+ <view class="item-icon">
|
|
|
+ <image class="img" src="@/assets/img/riFill-building-fill1.svg" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="item-value value-bold">
|
|
|
+ 荆鹏集团-荆鹏软件园01
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="order-item">
|
|
|
+ <view class="item-icon">
|
|
|
+ <image class="img" src="@/assets/img/riFill-alert-fill.svg" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="item-value value-bold">
|
|
|
+ 温度过高
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="order-item">
|
|
|
+ <view class="item-icon">
|
|
|
+ <image class="img" src="@/assets/img/riFill-map-pin-fill.svg" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="item-value">
|
|
|
+ 沙市区江津东路附155号
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="order-item">
|
|
|
+ <view class="item-icon">
|
|
|
+ <image class="img" src="@/assets/img/riFill-time-fill.svg" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="item-value">
|
|
|
+ 2024-02-04 20:00:00
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="button">
|
|
|
+ <view class="state state2">
|
|
|
+ 进行中
|
|
|
+ </view>
|
|
|
+ <view class="btn">
|
|
|
+
|
|
|
+ <button class="resolved">确认解决</button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="work-order">
|
|
|
+
|
|
|
+ <view class="order-item">
|
|
|
+ <view class="item-icon">
|
|
|
+ <image class="img" src="@/assets/img/riFill-building-fill1.svg" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="item-value value-bold">
|
|
|
+ 荆鹏集团-荆鹏软件园01
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="order-item">
|
|
|
+ <view class="item-icon">
|
|
|
+ <image class="img" src="@/assets/img/riFill-alert-fill.svg" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="item-value value-bold">
|
|
|
+ 温度过高
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="order-item">
|
|
|
+ <view class="item-icon">
|
|
|
+ <image class="img" src="@/assets/img/riFill-map-pin-fill.svg" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="item-value">
|
|
|
+ 沙市区江津东路附155号
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="order-item">
|
|
|
+ <view class="item-icon">
|
|
|
+ <image class="img" src="@/assets/img/riFill-time-fill.svg" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="item-value">
|
|
|
+ 2024-02-04 20:00:00
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="button">
|
|
|
+ <view class="state state3">
|
|
|
+ 已解决
|
|
|
+ </view>
|
|
|
+ <view class="btn">
|
|
|
+
|
|
|
+ <button class="view">查看详情</button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="work-order">
|
|
|
+
|
|
|
+ <view class="order-item">
|
|
|
+ <view class="item-icon">
|
|
|
+ <image class="img" src="@/assets/img/riFill-building-fill1.svg" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="item-value value-bold">
|
|
|
+ 荆鹏集团-荆鹏软件园01
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="order-item">
|
|
|
+ <view class="item-icon">
|
|
|
+ <image class="img" src="@/assets/img/riFill-alert-fill.svg" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="item-value value-bold">
|
|
|
+ 温度过高
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="order-item">
|
|
|
+ <view class="item-icon">
|
|
|
+ <image class="img" src="@/assets/img/riFill-map-pin-fill.svg" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="item-value">
|
|
|
+ 沙市区江津东路附155号
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="order-item">
|
|
|
+ <view class="item-icon">
|
|
|
+ <image class="img" src="@/assets/img/riFill-time-fill.svg" mode=""></image>
|
|
|
+ </view>
|
|
|
+ <view class="item-value">
|
|
|
+ 2024-02-04 20:00:00
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="button">
|
|
|
+ <view class="state state4">
|
|
|
+ 已关闭
|
|
|
+ </view>
|
|
|
+ <view class="btn">
|
|
|
+
|
|
|
+ <button class="view">查看详情</button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+
|
|
|
<energyCenterTabbar :current="1"></energyCenterTabbar>
|
|
|
</view>
|
|
|
</template>
|
|
|
@@ -23,5 +268,207 @@
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
+ page{
|
|
|
+ padding-bottom: 100px;
|
|
|
+ }
|
|
|
+// 搜索
|
|
|
+.search-box{
|
|
|
+ padding: 16rpx 32rpx;
|
|
|
+ position: sticky;
|
|
|
+ top: 88rpx;
|
|
|
+ z-index: 999;
|
|
|
+ background-color:#F2F4F6;
|
|
|
+ /deep/.u-content{
|
|
|
+ border-radius: 8px !important;
|
|
|
+ };
|
|
|
+ /deep/.u-search{
|
|
|
+ position: relative
|
|
|
+ };
|
|
|
+
|
|
|
+ /deep/.u-action {
|
|
|
+ width: 96rpx;
|
|
|
+ line-height: 56rpx;
|
|
|
+ border-radius: 4px;
|
|
|
+ background-color: rgba(22,119,255,1);
|
|
|
+ color: rgba(255,255,255,1);
|
|
|
+ text-align: center;
|
|
|
+ z-index: 9999;
|
|
|
+ position: absolute;
|
|
|
+ right: 12rpx;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 我的工单
|
|
|
+.my-work-order{
|
|
|
+ margin-top: 88rpx;
|
|
|
+ .title{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 16rpx 32rpx;
|
|
|
+ .name{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ color: rgba(16,16,16,1);
|
|
|
+ font-size: 36rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ .icon{
|
|
|
+ width: 36rpx;
|
|
|
+ height: 36rpx;
|
|
|
+ border-radius: 4px;
|
|
|
+ background-color: rgba(22,119,255,1);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ margin-right: 12rpx;
|
|
|
+ .img{
|
|
|
+ width: 28rpx;
|
|
|
+ height: 28rpx;
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .more{
|
|
|
+ color: #777777;
|
|
|
+ font-size: 32rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 分类
|
|
|
+ .classify{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 0 32rpx;
|
|
|
+ margin-top: 8rpx;
|
|
|
+ .item{
|
|
|
+ width: 160rpx;
|
|
|
+ line-height: 72rpx;
|
|
|
+ border-radius: 8px;
|
|
|
+ background-color: rgba(255,255,255,1);
|
|
|
+ border: 1px solid rgba(22,119,255,1);
|
|
|
+ text-align: center;
|
|
|
+ color: rgba(22,119,255,1);
|
|
|
+ font-weight: bold;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ .item-checked{
|
|
|
+ background: linear-gradient(180deg, rgba(78,141,246,1) 0%,rgba(22,119,255,1) 100%);
|
|
|
+ color: #fff;
|
|
|
+ position: relative;
|
|
|
+ .checked-circle{
|
|
|
+ width: 20rpx;
|
|
|
+ height: 20rpx;
|
|
|
+ background-color: rgba(255,150,0,1);
|
|
|
+ border-radius: 999px;
|
|
|
+ position: absolute;
|
|
|
+ bottom: -10rpx;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 工单详情
|
|
|
+ .work-order{
|
|
|
+ border-radius: 8px;
|
|
|
+ background-color: rgba(255,255,255,1);
|
|
|
+ margin: 24rpx 32rpx;
|
|
|
+ padding: 32rpx 24rpx 0;
|
|
|
+ position: relative;
|
|
|
+ // 紧急
|
|
|
+ .urgency{
|
|
|
+ width: 120rpx;
|
|
|
+ line-height: 56rpx;
|
|
|
+ border-radius: 0px 8px 0px 8px;
|
|
|
+ color: rgba(255,255,255,1);
|
|
|
+ font-size: 32rpx;
|
|
|
+ text-align: center;
|
|
|
+ background: linear-gradient(180deg, rgba(255,79,63,1) 0%,rgba(255,124,112,1) 100%);
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
+
|
|
|
+ }
|
|
|
+ .order-item{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 16rpx;
|
|
|
+ .item-icon{
|
|
|
+ .img{
|
|
|
+ width: 40rpx;
|
|
|
+ height: 40rpx;
|
|
|
+ vertical-align: middle;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .item-value{
|
|
|
+ color: rgba(51,51,51,1);
|
|
|
+ font-size: 32rpx;
|
|
|
+ margin-left: 16rpx;
|
|
|
+ }
|
|
|
+ .value-bold{
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // 按钮
|
|
|
+ .button{
|
|
|
+ margin-top: 32rpx;
|
|
|
+ border-top: 1px solid rgba(232,232,232,1);
|
|
|
+ padding: 20rpx 0;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ .state{
|
|
|
+ color: rgba(255,123,0,1);
|
|
|
+ }
|
|
|
+ .state2{
|
|
|
+ color: rgba(22,119,255,1);
|
|
|
+ }
|
|
|
+ .state3{
|
|
|
+ color: rgba(0,185,98,1);
|
|
|
+ }
|
|
|
+ .state4{
|
|
|
+ color: rgba(119,119,119,1);
|
|
|
+ }
|
|
|
+ .btn{
|
|
|
+ display: flex;
|
|
|
+ .close{
|
|
|
+ border: 1px solid rgba(187,187,187,1);
|
|
|
+ width: 144rpx;
|
|
|
+ height: 64rpx;
|
|
|
+ line-height: 64rpx;
|
|
|
+ border-radius: 4px;
|
|
|
+ background-color: rgba(255,255,255,1);
|
|
|
+ color: rgba(119,119,119,1);
|
|
|
+ margin-right: 24rpx;
|
|
|
+ font-size: 28rpx
|
|
|
+ }
|
|
|
+ .reminder,.resolved{
|
|
|
+ width: 144rpx;
|
|
|
+ height: 64rpx;
|
|
|
+ line-height: 64rpx;
|
|
|
+ border-radius: 4px;
|
|
|
+ color: rgba(255,255,255,1);
|
|
|
+ background-color: rgba(22,119,255,1);
|
|
|
+ font-size: 28rpx
|
|
|
+ }
|
|
|
+ .resolved{
|
|
|
+ width: 176rpx;
|
|
|
+ }
|
|
|
+ .view{
|
|
|
+ width: 176rpx;
|
|
|
+ height: 64rpx;
|
|
|
+ line-height: 64rpx;
|
|
|
+ border-radius: 4px;
|
|
|
+ background-color: rgba(255,255,255,1);
|
|
|
+ color: rgba(119,119,119,1);
|
|
|
+ font-size: 28rpx;
|
|
|
+ border: 1px solid rgba(187,187,187,1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
|
|
|
</style>
|
