解润东

预警模块移植
20220317

src/router/index.js

@@ -287,6 +287,56 @@ const routes = [{
   },
   component: () => import( /* webpackChunkName: "create-order" */ '../views/checkedConfirm/confirmNote/detail'),
 },
+//预警记录
+{
+    path: '/warningNote',
+    name: 'warningNote',
+    meta: {
+      title: '预警记录',
+      index: 9
+    },
+    component: () => import(/* webpackChunkName: "create-order" */ '../views/warningNote'),
+  },
+  //预警记录
+{
+    path: '/warning',
+    name: 'warning',
+    meta: {
+      title: '预警提醒',
+      index: 10
+    },
+    component: () => import(/* webpackChunkName: "create-order" */'../views/warning'),
+  },
+  // 预警处置
+  {
+    path: '/warningForm',
+    name: 'warningForm',
+    component: () => import('../views/warningForm'),
+  },
+  {
+    path: '/warningNoteDetail',
+    name: 'warningNoteDetail',
+    meta: {
+      title: '预警详情',
+    },
+    component: () => import('../views/warningNote/warningNoteDetail'),
+  },
+  {
+    path: '/warningNoteEdit',
+    name: 'warningNoteEdit',
+    meta: {
+      title: '预警编辑详情',
+    },
+    component: () => import('../views/warningNote/warningNoteEdit'),
+  },
+  {
+    path: '/warningNoteList',
+    name: 'warningNoteList',
+    meta: {
+      title: '预警记录列表',
+    },
+    component: () => import('../views/warningNote/warningNoteList'),
+  },
 // 登录页
 {
   path: '/login2',

src/service/table.js

@@ -3,7 +3,7 @@ import request from '@/utils/axios'
 /*get请求*/
 export function getFun(url,params) {
     return request({
-      url: url,
+      url: '/hse/app-api/'+url,
       method: 'get',
       params
     })
@@ -11,7 +11,23 @@ export function getFun(url,params) {
 /* post请求 */
 export function postFun(url,data) {
     return request({
-      url: url,
+      url: '/hse/app-api/'+url,
+      method: 'post',
+      data
+    })
+}
+/*get请求*/
+export function getFunTwo(url,params) {
+    return request({
+      url: '/ps_ceninss/'+url,
+      method: 'get',
+      params
+    })
+}
+/* post请求 */
+export function postFunTwo(url,data) {
+    return request({
+      url: '/ps_ceninss/'+url,
       method: 'post',
       data
     })

src/service/workbench.js

@@ -11,7 +11,7 @@ export function getFun(url,params) {
 /* post请求 */
 export function postWork(url,data) {
     return request({
-      url: url,
+      url: '/hse/app-api/'+url,
       method: 'post',
       data
     })

src/utils/axios.js

@@ -11,7 +11,8 @@ import router from '../router'
 import { Toast ,Dialog} from 'vant'; 
 import { getToken ,removeToken} from '@/utils/auth' // get token from cookie
 const service = axios.create({
-    baseURL: '/hse/app-api', //前缀路径
+    // baseURL: '/hse/app-api', //前缀路径
+    baseURL: '/', //前缀路径
     headers: {//请求头部
         // "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8",
         "content-type": "application/json",
@@ -32,7 +33,7 @@ service.interceptors.response.use(response => {
     const res = response.data//获取请求返回数据
     const code = response.status//获取请求响应码
     if (code == 200) {//请求响应码200 代表已经请求到接口
-        if (res.code === 0) {//接口响应码0 代表接口代码运行正常
+        if (res.code === 0||res.code === 200) {//接口响应码0 代表接口代码运行正常
             return res
         } else if (res.code === 301) {
             // Notify({ type: 'danger', message: res.msg});

src/views/Login2.vue

@@ -79,7 +79,11 @@ export default {
                     var userInfo={
                         avatar:Response2.data.avatar,
                         userName:Response2.data.userName,
-                        deptName:Response2.data.dept.deptName
+                        deptName:Response2.data.dept.deptName,
+                        organizationId:Response2.data.organizationId,
+                        organizationName:Response2.data.organizationName,
+                        userId:Response2.data.userId,
+                        roles:Response2.data.roles
                     }
                     /* 存储用户信息 */
                     setUserInfo(userInfo)

src/views/saveWorkbench/index.vue

@@ -246,6 +246,18 @@ export default {
                     imgUrl: require("@/assets/workbench/ehcek-record.png"),
                     text: "整改确认",
                 },
+                {
+                    key: "9",
+                    path: "/warning",
+                    imgUrl: require("@/assets/workbench/warn-tip.png"),
+                    text: "预警提醒",
+                },
+                {
+                    key: "10",
+                    path: "/warningNote",
+                    imgUrl: require("@/assets/workbench/warn-record.png"),
+                    text: "预警记录",
+                },
             ],
 
             // 后台给的数据权限对象

src/views/warning/index.vue

+
+<template>
+    <div>
+        <LHeader v-bind:text="text"></LHeader>
+        <van-search
+            v-model="value"
+            placeholder="搜索"
+            @search="onSearch" 
+            >
+        </van-search>
+        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
+             <van-list
+                v-model="loading"
+                :finished="finished"
+                finished-text="没有更多了"
+                @load="onLoad"
+            >
+        <div class="card" v-for="(item,index) in list"  :key="index" v-show="item.status=='wait'"  @click="warningClick(item)">
+            <div class="card-header">
+                <van-row>
+                    <van-col span="10">
+                        <span class="card-header-left">{{item.orderType+'预警'}}</span>
+                    </van-col>
+                    <van-col span="6" class="card-header-medium">
+                        <van-tag size="medium" type="danger" v-if="item.gradeType=='一级预警'">一级预警</van-tag>
+                        <van-tag size="medium" type="warning" v-else-if="item.gradeType=='二级预警'">二级预警</van-tag>
+                        <van-tag size="medium" color="#FAED55" v-else-if="item.gradeType=='三级预警'">三级预警</van-tag>
+                    </van-col>
+                    <van-col span="8" class="card-header-right">
+                        <van-tag size="medium" type="success" plain v-if="item.status=='error'">已处置</van-tag>
+                        <van-tag size="medium" type="success" plain v-if="item.status=='finish'">已处置</van-tag>
+                        <van-tag size="medium" type="danger" plain v-else-if="item.status=='wait'">未处置</van-tag>
+                    </van-col>
+                </van-row>
+            </div>
+            <div class="card-body">
+            {{util.timestampToTime(item.alarmTime,'DT1',true)}}&nbsp;&nbsp;
+            {{ item.gradeName}}&nbsp;&nbsp; 
+            {{item.orderNo}}&nbsp;&nbsp; 
+            {{item.gradeType+'请及时处理'}}
+            </div>
+        </div>
+        </van-list>
+        </van-pull-refresh>
+         <tab-bar :index="1"></tab-bar>
+    </div>
+</template>
+<script>
+import LHeader from "@/components/header";
+import tabBar from "@/components/TabBar";
+import { getFun,postFun ,postFunTwo,getFunTwo} from '@/service/table'
+import { setUserInfo ,getUserInfo} from '@/utils/userInfo'
+export default {
+    name: 'warning',
+    components: {
+        tabBar,
+        LHeader
+    },
+    data() {
+        return {
+             text:'预警提醒',//顶部文本
+            total:0,//总条数
+            page:1,//页码
+            psize:5,//页数量
+            loading: false,
+            finished: false,
+            refreshing:false,
+            value:'',//搜索内容
+            userId:'',//登录用户ID
+            list:[
+                // {
+                //     warningName:'有限空间作业预警',
+                //     warningLevel:1,
+                //     ishandle:false,
+                //     content:'2021年8月23日 12:34:32&nbsp; 有限空间作业 0294758585发生 安全帽佩戴 一级预警 请及时处理。'
+                // },
+                // {
+                //     warningName:'动力作业预警',
+                //     warningLevel:2,
+                //     ishandle:false,
+                //     content:'2021年8月23日 12:34:32&nbsp; 动火作业 0294758585发生 防护面罩佩戴 二级预警 请及时处理。'
+                // },
+                // {
+                //     warningName:'有限空间作业预警',
+                //     warningLevel:3,
+                //     ishandle:false,
+                //     content:'2021年8月23日 12:34:32&nbsp; 有限空间作业 0294758585发生 安全帽佩戴 一级预警 请及时处理。'
+                // }
+            ]
+           
+        }
+    },
+    mounted() {
+        if(getUserInfo())
+        this.userId=getUserInfo().userId
+        console.log(getUserInfo())
+        // this.init()
+    },
+    methods: {
+        //预警列表
+        init(){
+            // this.list=[];
+            var obj={
+                page:this.page,
+                psize:this.psize,
+                desc:this.value
+            }
+            getFunTwo('app/push/list/'+this.userId,obj).then((Response2)=>{
+                if(Response2.code==200){
+                    Response2.data.list.forEach((item)=>{
+                        this.list.push(item)
+                    })
+                    this.page=Response2.data.pageNum
+                    this.total=Response2.data.totalCount
+                    //防止分页超出操作
+                    if(!(this.page*5-this.total>=0)){
+                         this.page++;
+                    }
+                    if (this.list.length>=this.total) {
+                        this.finished = true;
+                    }
+                    this.loading = false
+                }
+            })
+        },
+        //搜索查询
+        onSearch(){
+            this.init()
+        },
+        //点击卡片跳转
+        warningClick(item){
+            sessionStorage.setItem('warningId',item.id)
+            this.$router.push('/warningForm')
+        },
+        //下拉页面刷新
+        onRefresh() {
+            // 清空列表数据
+            this.page=1
+            this.finished = false;
+            this.loading=true
+            this.onLoad();
+        },
+        //上拉页面加载数据
+        onLoad() {
+            if (this.refreshing) {
+                this.list=[]
+                this.refreshing = false;
+            }
+            setTimeout(() => {
+                this.init()
+            }, 1000);
+        },
+    }
+}
+</script>
+<style lang="less" scoped>
+    /* 搜索框 */
+    .van-search{
+        margin:0.26667rem auto 0;
+        width: 95%;
+        border-radius: 4%;
+        border-radius: 5px;
+        padding: 5px 12px;
+    }
+    .van-search__content {
+      background-color: #ffffff;
+    }
+    /* 卡片系列 */
+    .card{
+        width:90%;
+        box-shadow: 0px 0px 10px 2px #F3F3F3;
+        padding: 0.25rem;
+        margin:0.26667rem auto;
+        background: white;
+        border-radius: 4%;
+    }
+    .card div{
+        font-size: 0.4rem;
+        line-height: 0.7rem;
+    }
+    .card-header-left{
+        font-weight: bolder;
+        font-size: 0.45rem;
+    }
+    .card-header-right{
+        text-align: right;
+    }
+    .card-header-medium{
+        text-align: left;
+    }
+</style>
\ No newline at end of file

src/views/warningForm/index.vue

+<!--
+ * 严肃声明：
+ * 开源版本请务必保留此注释头信息，若删除我方将保留所有法律责任追究！
+ * 本系统已申请软件著作权，受国家版权局知识产权以及国家计算机软件著作权保护！
+ * 可正常分享和学习源码，不得用于违法犯罪活动，违者必究！
+ * Copyright (c) 2020 陈尼克 all rights reserved.
+ * 版权所有，侵权必究！
+ *
+-->
+
+<template>
+    <div>
+        <LHeader v-bind:text="text"></LHeader>
+        <!-- <van-form @submit="onSubmit" @failed="onFailed"> -->
+        <div class="card">
+            <van-field
+                :disabled="true"
+                v-model="warningForm.gradeName"
+                name="所属场景"
+                label="所属场景"
+                placeholder="所属场景"
+                :rules="[{ required: true, message: '请填写所属场景' }]"
+            />
+            <van-field
+                :disabled="true"
+                v-model="warningForm.gradeType"
+                name="预警等级"
+                label="预警等级"
+                placeholder="预警等级"
+                :rules="[{ required: true, message: '请填写预警等级' }]"
+            />
+            <van-field
+                v-model="warningForm.orderType"
+                name="预警类型"
+                label="预警类型"
+                placeholder="预警类型"
+                :disabled="true"
+                :rules="[{ required: true, message: '请填写预警类型' }]"
+            />
+            <van-field
+                readonly
+                clickable
+                :disabled="true"
+                name="picker"
+                :value="util.timestampToTime(warningForm.alarmTime,'DT1',true)"
+                label="预警时间"
+                placeholder="预警时间"
+                @click="showPicker = false"
+                :rules="[{ required: true, message: '请填写预警时间' }]"
+            />
+            <van-popup v-model="showPicker" position="bottom">
+                <van-datetime-picker ref="picker"
+                    type="datehour"
+                    title="选择年月日小时"
+                    @confirm="onConfirm"
+                    @cancel="showPicker = false"
+                    @change="checkScroll"
+                    :formatter="formatter"
+                />
+                <!-- <van-area title="标题" :area-list="areaList" @confirm="onConfirm" /> -->
+            </van-popup>
+             <van-field name="uploader" :disabled="true" label="预警图片" >
+                <template #input>
+                    <van-uploader :show-upload="false"  :deletable="false" v-model="warningForm.picture" />
+                </template>
+            </van-field>
+        </div>
+        <div class="card">
+            <van-field
+                v-model="warningForm.relevanceUser"
+                name="关联人员"
+                :disabled="true"
+                label="关联人员"
+                placeholder="关联人员"
+                :rules="[{ required: true, message: '请填写关联人员' }]"
+            />
+            <van-field
+                v-model="warningForm.relevanceDegree"
+                name="相似程度"
+                :disabled="true"
+                label="相似程度"
+                placeholder="相似程度"
+                :rules="[{ required: true, message: '请填写相似程度' }]"
+            />
+            <van-field name="uploader" :disabled="true" label="人脸照片" >
+               <template #input>
+                    <van-uploader  v-if="warningForm.relevancePicture.url" :deletable="false" :show-upload="false"  v-model="warningForm.relevancePicture">
+                        <template #preview-cover="{ url }">
+                            <div>
+                                <img  muted autoplay :src="url" style="width:80px;height:80px;object-fit:cover;"/>
+                            </div>
+                        </template>
+                    </van-uploader>
+                </template>
+            </van-field>
+        </div>
+        <div class="card">
+             <van-field name="radio" label="处理结果" >
+                <template #input>
+                    <van-radio-group v-model="commitForm.result" direction="horizontal">
+                    <van-radio name="finish">正常处置</van-radio>
+                    <van-radio name="error">误报退回</van-radio>
+                    </van-radio-group>
+                </template>
+                <!-- v-model="warningForm.result"
+                name="处理结果"
+                label="处理结果"
+                placeholder="处理结果"
+                :rules="[{ required: true, message: '请填写处理结果' }]" -->
+
+            </van-field>
+        </div>
+        <div class="card"  v-if="commitForm.result=='finish'">
+             <van-field
+                v-model="commitForm.handleNote"
+                name="处理记录"
+                label="处理记录"
+                type="textarea"
+                placeholder="处理记录"
+                :rules="[{ required: true, message: '请填写处理记录' }]"
+            />
+            <van-field name="uploader2" label="照片上传">
+                <template #input>
+                    <van-uploader :max-count="5"
+                        upload-text="最多上传五个" v-model="commitForm.pictures" />
+                </template>
+            </van-field>
+        </div>
+            <div style="margin: 0.5rem" v-show="commitForm.result=='finish'">
+                <van-button round block type="info" @click="onSubmit('handle')">一键处置</van-button>
+            </div>
+            <div style="margin: 0.5rem">
+                <van-button round block type="info" native-type="submit" @click="onSubmit('commit')">提交</van-button>
+            </div>
+        <!-- </van-form> -->
+        <!-- <tab-bar :index="1"></tab-bar> -->
+    </div>
+</template>
+
+<script>
+// import tabBar from "@/components/TabBar";
+import LHeader from '@/components/header.vue'
+import { getFun,postFun ,getFunTwo,postFunTwo,putFunTwo} from '@/service/table'
+import { setUserInfo ,getUserInfo,} from '@/utils/userInfo'
+export default {
+    name: 'list',
+    components: {
+        "LHeader":LHeader,
+        // "tabBar":tabBar
+    },
+    data() {
+        return {
+            /* 预警处理form表单 */
+            warningForm:{
+                // scene:'有限空间作业-123123123123',//所属场景
+                // level:'一级预警',//预警等级
+                // type:'安全帽佩戴预警',//预警类型
+                // time:'2021-10-22 17:23:23',//预警时间
+                // warningImg:[],//预警图片
+                // person:'王晓丽',//关联人员
+                // lookLike:'98.23',//相似程度
+                // faceImg:[],//人脸照片
+            },
+            commitForm:{
+                result:'finish',//预警结果
+                handleNote:'',//处理记录
+                pictures:[]//图像上传
+            },
+            userId:'',//用户登录ID
+            warningId:'',//预警处理id
+            showPicker:false,//默认是否展示弹出层
+            text:'预警处理',//顶部文本
+        }
+    },
+    mounted() {
+        if(sessionStorage.getItem('warningId')){
+            this.warningId=sessionStorage.getItem('warningId')
+        }
+        if(getUserInfo())
+        this.userId=getUserInfo().userId
+        this.init()
+    },
+    methods: {
+        //请求预警处理详情接口
+        init(){
+            this.warningForm={}
+            getFunTwo('app/push/details/'+this.warningId).then((Response)=>{
+                this.warningForm=JSON.parse(JSON.stringify(Response.data))
+                //处理图片数据
+                this.warningForm.relevancePicture=[]
+                this.warningForm.relevancePicture.push({url:Response.data.relevancePicture})
+                this.warningForm.picture=[]
+                this.warningForm.picture.push({url:Response.data.picture})
+            })
+
+        },
+        /* 下拉框文本溢出动画效果 */
+        checkScroll () {
+            this.$nextTick(() => {
+                // 获取选中元素
+                let selectedItems = [...document.querySelectorAll('.van-picker-column__item--selected')]
+                selectedItems.forEach(item => {
+                let child = item.querySelector('.van-ellipsis')
+                if (child.offsetWidth > item.offsetWidth) { // 判断child文字宽度
+                    item.classList.add('scroll')
+                } else {
+                    item.classList.remove('scroll')
+                }
+                })
+            })
+        },
+        //时间转换
+        formatter(type, val) {
+            if (type === 'month') {
+                return `${val}月`;
+            } else if (type === 'day') {
+                return `${val}日`;
+            }
+                return val;
+        },
+        onFailed(errorInfo){
+            this.$toast.fail('提交失败,请完善信息')
+        },
+        /* 问题提交 */
+        onSubmit(value){
+            var obj={}
+            if(value=='handle'){
+                obj={
+                    id:this.warningId,
+                    finishUserId:this.userId,
+                    finishContent:'已处置',
+                    finishPictures:[],
+                    status:this.commitForm.result
+                }
+            }else if(value=='commit'){
+                var pictures=[]
+                this.commitForm.pictures.forEach((item)=>{
+                    if(item.content){
+                        pictures.push(item.content)
+                    }
+                })
+                obj={
+                    id:this.warningId,
+                    finishUserId:this.userId,
+                    finishContent:this.commitForm.handleNote,
+                    finishPictures:pictures,
+                    status:this.commitForm.result
+                }
+            }
+            // var pictures=[];
+            // // value.uploader.forEach((item) => {
+            // //     pictures.push(item.content)
+            // // });
+            // var videos=[];
+            // // value.uploader2.forEach((item) => {
+            // //     videos.push(item.content)
+            // // });
+            this.$dialog.confirm({
+                title: '提示',
+                message: '确定提交检查问题？',
+            }).then(()=>{
+                this.$toast.loading({
+                    message:'提交中...',
+                    forbidClick: true,
+                    loadingType: 'spinner',
+                    duration: 0
+                })
+                putFunTwo('app/push',obj).then((Response)=>{
+                    this.$toast.clear()
+                    this.$toast.success({
+                        message:'提交成功',
+                        duration: 2000
+                    })
+                    this.$router.push('/message-center')
+                }).catch(()=>{
+                    this.$toast.clear()
+                    this.$toast.fail('提交失败,请稍后再试')
+                })
+            }).catch(()=>{
+
+            })
+
+        },
+        /*  确认选择级联菜单的回显数据处理 */
+        onConfirm(){
+            //获取回显的部门值和部门id数组
+            this.value=""
+            this.ids=[]
+            var valueList=this.$refs.picker.getValues()
+            valueList.forEach((item)=>{
+                console.log(item)
+                this.ids.push(item.id)
+                this.value+=item.text+' / '
+            })
+            this.showPicker = false;
+        }
+    }
+}
+</script>
+<style lang="less" scoped>
+    .card{
+        width:90%;
+        box-shadow: 0px 0px 10px 2px #F3F3F3;
+        padding: 0.25rem;
+        margin:0.4rem auto;
+        background: white;
+        border-radius: 4%;
+    }
+    .card div{
+        font-size: 0.4rem;
+        // line-height: 0.8rem;
+    }
+/deep/ .van-picker-column__item--selected {
+/* 重写选中后的效果 */
+.van-ellipsis {
+    text-overflow: unset;
+    overflow: visible;
+}
+/* 增加scroll类 */
+&.scroll > .van-ellipsis {
+    animation: move 4s linear infinite;
+}
+}
+@keyframes move {
+    0% { transform: translateX(100%); }
+    100% { transform: translateX(-100%); }
+}
+/deep/ .van-field__label {
+    width: 4.2em !important;
+    color: #646566 !important;
+}
+.level /deep/ .van-field__control{
+    color: red
+}
+/deep/ .van-field__control:disabled{
+    -webkit-text-fill-color:black
+}
+</style>

src/views/warningNote/index.vue

+
+<template>
+    <div>
+        <LHeader v-bind:text="text"></LHeader>
+        <van-search
+            v-model="value"
+            placeholder="搜索"
+            @search="onSearch" 
+            >
+        </van-search>
+        <van-tabs v-model="active" type="card" title-inactive-color="#2980F7" color="#2980F7"  @change="tabChange">
+            <van-tab  v-for="(item1,index1) in tabList"  :key="index1" :title="item1.title">
+                <van-pull-refresh v-model="item1.refreshing" @refresh="onRefresh">
+             <van-list
+                v-model="item1.loading"
+                :finished="item1.finished"
+                finished-text="没有更多了"
+                @load="onLoad()"
+            >
+                <div class="card"  v-for="(item,index) in item1.list"  :key="index"  @click="warningClick(item)">
+                    <div class="card-header">
+                        <van-row>
+                            <van-col span="10">
+                                <span class="card-header-left">{{item.orderType+'预警'}}</span>
+                            </van-col>
+                            <van-col span="6" class="card-header-medium">
+                                <van-tag size="medium" type="danger" v-if="item.gradeId==1">一级预警</van-tag>
+                                <van-tag size="medium" type="warning" v-else-if="item.gradeId==2">二级预警</van-tag>
+                                <van-tag size="medium" type="success" v-else-if="item.gradeId==3">三级预警</van-tag>
+                            </van-col>
+                            <van-col span="8" class="card-header-right">
+                                <van-tag size="medium" type="success" plain v-if="item.status=='error'">已处置</van-tag>
+                                <van-tag size="medium" type="success" plain v-if="item.status=='finish'">已处置</van-tag>
+                                <van-tag size="medium" type="danger" plain v-else-if="item.status=='wait'">未处置</van-tag>
+                            </van-col>
+                        </van-row>
+                    </div>
+                    <div class="card-body">
+                        {{util.timestampToTime(item.alarmTime,'DT1',true)}}&nbsp;&nbsp;
+                        {{ item.gradeName}}&nbsp;&nbsp; 
+                        {{item.orderNo}}&nbsp;&nbsp; 
+                        {{item.gradeType+'请及时处理'}}
+                    </div>
+                </div>
+                </van-list>
+        </van-pull-refresh>
+            </van-tab>
+        </van-tabs>
+        <tab-bar :index="1"></tab-bar>
+    </div>
+</template>
+<script>
+import tabBar from "@/components/TabBar";
+import LHeader from "@/components/header";
+import { getFun,postFun,postFunTwo,getFunTwo } from '@/service/table'
+import { setUserInfo ,getUserInfo} from '@/utils/userInfo'
+export default {
+    name: 'warning',
+    components: {
+        tabBar,
+        LHeader
+    },
+    data() {
+        return {
+            total:0,//总条数
+            page:1,//页码
+            psize:5,//页数量
+            loading: false,
+            finished: false,
+            refreshing:false,
+            type:'',//处置类型
+            userId:'',//用户登录ID
+            tabList:[
+                {
+                    title:'全部',
+                    type:"",
+                    loading: false,
+                    finished: false,
+                    refreshing:false,
+                    list:[]
+                    // ishandle:'all',
+                },
+                {
+                    title:'已处置',
+                    type:"finish",
+                    loading: false,
+                    finished: false,
+                    refreshing:false,
+                    list:[]
+                    // ishandle:true,
+                },
+                {
+                    title:'未处置',
+                    type:"wait",
+                    loading: false,
+                    finished: false,
+                    refreshing:false,
+                    list:[]
+                    // ishandle:false,
+                }
+            ],//切换标题数组
+            active:0,//默认切换状态
+            value:'',//搜索框值
+            text:'预警记录',//顶部文本
+        }
+    },
+    mounted() {
+        if(getUserInfo())
+        this.userId=getUserInfo().userId
+        // this.init()
+    },
+    methods: {
+        init(){
+            var obj={
+                page:this.page,
+                psize:this.psize,
+                type:this.type,
+                desc:this.value
+            }
+            getFunTwo('app/push/list/'+this.userId,obj).then((Response2)=>{
+                if(Response2.code==200){
+                    Response2.data.list.forEach((item)=>{
+                        this.tabList.forEach((i)=>{
+                            if(i.type==this.type){
+                                i.list.push(item)
+                            }
+                        })
+                    })
+                    this.page=Response2.data.pageNum
+                    this.total=Response2.data.totalCount
+                    //防止分页超出操作
+                    if(!(this.page*5-this.total>=0)){
+                         this.page++;
+                    }
+                    //遍历哪个类型的分页加载函数
+                    this.tabList.forEach((i)=>{
+                        if(i.type==this.type){
+                            if (i.list.length>=this.total) {
+                                i.finished = true;
+                                console.log(this.tabList)
+                            }
+                            i.loading = false;
+                        }
+                    })
+                }
+            })
+        },
+        //切换改变请求查询
+        tabChange(title,name){
+            this.page=1
+            this.tabList.forEach((i)=>{
+                i.list=[]
+            })
+            this.type=""
+            if(name=='全部'){
+                this.type=""
+            }else if(name=='已处置'){
+                this.type="finish"
+            }else if(name=='未处置'){
+                this.type="wait"
+            }
+            this.tabList.forEach((i)=>{
+                if(i.type==this.type){
+                    i.loading=true
+                    i.finished=false
+                }
+            })
+            this.onLoad();
+        },
+        //搜索查询
+        onSearch(){
+            this.tabList.forEach((i)=>{
+                i.list=[]
+            })
+            this.page=1
+            this.init()
+        },
+        //点击卡片跳转
+        warningClick(item){
+            sessionStorage.setItem('warningNoteId',item.id)
+            if(item.status=='wait'){
+                this.$router.push('/warningNoteEdit')
+            }else if(item.status=='error'||item.status=='finish'){
+                this.$router.push('/warningNoteDetail')
+            }
+            
+        },
+        //下拉页面刷新
+        onRefresh() {
+            // 清空列表数据
+            this.page=1
+            this.tabList.forEach((i)=>{
+                if(i.type==this.type){
+                    i.loading=true
+                    i.finished=false
+                }
+            })
+            this.onLoad();
+        },
+        //上拉页面加载数据
+        onLoad() {
+            this.tabList.forEach((i)=>{
+                if(i.type==this.type){
+                    if (i.refreshing) {
+                        i.list=[]
+                        i.refreshing = false;
+                    }
+                }
+            })
+            this.init()
+        },
+    }
+}
+</script>
+<style lang="less" scoped>
+    /* 搜索框 */
+   .van-search{
+        margin:0.26667rem auto 0;
+        width: 95%;
+        border-radius: 4%;
+        border-radius: 5px;
+        padding: 5px 12px;
+    }
+    .van-search__content {
+      background-color: #ffffff;
+    }
+    /* tab栏 */
+    .van-tabs{
+        margin-top: 0.4rem;
+    }
+    /deep/ .van-tab--active{
+        border-radius: 5px !important;
+    }
+    /deep/ .van-tabs__nav--card{
+        border: none !important;
+        border-radius: 5px !important
+    }
+    /* 卡片系列 */
+    .card{
+        width:90%;
+        box-shadow: 0px 0px 10px 2px #F3F3F3;
+        padding: 0.25rem;
+        margin:0.4rem auto;
+        background: white;
+        border-radius: 4%;
+    }
+    .card div{
+        font-size: 0.4rem;
+        line-height: 0.7rem;
+    }
+    .card-header-left{
+        font-weight: bolder;
+        font-size: 0.45rem;
+    }
+    .card-header-right{
+        text-align: right;
+    }
+    .card-header-medium{
+        text-align: left;
+    }
+</style>
\ No newline at end of file

src/views/warningNote/warningNoteDetail/index.vue

+<!--
+ * 严肃声明：
+ * 开源版本请务必保留此注释头信息，若删除我方将保留所有法律责任追究！
+ * 本系统已申请软件著作权，受国家版权局知识产权以及国家计算机软件著作权保护！
+ * 可正常分享和学习源码，不得用于违法犯罪活动，违者必究！
+ * Copyright (c) 2020 陈尼克 all rights reserved.
+ * 版权所有，侵权必究！
+ *
+-->
+
+<template>
+    <div>
+        <LHeader v-bind:text="text"></LHeader>
+        <!-- <van-form @submit="onSubmit" @failed="onFailed"> -->
+        <div class="card">
+            <van-field
+                v-model="warningDetailForm.gradeName"
+                name="所属场景"
+                :disabled="true"
+                label="所属场景"
+                placeholder="所属场景"
+                :rules="[{ required: true, message: '请填写所属场景' }]"
+            />
+            <van-field
+                v-model="warningDetailForm.gradeType"
+                class="level"
+                :disabled="true"
+                name="预警等级"
+                label="预警等级"
+                placeholder="预警等级"
+                :rules="[{ required: true, message: '请填写预警等级' }]"
+            />
+            <van-field
+                v-model="warningDetailForm.orderType"
+                name="预警类型"
+                :disabled="true"
+                label="预警类型"
+                placeholder="预警类型"
+                :rules="[{ required: true, message: '请填写预警类型' }]"
+            />
+            <van-field
+                readonly
+                clickable
+                :disabled="true"
+                name="picker"
+                :value="util.timestampToTime(warningDetailForm.alarmTime,'DT1',true)"
+                label="预警时间"
+                placeholder="预警时间"
+                @click="showPicker = false"
+                :rules="[{ required: true, message: '请填写预警时间' }]"
+            />
+            <van-popup v-model="showPicker" position="bottom">
+                <van-datetime-picker ref="picker"
+                    type="datehour"
+                    title="选择年月日小时"
+                    @confirm="onConfirm"
+                    @cancel="showPicker = false"
+                    @change="checkScroll"
+                    :formatter="formatter"
+                />
+                <!-- <van-area title="标题" :area-list="areaList" @confirm="onConfirm" /> -->
+            </van-popup>
+             <van-field name="uploader" label="预警图片" :rules="[{ required: true, message: '请上传预警图片' }]">
+                <template #input>
+                    <van-uploader :show-upload="false"  :deletable="false" v-model="warningDetailForm.picture" />
+                </template>
+            </van-field>
+        </div>
+        <div class="card">
+            <van-field
+                v-model="warningDetailForm.relevanceUser"
+                name="关联人员"
+                :disabled="true"
+                label="关联人员"
+                placeholder="关联人员"
+                :rules="[{ required: true, message: '请填写关联人员' }]"
+            />
+            <van-field
+                v-model="warningDetailForm.relevanceDegree"
+                name="相似程度"
+                :disabled="true"
+                label="相似程度"
+                placeholder="相似程度"
+                :rules="[{ required: true, message: '请填写相似程度' }]"
+            />
+            <van-field name="uploader" label="人脸照片" v-if="warningDetailForm.relevanceUser!='未知人员'&&warningForm.relevanceUser">
+                <template #input>
+                    <van-uploader v-if="isface"  :deletable="false" :show-upload="false"  v-model="warningDetailForm.relevancePicture">
+                        <template #preview-cover="{ url }">
+                            <img muted autoplay :src="url" style="width:80px;height:80px;object-fit:cover;"/>
+                        </template>
+                    </van-uploader>
+                </template>
+            </van-field>
+        </div>
+        <div class="card">
+            <van-field
+                v-model="warningDetailForm.status"
+                name="处置状态"
+                :disabled="true"
+                label="处置状态"
+                placeholder="处置状态"
+                :rules="[{ required: true, message: '请填写处置状态' }]"
+            />
+        </div>
+        <div class="card">
+            <van-field
+                v-model="warningDetailForm.finishDept"
+                name="所属单位"
+                :disabled="true"
+                label="所属单位"
+                placeholder="所属单位"
+                :rules="[{ required: true, message: '请填写所属单位' }]"
+            />
+            <van-field
+                v-model="warningDetailForm.finishUser"
+                name="处置人员"
+                :disabled="true"
+                label="处置人员"
+                placeholder="处置人员"
+                :rules="[{ required: true, message: '请填写处置人员' }]"
+            />
+            <van-field
+                v-model="warningDetailForm.finishTime"
+                name="记录时间"
+                :disabled="true"
+                label="记录时间"
+                placeholder="记录时间"
+                :rules="[{ required: true, message: '请填写记录时间' }]"
+            />
+             <van-field
+                v-model="warningDetailForm.finishContent"
+                name="处理记录"
+                :disabled="true"
+                label="处理记录"
+                type="textarea"
+                placeholder="处理记录"
+                :rules="[{ required: true, message: '请填写处理记录' }]"
+            />
+            <van-field name="uploader2" label="照片上传" :rules="[{ required: true, message: '请上传视频' }]">
+                <template #input>
+                    <van-uploader  :show-upload="false" :deletable="false" :disabled="true" v-model="warningDetailForm.finishPicture" />
+                </template>
+            </van-field>
+        </div>
+        <!-- </van-form> -->
+        <tab-bar :index="1"></tab-bar>
+    </div>
+</template>
+
+<script>
+import tabBar from "@/components/TabBar";
+import LHeader from '@/components/header.vue'
+import { getFun,postFun ,getFunTwo,postFunTwo} from '@/service/table'
+export default {
+    name: 'list',
+    components: {
+        "LHeader":LHeader,
+        "tabBar":tabBar
+    },
+    data() {
+        return {
+            isface:false,//是否显示人脸照片
+            /* 预警详情form表单 */
+            warningDetailForm:{
+                // scene:'动火作业-123123123123',//所属场景
+                // level:'一级预警',//预警等级
+                // type:'安全帽佩戴预警',//预警类型
+                // time:'2021-10-22 17:23:23',//预警时间
+                // warningImg:[],//预警图片
+                // person:'王晓丽',//关联人员
+                // lookLike:'98.23',//相似程度
+                // faceImg:[],//人脸照片
+                // status:'已处置',//处理状态
+                // company:'小红门再生水厂',//所属单位
+                // handlePerson:'魏云龙',//处理人员
+                // noteTime:'2021-04-23 12:12:45',//记录时间
+                // handleNote:'已经对为佩戴安全帽人员进行了教育提醒，目前已经佩戴了安全帽。',//处理记录
+                // pictures:[]//图像上传
+            },
+            showPicker:false,//默认是否展示弹出层
+            text:'预警详情',//顶部文本
+        }
+    },
+    mounted() {
+        //判断是否从工单跳转进来
+        if(this.$route.query.name=="noteList"){
+            this.text='工单已处置置记录'
+        }
+        if(sessionStorage.getItem('warningNoteId')){
+            this.warningId=sessionStorage.getItem('warningNoteId')
+        }
+        this.init()
+    },
+    methods: {
+        //详情加载
+        init(){
+            this.warningDetailForm={}
+            getFunTwo('app/push/details/'+this.warningId).then((Response)=>{
+                this.warningDetailForm=JSON.parse(JSON.stringify(Response.data))
+                //处理数据
+                if(Response.data.relevancePicture!=""){
+                    this.isface=true
+                    this.warningDetailForm.relevancePicture=[]
+                    this.warningDetailForm.relevancePicture.push({url:Response.data.relevancePicture})
+                }else{
+                    this.isface=false
+                }
+                this.warningDetailForm.picture=[]
+                this.warningDetailForm.picture.push({url:Response.data.picture})
+                this.warningDetailForm.finishPicture=[]
+                this.warningDetailForm.finishTime=this.util.timestampToTime(this.warningDetailForm.finishTime,'DT1',true)
+                Response.data.finishPicture.forEach((item)=>{
+                    this.warningDetailForm.finishPicture.push({url:item})
+                })
+                this.warningDetailForm.status=this.warningDetailForm.status=='finish'?'已处置':this.warningDetailForm.status=='error'?'误报退回':''
+            })
+        },
+        /* 下拉框文本溢出动画效果 */
+        checkScroll () {
+            this.$nextTick(() => {
+                // 获取选中元素
+                let selectedItems = [...document.querySelectorAll('.van-picker-column__item--selected')]
+                selectedItems.forEach(item => {
+                let child = item.querySelector('.van-ellipsis')
+                if (child.offsetWidth > item.offsetWidth) { // 判断child文字宽度
+                    item.classList.add('scroll')
+                } else {
+                    item.classList.remove('scroll')
+                }
+                })
+            })
+        },
+        //时间转换
+        formatter(type, val) {
+            if (type === 'month') {
+                return `${val}月`;
+            } else if (type === 'day') {
+                return `${val}日`;
+            }
+                return val;
+        },
+        onFailed(errorInfo){
+            this.$toast.fail('提交失败,请完善信息')
+        },
+        /* 问题提交 */
+        onSubmit(value){
+            var pictures=[];
+            value.uploader.forEach((item) => {
+                pictures.push(item.content)
+            });
+            var videos=[];
+            value.uploader2.forEach((item) => {
+                videos.push(item.content)
+            });
+            var obj={
+                planId:this.planId?this.planId:this.id,
+                planItemId:this.planItemId?this.planItemId:'',
+                pictures:pictures,
+                videos:videos,
+                title:value['问题名称'],//问题名称
+                address:value['问题位置'],//问题位置
+                deptIds:this.ids,//责任单位
+                context:value['问题描述'],//问题描述
+                checkBasis:value['法律依据']//法律依据
+            }
+            this.$dialog.confirm({
+                title: '提示',
+                message: '确定提交检查问题？',
+            }).then(()=>{
+                this.$toast.loading({
+                    message:'提交中...',
+                    forbidClick: true,
+                    loadingType: 'spinner',
+                    duration: 0
+                })
+                postFun('check/carry/trouble',obj).then((Response)=>{
+                    this.$toast.clear()
+                    this.$toast.success({
+                        message:'提交成功',
+                        duration: 2000
+                    })
+                    this.$router.push({
+                        name:'problem',
+                        query:{
+                            pageName:'problemList'
+                        }
+                    })
+                }).catch(()=>{
+                    this.$toast.clear()
+                    this.$toast.fail('提交失败,请稍后再试')
+                })
+            }).catch(()=>{
+
+            })
+
+        },
+        /*  确认选择级联菜单的回显数据处理 */
+        onConfirm(){
+            //获取回显的部门值和部门id数组
+            this.value=""
+            this.ids=[]
+            var valueList=this.$refs.picker.getValues()
+            valueList.forEach((item)=>{
+                console.log(item)
+                this.ids.push(item.id)
+                this.value+=item.text+' / '
+            })
+            this.showPicker = false;
+        }
+    }
+}
+</script>
+<style lang="less" scoped>
+    .card{
+        width:90%;
+        box-shadow: 0px 0px 10px 2px #F3F3F3;
+        padding: 0.25rem;
+        margin:0.4rem auto;
+        background: white;
+        border-radius: 4%;
+    }
+    .card div{
+        font-size: 0.4rem;
+    }
+/deep/ .van-picker-column__item--selected {
+/* 重写选中后的效果 */
+.van-ellipsis {
+    text-overflow: unset;
+    overflow: visible;
+}
+/* 增加scroll类 */
+&.scroll > .van-ellipsis {
+    animation: move 4s linear infinite;
+}
+}
+@keyframes move {
+    0% { transform: translateX(100%); }
+    100% { transform: translateX(-100%); }
+}
+/deep/ .van-field__label {
+    width: 4.2em !important;
+    color: #646566 !important;
+}
+.level /deep/ .van-field__control{
+    color: red;
+}
+/deep/ .van-field__control:disabled{
+    -webkit-text-fill-color:black
+}
+</style>

src/views/warningNote/warningNoteEdit/index.vue

+<!--
+ * 严肃声明：
+ * 开源版本请务必保留此注释头信息，若删除我方将保留所有法律责任追究！
+ * 本系统已申请软件著作权，受国家版权局知识产权以及国家计算机软件著作权保护！
+ * 可正常分享和学习源码，不得用于违法犯罪活动，违者必究！
+ * Copyright (c) 2020 陈尼克 all rights reserved.
+ * 版权所有，侵权必究！
+ *
+-->
+
+<template>
+    <div>
+        <LHeader v-bind:text="text"></LHeader>
+        <!-- <van-form @submit="onSubmit" @failed="onFailed"> -->
+        <div class="card">
+            <van-field
+                :disabled="true"
+                v-model="warningForm.gradeName"
+                name="所属场景"
+                label="所属场景"
+                placeholder="所属场景"
+                :rules="[{ required: true, message: '请填写所属场景' }]"
+            />
+            <van-field
+                :disabled="true"
+                v-model="warningForm.gradeType"
+                name="预警等级"
+                label="预警等级"
+                placeholder="预警等级"
+                :rules="[{ required: true, message: '请填写预警等级' }]"
+            />
+            <van-field
+                v-model="warningForm.orderType"
+                name="预警类型"
+                label="预警类型"
+                placeholder="预警类型"
+                :disabled="true"
+                :rules="[{ required: true, message: '请填写预警类型' }]"
+            />
+            <van-field
+                readonly
+                clickable
+                :disabled="true"
+                name="picker"
+                :value="util.timestampToTime(warningForm.alarmTime,'DT1',true)"
+                label="预警时间"
+                placeholder="预警时间"
+                @click="showPicker = false"
+                :rules="[{ required: true, message: '请填写预警时间' }]"
+            />
+            <van-popup v-model="showPicker" position="bottom">
+                <van-datetime-picker ref="picker"
+                    type="datehour"
+                    title="选择年月日小时"
+                    @confirm="onConfirm"
+                    @cancel="showPicker = false"
+                    @change="checkScroll"
+                    :formatter="formatter"
+                />
+                <!-- <van-area title="标题" :area-list="areaList" @confirm="onConfirm" /> -->
+            </van-popup>
+             <van-field name="uploader" :disabled="true" label="预警图片" >
+                <template #input>
+                    <van-uploader :show-upload="false"  :deletable="false" v-model="warningForm.picture" />
+                </template>
+            </van-field>
+        </div>
+        <div class="card">
+            <van-field
+                v-model="warningForm.relevanceUser"
+                name="关联人员"
+                :disabled="true"
+                label="关联人员"
+                placeholder="关联人员"
+                :rules="[{ required: true, message: '请填写关联人员' }]"
+            />
+            <van-field
+                v-model="warningForm.relevanceDegree"
+                name="相似程度"
+                :disabled="true"
+                label="相似程度"
+                placeholder="相似程度"
+                :rules="[{ required: true, message: '请填写相似程度' }]"
+            />
+            <van-field name="uploader" :disabled="true" label="人脸照片"  v-if="warningForm.relevanceUser!='未知人员'&&warningForm.relevanceUser">
+                <template #input>
+                    <van-uploader  v-if="isface" :deletable="false" :show-upload="false"  v-model="warningForm.relevancePicture">
+                        <template #preview-cover="{ url }">
+                            <img muted autoplay :src="url" style="width:80px;height:80px;object-fit:cover;"/>
+                        </template>
+                    </van-uploader>
+                </template>
+            </van-field>
+        </div>
+        <div v-show="isCommit">
+            <div class="card">
+                <van-field name="radio" label="处理结果" >
+                    <template #input>
+                        <van-radio-group v-model="commitForm.result" direction="horizontal">
+                        <van-radio name="finish">正常处置</van-radio>
+                        <van-radio name="error">误报退回</van-radio>
+                        </van-radio-group>
+                    </template>
+                </van-field>
+            </div>
+            <div class="card"  v-if="commitForm.result=='finish'">
+                <van-field
+                    v-model="commitForm.handleNote"
+                    name="处理记录"
+                    label="处理记录"
+                    type="textarea"
+                    placeholder="处理记录"
+                    :rules="[{ required: true, message: '请填写处理记录' }]"
+                />
+                <van-field name="uploader2" label="图片上传">
+                    <template #input>
+                        <van-uploader :max-count="5"
+                            upload-text="最多上传五个" v-model="commitForm.pictures" />
+                    </template>
+                </van-field>
+            </div>
+            <div style="margin: 0.5rem" v-show="commitForm.result=='finish'">
+                <van-button round block type="info" @click="onSubmit('handle')">一键处置</van-button>
+            </div>
+            <div style="margin: 0.5rem">
+                <van-button round block type="info" native-type="submit" @click="onSubmit('commit')">提交</van-button>
+            </div>
+        </div>
+        <!-- </van-form> -->
+        <!-- <tab-bar :index="1"></tab-bar> -->
+    </div>
+</template>
+
+<script>
+// import tabBar from "@/components/TabBar";
+import LHeader from '@/components/header.vue'
+import { getFun,postFun ,getFunTwo,postFunTwo,putFunTwo} from '@/service/table'
+import { setUserInfo ,getUserInfo,} from '@/utils/userInfo'
+export default {
+    name: 'list',
+    components: {
+        "LHeader":LHeader,
+        // "tabBar":tabBar
+    },
+    data() {
+        return {
+            isCommit:true,//是否显示提交模块
+            /* 预警处理form表单 */
+            warningForm:{
+                // scene:'有限空间作业-123123123123',//所属场景
+                // level:'一级预警',//预警等级
+                // type:'安全帽佩戴预警',//预警类型
+                // time:'2021-10-22 17:23:23',//预警时间
+                // warningImg:[],//预警图片
+                // person:'王晓丽',//关联人员
+                // lookLike:'98.23',//相似程度
+                // faceImg:[],//人脸照片
+            },
+            isface:false,//是否显示人脸照片
+            commitForm:{
+                result:'finish',//预警结果
+                handleNote:'',//处理记录
+                pictures:[]//图像上传
+            },
+            userId:'',//用户登录ID
+            warningId:'',//预警处理id
+            showPicker:false,//默认是否展示弹出层
+            text:'预警记录编辑',//顶部文本
+        }
+    },
+    mounted() {
+        //判断是否从工单跳转进来
+        if(this.$route.query.name=="noteList"){
+            this.isCommit=false
+            this.text='工单未处置记录'
+        }
+        if(sessionStorage.getItem('warningNoteId')){
+            this.warningId=sessionStorage.getItem('warningNoteId')
+        }
+        if(getUserInfo())
+        this.userId=getUserInfo().userId
+        this.init()
+    },
+    methods: {
+        //请求预警处理详情接口
+        init(){
+            this.warningForm={}
+            getFunTwo('app/push/details/'+this.warningId).then((Response)=>{
+                this.warningForm=JSON.parse(JSON.stringify(Response.data))
+                //处理图片数据
+                if(Response.data.relevancePicture!=""){
+                    this.isface=true
+                    this.warningForm.relevancePicture=[]
+                    this.warningForm.relevancePicture.push({url:Response.data.relevancePicture})
+                }else{
+                    this.isface=false
+                }
+                this.warningForm.picture=[]
+                this.warningForm.picture.push({url:Response.data.picture})
+             
+            })
+
+        },
+        /* 下拉框文本溢出动画效果 */
+        checkScroll () {
+            this.$nextTick(() => {
+                // 获取选中元素
+                let selectedItems = [...document.querySelectorAll('.van-picker-column__item--selected')]
+                selectedItems.forEach(item => {
+                let child = item.querySelector('.van-ellipsis')
+                if (child.offsetWidth > item.offsetWidth) { // 判断child文字宽度
+                    item.classList.add('scroll')
+                } else {
+                    item.classList.remove('scroll')
+                }
+                })
+            })
+        },
+        //时间转换
+        formatter(type, val) {
+            if (type === 'month') {
+                return `${val}月`;
+            } else if (type === 'day') {
+                return `${val}日`;
+            }
+                return val;
+        },
+        onFailed(errorInfo){
+            this.$toast.fail('提交失败,请完善信息')
+        },
+        /* 问题提交 */
+        onSubmit(value){
+            var obj={}
+            if(value=='handle'){
+                obj={
+                    id:this.warningId,
+                    finishUserId:this.userId,
+                    finishContent:'已处置',
+                    finishPictures:[],
+                    status:this.commitForm.result
+                }
+            }else if(value=='commit'){
+                var pictures=[]
+                this.commitForm.pictures.forEach((item)=>{
+                    if(item.content){
+                        pictures.push(item.content)
+                    }
+                })
+                obj={
+                    id:this.warningId,
+                    finishUserId:this.userId,
+                    finishContent:this.commitForm.handleNote,
+                    finishPictures:pictures,
+                    status:this.commitForm.result
+                }
+            }
+            // var pictures=[];
+            // // value.uploader.forEach((item) => {
+            // //     pictures.push(item.content)
+            // // });
+            // var videos=[];
+            // // value.uploader2.forEach((item) => {
+            // //     videos.push(item.content)
+            // // });
+            this.$dialog.confirm({
+                title: '提示',
+                message: '确定提交检查问题？',
+            }).then(()=>{
+                this.$toast.loading({
+                    message:'提交中...',
+                    forbidClick: true,
+                    loadingType: 'spinner',
+                    duration: 0
+                })
+                putFunTwo('app/push',obj).then((Response)=>{
+                    this.$toast.clear()
+                    this.$toast.success({
+                        message:'提交成功',
+                        duration: 2000
+                    })
+                    this.$router.push('/warningNote')
+                }).catch(()=>{
+                    this.$toast.clear()
+                    this.$toast.fail('提交失败,请稍后再试')
+                })
+            }).catch(()=>{
+
+            })
+
+        },
+        /*  确认选择级联菜单的回显数据处理 */
+        onConfirm(){
+            //获取回显的部门值和部门id数组
+            this.value=""
+            this.ids=[]
+            var valueList=this.$refs.picker.getValues()
+            valueList.forEach((item)=>{
+                console.log(item)
+                this.ids.push(item.id)
+                this.value+=item.text+' / '
+            })
+            this.showPicker = false;
+        }
+    }
+}
+</script>
+<style lang="less" scoped>
+    .card{
+        width:90%;
+        box-shadow: 0px 0px 10px 2px #F3F3F3;
+        padding: 0.25rem;
+        margin:0.4rem auto;
+        background: white;
+        border-radius: 4%;
+    }
+    .card div{
+        font-size: 0.4rem;
+        // line-height: 0.8rem;
+    }
+/deep/ .van-picker-column__item--selected {
+/* 重写选中后的效果 */
+.van-ellipsis {
+    text-overflow: unset;
+    overflow: visible;
+}
+/* 增加scroll类 */
+&.scroll > .van-ellipsis {
+    animation: move 4s linear infinite;
+}
+}
+@keyframes move {
+    0% { transform: translateX(100%); }
+    100% { transform: translateX(-100%); }
+}
+/deep/ .van-field__label {
+    width: 4.2em !important;
+    color: #646566 !important;
+}
+.level /deep/ .van-field__control{
+    color: red;
+}
+/deep/ .van-field__control:disabled{
+    -webkit-text-fill-color:black
+}
+</style>

src/views/warningNote/warningNoteList/index.vue

+
+<template>
+    <div>
+        <LHeader v-bind:text="text"></LHeader>
+        <van-search
+            v-model="value"
+            placeholder="搜索"
+            @search="onSearch" 
+            >
+        </van-search>
+        <van-tabs v-model="active" type="card" title-inactive-color="#2980F7" color="#2980F7"  @change="tabChange">
+            <van-tab  v-for="(item1,index1) in tabList"  :key="index1" :title="item1.title">
+                <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
+             <van-list
+                v-model="item1.loading"
+                :finished="item1.finished"
+                finished-text="没有更多了"
+                @load="onLoad()"
+            >
+                <div class="card"  v-for="(item,index) in item1.list"  :key="index"  @click="warningClick(item)">
+                    <div class="card-header">
+                        <van-row>
+                            <van-col span="10">
+                                <span class="card-header-left">{{item.orderType+'预警'}}</span>
+                            </van-col>
+                            <van-col span="6" class="card-header-medium">
+                                <van-tag size="medium" type="danger" v-if="item.gradeId==1">一级预警</van-tag>
+                                <van-tag size="medium" type="warning" v-else-if="item.gradeId==2">二级预警</van-tag>
+                                <van-tag size="medium" type="success" v-else-if="item.gradeId==3">三级预警</van-tag>
+                            </van-col>
+                            <van-col span="8" class="card-header-right">
+                                <van-tag size="medium" type="success" plain v-if="item.status=='error'">已处置</van-tag>
+                                <van-tag size="medium" type="success" plain v-if="item.status=='finish'">已处置</van-tag>
+                                <van-tag size="medium" type="danger" plain v-else-if="item.status=='wait'">未处置</van-tag>
+                            </van-col>
+                        </van-row>
+                    </div>
+                    <div class="card-body">
+                        {{util.timestampToTime(item.alarmTime,'DT1',true)}}&nbsp;&nbsp;
+                        {{ item.gradeName}}&nbsp;&nbsp; 
+                        {{item.orderNo}}&nbsp;&nbsp; 
+                        {{item.gradeType+'请及时处理'}}
+                    </div>
+                </div>
+                </van-list>
+        </van-pull-refresh>
+            </van-tab>
+        </van-tabs>
+        <!-- <tab-bar :index="1"></tab-bar> -->
+    </div>
+</template>
+<script>
+// import tabBar from "@/components/TabBar";
+import LHeader from "@/components/header";
+import { getFun,postFun,postFunTwo,getFunTwo } from '@/service/table'
+import { setUserInfo ,getUserInfo} from '@/utils/userInfo'
+export default {
+    name: 'warning',
+    components: {
+        // tabBar,
+        LHeader
+    },
+    data() {
+        return {
+            orderId:'',//工单ID
+            total:0,//总条数
+            page:1,//页码
+            psize:5,//页数量
+            loading: false,
+            finished: false,
+            refreshing:false,
+            type:'',//处置类型
+            userId:'',//用户登录ID
+            tabList:[
+                {
+                    title:'全部',
+                    type:"",
+                    loading: false,
+                    finished: false,
+                    refreshing:false,
+                    list:[]
+                    // ishandle:'all',
+                },
+                {
+                    title:'已处置',
+                    type:"finish",
+                    loading: false,
+                    finished: false,
+                    refreshing:false,
+                    list:[]
+                    // ishandle:true,
+                },
+                {
+                    title:'未处置',
+                    type:"wait",
+                    loading: false,
+                    finished: false,
+                    refreshing:false,
+                    list:[]
+                    // ishandle:false,
+                }
+            ],//切换标题数组
+            active:0,//默认切换状态
+            value:'',//搜索框值
+            text:'工单预警记录',//顶部文本
+        }
+    },
+    mounted() {
+        if(getUserInfo())
+        this.userId=getUserInfo().userId
+        // this.init()
+        if(sessionStorage.getItem('orderId')){
+            this.orderId=sessionStorage.getItem('orderId')
+        }
+    },
+    methods: {
+        init(){
+            var obj={
+                page:this.page,
+                psize:this.psize,
+                type:this.type,
+                desc:this.value
+            }
+            getFunTwo('app/push/list/no/'+this.orderId,obj).then((Response2)=>{
+                if(Response2.code==200){
+                    Response2.data.list.forEach((item)=>{
+                        this.tabList.forEach((i)=>{
+                            if(i.type==this.type){
+                                i.list.push(item)
+                            }
+                        })
+                    })
+                    this.page=Response2.data.pageNum
+                    this.total=Response2.data.totalCount
+                    //防止分页超出操作
+                    if(!(this.page*5-this.total>=0)){
+                         this.page++;
+                    }
+                    //遍历哪个类型的分页加载函数
+                    this.tabList.forEach((i)=>{
+                        if(i.type==this.type){
+                            if (i.list.length>=this.total) {
+                                i.finished = true;
+                                console.log(this.tabList)
+                            }
+                            i.loading = false;
+                        }
+                    })
+                }
+            })
+        },
+        //切换改变请求查询
+        tabChange(title,name){
+            this.page=1
+            this.tabList.forEach((i)=>{
+                i.list=[]
+            })
+            this.type=""
+            if(name=='全部'){
+                this.type=""
+            }else if(name=='已处置'){
+                this.type="finish"
+            }else if(name=='未处置'){
+                this.type="wait"
+            }
+            this.tabList.forEach((i)=>{
+                if(i.type==this.type){
+                    i.loading=true
+                    i.finished=false
+                }
+            })
+            this.onLoad();
+        },
+        //搜索查询
+        onSearch(){
+            this.tabList.forEach((i)=>{
+                i.list=[]
+            })
+            this.page=1
+            this.init()
+        },
+        //点击卡片跳转
+        warningClick(item){
+            sessionStorage.setItem('warningNoteId',item.id)
+            if(item.status=='wait'){
+                this.$router.push({path:'/warningNoteEdit',query:{name:'noteList'}})
+            }else if(item.status=='error'||item.status=='finish'){
+                this.$router.push({path:'/warningNoteDetail',query:{name:'noteList'}})
+            }
+            
+        },
+        //下拉页面刷新
+        onRefresh() {
+            // 清空列表数据
+            this.page=1
+            this.tabList.forEach((i)=>{
+                if(i.type==this.type){
+                    i.loading=true
+                    i.finished=false
+                }
+            })
+            this.onLoad();
+        },
+        //上拉页面加载数据
+        onLoad(value) {
+            this.tabList.forEach((i)=>{
+                if(i.type==this.type){
+                    if (i.refreshing) {
+                        i.list=[]
+                        i.refreshing = false;
+                    }
+                }
+            })
+            this.init()
+        },
+    }
+}
+</script>
+<style lang="less" scoped>
+    /* 搜索框 */
+   .van-search{
+        margin:0.26667rem auto 0;
+        width: 95%;
+        border-radius: 4%;
+        border-radius: 5px;
+        padding: 5px 12px;
+    }
+    .van-search__content {
+      background-color: #ffffff;
+    }
+    /* tab栏 */
+    .van-tabs{
+        margin-top: 0.4rem;
+    }
+    /deep/ .van-tab--active{
+        border-radius: 5px !important;
+    }
+    /deep/ .van-tabs__nav--card{
+        border: none !important;
+        border-radius: 5px !important
+    }
+    /* 卡片系列 */
+    .card{
+        width:90%;
+        box-shadow: 0px 0px 10px 2px #F3F3F3;
+        padding: 0.25rem;
+        margin:0.4rem auto;
+        background: white;
+        border-radius: 4%;
+    }
+    .card div{
+        font-size: 0.4rem;
+        line-height: 0.7rem;
+    }
+    .card-header-left{
+        font-weight: bolder;
+        font-size: 0.45rem;
+    }
+    .card-header-right{
+        text-align: right;
+    }
+    .card-header-medium{
+        text-align: left;
+    }
+</style>
\ No newline at end of file