fix-公务车，审批流程

src/api/iot.js

@@ -61,4 +61,12 @@ export function getCarByDept(params) {
     method: 'get',
     params
   })
+}
+// 公务车视频
+export function getCmobd(params) {
+  return request({
+    url: '/car/video/cmobd',
+    method: 'get',
+    params
+  })
 }

src/components/timeLinne.vue

@@ -0,0 +1,240 @@
+<template>
+  <div>
+    <div class="timeLines" style="margin-bottom: 14px">
+      <div style="margin-left: 10px; margin-bottom: 18px; font-size: 16px; font-weight: 600">{{ lineTitle }}</div>
+      <div class="ul_box">
+        <ul class="timeline-wrapper">
+          <li class="timeline-item" v-for="(t, index) in list" :key="index">
+            <div class="timeline-box">
+              <div class="out-circle">
+                <div class="in-circle" :class="addinCircle(t.list)"></div>
+              </div>
+              <div class="long-line"></div>
+            </div>
+            <div style="margin-left: 25px; margin-bottom: 4px; font-size: 16px">{{ t.nodeRole }}</div>
+            <div class="timeline-content" v-if="t.list">
+              <div class="timeline-date" v-for="(item, index1) in t.list" :key="index1">
+                <span style="display: inline-block; margin-bottom: 15px"> 审核人：{{ item.userName }}</span>
+                <div class="timeline-title">审核时间：{{ item.approvalTime }}</div>
+                <div class="timeline-title">备注：{{ item.comment ? item.comment : '无' }}</div>
+                <div class="timeline-desc">
+                  审核状态：
+                  <span v-show="item.status == 0" style="color: rgba(14, 116, 218, 1)">待审批</span>
+                  <span v-show="item.status == 1" style="color: rgb(18, 164, 52)">已归档</span>
+                  <span v-show="item.status == 2" style="color: rgb(201, 46, 46)">已撤销</span>
+                  <span v-show="item.status == 3" style="color: rgb(201, 46, 46)">已驳回</span>
+                  <span v-show="item.status == 4" style="color: rgba(14, 116, 218, 1)">审批中</span>
+                  <span v-show="item.status == 5" style="color: rgb(230, 150, 22)">已审批</span>
+                </div>
+              </div>
+            </div>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'CreateForm',
+  props: {
+    list: {
+      type: Array,
+      required: true,
+    },
+    lineTitle:String
+  },
+  dicts: ['apply_status'],
+  data() {
+    return {
+      submitLoading: false,
+      formTitle: '',
+      // 表单参数
+      form: {
+        userId: null,
+
+        applicationTime: null,
+
+        returnTime: null,
+
+        deptId: null,
+
+        deptName: null,
+
+        plateNumber: null,
+
+        carId: null,
+
+        driverId: null,
+
+        driverName: null,
+
+        isNonfixedPoint: null,
+
+        startPlace: null,
+
+        endPlace: null,
+
+        applyStatus: 0,
+
+        taskId: null,
+
+        realReturnTime: null,
+
+        remark: null,
+
+        createTime: null,
+      },
+      // 1增加,2修改
+      formType: 1,
+      open: false,
+      rules: {},
+      reverse: false,
+    //   list: [],
+    }
+  },
+  filters: {},
+  created() {},
+  computed: {
+    // 监听agree颜色变化
+    fontstyle() {
+      return (icontent) => {
+        // 使用JavaScript闭包，进行传值操作
+        console.log(icontent)
+
+        if (icontent == '1') {
+          return { color: 'green' }
+        } else {
+          return { color: 'red' }
+        }
+      }
+    },
+  },
+  watch: {},
+  mounted() {},
+  methods: {
+    addinCircle(item) {
+      if (item) {
+        for (let index = 0; index < item.length; index++) {
+          if (item[index].status == 0) {
+            return 'in-circle in-circle1'
+          } else if (item[index].status == 5) {
+            return 'in-circle in-circle2'
+          } else if (item[index].status == 1) {
+            return 'in-circle in-circle4'
+          } else if (item[index].status == 4) {
+            return 'in-circle in-circle3'
+          } else if (item[index].status == 2 || item[index].status == 2) {
+            return 'in-circle in-circle5'
+          }
+        }
+      }
+    },
+  },
+}
+</script>
+
+<style lang="less" scoped>
+ul.timeline-wrapper {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/* 时间线 */
+.timeline-item {
+  position: relative;
+
+  .timeline-box {
+    text-align: center;
+    position: absolute;
+
+    .out-circle {
+      width: 16px;
+      height: 16px;
+      background: rgba(14, 116, 218, 0.1);
+      box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.1);
+      /*opacity: 0.1;*/
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+
+      .in-circle {
+        width: 8px;
+        height: 8px;
+        margin: 0 auto;
+        background: rgba(14, 116, 218, 1);
+        border-radius: 50%;
+        box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.1);
+      }
+      .in-circle1 {
+        background: #585a58 !important;
+      }
+      .in-circle2 {
+        background: rgba(14, 116, 218, 1) !important;
+      }
+      .in-circle3 {
+        background-color: rgb(218, 106, 14) !important;
+      }
+      .in-circle4 {
+        background: rgb(18, 164, 52) !important;
+      }
+      .in-circle5 {
+        background: rgb(201, 46, 46) !important;
+      }
+    }
+
+    .long-line {
+      width: 2px;
+      height: 248px;
+      background: rgba(14, 116, 218, 1);
+      box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.1);
+      opacity: 0.1;
+      margin-left: 8px;
+    }
+    // .long-line:nth-last-child(1) {
+    //   height: 0;
+    // }
+  }
+
+  .timeline-content {
+    box-sizing: border-box;
+    margin-left: 20px;
+    // height: 106px;
+    padding: 0 0 0 20px;
+    text-align: left;
+    // margin-bottom: 30px;
+
+    .timeline-title {
+      font-size: 14px;
+      word-break: break-all;
+      margin-bottom: 16px;
+      color: #333;
+      font-weight: 500;
+      /*display: inline;*/
+    }
+
+    .timeline-date {
+      font-size: 16px;
+      color: #333;
+      font-weight: 500;
+      margin-bottom: 16px;
+    }
+    .timeline-desc {
+      font-size: 14px;
+      color: #999999;
+    }
+  }
+}
+.timeline-item:last-child {
+  .long-line {
+    height: 0;
+    min-height: 0;
+  }
+}
+
+.timeline-item:last-of-type .timeline-content {
+  margin-bottom: 0;
+}
+</style>

src/views/cardIot/components/TreeCar.vue

@@ -176,6 +176,7 @@ export default {
           this.showFlag = true
           this.deptIds = newVal
           this.values = newVal.plateNumber
+          this.carInfo=newVal
         }
       },
       // immediate:true,
@@ -289,7 +290,7 @@ export default {
       this.showBtn = !this.showBtn
     },
     OnlineCar(val) {
-      // console.log('------------在线车辆',val);
+      console.log('------------在线车辆',val);
       this.$emit('changCarIdMap',val)
       // this.show = 2
       this.showFlag = true

src/views/cardIot/components/Video.vue

@@ -1,41 +1,58 @@
 <template>
   <div style="display: flex">
     <div class="item-video">
-      <div class="video-box" v-if="videoSrc">
-        <video
-          ref="videoPlayer"
-          :preload="preload"
-          :poster="videoImg"
-          :height="height"
-          :width="width"
-          align="center"
-          :controls="controls"
-          autoplay
-          muted
-          class="video video-js vjs-default-skin vjs-big-play-centered"
-        ></video>
-        <div class="line"></div>
-        <div class="text">
-          <span
-            class="items"
-            v-for="(item, index) in typeList"
-            :key="index"
-            @click="Onchange(item)"
-            :class="addClass(item)"
-          >{{ item.lable }}</span
-          >
-        </div>
-      </div>
-      <div class="video-img-null" v-else>
-        <img src="../../../assets/images/video-null2.png" alt="" />
-        暂无资源
+      <div class="example">
+        <a-spin :spinning="spinning">
+          <div class="video-box" v-if="videoSrc && carInfo1.categoryId != 2">
+            <video
+              ref="videoPlayer"
+              :preload="preload"
+              :poster="videoImg"
+              :height="height"
+              :width="width"
+              align="center"
+              :controls="controls"
+              autoplay
+              muted
+              class="video video-js vjs-default-skin vjs-big-play-centered"
+            ></video>
+            <div class="line"></div>
+            <div class="text">
+              <span
+                class="items"
+                v-for="(item, index) in typeList"
+                :key="index"
+                @click="Onchange(item)"
+                :class="addClass(item)"
+                >{{ item.lable }}</span
+              >
+            </div>
+          </div>
+          <div v-if="gwcUrl">
+            <iframe
+              style="height: 330px; width: 340px"
+              :src="gwcUrl"
+              frameborder="no"
+              border="0"
+              marginwidth="0"
+              marginheight="0"
+              scrolling="no"
+              allowtransparency="yes"
+            ></iframe>
+          </div>
+        </a-spin>
       </div>
     </div>
+
+    <div class="video-img-null" v-if="!videoSrc || !gwcUrl">
+      <img src="../../../assets/images/video-null2.png" alt="" />
+      暂无资源
+    </div>
   </div>
 </template>
 
 <script>
-import { getCarVideo } from '@/api/iot'
+import { getCarVideo, getCmobd } from '@/api/iot'
 import 'video.js/dist/video-js.css'
 import 'videojs-flvjs-es6'
 import flvjs from 'flv.js'
@@ -86,6 +103,9 @@ export default {
       ],
       carId: 2,
       vehicleId: '',
+      gwcUrl: '',
+      carInfo1: {},
+      spinning: false,
     }
   },
   props: {
@@ -101,10 +121,40 @@ export default {
       immediate: true,
       deep: true,
     },
+    carInfo: {
+      handler(val) {
+        this.carInfo1 = val
+        this.FunVdieoList()
+      },
+      immediate: true,
+      deep: true,
+    },
   },
 
   methods: {
     FunVdieoList() {
+      // g公务车情况
+      if (this.carInfo1.categoryId == 2) {
+        const data = {
+          vehicleId: this.carInfo1.id,
+        }
+        this.spinning = true
+        getCmobd(data)
+          .then((response) => {
+            console.log('-------公务车', response)
+            this.gwcUrl = response.data
+            setInterval(() => {
+              this.spinning = false
+            }, 12000)
+          })
+          .catch((error) => {
+            this.spinning = false
+          })
+      } else {
+        this.getXfcVideo()
+      }
+    },
+    getXfcVideo() {
       const params = {
         vehicleId: this.vehicleId,
         channel: this.carId,
@@ -191,4 +241,12 @@ export default {
     height: 200px;
   }
 }
+.example {
+  text-align: center;
+  // background: rgba(0, 0, 0, 0.05);
+  // border-radius: 4px;
+  // margin-bottom: 20px;
+  // padding: 30px 50px;
+  // margin: 20px 0;
+}
 </style>

src/views/cardIot/index.vue

@@ -54,6 +54,7 @@ export default {
       return true
     },
     clickCarItem(val) {
+      // console.log('---------点击地图车车',val);
       this.showVideos = true
       this.idVal = val
       this.carId = val.cqVehicleId

src/views/clw/applyCarLog/modules/CreateForm.vue

@@ -93,42 +93,7 @@
       <div>
         <template>
           <div>
-            <!-- <Timeline pending="Recording..." :reverse="reverse">
-              <TimelineItem v-for="(item, index) in list" :key="index">
-                <div>{{ item.nodeRole }}</div>
-                <div slot="dot">
-                  <img :src="item.list" alt="">
-                </div>
-              </TimelineItem>
-              <TimelineItem>Solve initial network problems 2015-09-01</TimelineItem>
-              <TimelineItem>Technical testing 2015-09-01</TimelineItem>
-            </Timeline> -->
-            <div class="timeLines" style=" margin-bottom: 14px; ">
-              <div style="margin-left: 10px; margin-bottom: 18px; font-size: 16px;font-weight:600">用车申请审批</div>
-              <div class="ul_box">
-                <ul class="timeline-wrapper">
-                  <li class="timeline-item" v-for="(t, index) in list" :key="index">
-                    <div class="timeline-box">
-                      <div class="out-circle">
-                        <div class="in-circle" :class="addinCircle(t.list)"></div>
-                      </div>
-                      <div class="long-line"></div>
-                    </div>
-                    <div style="margin-left: 25px; margin-bottom: 4px; font-size: 16px">{{ t.nodeRole }}</div>
-                    <div class="timeline-content" v-if="t.list">
-                      <div class="timeline-date" v-for="(item, index1) in t.list" :key="index1">
-                        <span style="display: inline-block; margin-bottom: 15px"> 审核人：{{ item.userName }}</span>
-                        <div class="timeline-title">审核时间：{{ item.approvalTime }}</div>
-                        <div class="timeline-desc">
-                          审核状态：
-                          <span>{{ item.status }}</span>
-                        </div>
-                      </div>
-                    </div>
-                  </li>
-                </ul>
-              </div>
-            </div>
+           <timeLinne :list="list" :lineTitle="lineTitle"/>
           </div>
         </template>
       </div>
@@ -144,11 +109,11 @@
 
 <script>
 import { getApplyCarLog, addApplyCarLog, updateApplyCarLog, getWorkflow } from '@/api/clw/applyCarLog'
-
-import { Timeline } from 'ant-design-vue'
+import timeLinne from '../../../../components/timeLinne.vue'
+// import { Timeline } from 'ant-design-vue'
 
 // Timeline.
-const TimelineItem = Timeline.Item
+// const TimelineItem = Timeline.Item
 export default {
   name: 'CreateForm',
   props: {
@@ -157,7 +122,7 @@ export default {
       required: true,
     },
   },
-  components: { Timeline, TimelineItem },
+  components: { timeLinne },
   dicts: ['apply_status'],
   data() {
     return {
@@ -205,6 +170,7 @@ export default {
       rules: {},
       reverse: false,
       list: [],
+      lineTitle:''
     }
   },
   filters: {},
@@ -306,8 +272,10 @@ export default {
         this.form = obj
         this.open = true
         this.formTitle = '用车申请详情'
+        this.lineTitle='用车申请审批'
+        // obj.taskId
         getWorkflow(obj.taskId).then((res) => {
-          console.log('---------流程', res)
+          // console.log('---------流程', res)
           this.list = res.data.nodes
         })
       })
@@ -343,21 +311,27 @@ export default {
         }
       })
     },
-    addinCircle(item) {
-      if (item) {
-        for (let index = 0; index < item.length; index++) {
-          if (item[index].status === 1) {
-            return 'in-circle in-circle1'
-          }
-          if (item[index].status === 2) {
-            return 'in-circle in-circle2'
-          }
-          if (item[index].status === 3 ||item[index].status === 4) {
-            return 'in-circle in-circle3'
-          }
-        }
-      }
-    },
+    // addinCircle(item) {
+    //   if (item) {
+    //     for (let index = 0; index < item.length; index++) {
+    //       if (item[index].status == 0) {
+    //         return 'in-circle in-circle1'
+    //       }
+    //      else if (item[index].status == 5) {
+    //         return 'in-circle in-circle2'
+    //       }
+    //      else if (item[index].status == 1) {
+    //         return 'in-circle in-circle4'
+    //       }
+    //     else  if (item[index].status == 4) {
+    //         return 'in-circle in-circle3'
+    //       }
+    //      else if (item[index].status == 2||item[index].status == 2) {
+    //         return 'in-circle in-circle5'
+    //       }
+    //     }
+    //   }
+    // },
   },
 }
 </script>
@@ -404,7 +378,7 @@ ul.timeline-wrapper {
         box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.1);
       }
       .in-circle1 {
-        background: #0ceb2e !important;
+        background: #585a58 !important;
       }
       .in-circle2 {
         background: rgba(14, 116, 218, 1) !important;
@@ -412,11 +386,17 @@ ul.timeline-wrapper {
       .in-circle3 {
         background-color: rgb(218, 106, 14) !important;
       }
+      .in-circle4{
+        background:rgb(18, 164, 52)!important;
+      }
+      .in-circle5{
+        background:rgb(201, 46, 46)!important;
+      }
     }
 
     .long-line {
       width: 2px;
-      height: 98px;
+      height: 248px;
       background: rgba(14, 116, 218, 1);
       box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.1);
       opacity: 0.1;
@@ -430,7 +410,7 @@ ul.timeline-wrapper {
   .timeline-content {
     box-sizing: border-box;
     margin-left: 20px;
-    height: 106px;
+    // height: 106px;
     padding: 0 0 0 20px;
     text-align: left;
     // margin-bottom: 30px;
@@ -459,6 +439,7 @@ ul.timeline-wrapper {
 .timeline-item:last-child{
   .long-line {
       height: 0;
+      min-height:0
     }
 }
 

src/views/clw/oilSkimmingLog/modules/CreateForm.vue

@@ -85,7 +85,9 @@
       <a-form-model-item label="备注" prop="remark">
         <a-input v-model="form.remark" placeholder="暂无信息" :disabled="true" />
       </a-form-model-item>
-
+      <div>
+        <timeLinne :list="list" :lineTitle="lineTitle"/>
+      </div>
       <div class="bottom-control">
         <a-space>
           <!-- <a-button type="primary" :loading="submitLoading" @click="submitForm">
@@ -100,11 +102,12 @@
 
 <script>
 import { getOilSkimmingLog, addOilSkimmingLog, updateOilSkimmingLog } from '@/api/clw/oilSkimmingLog'
-
+import timeLinne from '../../../../components/timeLinne.vue'
+import {  getWorkflow } from '@/api/clw/applyCarLog'
 export default {
   name: 'CreateForm',
   props: {},
-  components: {},
+  components: {timeLinne},
   dicts: ['apply_status'],
   data() {
     return {
@@ -142,6 +145,8 @@ export default {
       formType: 1,
       open: false,
       rules: {},
+      list:[],
+      lineTitle:''
     }
   },
   filters: {},
@@ -205,6 +210,10 @@ export default {
         this.form = response.data
         this.open = true
         this.formTitle = '划油记录详情'
+        getWorkflow(this.form.taskId).then((res) => {
+        this.lineTitle='划油审批'
+          this.list = res.data.nodes
+        })
       })
     },
     /** 提交按钮 */

src/views/clw/refuelingLog/modules/CreateForm.vue

@@ -76,6 +76,9 @@
             /> 
             </a-form-model-item
         >
+        <div>
+          <timeLinne :list="list" :lineTitle="lineTitle" />
+        </div>
       <div class="bottom-control">
         <a-space>
           <!-- <a-button type="primary" :loading="submitLoading" @click="submitForm">
@@ -90,11 +93,12 @@
 
 <script>
 import { getRefuelingLog, addRefuelingLog, updateRefuelingLog } from '@/api/clw/refuelingLog'
-
+import {  getWorkflow } from '@/api/clw/applyCarLog'
+import timeLinne from '../../../../components/timeLinne.vue'
 export default {
   name: 'CreateForm',
   props: {},
-  components: {},
+  components: {timeLinne},
   data() {
     return {
       submitLoading: false,
@@ -128,6 +132,8 @@ export default {
       open: false,
       rules: {},
       previewVisible: false,
+      list:[],
+      lineTitle:''
     }
   },
   dicts: ['apply_status'],
@@ -189,6 +195,10 @@ export default {
         this.form = response.data
         this.open = true
         this.formTitle = '非定点加油详情'
+        getWorkflow(this.form.taskId).then((res) => {
+        this.lineTitle='非定点加油审批'
+          this.list = res.data.nodes
+        })
       })
     },
     /** 提交按钮 */