From 2079ba28f20bde46f7736699c97abf0e1564770d Mon Sep 17 00:00:00 2001
From: jiangping <jp@doumee.com>
Date: 星期一, 14 十月 2024 09:30:46 +0800
Subject: [PATCH] 最新版本

---
 admin/src/views/platform/index.vue |  827 +++++++++++++++++++++++++++++++++++-----------------------
 1 files changed, 494 insertions(+), 333 deletions(-)

diff --git a/admin/src/views/platform/index.vue b/admin/src/views/platform/index.vue
index 85fa291..8ecaeba 100644
--- a/admin/src/views/platform/index.vue
+++ b/admin/src/views/platform/index.vue
@@ -1,367 +1,628 @@
 <template>
   <div class="main_app">
-    <div class="mb20">
-      <el-select v-model="platformId" @change="getList()">
-        <el-option v-for="item in PlatformList" :key="item.id" :value="item.id" :label="item.name" />
-      </el-select>
-      <el-button type="primary" class="ml20" @click="handleSet"
-        >閰嶇疆鏈堝彴</el-button
-      >
+    <div class="mb20 main_header">
+      <div class="platgroup_tabs">
+        <div class="tab" :class="{ active: activeGroup.id === item.id }" @click="platgroupClick(item)"
+          v-for="(item, i) in PlatGroupList" :key="i">
+          {{ item.name }}
+        </div>
+      </div>
+      <div class="btns">
+        <!-- <el-button type="primary" @click="handleSet">鍒锋柊</el-button> -->
+        <el-button type="primary" class="ml20" @click="handleSet">閰嶇疆鏈堝彴</el-button>
+      </div>
     </div>
     <!--  -->
-    <div class="platform_list">
-      <div class="item" v-for="i in 2">
+    <div v-if="activeGroup.platformList" class="platform_list">
+      <div class="item" :class="{ emyty: item.workStatus == 0 }" v-for="(item, i) in activeGroup.platformList" :key="i">
         <div class="head">
           <div class="left">
-            <div class="status mr10">浣滀笟涓�</div>
-            <div class="name">6鍙锋湀鍙�</div>
+            <div class="status mr10">
+              {{ item.workStatus == "0" ? "绌洪棽" : "浣滀笟涓�" }}
+            </div>
+            <div class="name">{{ item.name }}</div>
             <div class="ite">
-              <span class="placeholder9">浣滀笟锛�</span><span>1</span>
+              <span class="placeholder9">浣滀笟锛�</span><span>{{ item.platformWorkVO.workNum }}</span>
             </div>
             <div class="ite">
-              <span class="placeholder9">浣滀笟锛�</span><span>1</span>
+              <span class="placeholder9">宸插彨锛�</span><span>{{ item.platformWorkVO.callNum }}</span>
             </div>
             <div class="ite">
-              <span class="placeholder9">浣滀笟锛�</span><span class="red">1</span>
+              <span class="placeholder9">绛夊緟锛�</span><span>{{ item.platformWorkVO.waitNum }}</span>
+            </div>
+            <div class="ite">
+              <span class="placeholder9">寮傚父锛�</span><span class="red">{{ item.platformWorkVO.exceptionNum }}</span>
             </div>
           </div>
-          <el-button type="primary" @click="handleQueuing()">鍙彿</el-button>
+          <el-button @click="handleQueuing(item, 1)">鍙彿鍏ュ洯</el-button>
+          <el-button type="primary" @click="handleQueuing(item, 2)">鏈堝彴鍙彿</el-button>
         </div>
-        <div class="list">
-          <div class="info" v-for="j in 3">
+        <div class="list" v-if="item.platformWorkVO && item.platformWorkVO.platformJobList">
+          <div class="info" :class="{ err: task.status == 8 }" v-for="task in item.platformWorkVO.platformJobList"
+            :key="task.id">
             <div class="line">
               <div class="left">
-                <span class="plate">鐨朅12122</span>
+                <div v-if="task.carCodeFront" class="code">
+                  <span>{{ task.carCodeFront.slice(0, 1) }}</span>
+                  <span>{{ task.carCodeFront.slice(1, 2) }}</span>
+                  <span>路</span>
+                  <span>{{ task.carCodeFront.slice(2) }}</span>
+                </div>
               </div>
               <div class="right">
-                <span class="green">浣滀笟涓�</span>
-                <span class="green ml20">23鍒嗛挓26绉�</span>
+                <div class="status_item" v-if="task.status != 4 && task.status != 5" :class="{ red: task.status == 8 }">
+                  <span class="lab">{{ statusMap[task.status] }}</span>
+                </div>
+                <div class="status_item" v-if="task.status == 4">
+                  <span class="lab">鍙彿涓�</span> {{ task.callDateTemp }}
+                </div>
+                <div class="status_item scs" v-if="task.status == 5">
+                  <span class="lab">浣滀笟涓�</span> {{ task.startDateTemp }}
+                </div>
               </div>
             </div>
             <div class="line">
-              <div class="ite">
+              <div v-if="task.billCode" class="ite">
                 <span>杩愯緭鍗曞彿锛�</span>
-                <span>202020</span>
+                <span>{{ task.billCode }}</span>
               </div>
-              <div class="ite">
+              <div v-else class="ite">
+                <span>鍚堝悓鍗曞彿锛�</span>
+                <span>{{ task.contractNum }}</span>
+              </div>
+              <div class="ite siji">
                 <span>椹鹃┒鍛橈細</span>
-                <span>202020</span>
+                <span>{{ task.driverName }}</span>
               </div>
-              <div class="ite">
+              <div class="ite phone">
                 <span>鎵嬫満鍙凤細</span>
-                <span>202020</span>
+                <span>{{ task.drivierPhone }}</span>
               </div>
               <div class="ite">
                 <span>鎬昏繍杈撻噺锛�</span>
-                <span>202020</span>
+                <span>{{ task.totalNum }}涓囨敮</span>
               </div>
-              <div class="ite" style="width: 66.6%">
+              <div v-if="task.billCode" class="ite" style="width: 66.6%">
                 <span>杩愯緭鍏徃锛�</span>
-                <span>20202dasd鐜╁効鐜╁効鐜╁効棰濆 棰濆0</span>
+                <span>{{ task.carrierName }}</span>
               </div>
               <div class="ite"></div>
             </div>
             <div class="line">
               <div class="left">
-                <span class="primaryColor pointer" @click="isShowDetail = true"
-                  >杩愬崟璇︽儏</span
-                >
+                <span v-if="task.billCode" class="primaryColor pointer" @click="handleDetail(task)">杩愬崟璇︽儏</span>
+                <span v-else class="primaryColor pointer" @click="subDetail(task)">棰勭害璇︽儏</span>
               </div>
               <div class="right">
-                <el-button type="primary" @click="handleFinish()"
-                  >浣滀笟瀹屾垚</el-button
-                >
-                <el-button plain>杞Щ鏈堝彴</el-button>
-                <el-button plain>寮傚父鎸傝捣</el-button>
+                <el-button v-if="task.status == 5" plain @click="handleErr(task)">寮傚父鎸傝捣</el-button>
+                <el-button v-if="task.status == 5 || task.status == 8" plain
+                  @click="handleTransform(item, task)">杞Щ鏈堝彴</el-button>
+                <el-button v-if="task.status == 4" plain @click="handlePass(task)">杩囧彿</el-button>
+                <el-button v-preventReClick :loading="loadingFinish" v-if="task.status == 5 || task.status == 8" type="primary"
+                  @click="handleFinish(task)">浣滀笟瀹屾垚</el-button>
+                <el-button v-preventReClick :loading="loadingOpen" v-if="task.status == 4" type="primary" @click="handleWork(task)">寮�濮嬩綔涓�</el-button>
               </div>
             </div>
           </div>
+        </div>
+        <div v-if="!item.platformWorkVO.platformJobList || item.platformWorkVO.platformJobList.length == 0"
+          class="empty_plat">
+          <img src="@/assets/images/default_nodata.png" alt="">
+          <div>鏆傛棤杞﹁締</div>
         </div>
       </div>
     </div>
     <!-- 閰嶇疆鏄剧ず鏈堝彴 -->
-    <el-dialog
-      title="閰嶇疆鏄剧ず鏈堝彴"
-      :visible.sync="isShowSet"
-      center
-      width="420px"
-    >
+    <GlobalWindow title="閰嶇疆鏄剧ず鏈堝彴" :visible.sync="isShowSet" :confirm-working="setLoading" @confirm="handleSetSub"
+      width="560px">
       <div class="set_modal">
-        <div class="mb20">
-          <div class="title">鍏ュ簱鏈堝彴缁�</div>
+        <div class="mb10" v-for="group in PlatGroupListSet" :key="group.id">
+          <div class="title">{{ group.name }}</div>
           <div class="list">
-            <div class="item active">1鍙锋湀鍙�</div>
-            <div class="item">2鍙锋湀鍙�</div>
-            <div class="item">1鍙锋湀鍙�</div>
-            <div class="item">2鍙锋湀鍙�</div>
-          </div>
-        </div>
-        <div>
-          <div class="title">鍏ュ簱鏈堝彴缁�</div>
-          <div class="list">
-            <div class="item">1鍙锋湀鍙�</div>
-            <div class="item">2鍙锋湀鍙�</div>
-            <div class="item">1鍙锋湀鍙�</div>
-            <div class="item">2鍙锋湀鍙�</div>
+            <div class="item" @click="platformSetClick(item.id)" :class="{ active: item.showConfig }"
+              v-for="item in group.platformList" :key="item.id">
+              <div>{{ item.name }}</div>
+              <div v-if="item.showConfig" class="bg"></div>
+              <i v-if="item.showConfig" class="el-icon-check scs"></i>
+            </div>
           </div>
         </div>
       </div>
-      <span slot="footer" class="dialog-footer">
-        <el-button @click="setReset">閲嶇疆</el-button>
-        <el-button type="primary" @click="setSub">纭畾</el-button>
-      </span>
-    </el-dialog>
+    </GlobalWindow>
     <!-- 杩愬崟璇︽儏 -->
-    <el-dialog
-      title="杩愬崟璇︽儏"
-      center
-      :visible.sync="isShowDetail"
-      width="420px"
-    >
-      <div class="detail_modal">
-        <div class="head">
-          <div class="plate">鐨朅12122</div>
-          <div class="list">
-            <div class="item">
-              <span>杩愯緭鍗曞彿锛�</span>
-              <span>22222</span>
-            </div>
-            <div class="item">
-              <span>鎬昏繍杈撻噺锛�</span>
-              <span>22222</span>
-            </div>
-            <div class="item">
-              <span>椹鹃┒鍛橈細</span>
-              <span>22222</span>
-            </div>
-          </div>
-        </div>
-        <div class="title">鍚堝悓鍒楄〃</div>
-        <div class="content">
-          <div class="item">
-            <div class="contract">鍚堝悓鍙凤細1292992</div>
-            <div class="placeholder6">鏀惰揣鍦帮細address</div>
-            <div class="list">
-              <div class="line">
-                <div class="left"><span>鐗╂枡鍚嶇О锛�</span><span>榛勫北</span></div>
-                <div class="right"><span>鏁伴噺锛�</span><span>100</span></div>
-              </div>
-            </div>
-          </div>
-        </div>
+    <!--  -->
+    <!-- 鍙彿 -->
+    <PlatformQueuing ref="PlatformQueuingRef" v-if="isShowQueuing" @success="getPlatGroupList"
+      @close="isShowQueuing = false" />
+    <WaybillDetail ref="WaybillDetailRef" v-if="isShowDetail" @success="getList" @close="isShowDetail = false" />
+    <DriverDetail v-if="isShowDriver" ref="DriverDetailRef" />
+    <el-dialog title="杞Щ鏈堝彴" :visible.sync="isShowTransform" width="500px" style="margin-top: 12vh">
+      <div class="df_ac">
+        <span>閫夋嫨杞Щ鍒扮殑鏈堝彴锛�</span>
+        <el-select v-model="activePlatId">
+          <el-option v-for="item in activeGroup.platformList" :key="item.id" :label="item.name" :value="item.id">
+          </el-option>
+        </el-select>
       </div>
       <span slot="footer" class="dialog-footer">
-        <el-button @click="isShowDetail = false">鍏抽棴</el-button>
+        <el-button @click="isShowTransform = false">鍙栨秷</el-button>
+        <el-button v-preventReClick type="primary" @click="transformSub">纭畾</el-button>
       </span>
     </el-dialog>
-    <!--  -->
-    <el-drawer
-      title="鏈堝彴鍙彿-xx鍙锋湀鍙�"
-      :visible.sync="isShowQueuing"
-      size="720px"
-    >
-      <div class="queuing_modal">
-        <div class="df_ac mb20">
-          <span>鎼滅储杞﹁締锛�</span>
-          <el-input
-            class="flex1 mr20"
-            v-model="queuingForm.aa"
-            placeholder="璇疯緭鍏ヨ溅鐗屽彿"
-          ></el-input>
-          <el-button type="primary">鏌ユ壘</el-button>
-          <el-button>閲嶇疆</el-button>
-        </div>
-        <div class="list">
-          <div class="item">
-            <div class="head df_sb">
-              <div class="plate">鐨朅12122</div>
-              <div class="status">宸茬鍒�</div>
-            </div>
-            <div class="info">
-              <div class="ite">
-                <span>杩愯緭鍗曞彿锛�</span>
-                <span>12312</span>
-              </div>
-              <div class="ite">
-                <span>椹鹃┒鍛橈細</span>
-                <span>12312</span>
-              </div>
-              <div class="ite">
-                <span>鎵嬫満鍙凤細</span>
-                <span>12312</span>
-              </div>
-              <div class="ite">
-                <span>鎬昏繍杈撻噺锛�</span>
-                <span>12312</span>
-              </div>
-              <div class="ite" style="width: 66%">
-                <span>杩愯緭鍏徃锛�</span>
-                <span>12312</span>
-              </div>
-            </div>
-            <div class="footer df_sb">
-              <div class="detail">杩愬崟璇︽儏</div>
-              <el-button type="primary">鍙彿</el-button>
-            </div>
-          </div>
-        </div>
-        <el-button class="mt30" @click="isShowQueuing = false">鍏抽棴</el-button>
-      </div>
-    </el-drawer>
   </div>
 </template>
 
 <script>
-import { getPlatform, getPlatformJob } from '@/api'
+import {
+  getPlatformGroupList,
+  platformBeginWork,
+  platformFinishWork,
+  platformOverNumber,
+  platformErr,
+  platformMove,
+  updUserPlatformConfig,
+
+  listByGroupId
+} from '@/api'
+import PlatformQueuing from './components/PlatformQueuing.vue'
+import WaybillDetail from './components/WaybillDetail.vue'
+import DriverDetail from "@/views/task/driverDetail.vue"
+import GlobalWindow from '@/components/common/GlobalWindow'
+import dayjs from 'dayjs'
+import duration from 'dayjs/plugin/duration'
+import { Loading, Message } from 'element-ui'
+import { statusMap } from './config'
+dayjs.extend(duration)
 export default {
-  data () {
+  components: {
+    PlatformQueuing,
+    WaybillDetail,
+    DriverDetail,
+    GlobalWindow
+  },
+  data() {
     return {
-      platformId: '',
-      PlatformList: [],
-      dataList: [],
+      statusMap,
+      activeGroup: {},
+      PlatGroupList: [],
+      PlatGroupListSet: [],
+      platList: [],
+      platCallList: [],
+      isShowTransform: false,
+      activePlatId: '', // 杞Щ鏈堝彴
+      activetaskId: '',
 
       isShowSet: false, // 鏈堝彴閰嶇疆
+      setLoading: false,
+
       setParam: {},
       isShowDetail: false, // 杩愬崟璇︽儏
+      isShowDriver: false, // 棰勭害璇︽儏
       detail: {},
       isShowQueuing: false,
-      queuingForm: {}
+      timer: null,
+
+      loadingOpen: false,
+      loadingFinish: false,
     }
   },
-  created () {
-    this.getPlatList()
-    this.getList()
+  created() {
+    setInterval(() => {
+      this.getPlatGroupList()
+    }, 1000 * 20)
+    this.getPlatGroupList()
   },
   methods: {
-    handleQueuing (row) {
-      this.isShowQueuing = true
-    },
-    getList () {
-      const { platformId } = this
-      getPlatformJob({
-        model: { platformId }
-      }).then(res => {
-        this.dataList = res.records
+    handleWork(item) {
+      this.loadingOpen = true
+      platformBeginWork({ jobId: item.id }).then(res => {
+        this.loadingOpen = false
+        Message.success('宸插紑濮嬩綔涓�')
+        this.getPlatGroupList()
+      }, () => {
+        this.loadingOpen = false
       })
     },
-    handleFinish (item) {
-      this.$confirm('楂樻灦搴�6鍙锋湀鍙� 鐨朅12345 浣滀笟缁撴潫', '娓╅Θ鎻愮ず', {
+    handleFinish(item) {
+      this.loadingFinish = true
+      platformFinishWork({ jobId: item.id }).then(res => {
+        this.loadingFinish = false
+        Message.success('瀹屾垚浣滀笟')
+        this.getPlatGroupList()
+      },() => {
+        this.loadingFinish = false
+      })
+    },
+    handleTransform(item, task) {
+      this.activePlatId = item.id
+      this.activetaskId = task.id
+      this.isShowTransform = true
+    },
+    transformSub() {
+      const { activePlatId, activetaskId } = this
+      platformMove({ platformId: activePlatId, jobId: activetaskId }).then(res => {
+        Message.success('杞Щ鏈堝彴鎴愬姛')
+        this.isShowTransform = false
+        this.getPlatGroupList()
+      })
+    },
+    handlePass(item) {
+      this.$confirm(`纭 ${item.carCodeFront}缃负杩囧彿鍚楋紵杩囧彿鍚庯紝闇�瑕侀噸鏂扮鍒版墠鑳借繘鍏ュ洯鍖篳, '娓╅Θ鎻愮ず', {
         confirmButtonText: '纭畾',
         cancelButtonText: '鍙栨秷',
         type: 'warning'
+      }).then(() => {
+        platformOverNumber({ jobId: item.id }).then(ress => {
+          Message.success('杩囧彿鎴愬姛')
+          this.getPlatGroupList()
+        })
       })
     },
-    getPlatList () {
-      getPlatform({
-        model: {}
+    handleErr(item) {
+      this.$confirm('鎮ㄧ‘璁よ瀵硅浠诲姟杩涜寮傚父鎸傝捣鍚�', '娓╅Θ鎻愮ず', {
+        confirmButtonText: '纭畾',
+        cancelButtonText: '鍙栨秷',
+        type: 'warning'
+      }).then(() => {
+        platformErr({ jobId: item.id }).then(ress => {
+          Message.success('寮傚父鎸傝捣鎴愬姛')
+          this.getPlatGroupList()
+        })
+      })
+    },
+    platgroupClick(item) {
+      this.activeGroup = { ...item }
+      this.circulInitTaskList()
+      this.timer = setInterval(() => {
+        this.circulInitTaskList()
+      }, 1000)
+    },
+    getPlatGroupList() {
+      getPlatformGroupList({
+        queryData: 1,
+        queryType: 1
       }).then(res => {
-        this.PlatformList = res.records
+        this.PlatGroupList = res || []
+        if (res.length > 0) {
+          if (this.activeGroup && this.activeGroup.id) {
+            this.activeGroup = res.find(item => item.id === this.activeGroup.id)
+          } else {
+            this.activeGroup = res[0]
+          }
+          this.circulInitTaskList()
+          this.timer = setInterval(() => {
+            this.circulInitTaskList()
+          }, 1000)
+        }
       })
     },
-    handleSet () {
-      this.isShowSet = true
+    circulInitTaskList() {
+      if (this.activeGroup && this.activeGroup.platformList && this.activeGroup.platformList.length > 0) {
+        const time = new Date()
+        this.activeGroup.platformList.forEach(plat => {
+          if (plat.platformWorkVO.platformJobList && plat.platformWorkVO.platformJobList.length > 0) {
+            plat.platformWorkVO.platformJobList.forEach(item => {
+              if (item.newCallDate) {
+                const timeNum = time.getTime() - new Date(item.newCallDate).getTime()
+                if (timeNum > 3600000) {
+                  item.callDateTemp = dayjs.duration(timeNum).format('H灏忔椂m鍒唖绉�')
+                } else {
+                  item.callDateTemp = dayjs.duration(timeNum).format('m鍒唖绉�')
+                }
+              }
+              if (item.newStartDate) {
+                const timeNum = time.getTime() - new Date(item.newStartDate).getTime()
+                if (timeNum > 3600000) {
+                  item.startDateTemp = dayjs.duration(timeNum).format('H灏忔椂m鍒唖s绉�')
+                } else {
+                  item.startDateTemp = dayjs.duration(timeNum).format('m鍒唖绉�')
+                }
+              }
+            })
+          }
+        })
+        this.$forceUpdate()
+      }
     },
-    setReset () { },
-    setSub () { }
+    handleQueuing(item, callType) {
+      this.isShowQueuing = true
+      this.$nextTick(() => {
+        this.$refs.PlatformQueuingRef.isShowModal = true
+        this.$refs.PlatformQueuingRef.callType = callType
+        this.$refs.PlatformQueuingRef.carCodeFront = ''
+        this.$refs.PlatformQueuingRef.pagination = {
+          total: 0,
+          pageSize: 10,
+          page: 1
+        }
+        this.$refs.PlatformQueuingRef.activePlat = { ...item }
+        this.$refs.PlatformQueuingRef.getList()
+        this.$refs.PlatformQueuingRef.title = item.name
+      })
+    },
+    subDetail(row) {
+      this.isShowDriver = true
+      this.$nextTick(() => {
+        this.$refs.DriverDetailRef.id = row.bookId
+        this.$refs.DriverDetailRef.type = 6
+        this.$refs.DriverDetailRef.getDetail()
+        this.$refs.DriverDetailRef.isShowModal = true
+      })
+    },
+    handleDetail(row) {
+      this.isShowDetail = true
+      this.$nextTick(() => {
+        this.$refs.WaybillDetailRef.isShowModal = true
+        this.$refs.WaybillDetailRef.id = row.id
+        this.$refs.WaybillDetailRef.getDetail()
+      })
+    },
+    getList() {
+      const { groupId } = this
+      listByGroupId(groupId).then(res => {
+        this.platList = res
+      })
+    },
+    handleSet() {
+      this.isShowSet = true
+      getPlatformGroupList({
+        queryData: 0,
+        queryType: 1
+      }).then(res => {
+        this.PlatGroupListSet = res || []
+      })
+    },
+    handleSetSub() {
+      const { PlatGroupListSet } = this
+      const ids = []
+      PlatGroupListSet.forEach(item => {
+        item.platformList.forEach(platform => {
+          if (platform.showConfig) {
+            ids.push(platform.id)
+          }
+        })
+      })
+      this.setLoading = true
+      updUserPlatformConfig(ids).then(res => {
+        this.setLoading = false
+        Message.success('鏇存柊鎴愬姛')
+        this.isShowSet = false
+        this.getPlatGroupList()
+      }, () => {
+        this.setLoading = false
+      })
+    },
+    platformSetClick(id) {
+      const { PlatGroupListSet } = this
+      PlatGroupListSet.forEach(item => {
+        item.platformList.forEach(platform => {
+          if (platform.id === id) {
+            platform.showConfig = !platform.showConfig
+          }
+        })
+      })
+    }
   }
 }
 </script>
 
 <style lang="scss" scoped>
 @import "@/assets/style/variables.scss";
+
 .platform_list {
+  width: 100%;
+
   .item {
     /* padding: 16px 24px; */
     background: #ffffff;
     border-radius: 2px;
     border: 1px solid #dfe2e8;
     margin-bottom: 12px;
+    width: 100%;
+
     .head {
       display: flex;
       justify-content: space-between;
       align-items: center;
       height: 50px;
-      background: linear-gradient(270deg, #ffffff 0%, #ebf6f7 100%);
+      background: linear-gradient(270deg, #FFFFFF 0%, #EBF6F7 100%);
       border-radius: 2px 2px 0px 0px;
-      padding: 0 28px;
+      padding: 0 20px;
+
+      .shengyin {
+        width: 12px;
+        height: 12px;
+        margin-right: 3px;
+      }
+
       .left {
         flex: 1;
         display: flex;
         align-items: center;
+
         .name {
           font-size: 16px;
           margin-right: 50px;
         }
+
         .status {
           line-height: 25px;
           height: 25px;
-          padding: 0 4px;
           background: #00ba67;
           border-radius: 2px;
           color: #ffffff;
+          padding: 0 6px;
         }
+
         .ite {
           margin-right: 30px;
         }
       }
     }
+
     .list {
       display: flex;
       flex-wrap: wrap;
-      justify-content: space-between;
       margin-top: 10px;
       padding: 16px;
+      width: calc(100% - 0);
+
       .info {
-        background: #effbf5;
+        background: #f4fafb;
         border-radius: 2px;
         border: 1px solid #dfe2e8;
         padding: 16px;
         border-radius: 2px;
         margin-bottom: 10px;
-        width: 30%;
+        width: calc(31.6% - 22px);
+        margin-right: 10px;
+
+        &:nth-of-type(3n) {
+          margin-right: 0;
+        }
+
+        .status_item {
+          .lab {
+            font-weight: 500;
+          }
+
+          color: #00ba67;
+        }
+
         .line {
           display: flex;
           align-items: center;
           justify-content: space-between;
           flex-wrap: wrap;
           margin-bottom: 6px;
-          span {
-            &:nth-child(1) {
-              color: #999999;
-            }
-          }
+
           .ite {
             width: 33.3%;
             margin-top: 8px;
           }
+
+          .siji {
+            width: 29%;
+          }
+
+          .phone {
+            width: 37.6%;
+          }
+
           .left {
-            .plate {
+            .code {
+              display: flex;
+              font-weight: 600;
+              height: 30px;
+              line-height: 30px;
               font-size: 15px;
               color: #111111;
-              padding: 4px 5px;
-              font-weight: 700;
-              border: 1px solid #279baa;
               background-color: #fff;
+              border-radius: 4px;
+              border: 1px solid $primaryColor;
+              padding-right: 4px;
+
+              span {
+                &:nth-of-type(1) {
+                  background: $primaryColor;
+                  padding: 0 8px;
+                  color: #fff;
+                }
+
+                &:nth-of-type(2) {
+                  padding-left: 4px;
+                }
+              }
             }
           }
+
           .right {
             display: flex;
             align-items: center;
           }
         }
       }
+
+      .jobing {
+        background: #effbf5;
+
+        .status {
+          color: #00ba67;
+        }
+      }
+
+      .err {
+        background: #fef6f6;
+
+        .status {
+          color: #ed4545;
+        }
+      }
+    }
+
+    .empty_plat {
+      width: 100%;
+      height: 170px;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+      font-size: 12px;
+      color: #B2B2B2;
+
+      img {
+        width: 110px;
+      }
+    }
+  }
+
+  .emyty {
+    .head {
+      background: linear-gradient(270deg, #FFFFFF 0%, #F7F7F7 100%) !important;
+    }
+
+    .status {
+      background: #CCCCCC !important;
     }
   }
 }
 
-.main_head {
+.main_header {
   display: flex;
-  justify-content: space-between;
-  align-items: center;
-  .tabs {
+  position: relative;
+
+  .platgroup_tabs {
     flex: 1;
+    display: flex;
+    border-bottom: 1px solid #dfe2e8;
+
+    .tab {
+      color: #666666;
+      margin-right: 40px;
+      cursor: pointer;
+      padding-bottom: 18px;
+      border-bottom: 2px solid #fff;
+    }
+
+    .active {
+      font-weight: 500;
+      font-size: 15px;
+      color: #222222;
+      border-bottom: 2px solid $primary-color;
+    }
+  }
+
+  .btns {
+    position: absolute;
+    width: 180px;
+    height: 36px;
+    right: 0;
+    top: -4px;
+    display: flex;
+    justify-content: flex-end;
   }
 }
+
 /*  */
 .set_modal {
   .title {
@@ -369,153 +630,53 @@
     font-weight: 600;
     margin-bottom: 16px;
   }
+
   .list {
     display: flex;
-    justify-content: space-between;
     flex-wrap: wrap;
+
     .item {
       cursor: pointer;
-      width: 30%;
-      height: 32px;
+      padding: 0 36px;
+      height: 36px;
       border: 1px solid #dfe2e8;
       display: flex;
       justify-content: center;
       align-items: center;
       border-radius: 2px;
-      margin-bottom: 12px;
+      margin-bottom: 10px;
+      margin-right: 13px;
+      position: relative;
+      overflow: hidden;
+
+      .bg {
+        position: absolute;
+        right: -12px;
+        bottom: -12px;
+        width: 24px;
+        height: 24px;
+        background: $primaryColor;
+        transform: rotate(45deg);
+      }
+
+      .scs {
+        position: absolute;
+        right: -1px;
+        bottom: -1px;
+        color: #fff;
+        z-index: 99999;
+        transform: scale(.8)
+      }
     }
+
     .active {
       background: rgba(39, 155, 170, 0.06);
-      border: 1px solid #279baa;
-      color: #279baa;
+      border: 1px solid $primaryColor;
+      color: $primaryColor;
     }
   }
 }
+
 /*  */
-.detail_modal {
-  font-size: 12px;
-  color: #282828;
-  .head {
-    background: rgba(39, 155, 170, 0.05);
-    border-radius: 4px;
-    border: 1px solid #dfe2e8;
-    padding: 16px;
-    .plate {
-      width: 90px;
-      text-align: center;
-      font-size: 15px;
-      color: #111111;
-      padding: 4px 5px;
-      font-weight: 700;
-      border: 1px solid #279baa;
-      background-color: #fff;
-    }
-    .list {
-      display: flex;
-      flex-wrap: wrap;
-      margin-top: 16px;
-      .item {
-        width: 50%;
-        margin-bottom: 8px;
-        span {
-          &:nth-child(1) {
-            color: #666666;
-          }
-        }
-      }
-    }
-  }
-  .title {
-    margin: 16px 0;
-    font-weight: 500;
-    font-size: 16px;
-    color: #222222;
-  }
-  .content {
-    .item {
-      border-radius: 4px;
-      border: 1px solid #dfe2e8;
-      padding: 16px;
-      .list {
-        background: #f7f7f7;
-        border-radius: 4px;
-        padding: 12px 16px;
-        margin-top: 10px;
-      }
-      .contract {
-        font-weight: 500;
-        font-size: 15px;
-        color: #279baa;
-        margin-bottom: 4px;
-      }
-      .line {
-        display: flex;
-        margin-bottom: 8px;
-        &:nth-last-child(1) {
-          margin: 0;
-        }
-        div {
-          span {
-            &:nth-child(1) {
-              color: #666666;
-            }
-          }
-        }
-        .left {
-          flex: 6;
-        }
-        .right {
-          flex: 4;
-        }
-      }
-    }
-  }
-}
 /*  */
-.queuing_modal {
-  padding: 10px 30px;
-  .list {
-    .item {
-      background: #f4fafb;
-      border-radius: 2px;
-      border: 1px solid #dfe2e8;
-      margin-bottom: 10px;
-      padding: 16px;
-      .head {
-        margin-bottom: 15px;
-        .plate {
-          width: 90px;
-          text-align: center;
-          font-size: 15px;
-          color: #111111;
-          padding: 4px 5px;
-          font-weight: 700;
-          border: 1px solid #279baa;
-          background-color: #fff;
-        }
-        .status {
-          color: $primaryColor;
-        }
-      }
-      .info {
-        display: flex;
-        flex-wrap: wrap;
-        .ite {
-          width: 33.3%;
-          margin-bottom: 8px;
-          span {
-            &:nth-child(1) {
-              color: #666666;
-            }
-          }
-        }
-      }
-      .footer {
-        .detail {
-          color: $primaryColor;
-        }
-      }
-    }
-  }
-}
 </style>

--
Gitblit v1.9.3