项目初始化

README.md

@@ -1,21 +1,2 @@
-# jry
+# ITSM3-handle-wechat
 
-> jryVue
-
-## Build Setup
-
-``` bash
-# install dependencies
-npm install
-
-# serve with hot reload at localhost:8080
-npm run dev
-
-# build for production with minification
-npm run build
-
-# build for production and view the bundle analyzer report
-npm run build --report
-```
-
-For a detailed explanation on how things work, check out the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).

build/webpack.base.conf.js

@@ -64,6 +64,10 @@ module.exports = {
           limit: 90000,
           name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
         }
+      },
+      {
+        test: /\.less$/,
+        loader: "style-loader!css-loader!less-loader"
       }
     ]
   },

build/webpack.prod.conf.js

@@ -35,7 +35,10 @@ const webpackConfig = merge(baseWebpackConfig, {
     new UglifyJsPlugin({
       uglifyOptions: {
         compress: {
-          warnings: false
+          warnings: false,
+            // 以下两行配置，关闭 debug 和 console
+          drop_debugger: true,
+          drop_console: true
         }
       },
       sourceMap: config.build.productionSourceMap,
@@ -124,7 +127,9 @@ if (config.build.productionGzip) {
 
   webpackConfig.plugins.push(
     new CompressionWebpackPlugin({
-      asset: '[path].gz[query]',
+     asset: '[path].gz[query]',// 原配置报错：ValidationError: Compression Plugin Invalid Options
+    //  filename: '[path].gz[query]', // 将asset 修改为 filename 后又报错：TypeError: Cannot read property 'emit' of undefined，执行以下操作：npm install --save-dev compression-webpack-plugin@1.1.12
+     
       algorithm: 'gzip',
       test: new RegExp(
         '\\.(' +

config/index.js

@@ -3,7 +3,7 @@
 // see http://vuejs-templates.github.io/webpack for documentation.
 
 const path = require('path')
-
+const host=require('../src/request/host')
 module.exports = {
   dev: {
     // 新加的一行
@@ -12,27 +12,22 @@ module.exports = {
     assetsSubDirectory: 'static',
     assetsPublicPath: '/',
     proxyTable: {
-      // '/service': {//自定义名字，代表的是以下target中的内容
-      //   target: 'http://192.168.3.100:8080/service/',//微信
-      //   // target: 'http://weixintest5.ngser.dashitech.com/service/',//微信
-      //   // target: 'http://localhost:8080/service/',//微信
-      //   // target: 'http://192.168.199.165:8080/service/',//黄伟
-      //   // target: 'http://192.168.3.100:8080/service/',//100
-      //   changeOrigin: true,//是否允许跨域
-      //   pathRewrite: {
-      //     '^/service': ''
-      //   }
-      // }
+      '/service': {//自定义名字，代表的是以下target中的内容
+        target: host.host+'/service/',//微信
+        changeOrigin: false,//是否允许跨域
+        pathRewrite: {
+          '^/service': ''
+        }
+      }
     },
 
     // Various Dev Server settings
     host: 'localhost', // can be overwritten by process.env.HOST
-    // host: '127.0.0.1', // can be overwritten by process.env.HOST
-    // host: '192.168.199.177', // can be overwritten by process.env.HOST
+    // host: '192.168.3.170', // can be overwritten by process.env.HOST
     // host: '192.168.31.32', // can be overwritten by process.env.HOST
     // host: '192.168.31.32', // can be overwritten by process.env.HOST
     // host: '0.0.0.0', // can be overwritten by process.env.HOST
-    port: 8081, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
+    port: 8082, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
     // 住了的4行
     autoOpenBrowser: true,
     // errorOverlay: true,
@@ -70,7 +65,7 @@ module.exports = {
      * Source Maps
      */
 
-    productionSourceMap: true,
+    productionSourceMap: false,// 把该项的配置修改为 false，关闭 source map
     // https://webpack.js.org/configuration/devtool/#production
     devtool: '#source-map',
 
@@ -78,7 +73,7 @@ module.exports = {
     // Surge or Netlify already gzip all static assets for you.
     // Before setting to `true`, make sure to:
     // npm install --save-dev compression-webpack-plugin
-    productionGzip: false,
+    productionGzip: true,// 开启 gzip 功能, 开启 GZIP 压缩，进一步压缩 js 和 css 文件的体积
     productionGzipExtensions: ['js', 'css'],
 
     // Run the build command with an extra argument to

index.html

@@ -8,7 +8,7 @@
         content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, viewport-fit=cover">
     <!-- <meta name="viewport" content="width=device-width,intial-scale=1,user-
         scalable=no"> -->
-    <title>微信报修</title>
+    <title>微信运维</title> 
     <style>
       html{
         background-color: white;

package.json

@@ -12,7 +12,8 @@
   "dependencies": {
     "axios": "^0.18.0",
     "cube-ui": "^1.12.10",
-    "js-base64": "^3.6.1",
+    "less": "^3.9.0",
+    "less-loader": "^4.1.0",
     "lib-flexible": "^0.3.2",
     "vue": "^2.5.2",
     "vue-axios": "^2.1.4",
@@ -33,6 +34,7 @@
     "babel-preset-env": "^1.3.2",
     "babel-preset-stage-2": "^6.22.0",
     "chalk": "^2.0.1",
+    "compression-webpack-plugin": "^1.1.12",
     "copy-webpack-plugin": "^4.0.1",
     "css-loader": "^0.28.0",
     "extract-text-webpack-plugin": "^3.0.0",

src/App.vue

@@ -1,30 +1,128 @@
 <template>
-	<div id="app">
-		<router-view></router-view>
-	</div>
+  <div id="app">
+    <router-view></router-view>
+  </div>
 </template>
 
 <script>
 export default {
-	name: 'app',
-	components: {
-		
-	},
-	methods:{
+  name: "app",
+  components: {},
+  methods: {}
+};
+</script>
 
-	},
+<style lang='less'>
+* {
+  font-family: "微软雅黑";
+}
+.fl {
+  float: left;
+}
+.fr {
+  float: right;
+}
+.overflowEllipsis2 {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical !important;
+  text-overflow: -o-ellipsis-lastline;
+}
+.btn {
+  display: inline-block;
+  height: 0.36rem;
+  line-height: 0.36rem;
+  font-size: 0.24rem;
+  text-align: center;
+  border-radius: 0.3rem;
+  border-width: 0.01rem;
+  border-style: solid;
+  padding: 0 0.16rem;
+  &.daipingjia {
+    border-color: #e0872c;
+    color: #e0872c;
+    background: #fbf3e9;
+  }
+  &.daiqiangdan {
+    border-color: #991f00;
+    color: #991f00;
+    background: #f4e8e5;
+  }
+  &.yiguanbi {
+    border-color: #333;
+    color: #333;
+    background: #eee;
+  }
+  &.daishenhe {
+    border-color: #825b00;
+    color: #825b00;
+    background: #f2eee5;
+  }
+  &.chulizhong {
+    border-color: #003057;
+    color: #003057;
+    background: #e5eaee;
+  }
+  &.yijiejue {
+    border-color: #40a19c;
+    color: #40a19c;
+    background: #ebf5f5;
+  }
+  &.chongxinzhipai {
+    border-color: #48a843;
+    color: #48a843;
+    background: #ecf6ec;
+  }
+  &.daijiedan {
+    border-color: #c2654e;
+    color: #c2654e;
+    background: #faf4f2;
+  }
+  &.zhixingzhong {
+    border-color: #005395;
+    color: #005395;
+    background: #e5edf4;
+  }
+  &.yiwancheng {
+    border-color: #056b00;
+    color: #056b00;
+    background: #e6f0e5;
+  }
 }
 
-</script>
-
-<style>
-*{
-	font-family: "微软雅黑"
+// 巡检详情按钮
+.inspedtionDetail {
+  .cube-switch-ui::before {
+    border-color: #ccc !important;
+    background-color: green !important;
+  }
+  .abnormal {
+    .cube-switch-ui{
+      border-color: #ccc !important;
+      background-color: red !important;
+    }
+  }
 }
-.noDataFont{
-	height: .5rem;
-	line-height: .5rem;
-	color: #666666;
-	text-align: center
+// 新建事件按钮
+.newIncident {
+  .cube-btn.cube-btn_active,
+  .cube-btn:active {
+    background-color: #fff !important;
+  }
+}
+
+// font-color 字体颜色
+i.iconfont {
+  &.icon-yiyuqi {
+    color: #991f00;
+  }
+  &.icon-jijiang {
+    color: #a37200;
+  }
+  &.icon-zhengchang {
+    color: #056a00;
+  }
 }
-</style>
+</style>

src/components/form/form.vue

@@ -342,7 +342,7 @@
           -webkit-text-stroke-width: 0.2px
           -moz-osx-font-smoothing: grayscale
     .cube-form-label
-      width: 100px
+      width: 125px
       padding-right: 10px
     .cube-checkbox-group, .cube-radio-group
       &::before, &::after

src/http/index.js

@@ -1,42 +0,0 @@
-import axios from 'axios'
-import Vue from 'vue'
-let domainName = document.domain;//域名
-let protocolName = document.location.protocol;//http协议
-// axios.defaults.baseURL='http://localhost';
-// axios.defaults.timeout = 5000;
-axios.defaults.baseURL = protocolName + '//' + domainName;
-// axios.defaults.baseURL='http://itil.hnu.edu.cn';
-// axios.defaults.baseURL='http://itsmpoc.dashitech.com';
-Vue.prototype.$http = axios
-Vue.prototype.$host = protocolName + '//' + domainName
-//http response 拦截器
-axios.interceptors.response.use(
-  response => {
-    return response;
-  },
-  async (error) => {
-    let err = error.response;
-    console.log(err);
-    if (404 === error.response.status && err.request.responseURL.includes('index.html')) {
-      let res1 = await getLoginType();
-      let loginConfig = localStorage.getItem('loginConfig');
-      if (res1.status == 200 && res1.data.status == 200 && res1.data.data == 'web' && loginConfig) {
-        let { username, password } = JSON.parse(loginConfig);
-        let res2 = await zlogin({ username, password });
-        if (res2.status == 200 && res2.data.state == 200) {
-          location.reload();
-        }
-      }
-    } else {
-      return Promise.reject(error);
-    }
-  }
-);
-// 获取报修人登录方式
-function getLoginType() {
-  return axios.post("service/wechat/getLoginType", {});
-}
-// 账号密码登录
-function zlogin(obj) {
-  return axios.post("service/auth/reqlogin", obj);
-}

src/main.js

@@ -3,13 +3,21 @@
 import Vue from 'vue'
 import App from './App'
 import router from './router'
+import axios from 'axios'
 import Cube from './index'
 import 'lib-flexible'
+// import host from '../src/request/host'
 // import {get,post} from './service/http'
-import './http'
 Vue.use(Cube)
+// 修改请求接口（删掉地址栏中的app2）
+let domainName = document.domain;//域名
+let protocolName = document.location.protocol;//http协议
+axios.defaults.baseURL=protocolName + '//' + domainName;
 
+// axios.defaults.timeout = 5000;
+Vue.prototype.$http= axios
 Vue.config.productionTip = false
+Vue.prototype.$host = protocolName + '//' + domainName;
 
 /* eslint-disable no-new */
 new Vue({

src/request/host.js

@@ -0,0 +1,5 @@
+// let domainName = document.domain;//域名
+// let protocolName = document.location.protocol;//http协议
+// module.exports = {
+//   host: protocolName + '//' + domainName
+// }

src/router/index.js

@@ -3,24 +3,31 @@ import Router from 'vue-router'
 import Login from './../views/Login.vue'
 import Main from './../views/Main.vue'
 import Indes from './../views/indes.vue'//首页
-import Repair from './../views/repair.vue'//我的报修
-import My from './../views/my.vue'//设置
+import My from './../views/my.vue'//我的
 import IncidentList from './../views/incidentList.vue'//事件列表
-import MyModify from './../views/myModify.vue'//个人信息修改
+import NewIncident from './../views/newIncident.vue'//新建事件
+import Inspection from './../views/inspection.vue'//巡检列表
+import InspectionDetail from './../views/inspectionDetail.vue'//巡检详情
+import InspectionDoneDetail from './../views/inspectionDoneDetail.vue'//已完成巡检详情
 import NoticeDetails from './../views/noticeDetails.vue'//公告详情
 import NoticeList from './../views/noticeList.vue'//公告列表
-import KnowList from './../views/knowList.vue'//知识库列表
-import KnowDetails from './../views/knowDetails.vue'//知识库详情
-import Guide from './../views/guide.vue'//服务指南
-import IncidentDetails from './../views/incidentDetails.vue'//事件详情
-import CommonProblem from './../views/commonProblem.vue'//常见问题
-import Maintenance from './../views/maintenance.vue'//维修范围
-import Evaluate from './../views/evaluate.vue'//评价页面
+import KnowList from './../views/knowList.vue'//知识库列表（点赞）
+import KnowDetails from './../views/knowDetails.vue'//知识库详情（点赞）
+import ReferenceList from './../views/referenceList.vue'//知识库列表（引用）
+import ReferenceDetail from './../views/referenceDetail.vue'//知识库详情（引用）
+import Guide from './../views/guide.vue'//公告公示
+import GuideDetail from './../views/guideDetail.vue'//常见问题
+import Order from './../views/order.vue' //接单页面
+import GrabSheet from './../views/grabSheet.vue' //抢单页面
+import AgainAssign from './../views/againAssign.vue' //重新指派页面
+import Processing from './../views/processing.vue' //处理中页面
+import Solved from './../views/solved.vue' //已解决页面
+import Closed from './../views/closed.vue' //已关闭页面
+import WaitConfirm from './../views/waitConfirm.vue' //待审核页面
 Vue.use(Router)
 
 export default new Router({
-  routes: [
-    {
+  routes: [{
       path: '/login',
       component: Login,
       name: '',
@@ -31,93 +38,187 @@ export default new Router({
       component: Main,
       name: '',
       hidden: true,
-      children: [
-        { path: '/', redirect: '/main/indes' },
+      children: [{
+          path: '/',
+          redirect: '/main/indes'
+        },
         {
           path: '/main/indes',
           component: Indes,
-          meta: { allowBack: false },
+          meta: {
+            allowBack: false
+          },
         },
         {
           path: '/main/incidentList',
-          name:'IncidentList',
+          name: 'IncidentList',
           component: IncidentList,
-          meta: { allowBack: false },
+          meta: {
+            allowBack: false
+          },
+          children: []
+        },
+        {
+          path: '/main/inspection',
+          name: 'Inspection',
+          component: Inspection,
+          meta: {
+            allowBack: false
+          },
+        },
+        {
+          path: '/main/inspectionDoneDetail',
+          name: 'InspectionDoneDetail',
+          component: InspectionDoneDetail,
+          meta: {
+            allowBack: false
+          },
+        },
+        {
+          path: '/main/inspectionDetail',
+          name: 'InspectionDetail',
+          component: InspectionDetail,
+          meta: {
+            allowBack: false
+          },
         },
         {
           path: '/main/my',
           component: My,
-          meta: { allowBack: false },
+          meta: {
+            allowBack: false
+          },
         },
       ]
     },
     {
-      path: '/repair',
-      component: Repair,
-      meta: { allowBack: false },
+      path: '/order',
+      name: 'Order',
+      component: Order,
+      meta: {
+        allowBack: false
+      },
+    }, {
+      path: '/grabSheet',
+      name: 'GrabSheet',
+      component: GrabSheet,
+      meta: {
+        allowBack: false
+      },
     },
     {
-      path: '/myModify/:data',
-      name:'MyModify',
-      component: MyModify,
-      meta: { allowBack: false },
+      path: '/againAssign',
+      name: 'AgainAssign',
+      component: AgainAssign,
+      meta: {
+        allowBack: false
+      },
+    },
+    {
+      path: '/processing',
+      name: 'Processing',
+      component: Processing,
+      meta: {
+        allowBack: false
+      },
+    },
+    {
+      path: '/solved',
+      name: 'Solved',
+      component: Solved,
+      meta: {
+        allowBack: false
+      },
+    },
+    {
+      path: '/closed',
+      name: 'Closed',
+      component: Closed,
+      meta: {
+        allowBack: false
+      },
+    },
+    {
+      path: '/waitConfirm',
+      name: 'WaitConfirm',
+      component: WaitConfirm,
+      meta: {
+        allowBack: false
+      },
+    },
+    {
+      path: '/newIncident',
+      name: 'NewIncident',
+      component: NewIncident,
+      meta: {
+        allowBack: false
+      },
     },
     {
       path: '/noticeDetails/:data',
-      name:'NoticeDetails',
+      name: 'NoticeDetails',
       component: NoticeDetails,
-      meta: { allowBack: false },
+      meta: {
+        allowBack: false
+      },
     },
     {
       path: '/noticeList',
       component: NoticeList,
-      meta: { allowBack: false },
+      meta: {
+        allowBack: false
+      },
     },
     {
       path: '/knowList',
-      name:'KnowList',
+      name: 'KnowList',
       component: KnowList,
-      meta: { allowBack: false },
+      meta: {
+        allowBack: false
+      },
     },
     {
       path: '/knowDetails/:data',
-      name:'KnowDetails',
+      name: 'KnowDetails',
       component: KnowDetails,
-      meta: { allowBack: false },
-    },
-    {
-      path: '/guide',
-      component: Guide,
-      meta: { allowBack: false },
+      meta: {
+        allowBack: false
+      },
     },
     {
-      path: '/incidentDetails/:data',
-      name:'IncidentDetails',
-      component: IncidentDetails,
+      path: '/referenceList',
+      name: 'ReferenceList',
+      component: ReferenceList,
       meta: { allowBack: false },
     },
     {
-      path: '/commonProblem/:data',
-      name:'CommonProblem',
-      component: CommonProblem,
+      path: '/referenceDetail/:data',
+      name: 'ReferenceDetail',
+      component: ReferenceDetail,
       meta: { allowBack: false },
     },
+    
     {
-      path: '/evaluate/:data',
-      component: Evaluate,
-      name:'Evaluate',
-      meta: { allowBack: false },
+      path: '/guide',
+      component: Guide,
+      meta: {
+        allowBack: false
+      },
     },
     {
-      path: '/maintenance',
-      name:'Maintenance',
-      component: Maintenance,
-      meta: { allowBack: false },
+      path: '/guideDetail',
+      name:'GuideDetail',
+      component: GuideDetail,
+      meta: {
+        allowBack: false
+      },
     },
     {
       path: '*',
       hidden: true,
-      redirect: { path: '/login' }
+      redirect: {
+        path: '/login'
+      }
     }
   ]
 })

src/views/App.vue

@@ -22,4 +22,5 @@ export default {
 .bgColor{
       background-color: white
   }
+  
 </style>

src/views/Inspection.vue

@@ -0,0 +1,618 @@
+<template>
+  <div class="bgColor">
+    <div slot="content" class="scroll-wrapper">
+      <div class="demo">
+        <div class="header">巡检列表</div>
+        <div class="seatchHeader">
+          <div class="search fl">
+            <input
+              class="searchInp"
+              type="text"
+              v-model="title"
+              placeholder="搜索"
+              @input="searchData()"
+            >
+          </div>
+          <button class="selectBtn fr" @click="showPicker">筛选</button>
+        </div>
+        <div class="scroll-list-wrap">
+          <cube-scroll
+            ref="scroll"
+            :data="items"
+            :options="options"
+            @pulling-down="onPullingDown"
+            @pulling-up="onPullingUp"
+          >
+            <!-- <cube-select
+              class="fr"
+              v-model="stateValue"
+              :options="stateData"
+              @change="stateChange()"
+            ></cube-select>-->
+            <div class="conentBox">
+              <div class="conent" v-for="item in items" @click="toDetail(item)">
+                <div class="head">
+                  <p>
+                    <i class="iconfont icon-zuixinbaoxiu newPapir"></i>
+                    巡检单号：{{item.sign}}
+                    <span
+                      :class="{'btn':true, 'zhixingzhong':item.state==0,'yiwancheng':item.state==1}"
+                    >{{item.stateName}}</span>
+                  </p>
+                </div>
+                <div class="center">
+                  <p>
+                    <span class="fl">巡检主题：</span>
+                    <span class="grayFont overflowEllipsis2">{{item.inspection.title}}</span>
+                  </p>
+                </div>
+                <div class="bottom">
+                  <i
+                    :class="{'iconfont':true ,'icon-yiyuqi':item.overdueType==0 ,'icon-zhengchang':item.overdueType==1,'icon-jijiang':item.overdueType==2,'newPapir':true}"
+                  ></i>
+                  <span>逾期时间：{{item.overdueTime}}</span>
+                </div>
+              </div>
+              <div class="wushuju" v-show="wushuju">
+                <img src="./../../static/images/wushuju.svg" alt>
+                <p>暂无巡检</p>
+              </div>
+            </div>
+            <template v-if="customPullDown" slot="pulldown" slot-scope="props">
+              <div
+                v-if="props.pullDownRefresh"
+                class="cube-pulldown-wrapper"
+                :style="props.pullDownStyle"
+              >
+                <div
+                  v-show="props.beforePullDown"
+                  class="before-trigger"
+                  :style="{paddingTop: props.bubbleY + 'px'}"
+                >
+                  <span :class="{rotate: props.bubbleY > pullDownRefreshThreshold - 40}">↓</span>
+                </div>
+                <div class="after-trigger" v-show="!props.beforePullDown">
+                  <div v-show="props.isPullingDown" class="loading">
+                    <cube-loading></cube-loading>
+                  </div>
+                  <div v-show="!props.isPullingDown" class="text">
+                    <span class="refresh-text">更新成功</span>
+                  </div>
+                </div>
+              </div>
+            </template>
+          </cube-scroll>
+        </div>
+      </div>
+    </div>
+    <load-ing v-if="!items.length&&!wushuju"></load-ing>
+  </div>
+</template>
+<script>
+import Vue from "vue";
+import CubePage from "../components/cube-page.vue";
+import SwitchOption from "../components/switch-option";
+import InputOption from "../components/input-option";
+import SelectOption from "../components/select-option";
+import { formatDate } from "./../components/js/date.js";
+import LoadIng from "./../views/loading.vue";
+export default {
+  data() {
+    return {
+      //   items: _foods,
+      loginUser: JSON.parse(localStorage.getItem("loginUser")),
+      valConfig: JSON.parse(localStorage.getItem("valConfig")) - 0, //报修主体
+      items: [],
+      pullDownRefresh: true,
+      pullDownRefreshThreshold: 60,
+      pullDownRefreshStop: 40,
+      pullDownRefreshTxt: "Refresh success",
+      pullUpLoad: true,
+      pullUpLoadThreshold: 0,
+      pullUpLoadMoreTxt: "加载更多",
+      pullUpLoadNoMoreTxt: "没有更多数据",
+      customPullDown: true,
+      wushuju: false,
+      title: "", //搜索内容
+      stateData: [
+        {
+          text: "全部",
+          value: "all"
+        },
+        {
+          text: "待处理",
+          value: "todo"
+        },
+        {
+          text: "处理过",
+          value: "done"
+        }
+      ],
+      stateValue: "all",
+      sum: 10,
+      idx: 0,
+      stateClass: "",
+      loadShow: true,
+      searching:false,
+    };
+  },
+  components: {
+    CubePage,
+    SwitchOption,
+    InputOption,
+    SelectOption,
+    LoadIng
+  },
+  computed: {
+    options() {
+      return {
+        pullDownRefresh: this.pullDownRefreshObj,
+        pullUpLoad: this.pullUpLoadObj,
+        scrollbar: true
+      };
+    },
+    pullDownRefreshObj: function() {
+      return this.pullDownRefresh
+        ? {
+            threshold: parseInt(this.pullDownRefreshThreshold),
+            txt: this.pullDownRefreshTxt
+          }
+        : false;
+    },
+    pullUpLoadObj: function() {
+      return this.pullUpLoad
+        ? {
+            threshold: parseInt(this.pullUpLoadThreshold),
+            txt: {
+              more: this.pullUpLoadMoreTxt,
+              noMore: this.pullUpLoadNoMoreTxt
+            }
+          }
+        : false;
+    }
+  },
+  methods: {
+    // 查看详情
+    toDetail(item) {
+      console.log(item);
+      // return;2020年4月27日23:44:23
+      var bxr = JSON.parse(localStorage.getItem("login_requester"));//bababa
+      item.processUser.name = bxr.name;
+      item.processUser.phone = bxr.mphone;
+
+      if (item.state == 1) {
+        this.$router.push({
+          name: "InspectionDoneDetail",
+          params: {
+            data: item
+          }
+        });
+      } else {
+        this.$router.push({
+          name: "InspectionDetail",
+          params: {
+            data: item
+          }
+        });
+      }
+      window.localStorage.setItem("insDetailInfo", JSON.stringify(item));
+    },
+    getParamsState() {
+      if (this.$route.params.state) {
+        console.log(this.$route.params.state);
+        this.stateValue = this.$route.params.state;
+      }
+    },
+    showPicker() {
+      if (!this.picker) {
+        this.picker = this.$createPicker({
+          title: "",
+          data: [this.stateData],
+          selectedIndex: this.$route.params.state ? [1] : [0],
+          onSelect: this.selectHandle,
+          onCancel: this.cancelHandle
+        });
+      }
+      this.picker.show();
+    },
+    selectHandle(selectedVal, selectedIndex, selectedText) {
+      console.log(selectedVal, selectedIndex, selectedText);
+
+      this.stateValue = selectedVal[0];
+      this.items = [];
+      this.getData();
+    },
+    cancelHandle() {},
+    // 搜索
+    searchData() {
+      this.items = [];
+      this.searching=true;
+      this.getData();
+    },
+    // 获取列表
+    getData() {
+      var that = this;
+      // that.items.length=0;
+      this.$http
+        .post("service/bpm/InspectionProcessActual/fetchServiceTasks/ALL", {
+          assignee: that.loginUser.id,
+          idx: that.idx,
+          sum: that.sum,
+          inspectionProcessActual: {
+            // inspection: {
+            //   title: that.title,
+            //   executeUser: { id: that.loginUser.id }
+            // }
+            processUser:{
+              id:that.loginUser.id
+            }
+          },
+          searchType: that.stateValue
+        })
+        .then(function(res) {
+          if (res.data.data.length > 0) {
+            that.wushuju = false;
+            for (var i = 0; i < res.data.data.length; i++) {
+              if (res.data.data[i].createTime) {
+                res.data.data[i].createTime = formatDate(
+                  new Date(res.data.data[i].createTime),
+                  "yyyy-MM-dd hh:mm"
+                );
+              }
+            }
+            if(that.searching){
+              that.items =res.data.data;
+            }else{
+              that.items = that.items.concat(res.data.data);
+            }
+          } else {
+            that.wushuju = true;
+          }
+          that.loadShow = false;
+        });
+    },
+    onPullingDown() {
+      // 模拟更新数据
+      var that = this;
+      that.items = [];
+      that.idx = 0;
+      that.searching=false;
+      setTimeout(() => {
+        that.getData();
+      }, 1000);
+    },
+    onPullingUp() {
+      var that = this;
+      that.idx = that.idx + 1;
+      that.searching=false;
+      that.getData();
+    },
+    updatePullDownRefresh(val) {
+      this.pullDownRefresh = val;
+    },
+    updatePullDownRefreshThreshold(val) {
+      this.pullDownRefreshThreshold = val;
+    },
+    updatePullDownRefreshTxt(val) {
+      this.pullDownRefreshTxt = val;
+    },
+    updatePullUpLoad(val) {
+      this.pullUpLoad = val;
+    },
+    updatePullUpLoadThreshold(val) {
+      this.pullUpLoadThreshold = val;
+    },
+    updatePullUpLoadMoreTxt(val) {
+      this.pullUpLoadMoreTxt = val;
+    },
+    updatePullUpLoadNoMoreTxt(val) {
+      this.pullUpLoadNoMoreTxt = val;
+    },
+    updateCustomPullDown(val) {
+      this.customPullDown = val;
+    },
+    rebuildScroll() {
+      Vue.nextTick(() => {
+        this.$refs.scroll.destroy();
+        this.$refs.scroll.initScroll();
+      });
+    }
+  },
+  created() {
+    this.getParamsState();
+    this.getData(this.idx, this.sum);
+  }
+};
+</script>
+<style lang="stylus" rel="stylesheet/stylus" scoped>
+.scroll-list-wrap {
+  /* height: 350px */
+  height: 90vh;
+  /* border: 1px solid rgba(0, 0, 0, 0.1) */
+  border-radius: 5px;
+  transform: rotate(0deg); // fix 子元素超出边框圆角部分不隐藏的问题
+  // overflow: hidden;
+  padding-top: 1.76rem;
+}
+
+.foods-wrapper {
+  .food-item {
+    display: flex;
+
+    /* padding: 18px */
+    /* border-bottom: 1px solid rgba(7, 17, 27, 0.1) */
+    /* border-top: 1px solid rgba(7, 17, 27, 0.1)!important */
+    &:last-child {
+      border-none();
+      margin-bottom: 0;
+    }
+
+    .icon {
+      flex: 0 0 57px;
+      margin-right: 10px;
+    }
+
+    .food-content {
+      flex: 1;
+
+      .name {
+        margin: 2px 0 8px 0;
+        height: 14px;
+        line-height: 14px;
+        font-size: 14px;
+        color: rgb(7, 17, 27);
+      }
+
+      .description, .extra {
+        line-height: 10px;
+        font-size: 10px;
+        color: rgb(147, 153, 159);
+      }
+
+      .description {
+        line-height: 12px;
+        margin-bottom: 8px;
+      }
+
+      .extra {
+        .count {
+          margin-right: 12px;
+        }
+      }
+
+      .price {
+        font-weight: 700;
+        line-height: 24px;
+
+        .now {
+          margin-right: 8px;
+          font-size: 14px;
+          color: rgb(240, 20, 20);
+        }
+
+        .old {
+          text-decoration: line-through;
+          font-size: 10px;
+          color: rgb(147, 153, 159);
+        }
+      }
+
+      .cartcontrol-wrapper {
+        position: absolute;
+        right: 0;
+        bottom: 12px;
+
+        .scroll-wrapper {
+          .cube-pulldown-wrapper {
+            .before-trigger {
+              font-size: 30px;
+              line-height: 30px;
+              align-self: flex-end;
+
+              span {
+                display: inline-block;
+                transition: all 0.3s;
+                color: #666;
+
+                &.rotate {
+                  transform: rotate(180deg);
+                }
+              }
+            }
+
+            .after-trigger {
+              .refresh-text {
+                color: grey;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
+<style lang='less' scoped>
+.bgColor {
+  background-color: white;
+}
+.food-item {
+  border-top: 0.16rem rgb(238, 238, 238) solid;
+}
+.food-content {
+  border-top: 0.01rem rgb(223, 222, 222) solid;
+  border-bottom: 0.01rem rgb(223, 222, 222) solid;
+}
+.title {
+  display: flex;
+  justify-content: space-between;
+  height: 0.7rem;
+  line-height: 0.7rem;
+  border-top: 0.01rem rgb(223, 222, 222) solid;
+  padding: 0 0.24rem;
+  border-bottom: 0.01rem rgb(223, 222, 222) solid;
+}
+.title i {
+  font-size: 0.32rem;
+  color: #005395;
+}
+.title div:nth-child(1) {
+  font-size: 0.32rem;
+}
+.title div:nth-child(1) span {
+  display: inline-block;
+  margin-left: 0.08rem;
+}
+.title div:nth-child(2) {
+  padding: 0.05rem 0.3rem;
+  /* border: 0.01rem rgb(0,0,255) solid; */
+  border-radius: 16px;
+  /* color: rgb(0,0,255); */
+  height: 0.25rem;
+  line-height: 0.25rem;
+  margin-top: 0.15rem;
+  font-size: 0.24rem;
+}
+.weishouli {
+  color: #991f00;
+  border: 0.01rem #991f00 solid;
+  background-color: #f4e8e5;
+}
+.bushouli {
+  color: #666666;
+  background-color: #eeeeee;
+  border: 0.01rem #666666 solid;
+}
+.chulizhong {
+  color: #003057;
+  background-color: #e5eaee;
+  border: 0.01rem #003057 solid;
+}
+.daipingjia {
+  color: #825b00;
+  background-color: #f2eee5;
+  border: 0.01rem #825b00 solid;
+}
+.yijiejue {
+  color: #40a19c;
+  background-color: #ebf5f5;
+  border: 0.01rem #40a19c solid;
+}
+.yichehui {
+  color: #48a843;
+  background-color: #ecf6ec;
+  border: 0.01rem #48a843 solid;
+}
+.timeBox {
+  display: flex;
+  justify-content: space-between;
+  font-size: 0.24rem;
+  color: #999999;
+  border-top: 0.01rem rgb(223, 222, 222) solid;
+  height: 0.7rem;
+  line-height: 0.7rem;
+  padding: 0 0.24rem 0 0.64rem;
+}
+.wushuju {
+  margin-top: 2.4rem;
+  text-align: center;
+  color: #999;
+}
+.wushuju img {
+  width: 5.12rem;
+  height: 2.84rem;
+}
+.demo {
+  .header {
+    width: 100%;
+    height: 0.88rem;
+    line-height: 0.88rem;
+    text-align: center;
+    color: #fff;
+    font-size: 0.37rem;
+    background: linear-gradient(#2e2f32, #414246);
+    position: fixed;
+    top: 0;
+    z-index: 6;
+  }
+  .seatchHeader {
+    width: 100%;
+    background-color: #eee;
+    padding: 0.16rem;
+    overflow: hidden;
+    position: fixed;
+    top: 0.88rem;
+    z-index: 6;
+    box-sizing: border-box;
+    .search {
+      width: 5.74rem;
+      height: 0.56rem;
+      font-size: 0.26rem;
+      color: #b2b2b2;
+      box-sizing: border-box;
+      .searchInp {
+        text-align: center;
+        background-color: #fff;
+        width: 100%;
+        height: 100%;
+        border-radius: 0.09rem;
+        border: none;
+        &:focus {
+          outline: none;
+        }
+      }
+    }
+    .selectBtn {
+      width: 1.2rem;
+      height: 0.56rem;
+      font-size: 0.32rem;
+      color: #005395;
+      border-color: #005395;
+      background-color: #fff;
+      border-radius: 0.09rem;
+      &:focus {
+        outline: none;
+      }
+    }
+  }
+}
+.conentBox {
+  width: 100%;
+  .conent {
+    font-size: 0.32rem;
+    font-weight: 400;
+    line-height: 0.45rem;
+    border-bottom: 0.16rem solid #e5e5e5;
+    .head {
+      border-bottom: 0.01rem solid #e6e6e6;
+      p {
+        padding: 0.24rem 0.48rem;
+        i {
+          color: #00559d;
+        }
+        .btn {
+          float: right;
+        }
+      }
+    }
+    .center {
+      color: #333333;
+      border-bottom: 0.01rem solid #e6e6e6;
+      padding: 0.24rem 0.48rem;
+      p {
+        .grayFont {
+          color: #666;
+        }
+      }
+    }
+    .bottom {
+      overflow: hidden;
+      line-height: 0.86rem;
+      border-bottom: 0.01rem solid #e6e6e6;
+      font-size: 0.24rem;
+      color: #999;
+      padding: 0 0.24rem 0 0.48rem;
+    }
+  }
+}
+</style>

src/views/InspectionDetail.vue

@@ -0,0 +1,273 @@
+<template>
+  <div class="inspedtionDetail">
+    <div class="label">巡检信息</div>
+    <div class="head">
+      <p>
+        <i class="iconfont icon-zuixinbaoxiu newPapir"></i>
+        巡检单号
+        <span class="num">{{baseInfo.sign}}</span>
+        <span class="btn zhixingzhong">{{baseInfo.stateName}}</span>
+      </p>
+    </div>
+    <div class="info">
+      <p>
+        <span class="fl">巡检类型</span>
+        <span class="fr">{{baseInfo.inspectionType.type}}</span>
+      </p>
+      <p>
+        <span class="fl">计划主题</span>
+        <span class="fr">{{baseInfo.inspection.title}}</span>
+      </p>
+      <p>
+        <span class="fl">计划内容</span>
+        <span class="fr showwrap">{{baseInfo.inspection.content}}</span>
+      </p>
+      <p>
+        <span class="fl">巡检状态</span>
+        <span class="fr">{{baseInfo.stateName}}</span>
+      </p>
+      <p>
+        <span class="fl">巡检策略</span>
+        <span class="fr">{{baseInfo.inspection.planStrategy.name}}</span>
+      </p>
+      <p>
+        <span class="fl">执行时长</span>
+        <span class="fr">{{baseInfo.inspection.executionTime}}分钟</span>
+      </p>
+      <p>
+        <span class="fl">开始时间</span>
+        <span class="fr">{{baseInfo.inspection.planStartTime.slice(0,baseInfo.inspection.planStartTime.length-2)}}</span>
+      </p>
+      <p>
+        <span class="fl">逾期时间</span>
+        <span class="fr">{{baseInfo.overdueTime}}</span>
+      </p>
+    </div>
+    <div class="label">巡检结果</div>
+    <div class="form">
+      <p v-for="(item,index) in forms" >
+        <span v-if="index%2==0">{{item.templateOptions.placeholder}}</span>
+        <cube-switch v-if="index%2==1" v-model="param[item.key]" :class="{'abnormal':param[item.key]}" :data-label="forms[index-1].templateOptions.placeholder" ></cube-switch>
+      </p>
+    </div>
+    <div class="btns">
+      <div class="btn" @click="createIncident()">生成事件</div>
+      <div class="btn submit" @click="submit()">提交</div>
+      <div class="btn cancel" @click="cancle()">取消</div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      loginUser: JSON.parse(localStorage.getItem("loginUser")),
+      valConfig: JSON.parse(localStorage.getItem("valConfig")) - 0, //报修主体
+      baseInfo: {}, //巡检基础信息
+      items: [], //巡检项目
+      labels: [], //巡检项目label
+      status: [], //巡检项目的状态
+      forms: [], //巡检结果
+      abnormal:'',//异常项
+      param: {
+        inspectionProcessActual: {}
+      },
+      model: {}
+    };
+  },
+  methods: {
+    // 获取项目异常状态
+    getItems() {
+      var that = this;
+      that.$http
+        .get(
+          "/service/form/renderForm/inspection_confirm/" +
+            that.baseInfo.processInstanceId +
+            "/" +
+            that.loginUser.id+'/'+that.baseInfo.id,
+          {}
+        )
+        .then(function(res) {
+          console.log(res.data);
+          that.model = res.data.model;
+          var fields = res.data.fields;
+          console.log(fields);
+          fields.forEach(v => {
+            if (v.templateOptions.label == "检查项目") {
+              that.labels.push(v);
+            }
+            if (v.templateOptions.label == "状态") {
+              that.status.push(v);
+            }
+          });
+          // console.log(that.labels);
+          // console.log(that.status);
+          let labels = that.labels;
+          let status = that.status;
+          let j = 0,
+            newArr = new Array();
+          for (let i = 0; i < that.labels.length; i++) {
+            j = i * 2;
+            newArr[j] = that.labels[i];
+            newArr[j + 1] = that.status[i];
+          }
+          console.log(newArr);
+          that.forms = newArr;
+          window.localStorage.setItem('forms',JSON.stringify(that.forms));
+        });
+    },
+    // 提交
+    submit() {
+      this.param.loginUser = this.loginUser;
+      this.param.save = this.model.save;
+      this.param.close = this.model.close;
+      this.param.submit = this.model.submit;
+      this.param.toIncident = this.model.toIncident;
+      this.param.handler_code = "resolve";
+      this.param.inspectionProcessActual = this.baseInfo;
+      console.log(this.param);
+      var that = this;
+      that.$http
+        .post(
+          "/service/bpm/bpm/completeTask/" +
+            that.baseInfo.processInstanceId +
+            "/" +
+            that.loginUser.id,
+          that.param
+        )
+        .then(function(res) {
+          console.log(res.data);
+          if (res.data.status == 200) {
+            $("#fade").fadeIn();
+            that.promptingConent = "恭喜您,提交成功!";
+            that.promptingStatus = true;
+            that.dialog = that
+              .$createDialog({
+                type: "alert",
+                title: "提交成功",
+                content: "点击返回列表",
+                icon: "cubeic-right",
+                onConfirm: (e, promptValue) => {
+                  that.$router.push({ path: "/main/inspection" });
+                }
+              })
+              .show();
+            setTimeout(function() {
+              $("#fade").fadeOut();
+            }, 2000);
+          }
+        });
+    },
+    // 取消
+    cancle() {
+      var that=this;
+      that.$router.go(-1);
+    },
+    // 生成事件
+    createIncident(){
+      for(var i =0;i<$('.cube-switch.abnormal').length;i++){
+        this.abnormal+=$('.cube-switch.abnormal')[i].dataset.label+','
+      }
+      this.$router.push({name:'NewIncident',params:{data:this.baseInfo,abnormal:this.abnormal}});
+    }
+  },
+  created() {
+    this.baseInfo = this.$route.params.data||JSON.parse(window.localStorage.getItem('insDetailInfo'));
+    this.forms=JSON.parse( window.localStorage.getItem('forms'))||[];
+    this.title = this.baseInfo.inspectionType.type;
+    this.getItems();
+  }
+};
+</script>
+<style lang="less" scoped>
+.inspedtionDetail {
+  .label {
+    background-color: #eee;
+    height: 0.6rem;
+    line-height: 0.6rem;
+    padding-left: 0.2rem;
+    font-size: 0.24rem;
+    color: #666;
+  }
+
+  .head {
+    font-size: 0.34rem;
+    line-height: 0.45rem;
+    border-bottom: 0.01rem solid #e6e6e6;
+    p {
+      padding: 0.24rem 0.48rem;
+      i {
+        color: #00559d;
+      }
+      .num {
+        margin-left: 1rem;
+      }
+      .btn {
+        float: right;
+      }
+    }
+  }
+
+  .info {
+    color: #999;
+    font-size: 0.28rem;
+    overflow: hidden;
+    p {
+      line-height: 0.4rem;
+      padding: 0.1rem 0.24rem;
+      overflow: hidden;
+      .overflowEllipsis2 {
+        margin-left: 1.96rem;
+      }
+    }
+  }
+
+  .form {
+    font-size: 0.32rem;
+    color: #333;
+    line-height: 0.86rem;
+    overflow: hidden;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    p {
+      line-height: 0.4rem;
+      padding: 0.2rem 0.24rem;
+      // border-bottom: 0.01rem solid #ccc;
+      width: 35%;
+    }
+  }
+
+  .btns {
+    font-size: 0.32px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.24rem;
+    .btn {
+      border: 0.01rem solid #005395;
+      color: #005395;
+      background-color: #fff;
+      width: 1.8rem;
+      height: 0.88rem;
+      line-height: 0.88rem;
+      text-align: center;
+      border-radius: 0.1rem;
+      &.submit {
+        width: 3.06rem;
+        background-color: #005395;
+        color: #fff;
+      }
+      &.cancel {
+        border-color: #ccc;
+        color: #333;
+      }
+    }
+  }
+  .showwrap {
+    width: 75%;
+    text-align: right;
+  }
+}
+</style>

src/views/Login.vue

@@ -1,42 +1,17 @@
 <template>
-  <div class="fle bgColor" v-if="!isSSo">
-    <load-ing v-show="requesterLgoinType == 'wechat'"></load-ing>
-    <h2
-      v-if="requesterLgoinType == 'web'"
-      style="font-size: 0.36rem; margin-bottom: 0.36rem; font-weight: 700"
-    >
-      网络与信息运维报修平台
-    </h2>
-    <div v-if="requesterLgoinType == 'web'" style="width: 5rem">
-      <cube-input
-        v-model="zhanghao"
-        placeholder="您的账号为工号或学号"
-      ></cube-input>
-      <br />
-      <cube-input
-        v-model="mima"
-        type="password"
-        placeholder="您的初始密码为学号或工号后四位"
-      ></cube-input>
-      <br />
-      <cube-button @click="zlogin()" style="background: #005395"
-        >登录</cube-button
-      >
-    </div>
+  <div class="fle bgColor">
+    <!-- <div class="login">登录中</div> -->
+    <load-ing></load-ing>
   </div>
 </template>
 
 <script>
-import { decode } from "js-base64";
+// 注意事项：个人微信需要关注微工作台，否则会导致没有userId（userId为openID）登录失败
+
 import LoadIng from "./../views/loading.vue";
 export default {
   data() {
-    return {
-      zhanghao: "",
-      mima: "",
-      requesterLgoinType: "",
-      isSSo: true // 是否单点登录
-    };
+    return {};
   },
   components: {
     LoadIng
@@ -45,16 +20,25 @@ export default {
     // 登陆
     login() {
       var that = this;
-      that.$http.post("service/auth/reqwechatlogin", {}).then(res => {
+      that.$http.post("service/auth/wechatlogin", {}).then(function(res) {
+        // alert(1);
+        // alert(JSON.stringify(res.data));
         if (res.data.url) {
+          // alert("拿到了url(code)");
           window.location.href = res.data.url;
         } else {
+          // alert("登录成功,即将跳转");
           if (res.data.user) {
+            that.getConfig();
             localStorage.setItem(
               "loginUser",
+              JSON.stringify(res.data.user.user)
+            );
+            localStorage.setItem(
+              "login_requester",
               JSON.stringify(res.data.user.requester)
             );
-            this.loginNext();
+            that.$router.push({ path: "/main" });
           }
         }
       });
@@ -63,148 +47,99 @@ export default {
     getCode() {
       var that = this;
       var url = window.location.href.split("?");
+      // alert("window.location.href----:");
+      // alert(JSON.stringify(window.location.href));
       if (!url[1]) {
         that.login();
       } else {
         var code = {
           code: url[1],
-          name: "微信报修"
+          name: "微信处理人"
         };
-        that.$http.post("service/auth/reqwechatlogin2", code).then(res => {
-          if (res.data.state == 200) {
+        // alert("2--传code参数：");
+        // alert(JSON.stringify(code));
+        that.$http.post("service/auth/wechatlogin2", code).then(function(res) {
+          if (res.data.state==200) {
+            // alert(3);
+            // alert(JSON.stringify(res.data));
             if (res.data.user) {
+              that.getConfig();
               localStorage.setItem(
                 "loginUser",
+                JSON.stringify(res.data.user.user)
+              );
+              localStorage.setItem(
+                "login_requester",
                 JSON.stringify(res.data.user.requester)
               );
-              this.loginNext();
+              that.$router.push({ path: "/main" });
             }
-          } else if (res.data.state == 501) {
-            that
-              .$createDialog({
-                type: "alert",
-                title: "您的账号被删除，请联系管理员",
-                icon: "cubeic-alert"
-              })
-              .show();
-          } else {
-            that
-              .$createDialog({
-                type: "alert",
-                title: res.data.remarks,
-                icon: "cubeic-alert"
-              })
-              .show();
+          }else if(res.data.state == 501){
+            that.$createDialog({
+              type: 'alert',
+              title: '您的账号被删除，请联系管理员',
+              icon: 'cubeic-alert'
+            }).show()
+          }else{
+            that.$createDialog({
+              type: 'alert',
+              title: res.data.remarks,
+              icon: 'cubeic-alert'
+            }).show()
           }
         });
       }
     },
-    loginNext() {
-      // seimin
-      // 获取报修主体
+    // 假登录
+    login2() {
+      var that = this;
       this.$http
-        .post("service/sysinfo/data/fetchDataList/systemConfiguration", {
-          idx: 0,
-          sum: 1000,
-          systemConfiguration: { keyconfig: "repairMain" }
+        .post("service/auth/loginEncrypt", {
+          // username: "DingDanDan",
+          username: "admin",
+          password: "20200326"
         })
-        .then(result => {
-          if (result.data.status == 200) {
-            var repairMain = result.data.list[0];
-            window.localStorage.setItem(
-              "repairMain",
-              JSON.stringify(repairMain)
+        .then(function(res) {
+          that.loading = false;
+          if (res.data && res.data.state == 200) {
+            that.getConfig();
+            localStorage.setItem(
+              "loginUser",
+              JSON.stringify(res.data.data.user)
+            );
+            localStorage.setItem(
+              "login_requester",
+              JSON.stringify(res.data.data.requester)
             );
-            // 获取是否自动建单
-            this.$http
-              .post("service/sysinfo/data/fetchDataList/systemConfiguration", {
-                idx: 0,
-                sum: 1000,
-                systemConfiguration: { keyconfig: "ifCreate" }
-              })
-              .then(result => {
-                if (result.data.status == 200) {
-                  var ifCreate = result.data.list[0];
-                  window.localStorage.setItem(
-                    "ifCreate",
-                    JSON.stringify(ifCreate)
-                  );
-                  if (this.isSSo) {
-                    location.href =
-                      "http://" + location.host + "/req/#/main/indes";
-                  } else {
-                    this.$router.push({ path: "/main" });
-                  }
-                }
-              });
+            that.$router.push({ path: "/main" });
           }
         });
-      // seimin
     },
-    // 获取报修人登录方式
-    getLoginType() {
-      this.$http.post("service/wechat/getLoginType", {}).then(result => {
-        if (result.data.status == 200) {
-          this.requesterLgoinType = result.data.data;
-          window.localStorage.setItem(
-            "requesterLgoinType",
-            this.requesterLgoinType
-          );
-          if (this.requesterLgoinType == "wechat") {
-            this.getCode();
-          } else if (this.requesterLgoinType == "web") {
-            // this.$router.push({ path: "/login" });
-          }
-        }
-      });
-    },
-    // 账号密码登录
-    zlogin() {
-      console.log(this);
+    // 获取版本配置（报修主题：报修人/报修科室）
+    getConfig() {
       var that = this;
-      var ssoStr = "";
-      var ssoJson;
-      if (this.isSSo) {
-        ssoStr = location.search
-          .replace("?", "")
-          .split("&")[0]
-          .split("=")[1];
-        ssoStr = decode(decodeURIComponent(ssoStr));
-        ssoJson = JSON.parse(ssoStr);
-      }
-      var postData = this.isSSo
-        ? { username: ssoJson.a, password: ssoJson.r, t: false }
-        : { username: this.zhanghao, password: this.mima };
-      this.$http.post("service/auth/reqlogin", postData).then(res => {
-        that.loading = false;
-        if (res.data && res.data.state == 200) {
-          var loginUserStr = JSON.stringify(res.data.data.requester);
-          localStorage.setItem("loginUser", loginUserStr);
+      this.$http
+        .post("service/sysinfo/data/fetchDataList/systemConfiguration", {
+          idx: 0,
+          sum: 1000,
+          systemConfiguration: { keyconfig: "repairMain" }
+        })
+        .then(function(res) {
+          console.log(res);
+          // if (res.data && res.data.state == 200) {
           localStorage.setItem(
-            "loginConfig",
-            JSON.stringify({ username: this.zhanghao, password: this.mima })
+            "valConfig",
+            JSON.stringify(res.data.list[0].valueconfig)
           );
-          this.loginNext();
-        } else {
-          that
-            .$createDialog({
-              type: "alert",
-              title: "系统错误",
-              content: "请稍后再试",
-              icon: "cubeic-wrong",
-              color: "red"
-            })
-            .show();
-        }
-      });
+          // localStorage.setItem("valConfig", 2);
+          //   that.$router.push({ path: "/main" });
+          // }
+        });
     }
   },
   created() {
-    this.isSSo = location.search.length > 0;
-    if (this.isSSo) {
-      this.zlogin();
-    }
-    this.getLoginType();
+    this.getCode();
+    // this.login2();
   }
 };
 </script>
@@ -252,3 +187,7 @@ input:focus {
   border-radius: 10px;
 }
 </style>
+
+
+
+

src/views/Main.vue

@@ -10,11 +10,15 @@
             </router-link>
             <router-link to="/main/incidentList" class="link" active-class="active">
                 <i class="iconfont icon-baoxiuxian"></i>
-                <span>我的报修</span>
+                <span>事件</span>
+            </router-link>
+             <router-link to="/main/inspection" class="link" active-class="active">
+                <i class="iconfont icon-shouyexian"></i>
+                <span>巡检</span>
             </router-link>
             <router-link to="/main/my" class="link" active-class="active">
                 <i class="iconfont icon-wodexian"></i>
-                <span>设置</span>
+                <span>我的</span>
             </router-link>
         </div>
     </div>
@@ -80,4 +84,4 @@ export default {
 .fade-leave-active{
     opacity: 0;
 }
-</style>
+</style>

src/views/againAssign.vue

@@ -0,0 +1,629 @@
+<template>
+  <div class="againAssign">
+    <div class="conentBox">
+      <div class="header">处理方案</div>
+      <div v-if="model.incident" class="conent">
+        <div class="navBar">
+          <div class="fl">
+            <a :class="{active:actives=='info'}" href="javascript:;" @click="toInfo('info')">事件信息</a>
+          </div>
+          <div class="fl">
+            <a
+              :class="{active:actives=='assignee'}"
+              href="javascript:;"
+              @click="toInfo('assignee')"
+            >重新指派</a>
+          </div>
+          <div class="fl">
+            <a
+              :class="{active:actives=='progress'}"
+              href="javascript:;"
+              @click="toInfo('progress')"
+            >处理进度</a>
+          </div>
+        </div>
+        <div class="label headtop" id="info">事件信息</div>
+
+        <div class="info">
+          <div class="head">
+            <p>
+              <i class="iconfont icon-zuixinbaoxiu newPapir"></i>
+              事件编号：{{model.incident.incidentsign}}
+              <span class="fr btn chongxinzhipai">{{model.incident.state.name}}</span>
+            </p>
+          </div>
+          <p>
+            <span class="fl">事件分类</span>
+            <span class="fr">{{model.incident.category.category}}</span>
+          </p>
+          <!-- <p>
+            <span class="fl">事件主题</span>
+            <span class="fr">{{model.incident.title}}</span>
+          </p> -->
+          <p class="desc">
+            <span class="fl">事件描述</span>
+            <span class="fr grayFont" v-html="model.incident.description"></span>
+          </p>
+          <div class="shows" id="shows">
+            <p v-if="valConfig==2">
+              <span class="fl">报修科室</span>
+              <span class="fr">{{model.incident.department?model.incident.department.dept:''}}</span>
+            </p>
+            <p v-if="valConfig==1">
+              <span class="fl">报修人</span>
+              <span class="fr">{{model.incident.requester.name}}</span>
+            </p>
+            <p v-if="valConfig==2">
+              <span class="fl">联系人</span>
+              <span class="fr">{{model.incident.contacts}}</span>
+            </p>
+            <p>
+              <span class="fl">联系电话</span>
+              <span class="fr">{{model.incident.contactsInformation}}</span>
+            </p>
+            <p>
+              <span class="fl">联系地址</span>
+              <span class="fr">{{model.incident.houseNumber||''}}</span>
+            </p>
+            <p class="boeder_B">
+              <span class="fl">事件来源</span>
+              <span class="fr">{{model.incident.source.name}}</span>
+            </p>
+            <!-- <p>
+              <span class="fl">影响度</span>
+              <span class="fr">{{model.incident.influence?model.incident.influence.name:''}}</span>
+            </p>
+            <p>
+              <span class="fl">紧急度</span>
+              <span class="fr">{{model.incident.emergency?model.incident.emergency.name:''}}</span>
+            </p> -->
+            <p>
+              <span class="fl">优先级</span>
+              <span class="fr">{{model.incident.priority?model.incident.priority.name:''}}</span>
+            </p>
+            <p>
+              <span class="fl">逾期响应时间</span>
+              <span class="fr">{{model.incident.overdueResponseDate}}</span>
+            </p>
+            <p>
+              <span class="fl">逾期解决时间</span>
+              <span class="fr">{{model.incident.overdueTime}}</span>
+            </p>
+          </div>
+          <p class="info_hide">
+            <span class="fl hide" @click="hides()" v-if="!item_hides">展开详情 >></span>
+            <span class="fl hide" @click="hides()" v-if="item_hides">隐藏详情<<</span>
+          </p>
+          <div class="imgs-container" v-if="imgs.length">
+            <div class="imgs-cont">
+              <img v-if='img.suffix=="jpeg"||img.suffix=="jpg"||img.suffix=="gif"||img.suffix=="png"||img.suffix=="svg"||img.suffix=="pdf"' :src="img.previewUrl" v-for="(img, index) in imgs" class="imgs">
+              <p v-else>
+                <a :href='[img.previewUrl]'>{{img.name}}</a>
+              </p>
+            </div>
+          </div>
+          <div class="label" id="assignee">重新指派</div>
+          <div class="info">
+            <p>
+              <span class="fl">重新指派原因:</span>
+              <span class="fr">{{model.resignComment}}</span>
+            </p>
+          </div>
+
+          <div class="label" id="progress">处理进度</div>
+          <div :class="{'progress':true,'progressHide':!pro_hides}" id="progressBox">
+            <div class="progress_info" v-for="item in progressInfo">
+              <div class="progress_info_L">{{item.activityName}}</div>
+              <div class="progress_info_R">
+                <div class="time">
+                  <i
+                    :class="{'iconfont':true, 'icon-icon_weizuo':item.endTime!='','icon-icon_zhengzaijinx':item.endTime=='' }"
+                  ></i>
+                  <span class="text1">{{item.startTime}}</span>
+                </div>
+                <div
+                  :class="{'cont':true,'blue':item.endTime!='' }"
+                >
+                  <p class="text2" v-if="item.desc">{{item.desc}}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+          <p class="info_hide">
+            <span class="fl hide" @click="proHides()">{{pro_hides?'隐藏详情 <<':'展开详情 >>'}}</span>
+          </p>
+          <div v-if="model.incident.handlerUser.id==loginUser.id">
+            <div class="label">指派</div>
+            <div class="form">
+              <div class="txtLabel">
+                <div class="txt fl handler">
+                  <span style="color:red;">*</span>是否选择处理人：
+                </div>
+                <cube-switch v-model="handleUserOrGroup"></cube-switch>
+              </div>
+              <div class="txtLabel" v-if="handleUserOrGroup">
+                <div class="txt fl">
+                  <span style="color:red;">*</span> 处理人:
+                </div>
+                <cube-select
+                  class="selectGroup fl"
+                  v-model="handlerUser"
+                  :title="'请选择处理人'"
+                  :options="handlerUserArr"
+                  :placeholder="'请选择处理人'"
+                ></cube-select>
+              </div>
+              <div class="txtLabel" v-if="!handleUserOrGroup">
+                <div class="txt fl">
+                  <span style="color:red;">*</span> 处理组:
+                </div>
+                <cube-select
+                  class="selectGroup fl"
+                  v-model="handlerGroup"
+                  :title="'请选择处理组'"
+                  :options="candidateGroupsArr"
+                  :placeholder="'请选择处理组'"
+                ></cube-select>
+              </div>
+              <cube-form-group class="sub">
+                <cube-button type="submit" @click="subVali()">提交</cube-button>
+              </cube-form-group>
+            </div>
+          </div>
+        </div>
+      </div>
+      <load-ing v-if="!model.incident"></load-ing>
+      <promp-ting :conents="promptingConent" :status="promptingStatus"></promp-ting>
+    </div>
+  </div>
+</template>
+<script>
+import LoadIng from "./../views/loading.vue";
+import PrompTing from "./../views/prompting.vue";
+export default {
+  data() {
+    return {
+      id:'',
+      loginUser: JSON.parse(localStorage.getItem("loginUser")),
+      valConfig: JSON.parse(localStorage.getItem("valConfig")) - 0, //报修主体
+      promptingConent: "",
+      promptingStatus: "",
+      item_hides: false,
+      actives: "info",
+      processInstanceId: "",
+      progressInfo: [], //处理进度
+      imgs: [], //图片
+      model: {}, //提交数据
+      handleUserOrGroup: false, //处理人/处理组
+      handlerUserArr: [], //处理人
+      candidateGroupsArr: [], //处理组
+      handlerUser: "", //处理人
+      handlerGroup: "", //处理组
+      pro_hides:false,//展开/收起处理进度
+    };
+  },
+  components: {
+    LoadIng,
+    PrompTing
+  },
+  methods: {
+    //   获取事件数据
+    getParamsData() {
+      var that = this;
+      that.$http
+        .get(
+          "/service/form/renderForm/receiveform/" +
+            that.processInstanceId +
+            "/" +
+            that.loginUser.id+'/'+that.id,
+          {}
+        )
+        .then(function(res) {
+          console.log(res.data);
+          that.model = res.data.model;
+        });
+    },
+    // 获取图片
+    getImgs() {
+      var that = this;
+      that.$http
+        .get(
+          "service/common/common/listAttachment/incident/" +
+            that.processInstanceId,
+          {}
+        )
+        .then(function(res) {
+          console.log(res.data);
+          that.imgs = res.data.data.splice(0, 3);
+          console.log(that.imgs);
+        });
+    },
+    // 获取处理进度
+    getProgressInfo() {
+      var that = this;
+      that.$http
+        .post(
+          "/service/bpm/bpm/flowTracingCustom/" + that.processInstanceId,
+          {}
+        )
+        .then(function(res) {
+          console.log(res.data);
+          that.progressInfo = res.data.data;
+          that.progressInfo.reverse();
+        });
+    },
+    //隐藏显示详情
+    hides() {
+      this.item_hides = !this.item_hides;
+      $("#shows").slideToggle();
+    },
+    // 处理进度隐藏/展开
+    proHides(){
+      if(!this.pro_hides){
+        $('#progressBox').animate({'height':$('#progressBox')[0].scrollHeight})
+      }else{
+        $('#progressBox').animate({'height':'1.7rem'})
+      }
+      this.pro_hides=!this.pro_hides;
+    },
+    // 快速定位
+    toInfo(id) {
+      this.actives = id;
+      $("body,html").animate(
+        {
+          scrollTop:
+            $("#" + id).offset().top -
+            $(".header")[0].offsetHeight -
+            $(".navBar")[0].offsetHeight
+        },
+        260
+      );
+    },
+    // 获取处理人
+    getHandlerUser() {
+      var that = this;
+      this.$http
+        .post("service/user/data/fetchDataList/user", {
+          idx: 0,
+          sum: 1000,
+          user: {
+            roledata: { rolecode: "first-line support" },
+            selectType: "1"
+          }
+        })
+        .then(function(res) {
+          res.data.list.forEach(function(v, i) {
+            that.handlerUserArr.push({
+              text: v.name,
+              value: v.id
+            });
+          });
+        });
+    },
+    // 获取处理组
+    getCandidateGroups() {
+      var that = this;
+      this.$http
+        .post("service/user/data/fetchDataList/group", {
+          idx: 0,
+          sum: 1000,
+          group: { selectType: "nouser" }
+        })
+        .then(function(res) {
+          res.data.list.forEach(function(v, i) {
+            that.candidateGroupsArr.push({
+              text: v.groupName,
+              value: v.id
+            });
+          });
+          console.log(that.candidateGroupsArr);
+        });
+    },
+    subVali() {
+      var that = this;
+
+      if (
+        (!that.handleUserOrGroup && !that.handlerGroup) ||
+        (that.handleUserOrGroup && !that.handlerUser)
+      ) {
+        $("#fade").fadeIn();
+        that.promptingConent = "提交失败,请填写必填信息!";
+        that.promptingStatus = false;
+        setTimeout(function() {
+          $("#fade").fadeOut();
+        }, 2000);
+      }
+
+      that.model.handler_code = "resolve";
+      delete that.model.receive_code;
+      if (that.handleUserOrGroup) {
+        delete that.model.candidateGroups;
+        that.model.assignee = that.handlerUser;
+      } else {
+        delete that.model.assignee;
+        delete that.model.incident.assignee;
+        that.model.candidateGroups = that.handlerGroup;
+      }
+      that.$http
+        .post(
+          "service/bpm/bpm/completeTask/" +
+            that.model.incident.taskId +
+            "/" +
+            that.loginUser.id,
+          that.model
+        )
+        .then(function(res) {
+          if (res.data.status == 200) {
+            $("#fade").fadeIn();
+            that.promptingConent = "恭喜您,提交成功!";
+            that.promptingStatus = true;
+            that.dialog = that
+              .$createDialog({
+                type: "alert",
+                title: "提交成功",
+                content: "点击返回首页",
+                icon: "cubeic-right",
+                onConfirm: (e, promptValue) => {
+                  that.$router.push({ path: "/main" });
+                }
+              })
+              .show();
+            setTimeout(function() {
+              $("#fade").fadeOut();
+            }, 2000);
+          }
+        });
+    }
+  },
+  created() {
+    this.processInstanceId = this.$route.params.data.processInstanceId;
+    this.id = this.$route.params.data.id;
+    this.getParamsData();
+    this.getProgressInfo();
+    this.getImgs();
+    this.getHandlerUser();
+    this.getCandidateGroups();
+  }
+};
+</script>
+<style lang="less" scoped>
+i.iconfont.blue {
+  color: #005395;
+  // &::after {
+  //   content: "";
+  //   width: 0.01rem;
+  //   height: 0.4rem;
+  //   background: #005395;
+  //   position: relative;
+  //   display: block;
+  //   left: 0.14rem;
+  // }
+}
+.againAssign {
+  .header {
+    width: 100%;
+    height: 0.88rem;
+    line-height: 0.88rem;
+    text-align: center;
+    color: #fff;
+    font-size: 0.37rem;
+    background: linear-gradient(#2e2f32, #414246);
+    position: fixed;
+    top: 0;
+    z-index: 6;
+  }
+  .navBar {
+    width: 100%;
+    height: 0.96rem;
+    line-height: 0.96rem;
+    background-color: #fafafa;
+    font-size: 0.28rem;
+    position: fixed;
+    top: 0.88rem;
+    div {
+      width: 33.33%;
+      text-align: center;
+      a {
+        display: inline-block;
+        height: 0.9rem;
+        width: 1.7rem;
+        padding: 0 0.1rem;
+        &.active {
+          color: #005395;
+          border-bottom: 0.06rem solid #005395;
+        }
+      }
+    }
+  }
+
+  .headtop {
+    margin-top: 1.84rem;
+  }
+  .label {
+    background-color: #eeeeee;
+    height: 0.6rem;
+    line-height: 0.58rem;
+    padding-left: 0.2rem;
+    font-size: 0.24rem;
+    color: #666666;
+    span {
+      font-size: 0.2rem;
+      display: inline-block;
+      margin-left: 0.08rem;
+      color: #999999;
+    }
+    &.formLabel {
+      background-color: #fff;
+    }
+  }
+  .conentBox {
+    width: 100%;
+    .conent {
+      font-size: 0.32rem;
+      font-weight: 400;
+      line-height: 0.45rem;
+      // border-bottom: 0.16rem solid #e5e5e5;
+
+      .shows {
+        display: none;
+      }
+      .boeder_B {
+        border-bottom: 0.01rem solid #ccc;
+      }
+       p {
+          &.desc{
+            overflow: hidden;
+          }
+          .grayFont {
+            width: 75%;
+            text-align: right;
+            overflow-x: scroll;
+          }
+      }
+      .bottom {
+        overflow: hidden;
+        line-height: 0.86rem;
+        border-bottom: 0.01rem solid #e6e6e6;
+        font-size: 0.24rem;
+        color: #999;
+        padding: 0 0.24rem 0 0.48rem;
+      }
+      .info {
+        color: #999;
+        font-size: 0.28rem;
+        overflow: hidden;
+        .head {
+          border-bottom: 0.01rem solid #e6e6e6;
+          p {
+            padding: 0.24rem 0.3rem;
+            i {
+              color: #00559d;
+            }
+          }
+        }
+        p {
+          line-height: 0.4rem;
+          padding: 0.1rem 0.24rem;
+          overflow: hidden;
+          .overflowEllipsis2 {
+            margin-left: 1.96rem;
+          }
+        }
+        .info_hide {
+          padding: 0.2rem 0.24rem;
+          border-bottom: 0.01rem solid #e6e6e6;
+          .hide {
+            color: #00559d;
+          }
+        }
+        .imgs-container{
+          a{
+            color:#03c !important;
+            &:visited{
+              color: #551a8b !important;
+            }
+          }
+           img {
+            width: 1.5rem;
+            height: 1.5rem;
+            margin-right: 0.7rem;
+            &:nth-child(1) {
+              margin-left: 0.75rem;
+            }
+          }
+        }
+        .progress {
+          padding: 0.2rem 0.2rem;
+          overflow: hidden;
+          transition-duration: .2s;
+          transition-timing-function: linear;
+          &.progressHide{
+            height: 1.7rem;
+          }
+          .progress_info {
+            overflow: hidden;
+            margin-bottom: 0.1rem;
+            &:nth-last-child(1){
+              .cont{
+                border:none !important;
+              }
+            }
+            .progress_info_L {
+              float: left;
+              color: #333;
+              max-width: 18%;
+            }
+            .progress_info_R {
+              float: right;
+              margin-left: 0.09rem;
+              width: 80%;
+              font-size: 0.25rem;
+              .time {
+                i {
+                  margin-left: -0.15rem;
+                  &.icon-icon_weizuo {
+                    color: #005495;
+                  }
+                  &.icon-icon_zhengzaijinx {
+                    color: #48a843;
+                    font-size: 0.37rem;
+                  }
+                }
+                span {
+                  margin-left: 0.15rem;
+                }
+              }
+              .cont {
+                border-left: 1px solid #999;
+                padding-left: 0.4rem;
+                min-height: 0.4rem;
+                &.blue {
+                  border-left: 1px solid #005395;
+                }
+              }
+
+              .text1 {
+                font-size: 0.15rem;
+              }
+              .text2 {
+                color: #666;
+              }
+              p {
+                padding: 0;
+              }
+            }
+          }
+        }
+      }
+      .txtLabel {
+        width: 100%;
+        overflow: hidden;
+        padding: 0.32rem 0.24rem 0.32rem 0.32rem;
+        .txt {
+          width: 25%;
+          color: #666;
+          &.handler {
+            width: 40%;
+          }
+        }
+        .selectGroup {
+          width: 62%;
+        }
+      }
+      .sub {
+        background: #ececec;
+        .cube-btn {
+          background-color: #005395 !important;
+          width: 90%;
+          margin: 0.2rem auto;
+          border-radius: 8px;
+        }
+      }
+    }
+  }
+  .showwrap {
+    width: 75%;
+    text-align: right;
+  }
+}
+</style>

src/views/closed.vue

@@ -0,0 +1,567 @@
+<template>
+  <div class="closed">
+    <div class="conentBox">
+      <div class="header">处理方案</div>
+      <div v-if="model.incident" class="conent">
+        <div class="navBar">
+          <div class="fl">
+            <a :class="{active:actives=='info'}" href="javascript:;" @click="toInfo('info')">事件信息</a>
+          </div>
+          <div class="fl">
+            <a
+              :class="{active:actives=='handlerInfo'}"
+              href="javascript:;"
+              @click="toInfo('handlerInfo')"
+            >处理信息</a>
+          </div>
+          <div class="fl">
+            <a
+              :class="{active:actives=='closeInfo'}"
+              href="javascript:;"
+              @click="toInfo('closeInfo')"
+            >关单信息</a>
+          </div>
+          <div class="fl">
+            <a
+              :class="{active:actives=='progress'}"
+              href="javascript:;"
+              @click="toInfo('progress')"
+            >处理进度</a>
+          </div>
+        </div>
+
+        <div class="info">
+          <div class="label headtop" id="info">事件信息</div>
+          <div class="head">
+            <p>
+              <i class="iconfont icon-zuixinbaoxiu newPapir"></i>
+              事件编号：{{model.incident.incidentsign}}
+              <span class="fr btn yiguanbi">{{model.incident.state.name}}</span>
+            </p>
+          </div>
+          <p>
+            <span class="fl">事件分类</span>
+            <span class="fr">{{model.incident.category.category}}</span>
+          </p>
+          <!-- <p>
+            <span class="fl">事件主题</span>
+            <span class="fr">{{model.incident.title}}</span>
+          </p> -->
+          <p class="desc">
+            <span class="fl">事件描述</span>
+            <span class="fr grayFont" v-html="model.incident.description"></span>
+          </p>
+          <div class="shows" id="shows">
+            <p v-if="valConfig==2">
+              <span class="fl">报修科室</span>
+              <span class="fr">{{model.incident.department?model.incident.department.dept:''}}</span>
+            </p>
+            <p v-if="valConfig==1">
+              <span class="fl">报修人</span>
+              <span class="fr">{{model.incident.requester.name}}</span>
+            </p>
+            <p v-if="valConfig==2">
+              <span class="fl">联系人</span>
+              <span class="fr">{{model.incident.contacts}}</span>
+            </p>
+            <p>
+              <span class="fl">联系电话</span>
+              <span class="fr">{{model.incident.contactsInformation}}</span>
+            </p>
+            <p>
+              <span class="fl">联系地址</span>
+              <span class="fr">{{model.incident.houseNumber||''}}</span>
+            </p>
+            <p class="boeder_B">
+              <span class="fl">事件来源</span>
+              <span class="fr">{{model.incident.source.name}}</span>
+            </p>
+            <!-- <p>
+              <span class="fl">影响度</span>
+              <span class="fr">{{model.incident.influence?model.incident.influence.name:''}}</span>
+            </p>
+            <p>
+              <span class="fl">紧急度</span>
+              <span class="fr">{{model.incident.emergency?model.incident.emergency.name:''}}</span>
+            </p> -->
+            <p>
+              <span class="fl">优先级</span>
+              <span class="fr">{{model.incident.priority?model.incident.priority.name:''}}</span>
+            </p>
+            <p>
+              <span class="fl">逾期响应时间</span>
+              <span class="fr">{{model.incident.overdueResponseDate}}</span>
+            </p>
+            <p>
+              <span class="fl">逾期解决时间</span>
+              <span class="fr">{{model.incident.overdueTime}}</span>
+            </p>
+          </div>
+          <p class="info_hide">
+            <span class="fl hide" @click="hides()" v-if="!item_hides">展开详情 >></span>
+            <span class="fl hide" @click="hides()" v-if="item_hides">隐藏详情<<</span>
+          </p>
+          <div class="imgs-container" v-if="imgs.length">
+            <div class="imgs-cont">
+              <img v-if='img.suffix=="jpeg"||img.suffix=="jpg"||img.suffix=="gif"||img.suffix=="png"||img.suffix=="svg"||img.suffix=="pdf"' :src="img.previewUrl" v-for="(img, index) in imgs" class="imgs">
+              <p v-else>
+                <a :href='[img.previewUrl]'>{{img.name}}</a>
+              </p>
+            </div>
+          </div>
+
+          <div class="label" id="handlerInfo">处理信息</div>
+          <!-- <p>
+            <span class="fl">升级对象</span>
+            <span class="fr">{{model.isupreason?model.handlerUser.name:''}}</span>
+          </p>
+          <p>
+            <span class="fl">升级原因</span>
+            <span class="fr">{{model.isupreason?model.isupreason:''}}</span>
+          </p> -->
+          <p>
+            <span class="fl">处理方式</span>
+            <span
+              class="fr showwrap"
+            >{{model.incident.handleCategory?model.incident.handleCategory.name:''}}</span>
+          </p>
+          <div class="shows1" id="shows1">
+            <p>
+              <span class="fl">确认事件分类</span>
+              <span class="fr">{{model.incident.category.category}}</span>
+            </p>
+            <p>
+              <span class="fl">关闭代码</span>
+              <span class="fr">{{model.incident.closecode?model.incident.closecode.name:''}}</span>
+            </p>
+            <p class="desc">
+              <span class="fl">处理方案</span>
+              <span class="fr grayFont" v-html="model.incident.handleDescription"></span>
+            </p>
+          </div>
+          <p class="info_hide">
+            <span class="fl hide" @click="hides1()" v-if="!item_hides1">展开详情 >></span>
+            <span class="fl hide" @click="hides1()" v-if="item_hides1">隐藏详情<<</span>
+          </p>
+
+          <div class="label" id="closeInfo">关单信息</div>
+          <p>
+            <span class="fl">是否已解决</span>
+            <span class="fr">{{model.isclose=='close'?'已解决':'未解决'}}</span>
+          </p>
+          <p>
+            <span class="fl">结果类型</span>
+            <span class="fr">{{model.incident.handleResult?model.incident.handleResult.name:''}}</span>
+          </p>
+          <p>
+            <span class="fl">满意度评价</span>
+            <span class="fr">{{model.incident.degree?model.incident.degree.name:''}}</span>
+          </p>
+          <p>
+            <span class="fl">回访备注</span>
+            <span class="fr">{{model.incident.visitRemarks||''}}</span>
+          </p>
+
+          <div class="label" id="progress">处理进度</div>
+          <div :class="{'progress':true,'progressHide':!pro_hides}" id="progressBox">
+            <div class="progress_info" v-for="item in progressInfo">
+              <div class="progress_info_L">{{item.activityName}}</div>
+              <div class="progress_info_R">
+                <div class="time">
+                  <i
+                    :class="{'iconfont':true, 'icon-icon_weizuo':item.endTime!='','icon-icon_zhengzaijinx':item.endTime=='' }"
+                  ></i>
+                  <span class="text1">{{item.startTime}}</span>
+                </div>
+                <div
+                  :class="{'cont':true,'blue':item.endTime!='' }"
+                >
+                  <p class="text2" v-if="item.desc">{{item.desc}}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+          <p class="info_hide">
+            <span class="fl hide" @click="proHides()">{{pro_hides?'隐藏详情 <<':'展开详情 >>'}}</span>
+          </p>
+        </div>
+      </div>
+      <load-ing v-if="!model.incident"></load-ing>
+    </div>
+  </div>
+</template>
+<script>
+import LoadIng from "./../views/loading.vue";
+export default {
+  data() {
+    return {
+      id:'',
+      loginUser: JSON.parse(localStorage.getItem("loginUser")),
+      valConfig: JSON.parse(localStorage.getItem("valConfig")) - 0, //报修主体
+      selected: 1,
+      options: [
+        {
+          label: "接单",
+          value: 1
+        },
+        {
+          label: "关单信息",
+          value: 2
+        }
+      ],
+      resignComment: "", //重新指派原因
+      item_hides: false,
+      item_hides1: false,
+      actives: "info",
+      processInstanceId: "",
+      progressInfo: [], //处理进度
+      imgs: [], //图片
+      model: {}, //提交数据
+      pro_hides:false,//展开/收起处理进度
+    };
+  },
+  components: {
+    LoadIng
+  },
+  methods: {
+    //   获取事件数据
+    getParamsData() {
+      var that = this;
+      that.$http
+        .get(
+          "/service/form/renderForm/receiveform/" +
+            that.processInstanceId +
+            "/" +
+            that.loginUser.id+'/'+that.id,
+          {}
+        )
+        .then(function(res) {
+          console.log(res.data);
+          that.model = res.data.model;
+          //seimin
+          localStorage.setItem('modelData',JSON.stringify(that.model))
+        });
+    },
+    // 获取图片
+    getImgs() {
+      var that = this;
+      that.$http
+        .get(
+          "service/common/common/listAttachment/incident/" +
+            that.processInstanceId,
+          {}
+        )
+        .then(function(res) {
+          console.log(res.data);
+          that.imgs = res.data.data.splice(0, 3);
+          console.log(that.imgs);
+        });
+    },
+    // 获取处理进度
+    getProgressInfo() {
+      var that = this;
+      that.$http
+        .post(
+          "/service/bpm/bpm/flowTracingCustom/" + that.processInstanceId,
+          {}
+        )
+        .then(function(res) {
+          console.log(res.data);
+          that.progressInfo = res.data.data;
+          that.progressInfo.reverse();
+        });
+    },
+    //隐藏显示详情
+    hides() {
+      this.item_hides = !this.item_hides;
+      $("#shows").slideToggle();
+    },
+
+    // 处理进度隐藏/展开
+    proHides(){
+      if(!this.pro_hides){
+        $('#progressBox').animate({'height':$('#progressBox')[0].scrollHeight})
+      }else{
+        $('#progressBox').animate({'height':'1.7rem'})
+      }
+      this.pro_hides=!this.pro_hides;
+    },
+    //隐藏显示详情
+    hides1() {
+      this.item_hides1 = !this.item_hides1;
+      $("#shows1").slideToggle();
+    },
+    // 快速定位
+    toInfo(id) {
+      this.actives = id;
+      $("body,html").animate(
+        {
+          scrollTop:
+            $("#" + id).offset().top -
+            $(".header")[0].offsetHeight -
+            $(".navBar")[0].offsetHeight
+        },
+        260
+      );
+    }
+  },
+  created() {
+    // seimin
+    this.processInstanceId = this.$route.params.data
+      ? this.$route.params.data.processInstanceId
+      : JSON.parse(localStorage.getItem("modelData")).incident
+          .processInstanceId;
+          this.id=this.$route.params.data?this.$route.params.data.id:JSON.parse(localStorage.getItem("modelData")).incident.id;
+    this.getParamsData();
+    this.getProgressInfo();
+    this.getImgs();
+  }
+};
+</script>
+<style lang="less" scoped>
+i.iconfont {
+  &.blue {
+    color: #005395;
+    // &::after {
+    //   content: "";
+    //   width: 0.01rem;
+    //   height: 0.4rem;
+    //   background: #005395;
+    //   position: relative;
+    //   display: block;
+    //   left: 0.14rem;
+    // }
+  }
+  &.blue1 {
+    color: #005395;
+  }
+}
+.closed {
+  .header {
+    width: 100%;
+    height: 0.88rem;
+    line-height: 0.88rem;
+    text-align: center;
+    color: #fff;
+    font-size: 0.37rem;
+    background: linear-gradient(#2e2f32, #414246);
+    position: fixed;
+    top: 0;
+    z-index: 6;
+  }
+  .navBar {
+    width: 100%;
+    height: 0.96rem;
+    line-height: 0.96rem;
+    background-color: #fafafa;
+    font-size: 0.28rem;
+    position: fixed;
+    top: 0.88rem;
+    div {
+      width: 25%;
+      text-align: center;
+      a {
+        display: inline-block;
+        height: 0.9rem;
+        width: 1.7rem;
+        padding: 0 0.1rem;
+        &.active {
+          color: #005395;
+          border-bottom: 0.06rem solid #005395;
+        }
+      }
+    }
+  }
+
+  .headtop {
+    margin-top: 1.84rem;
+  }
+  .label {
+    background-color: #eeeeee;
+    height: 0.6rem;
+    line-height: 0.58rem;
+    padding-left: 0.2rem;
+    font-size: 0.24rem;
+    color: #666666;
+    span {
+      font-size: 0.2rem;
+      display: inline-block;
+      margin-left: 0.08rem;
+      color: #999999;
+    }
+    &.formLabel {
+      background-color: #fff;
+    }
+  }
+  .conentBox {
+    width: 100%;
+    .conent {
+      font-size: 0.32rem;
+      font-weight: 400;
+      line-height: 0.45rem;
+      // border-bottom: 0.16rem solid #e5e5e5;
+
+      .shows {
+        display: none;
+      }
+
+      .shows1 {
+        display: none;
+      }
+      .boeder_B {
+        border-bottom: 0.01rem solid #ccc;
+      }
+         p {
+          &.desc{
+            overflow: hidden;
+          }
+          .grayFont {
+            width: 75%;
+            text-align: right;
+            overflow-x: scroll;
+          }
+      }
+      .bottom {
+        overflow: hidden;
+        line-height: 0.86rem;
+        border-bottom: 0.01rem solid #e6e6e6;
+        font-size: 0.24rem;
+        color: #999;
+        padding: 0 0.24rem 0 0.48rem;
+      }
+      .info {
+        color: #999;
+        font-size: 0.28rem;
+        overflow: hidden;
+        .head {
+          border-bottom: 0.01rem solid #e6e6e6;
+          p {
+            padding: 0.24rem 0.3rem;
+            i {
+              color: #00559d;
+            }
+          }
+        }
+        p {
+          line-height: 0.4rem;
+          padding: 0.1rem 0.24rem;
+          overflow: hidden;
+          .overflowEllipsis2 {
+            margin-left: 1.96rem;
+          }
+        }
+        .info_hide {
+          padding: 0.2rem 0.24rem;
+          border-bottom: 0.01rem solid #e6e6e6;
+          .hide {
+            color: #00559d;
+          }
+        }
+        .imgs-container{
+          a{
+            color:#03c !important;
+            &:visited{
+              color: #551a8b !important;
+            }
+          }
+           img {
+            width: 1.5rem;
+            height: 1.5rem;
+            margin-right: 0.7rem;
+            &:nth-child(1) {
+              margin-left: 0.75rem;
+            }
+          }
+        }
+        .progress {
+          padding: 0.2rem 0.2rem;
+          overflow: hidden;
+          transition-duration: .2s;
+          transition-timing-function: linear;
+          &.progressHide{
+            height: 1.7rem;
+          }
+          .progress_info {
+            overflow: hidden;
+            margin-bottom: 0.1rem;
+            &:nth-last-child(1){
+              .cont{
+                border:none !important;
+              }
+            }
+            .progress_info_L {
+              float: left;
+              color: #333;
+              max-width: 18%;
+            }
+            .progress_info_R {
+              float: right;
+              margin-left: 0.09rem;
+              width: 80%;
+              font-size: 0.25rem;
+              .time {
+                i {
+                  margin-left: -0.15rem;
+                  &.icon-icon_weizuo {
+                    color: #005495;
+                  }
+                  &.icon-icon_zhengzaijinx {
+                    color: #48a843;
+                    font-size: 0.37rem;
+                  }
+                }
+                span {
+                  margin-left: 0.15rem;
+                }
+              }
+              .cont {
+                border-left: 1px solid #999;
+                padding-left: 0.4rem;
+                min-height: 0.4rem;
+                &.blue {
+                  border-left: 1px solid #005395;
+                }
+              }
+
+              .text1 {
+                font-size: 0.15rem;
+              }
+              .text2 {
+                color: #666;
+              }
+              p {
+                padding: 0;
+              }
+            }
+          }
+        }
+      }
+      .txtLabel {
+        width: 100%;
+        overflow: hidden;
+        padding: 0.32rem 0.24rem 0.32rem 0.32rem;
+        .txt {
+          width: 30%;
+          color: #666;
+        }
+        .cube-textarea-wrapper {
+          width: 62%;
+        }
+      }
+      .sub {
+        background: #ececec;
+        .cube-btn {
+          background-color: #005395 !important;
+          width: 90%;
+          margin: 0.2rem auto;
+          border-radius: 8px;
+        }
+      }
+    }
+  }
+  .showwrap {
+    width: 75%;
+    text-align: right;
+  }
+}
+</style>

src/views/commonProblem.vue

@@ -1,101 +0,0 @@
-<template>
-    <div>
-        <div class="label">
-            常见问题</div>
-        <div v-for="(v,index) in items">
-            <div class="title" @click="titClick(index)">
-                <span>{{v.title}}</span>
-                <i class="iconfont icon-moren ico"></i>
-            </div>
-            <div class="conent">
-                <div v-html="v.content"></div>
-            </div>
-        </div>
-    </div>
-</template>
-<script>
-export default {
-    data(){
-        return{
-            items:[
-                
-            ],
-            dictionaryId:"",
-            data:[]
-        }
-    },
-    methods:{
-        getParamsData(){
-            this.data=JSON.parse(this.$route.params.data)
-        },
-        titClick(res){
-            if($(".conent").eq(res).css("height")=="0px"){
-                $(".conent").eq(res).animate({"height":"100%"},0);
-                $(".ico").eq(res).css({"transform":"rotate(90deg)"})
-            }else{
-                $(".conent").eq(res).animate({"height":"0"},0);
-                $(".ico").eq(res).css({"transform":"rotate(0deg)"})
-            }
-        },
-        getDictionaryId(){
-            var that=this;
-            that.$http.post('service/solution/fetchDataList/serviceGuide',{
-                "idx": 0, 
-                "sum": 10,
-                "serviceGuide":{
-                    "serviceType":{"id":that.data.id},
-                    "status":1
-                }
-            }).then(function(res1){
-                that.items=res1.data.list
-            }) 
-        }
-    },
-    created(){
-        this.getParamsData();
-        this.getDictionaryId();
-    },
-    mounted(){
-    }
-}
-</script>
-<style scoped>
-.label {
-    background-color: rgb(238, 238, 238);
-    height: .6rem;
-    line-height: .6rem;
-    padding-left: .2rem;
-    font-size: .24rem;
-    color:#666666;
-    border-top: .01rem rgb(223, 222, 222) solid;
-    border-bottom: .01rem rgb(223, 222, 222) solid;
-}
-.title{
-    padding: 0 .24rem;
-    height: .88rem;
-    display: flex;
-    justify-content:space-between;
-    align-items:center;
-    border-bottom: .01rem rgb(223, 222, 222) solid;
-}
-.title span{
-    font-size: .32rem
-}
-.title i{
-    font-size: .32rem
-}
-.conent{
-    /* padding: .24rem; */
-    border-bottom: .01rem rgb(223, 222, 222) solid;
-    height: 0;
-    overflow: hidden;
-}
-.conent div{
-    padding: .24rem;
-    font-size: .28rem;
-    line-height: .39rem;
-    color: #666666;
-    overflow: hidden;
-    overflow-x: scroll
-}
-</style>

src/views/evaluate.vue

@@ -1,383 +0,0 @@
-<template>
-    <div class="bgColor">
-        <div class="rapirMessage">
-            <div class="label">
-                报修信息
-            </div>
-            <div class="state">
-                <div>报修编号:&nbsp;{{data.incident.incidentsign}}</div>
-                <div :class="stateClassFn(data.state.name)">{{data.state.name}}</div>
-            </div>
-            <div class="description">
-                <div>
-                    报修内容:
-                </div>
-                <div>
-                    {{data.description||"暂无"}}
-                </div>
-            </div>
-            <div class="ipt">
-                <div>
-                    报修图片:
-                </div>
-                <div class="imgs-container">
-                    <img :src="img" v-for="(img, index) in imgs" @click="handleImgsClick(index)" v-if="imgs.length">
-                    <span v-if="!imgs.length">暂无</span>
-                </div>
-            </div>
-            <div class="faultLocation">
-                <div>
-                    报修地址:
-                </div>
-                <div>
-                    {{data.address}}
-                </div>
-            </div>
-        </div>
-        <div class="label">
-            报修评价
-        </div>
-        <div class="rate">
-            <span class="pj">评价:</span><cube-rate v-model="rate"></cube-rate>
-        </div>
-        <div class="rateText">
-            <cube-textarea v-model="rateText" placeholder="您可以从响应速度、解决情况、服务态度等方面,给我们作出相应的评价"></cube-textarea>
-        </div>
-        <div class="chehuiBox">
-
-        </div>
-        <div class="chehui">
-            <div class="btn" @click="evaluate()">提&nbsp;交&nbsp;评&nbsp;价</div>
-        </div>
-        <promp-ting :conents="promptingConent" :status="promptingStatus"></promp-ting>
-    </div>
-</template>
-<script>
-import PrompTing from './../views/prompting.vue'
-export default {
-    data(){
-        return{
-            data:"",
-            imgs:[],
-            rate:0,
-            rateText:"",
-            rateData:1603,
-            promptingConent:"",
-            promptingStatus:"",
-            degreeDictionary:[]
-        }
-    },
-    methods:{
-        evaluate(){
-            if(this.rateData==1603){
-                this.$createDialog({
-                    type: 'alert',
-                    title: '评分未选',
-                    content: '请选择评分',
-                    icon: 'cubeic-wrong'
-                }).show()
-            }else if(this.rateText==""){
-                this.$createDialog({
-                    type: 'alert',
-                    title: '评价未填',
-                    content: '请作出您的评价',
-                    icon: 'cubeic-wrong'
-                }).show()
-            }else{
-                var that=this;
-                this.$http.post('service/apply/bpm/degree',{
-                    "id":that.data.id,
-                    "degree":this.rateData,
-                    "degreeRemark":this.rateText
-                }).then(function(res){
-                    if(res.status==200){
-                        that.promptingConent="恭喜您,评价成功!";
-                        that.promptingStatus=true;
-                        $("#fade").fadeIn();
-                        setTimeout(function(){
-                            $("#fade").fadeOut();
-                        },2000);
-                        that.dialog = that.$createDialog({
-                            type: 'alert',
-                            title: '恭喜您,提交评价成功!',
-                            content: '点击返回事件列表',
-                            icon: 'cubeic-right',
-                            onConfirm: (e, promptValue) => {
-                                that.$router.push({path:'/main/incidentList'})
-                            }
-                        }).show()
-                    }else{
-                        that.promptingConent="对不起,评价失败,请稍后再试!";
-                        that.promptingStatus=false;
-                        $("#fade").fadeIn();
-                        setTimeout(function(){
-                            $("#fade").fadeOut();
-                        },2000);
-                    }
-                })
-            }
-        },
-        getDeggreDictionart(){
-            var that=this;
-            this.$http.post('service/common/common/getDictionary',{
-                key: "incident_degree",
-                type: "list"
-            }).then(function(res){
-                that.degreeDictionary=res.data
-            })
-        },
-        getParams(){
-            this.data=JSON.parse(this.$route.params.data)
-        },
-        stateClassFn(data){
-            if(data=="未受理"){
-                return "weishouli"
-            }else if(data=="不受理"){
-                return "bushouli"
-            }else if(data=="处理中"){
-                return "chulizhong"
-            }else if(data=="待评价"){
-                return "daipingjia"
-            }else if(data=="已解决"){
-                return "yijiejue"
-            }else if(data=="已撤回"){
-                return "yichehui"
-            }else{
-                return "yichehui"
-            }
-        },
-        getImgsData(){
-            var that=this;
-            this.$http.get('service/common/common/listAttachment/wechatRequesterIncident/'+this.data.id,{
-            // this.$http.get('service/common/common/listAttachment/wechatRequesterIncident/'+this.data.bxcode,{
-            }).then(function(res){
-                for(var i=0;i<res.data.data.length;i++){
-                    // that.imgs.push("http://localhost/service/common/common/downloadAttachment/"+res.data.data[i].token)
-                    // that.imgs.push("http://weixintest.ngser.dashitech.com/service/common/common/downloadAttachment/"+res.data.data[i].token)
-                    that.imgs.push("http://itsmpoc.dashitech.com/service/common/common/downloadAttachment/"+res.data.data[i].token)
-                    // that.imgs.push("http://192.168.3.95/service/common/common/downloadAttachment/"+res.data.data[i].token)
-                }
-            })
-        },
-        handleImgsClick(index) {
-            this.initialIndex = index
-            const params = {
-            $props: {
-                imgs: this.imgs,
-                initialIndex: 'initialIndex',
-                loop: false
-            },
-            $events: {
-                change: (i) => {
-                this.initialIndex = i
-                }
-            }
-            }
-            this.$createImagePreview({ ...params }).show()
-        },
-    },
-    created(){
-        this.getParams(),
-        this.getImgsData(),
-        this.getDeggreDictionart()
-    },
-    mounted(){
-    },
-    components: {
-        PrompTing
-    },
-    watch:{
-        rate:{
-            handler:function(val){
-                console.log(this.degreeDictionary);
-                if(val==0){
-                    this.rateData=this.degreeDictionary[4].id
-                }else if(val==1){
-                    this.rateData=this.degreeDictionary[4].id
-                }else if(val==2){
-                    this.rateData=this.degreeDictionary[3].id
-                }else if(val==3){
-                    this.rateData=this.degreeDictionary[2].id
-                }else if(val==4){
-                    this.rateData=this.degreeDictionary[1].id
-                }else if(val==5){
-                    this.rateData=this.degreeDictionary[0].id
-                }
-            },
-            deep:true
-        }
-    }
-}
-</script>
-<style scoped>
-.bgColor{
-    background-color: white
-}
-.label{
-    background-color: rgb(238, 238, 238);
-    height: .6rem;
-    line-height: .6rem;
-    padding-left: .24rem;
-    font-size: .24rem;
-    color: #666666
-}
-.state{
-  display: flex;
-  justify-content:space-between;
-  align-items:center;
-  padding: 0 .24rem;
-  height: .88rem;
-  border-top: .01rem rgb(223, 222, 222) solid;
-  border-bottom: .01rem rgb(223, 222, 222) solid;
-}
-.state div:nth-child(1){
-  font-size: .32rem;
-  line-height: .45rem;
-  color:#333333
-}
-.state div:nth-child(2){
-  padding: .05rem .3rem;
-  /* border: 0.01rem rgb(0,0,255) solid; */
-  border-radius: 16px ;
-  /* color: rgb(0,0,255) */
-}
-.description{
-    display: flex;
-    justify-content:space-between;
-    padding: .24rem;
-    border-bottom: .01rem rgb(223, 222, 222) solid;
-}
-.description div:nth-child(1){
-    width: 20%;
-    font-size: .32rem;
-    color: #333333;
-    line-height: .45rem
-}
-.description div:nth-child(2){
-    width: 80%;
-    font-size: .32rem;
-    line-height: .45rem;
-    color: #333333
-}
-.ipt{
-    display: flex;
-    justify-content:space-between;
-    padding: .24rem;
-    border-bottom: .01rem rgb(223, 222, 222) solid;
-}
-.ipt div:nth-child(1){
-    width: 20%;
-    font-size: .32rem;
-    line-height: .45rem;
-    color: #333333
-}
-.ipt div:nth-child(2){
-    width: 80%;
-}
-.faultLocation{
-    display: flex;
-    justify-content:space-between;
-    padding: .24rem;
-    border-bottom: .01rem rgb(223, 222, 222) solid;
-}
-.faultLocation div:nth-child(1){
-    width: 20%;
-    font-size: .32rem;
-    line-height: .45rem;
-    color: #333333
-}
-.faultLocation div:nth-child(2){
-    width: 80%;
-    font-size: .32rem;
-    line-height: .45rem;
-    color: #333333
-}
-.imgs-container img{
-    width: 1.5rem;
-    height: 1.5rem;
-    margin-left: .2rem
-}
-.imgs-container img:nth-child(1){
-    margin-left: 0
-}
-.imgs-container span{
-    font-size: .32rem;
-    line-height: .45rem
-}
-.weishouli{
-  color:#991f00;
-  border: 0.01rem #991f00 solid;
-  background-color: #f4e8e5
-}
-.bushouli{
-  color:#666666;
-  background-color: #eeeeee;
-  border: 0.01rem #666666 solid;
-}
-.chulizhong{
-  color:#003057;
-  background-color: #e5eaee;
-  border: 0.01rem #003057 solid;
-}
-.daipingjia{
-  color:#825b00;
-  background-color: #f2eee5;
-  border: 0.01rem #825b00 solid;
-}
-.yijiejue{
-  color:#40a19c;
-  background-color: #ebf5f5;
-  border: 0.01rem #40a19c solid;
-}
-.yichehui{
-  color:#48a843;
-  background-color: #ecf6ec;
-  border: 0.01rem #48a843 solid;
-}
-.rate{
-    height: .88rem;
-    display: flex;
-    align-items:center;
-    padding: 0 .24rem;
-    border-bottom: .01rem rgb(223, 222, 222) solid;
-}
-.rate .pj{
-    font-size: .32rem;
-    display: inline-block;
-    margin-right: .2rem
-}
-.rateText{
-    padding: .24rem
-}
-.chehuiBox{
-    width: 100%;
-    height: 1.3rem;
-}
-.chehui{
-    height: 1.3rem;
-    width: 100%;
-    border-top: .01rem rgb(223, 222, 222) solid;
-    background-color: rgb(248,248,248);
-    position: fixed;
-    left: 0;
-    bottom: 0;
-    display: flex;
-    align-items:center;
-    justify-content:center
-}
-.chehui .btn{
-    width: 90%;
-    height: 1rem;
-    background-color: #005395;
-    border-radius: 10px;
-    line-height: 1rem;
-    color: white;
-    font-size: .36rem;
-    text-align: center
-}
-</style>
-<style>
-   .cube-textarea-wrapper{
-       height: 60px!important;
-   }
-</style>

src/views/grabSheet.vue

@@ -0,0 +1,545 @@
+<template>
+  <div class="grabSheet">
+    <div class="conentBox">
+      <div class="conent" >
+        <div class="header">处理方案</div>
+        <div class="box" v-if="model.incident">
+          <div class="navBar">
+            <div class="fl">
+              <a :class="{active:actives=='info'}" href="javascript:;" @click="toInfo('info')">事件信息</a>
+            </div>
+            <div class="fl">
+              <a
+                :class="{active:actives=='progress'}"
+                href="javascript:;"
+                @click="toInfo('progress')"
+              >处理进度</a>
+            </div>
+          </div>
+          <div class="label headtop" id="info">事件信息</div>
+
+          <div class="info">
+            <div class="head">
+              <p>
+                <i class="iconfont icon-zuixinbaoxiu newPapir"></i>
+                事件编号：{{model.incident?model.incident.incidentsign:''}}
+                <span
+                  class="fr btn daiqiangdan"
+                >待抢单</span>
+              </p>
+            </div>
+            <p>
+              <span class="fl">事件分类</span>
+              <span class="fr">{{model.incident.category.category||''}}</span>
+            </p>
+            <!-- <p>
+              <span class="fl">事件主题</span>
+              <span class="fr">{{model.incident.title||''}}</span>
+            </p> -->
+            <p class="desc">
+              <span class="fl">事件描述</span>
+              <span class="fr grayFont" v-html="model.incident.description"></span>
+            </p>
+            <div class="shows" id="shows">
+               <p v-if="valConfig==2">
+                <span class="fl">报修科室</span>
+                <span class="fr">{{model.incident.department?model.incident.department.dept:''}}</span>
+              </p>
+            <p v-if="valConfig==1">
+              <span class="fl">报修人</span>
+              <span class="fr">{{model.incident.requester.name}}</span>
+            </p>
+            <p v-if="valConfig==2">
+              <span class="fl">联系人</span>
+              <span class="fr">{{model.incident.contacts}}</span>
+            </p>
+              <p>
+                <span class="fl">联系电话</span>
+                <span class="fr">{{model.incident.contactsInformation||''}}</span>
+              </p>
+              <p>
+                <span class="fl">联系地址</span>
+                <span class="fr">{{model.incident.houseNumber||''||''}}</span>
+              </p>
+              <p class="boeder_B">
+                <span class="fl">事件来源</span>
+                <span class="fr">{{model.incident.source.name||''}}</span>
+              </p>
+              <!-- <p>
+                <span class="fl">影响度</span>
+                <span class="fr">{{model.incident.influence?model.incident.influence.name:''}}</span>
+              </p>
+              <p>
+                <span class="fl">紧急度</span>
+                <span class="fr">{{model.incident.emergency?model.incident.emergency.name:''}}</span>
+              </p> -->
+              <p>
+                <span class="fl">优先级</span>
+                <span class="fr">{{model.incident.priority?model.incident.priority.name:''}}</span>
+              </p>
+              <p>
+                <span class="fl">逾期响应时间</span>
+                <span class="fr">{{model.incident.overdueResponseDate||''}}</span>
+              </p>
+              <p>
+                <span class="fl">逾期解决时间</span>
+                <span class="fr">{{model.incident.overdueTime||''}}</span>
+              </p>
+            </div>
+            <p class="info_hide">
+              <span class="fl hide" @click="hides()" v-if="!item_hides">展开详情 >></span>
+              <span class="fl hide" @click="hides()" v-if="item_hides">隐藏详情<<</span>
+            </p>
+            <div class="imgs-container" v-if="imgs.length">
+              <div class="imgs-cont">
+                <img v-if='img.suffix=="jpeg"||img.suffix=="jpg"||img.suffix=="gif"||img.suffix=="png"||img.suffix=="svg"||img.suffix=="pdf"' :src="img.previewUrl" v-for="(img, index) in imgs" class="imgs">
+                <p v-else>
+                  <a :href='[img.previewUrl]'>{{img.name}}</a>
+                </p>
+              </div>
+            </div>
+
+            <div class="label" id="progress">处理进度</div>
+            <div :class="{'progress':true,'progressHide':!pro_hides}" id="progressBox">
+              <div class="progress_info" v-for="item in progressInfo">
+                <div class="progress_info_L">{{item.activityName}}</div>
+                <div class="progress_info_R">
+                  <div class="time">
+                    <i
+                      :class="{'iconfont':true, 'icon-icon_weizuo':item.endTime!='','icon-icon_zhengzaijinx':item.endTime=='' }"
+                    ></i>
+                    <span class="text1">{{item.startTime}}</span>
+                  </div>
+                  <div
+                    :class="{'cont':true,'blue':item.endTime!='' }"
+                  >
+                    <p class="text2" v-if="item.desc">{{item.desc}}</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <p class="info_hide">
+              <span class="fl hide" @click="proHides()">{{pro_hides?'隐藏详情 <<':'展开详情 >>'}}</span>
+            </p>
+          </div>
+          <cube-form-group class="sub">
+            <cube-button type="submit" @click="subVali()">抢单</cube-button>
+          </cube-form-group>
+        </div>
+      </div>
+
+        <load-ing v-if="!model.incident"></load-ing>
+    </div>
+  </div>
+</template>
+<script>
+import LoadIng from "./../views/loading.vue";
+export default {
+  data() {
+    return {
+      id:'',
+      loginUser: JSON.parse(localStorage.getItem("loginUser")),
+      valConfig: JSON.parse(localStorage.getItem("valConfig")) - 0, //报修主体
+      selected: 1,
+      options: [
+        {
+          label: "接单",
+          value: 1
+        },
+        {
+          label: "重新指派",
+          value: 2
+        }
+      ],
+      resignComment: "", //重新指派原因
+      item_hides: false,
+      actives: "info",
+      processInstanceId: "",
+      progressInfo: [], //处理进度
+      imgs: [], //图片
+      model: {}, //提交数据
+      jurisdiction:false,//是否有抢单权限
+      pro_hides:false,//展开/收起处理进度
+    };
+  },
+  methods: {
+    //   获取事件数据
+    getParamsData() {
+      var that = this;
+      var groups=[];
+      that.loginUser.group.forEach(element => {
+        groups.push(element.id);
+      });
+      console.log(groups)
+      that.$http
+        .get(
+          "/service/form/renderForm/receiveform/" +
+            that.processInstanceId +
+            "/" +
+            that.loginUser.id+'/'+that.id,
+          {}
+        )
+        .then(function(res) {
+          console.log(res.data);
+          that.model = res.data.model;
+          for(var i =0;i<groups.length;i++){
+            if(groups[i]==that.model.incident.candidateGroups){
+              that.jurisdiction=true;
+            }
+          }
+          //seimin
+          localStorage.setItem('modelData',JSON.stringify(that.model))
+        });
+    },
+    // 获取图片
+    getImgs() {
+      var that = this;
+      that.$http
+        .get(
+          "service/common/common/listAttachment/incident/" +
+            that.processInstanceId,
+          {}
+        )
+        .then(function(res) {
+          console.log(res.data);
+          that.imgs = res.data.data.splice(0, 3);
+          console.log(that.imgs);
+        });
+    },
+    // 获取处理进度
+    getProgressInfo() {
+      var that = this;
+      that.$http
+        .post(
+          "/service/bpm/bpm/flowTracingCustom/" + that.processInstanceId,
+          {}
+        )
+        .then(function(res) {
+          console.log(res.data);
+          that.progressInfo = res.data.data;
+          that.progressInfo.reverse();
+        });
+    },
+    //隐藏显示详情
+    hides() {
+      this.item_hides = !this.item_hides;
+      $("#shows").slideToggle();
+    },
+    // 处理进度隐藏/展开
+    proHides(){
+      if(!this.pro_hides){
+        $('#progressBox').animate({'height':$('#progressBox')[0].scrollHeight})
+      }else{
+        $('#progressBox').animate({'height':'1.7rem'})
+      }
+      this.pro_hides=!this.pro_hides;
+    },
+    subVali() {
+      //数据提交
+      var that = this;
+      that.$http
+        .post(
+          "service/bpm/bpm/claimAndCompletedTask/" + that.model.incident.taskId,
+          { receive_code: "handler", userId: that.loginUser.id }
+        )
+        .then(function(res) {
+          console.log(res.data);
+          if (res.data.status == 200) {
+            $("#fade").fadeIn();
+            that.promptingConent = "恭喜您,抢单成功!";
+            that.promptingStatus = true;
+            that.dialog = that
+              .$createDialog({
+                type: "alert",
+                title: "抢单成功",
+                content: "点击返回首页",
+                icon: "cubeic-right",
+                onConfirm: (e, promptValue) => {
+                  that.$router.push({ path: "/main" });
+                }
+              })
+              .show();
+            setTimeout(function() {
+              $("#fade").fadeOut();
+            }, 2000);
+          }
+        });
+    },
+    // 快速定位
+    toInfo(id) {
+      this.actives = id;
+      $("body,html").animate(
+        {
+          scrollTop:
+            $("#" + id).offset().top -
+            $(".header")[0].offsetHeight -
+            $(".navBar")[0].offsetHeight
+        },
+        260
+      );
+    }
+  },
+  components: {
+    LoadIng,
+
+  },
+  created() {
+    // seimin
+    this.processInstanceId = this.$route.params.data
+      ? this.$route.params.data.processInstanceId
+      : JSON.parse(localStorage.getItem("modelData")).incident
+          .processInstanceId;
+          this.id=this.$route.params.data?this.$route.params.data.id:JSON.parse(localStorage.getItem("modelData")).incident.id;
+    this.getParamsData();
+    this.getProgressInfo();
+    this.getImgs();
+  }
+};
+</script>
+<style lang="less" scoped>
+// i.iconfont.green {
+//   color: #48a843;
+// &::after {
+//   content: "";
+//   width: 0.01rem;
+//   height: 0.4rem;
+//   background: #005395;
+//   position: relative;
+//   display: block;
+//   left: 0.14rem;
+// }
+// }
+.grabSheet {
+  .header {
+    width: 100%;
+    height: 0.88rem;
+    line-height: 0.88rem;
+    text-align: center;
+    color: #fff;
+    font-size: 0.37rem;
+    background: linear-gradient(#2e2f32, #414246);
+    position: fixed;
+    top: 0;
+    z-index: 6;
+  }
+  .box{
+    min-height: 9.7rem;
+    position: relative;
+
+  }
+  .navBar {
+    width: 100%;
+    height: 0.96rem;
+    line-height: 0.96rem;
+    background-color: #fafafa;
+    font-size: 0.28rem;
+    position: fixed;
+    top: 0.88rem;
+    div {
+      width: 49.99%;
+      text-align: center;
+      a {
+        display: inline-block;
+        height: 0.9rem;
+        width: 1.7rem;
+        padding: 0 0.1rem;
+        &.active {
+          color: #005395;
+          border-bottom: 0.06rem solid #005395;
+        }
+      }
+    }
+  }
+
+  .headtop {
+    margin-top: 1.84rem;
+  }
+  .label {
+    background-color: #eeeeee;
+    height: 0.6rem;
+    line-height: 0.58rem;
+    padding-left: 0.2rem;
+    font-size: 0.24rem;
+    color: #666666;
+    span {
+      font-size: 0.2rem;
+      display: inline-block;
+      margin-left: 0.08rem;
+      color: #999999;
+    }
+    &.formLabel {
+      background-color: #fff;
+    }
+  }
+  .conentBox {
+    width: 100%;
+    .conent {
+      font-size: 0.32rem;
+      font-weight: 400;
+      line-height: 0.45rem;
+      // border-bottom: 0.16rem solid #e5e5e5;
+
+      .shows {
+        display: none;
+      }
+      .boeder_B {
+        border-bottom: 0.01rem solid #ccc;
+      }
+      p {
+          &.desc{
+            overflow: hidden;
+          }
+          .grayFont {
+            width: 75%;
+            text-align: right;
+            overflow-x: scroll;
+          }
+      }
+      .bottom {
+        overflow: hidden;
+        line-height: 0.86rem;
+        border-bottom: 0.01rem solid #e6e6e6;
+        font-size: 0.24rem;
+        color: #999;
+        padding: 0 0.24rem 0 0.48rem;
+      }
+      .info {
+        color: #999;
+        font-size: 0.28rem;
+        overflow: hidden;
+        padding-bottom: 1.3rem;
+        .head {
+          border-bottom: 0.01rem solid #e6e6e6;
+          p {
+            padding: 0.24rem 0.3rem;
+            i {
+              color: #00559d;
+            }
+          }
+        }
+        p {
+          line-height: 0.4rem;
+          padding: 0.1rem 0.24rem;
+          overflow: hidden;
+          .overflowEllipsis2 {
+            margin-left: 1.96rem;
+          }
+        }
+        .info_hide {
+          padding: 0.2rem 0.24rem;
+          border-bottom: 0.01rem solid #e6e6e6;
+          .hide {
+            color: #00559d;
+          }
+        }
+        .imgs-container{
+          a{
+            color:#03c !important;
+            &:visited{
+              color: #551a8b !important;
+            }
+          }
+           img {
+            width: 1.5rem;
+            height: 1.5rem;
+            margin-right: 0.7rem;
+            &:nth-child(1) {
+              margin-left: 0.75rem;
+            }
+          }
+        }
+        .progress {
+          padding: 0.2rem 0.2rem;
+          overflow: hidden;
+          transition-duration: .2s;
+          transition-timing-function: linear;
+          &.progressHide{
+            height: 1.7rem;
+          }
+          .progress_info {
+            overflow: hidden;
+            margin-bottom: 0.1rem;
+            &:nth-last-child(1){
+              .cont{
+                border:none !important;
+              }
+            }
+            .progress_info_L {
+              float: left;
+              color: #333;
+              max-width: 18%;
+            }
+            .progress_info_R {
+              float: right;
+              margin-left: 0.09rem;
+              width: 80%;
+              font-size: 0.25rem;
+              .time {
+                i {
+                  margin-left: -0.15rem;
+                  &.icon-icon_weizuo {
+                    color: #005495;
+                  }
+                  &.icon-icon_zhengzaijinx {
+                    color: #48a843;
+                    font-size: 0.37rem;
+                  }
+                }
+                span {
+                  margin-left: 0.15rem;
+                }
+              }
+              .cont {
+                border-left: 1px solid #999;
+                padding-left: 0.4rem;
+                min-height: 0.4rem;
+                &.blue {
+                  border-left: 1px solid #005395;
+                }
+              }
+
+              .text1 {
+                font-size: 0.15rem;
+              }
+              .text2 {
+                color: #666;
+              }
+              p {
+                padding: 0;
+              }
+            }
+          }
+        }
+      }
+      .txtLabel {
+        width: 100%;
+        overflow: hidden;
+        padding: 0.32rem 0.24rem 0.32rem 0.32rem;
+        .txt {
+          width: 30%;
+          color: #666;
+        }
+        .cube-textarea-wrapper {
+          width: 62%;
+        }
+      }
+      .sub {
+        background: #ececec;
+        position: absolute;
+        bottom: 0;
+        width: 100%;
+        .cube-btn {
+          background-color: #005395 !important;
+          width: 90%;
+          margin: 0.2rem auto;
+          border-radius: 8px;
+        }
+      }
+    }
+  }
+  .showwrap {
+    width: 75%;
+    text-align: right;
+  }
+}
+</style>

src/views/guide.vue

@@ -1,71 +1,359 @@
 <template>
-    <div class="bgColor">
-        <div class="label">
-            服务指南</div>
-        <ul>
-            <li @click="toCommonProblem(v)" v-for="v in listData">
-                <span>{{v.name}}</span>
+  <div class="bgColor">
+    <div class="header">公告列表</div>
+    <div class="search">
+      <input type="text" placeholder="搜索" v-model="search" @input="searchData()">
+    </div>
+    <div slot="content" class="scroll-wrapper nav">
+      <div class="demo">
+        <div class="scroll-list-wrap">
+          <cube-scroll
+            ref="scroll"
+            :data="items"
+            :options="options"
+            @pulling-down="onPullingDown"
+            @pulling-up="onPullingUp"
+          >
+            <div class="list">
+              <div class="item" v-for="item in items" @click="toDetail(item)">
+                <div
+                  class="title overflowEllipsis2"
+                  style="-webkit-box-orient: vertical !important;"
+                >{{item.title}}</div>
                 <i class="iconfont icon-moren"></i>
-            </li>
-        </ul>
+                <p class="time">{{item.createTime}}</p>
+              </div>
+            </div>
+            <div class="wushuju" v-show="items.length==0&&wushuju&&!loadShow">
+              <img src="./../../static/images/wushuju.svg" alt>
+              <p>暂无公告</p>
+            </div>
+            <template v-if="customPullDown" slot="pulldown" slot-scope="props">
+              <div
+                v-if="props.pullDownRefresh"
+                class="cube-pulldown-wrapper"
+                :style="props.pullDownStyle"
+              >
+                <div
+                  v-show="props.beforePullDown"
+                  class="before-trigger"
+                  :style="{paddingTop: props.bubbleY + 'px'}"
+                >
+                  <span :class="{rotate: props.bubbleY > pullDownRefreshThreshold - 40}">↓</span>
+                </div>
+                <div class="after-trigger" v-show="!props.beforePullDown">
+                  <div v-show="props.isPullingDown" class="loading">
+                    <cube-loading></cube-loading>
+                  </div>
+                  <div v-show="!props.isPullingDown" class="text">
+                    <!-- <span class="refresh-text">更新成功</span> -->
+                    <span class="refresh-text"></span>
+                  </div>
+                </div>
+              </div>
+            </template>
+          </cube-scroll>
+        </div>
+      </div>
     </div>
+    <load-ing v-show="loadShow&&!items.length"></load-ing>
+  </div>
 </template>
 <script>
+import Vue from "vue";
+import LoadIng from "./../views/loading.vue";
 export default {
-    data(){
-        return{
-            listData:[]
-        }
+  data() {
+    return {
+      pullDownRefresh: true,
+      pullDownRefreshThreshold: 60,
+      pullDownRefreshStop: 40,
+      pullDownRefreshTxt: "Refresh success",
+      pullUpLoad: true,
+      pullUpLoadThreshold: 0,
+      pullUpLoadMoreTxt: "加载更多",
+      pullUpLoadNoMoreTxt: "没有更多数据",
+      wushuju: false,
+      customPullDown: true,
+      loadShow: true,
+      noMore: false,
+      sum: 10,
+      idx: 0,
+      search: "",
+      items: [],
+      searching:false
+    };
+  },
+  computed: {
+    options() {
+      return {
+        pullDownRefresh: this.pullDownRefreshObj,
+        pullUpLoad: this.pullUpLoadObj,
+        scrollbar: true
+      };
     },
-    methods:{
-        toCommonProblem(data){
-            this.$router.push({
-                name:"CommonProblem",
-                params:{
-                    data:JSON.stringify(data)
-                }
-            })
-        },
-        getDictionary(){
-            var that=this;
-            this.$http.post('service/common/common/getDictionary',{"key":"service_type","type":"list"}).then(function(res){
-                that.listData=res.data;
-            })
-        }
+    pullDownRefreshObj: function() {
+      return this.pullDownRefresh
+        ? {
+            threshold: parseInt(this.pullDownRefreshThreshold),
+            txt: this.pullDownRefreshTxt
+          }
+        : false;
+    },
+    pullUpLoadObj: function() {
+      return this.pullUpLoad
+        ? {
+            threshold: parseInt(this.pullUpLoadThreshold),
+            txt: {
+              more: this.pullUpLoadMoreTxt,
+              noMore: this.pullUpLoadNoMoreTxt
+            }
+          }
+        : false;
+    }
+  },
+  components: {
+    LoadIng
+  },
+  methods: {
+    // 搜索
+    searchData() {
+      var that = this;
+      that.idx = 0;
+      that.items = [];
+      that.searching=true;
+      that.getData();
+    },
+    // 获取数据
+    getData() {
+      var that = this;
+      that.loadShow = true;
+      that.$http
+        .post("service/user/data/fetchDataList/notice", {
+          idx: that.idx,
+          sum: that.sum,
+          notice: { title: that.search, status: 1 }
+        })
+        .then(function(res) {
+          if (res.data.list.length > 0) {
+            if (that.searching) {
+              that.items = res.data.list;
+            } else {
+              that.items = that.items.concat(res.data.list);
+            }
+            that.wushuju = false;
+          } else {
+            that.wushuju = true;
+            that.$refs.scroll.forceUpdate();
+          }
+          that.loadShow = false;
+        });
+    },
+    // 查看详情
+    toDetail(item) {
+      this.$router.push({ name: "GuideDetail", params: { data: item } });
+    },
+    onPullingDown() {
+      var that = this;
+      that.idx = 0;
+      that.sum = 10;
+      that.items = [];
+      that.loadShow = true;
+      setTimeout(() => {
+        that.getData();
+      }, 500);
+    },
+    onPullingUp() {
+      var that = this;
+      that.idx += 1;
+      that.searching=false;
+      that.loadShow = true;
+      that.getData();
+    },
+    updatePullDownRefresh(val) {
+      this.pullDownRefresh = val;
+    },
+    updatePullDownRefreshThreshold(val) {
+      this.pullDownRefreshThreshold = val;
+    },
+    updatePullDownRefreshTxt(val) {
+      this.pullDownRefreshTxt = val;
+    },
+    updatePullUpLoad(val) {
+      this.pullUpLoad = val;
+    },
+    updatePullUpLoadThreshold(val) {
+      this.pullUpLoadThreshold = val;
+    },
+    updatePullUpLoadMoreTxt(val) {
+      this.pullUpLoadMoreTxt = val;
     },
-    mounted(){
+    updatePullUpLoadNoMoreTxt(val) {
+      this.pullUpLoadNoMoreTxt = val;
     },
-    created(){
-        this.getDictionary()
+    updateCustomPullDown(val) {
+      this.customPullDown = val;
+    },
+    rebuildScroll() {
+      Vue.nextTick(() => {
+        this.$refs.scroll.destroy();
+        this.$refs.scroll.initScroll();
+      });
     }
-}
+  },
+  mounted() {},
+  created() {
+    this.getData();
+  }
+};
 </script>
-<style scoped>
-.bgColor{
-    background-color: white
+<style lang="stylus" rel="stylesheet/stylus" scoped>
+.scroll-list-wrap {
+  /* height: 350px */
+  height: 87vh;
+  /* border: 1px solid rgba(0, 0, 0, 0.1) */
+  border-radius: 5px;
+  transform: rotate(0deg); // fix 子元素超出边框圆角部分不隐藏的问题
+  overflow: hidden;
+  padding-top: 14vh;
 }
-.label {
-    background-color: rgb(238, 238, 238);
-    height: .6rem;
-    line-height: .6rem;
-    padding-left: .2rem;
-    font-size: .24rem;
-    color:#666666;
-    border-top: .01rem rgb(223, 222, 222) solid;
-    border-bottom: .01rem rgb(223, 222, 222) solid;
-}
-li{
-    height: .88rem;
-    padding: 0 .24rem;
+
+.foods-wrapper {
+  .food-item {
     display: flex;
-    align-items:center;
-    justify-content:space-between;
-    border-bottom: .01rem rgb(223, 222, 222) solid;
+
+    /* min-width: 0 */
+    /* padding: 18px
+    border-bottom: 1px solid rgba(7, 17, 27, 0.1) */
+    &:last-child {
+      border-none();
+      margin-bottom: 0;
+    }
+
+    .food-content {
+      flex: 1;
+      min-width: 0;
+
+      .cartcontrol-wrapper {
+        position: absolute;
+        right: 0;
+        bottom: 12px;
+
+        .scroll-wrapper {
+          .cube-pulldown-wrapper {
+            .before-trigger {
+              font-size: 30px;
+              line-height: 30px;
+              align-self: flex-end;
+
+              span {
+                display: inline-block;
+                transition: all 0.3s;
+                color: #666;
+
+                &.rotate {
+                  transform: rotate(180deg);
+                }
+              }
+            }
+
+            .after-trigger {
+              .refresh-text {
+                color: grey;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>
+<style scoped lang='less'>
+.bgColor {
+  background-color: white;
+}
+.header {
+  width: 100%;
+  height: 0.88rem;
+  line-height: 0.88rem;
+  text-align: center;
+  color: #fff;
+  font-size: 0.37rem;
+  background: linear-gradient(#2e2f32, #414246);
+  position: fixed;
+  top: 0;
+  z-index: 6;
+}
+.search {
+  padding: 0.16rem 0.24rem;
+  box-sizing: border-box;
+  width: 100%;
+  background-color: #eeeeee;
+  border-bottom: 0.01rem #b7b7b7 solid;
+  position: fixed;
+  top: 0.88rem;
+  z-index: 6;
+  input {
+    width: 100%;
+    height: 0.56rem;
+    border-radius: 4px;
+    text-align: center;
+    font-size: 0.28rem;
+    &:focus {
+      outline: none;
+    }
+  }
+}
+.list {
+  .item {
+    padding-left: 0.24rem;
+    border-bottom: 0.01rem solid #e3e3e3;
+    position: relative;
+    padding-right: 0.9rem;
+    .iconfont {
+      position: absolute;
+      right: 0.24rem;
+      top: 40%;
+      color: #999;
+    }
+    .title {
+      font-size: 0.32rem;
+      color: #333;
+      line-height: 0.45rem;
+      // padding-right: 0.96rem;
+      padding-top: 0.24rem;
+      position: relative;
+      max-height: 0.9rem;
+      // max-width: 88%;
+      i {
+        position: absolute;
+        right: 0.24rem;
+        top: 56%;
+        color: #999;
+        font-size: 0.34rem;
+      }
+    }
+    .time {
+      font-size: 0.24rem;
+      color: #999;
+      line-height: 0.6rem;
+    }
+  }
+}
+.loading {
+  height: 2rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
-li span{
-    font-size: .32rem
+.wushuju {
+  margin-top: 2.4rem;
+  text-align: center;
+  color: #999;
 }
-li i{
-    font-size: .32rem
+.wushuju img {
+  width: 5.12rem;
+  height: 2.84rem;
 }
 </style>

src/views/guideDetail.vue

@@ -0,0 +1,90 @@
+<template>
+  <div>
+    <div class="header">公告详情</div>
+    <div class="title">
+      <div>{{data.title}}</div>
+      <div class="info">
+        <span class="fl">{{data.dept.dept}}</span>
+        <span class="fr">{{data.createTime}}</span>
+      </div>
+    </div>
+    <div class="content" v-html="data.content"></div>
+    <!-- <div class="txtRight">后勤部</div>
+    <div class="txtRight">2018-08-19</div>-->
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      items: [],
+      data: {}
+    };
+  },
+  methods: {
+    getData() {
+      var that = this;
+      that.data =that.$route.params.data;
+      console.log(that.data)
+    }
+  },
+  created() {
+    this.getData();
+  },
+  mounted() {}
+};
+</script>
+<style scoped lang='less'>
+.header {
+  width: 100%;
+  height: 0.88rem;
+  line-height: 0.88rem;
+  text-align: center;
+  color: #fff;
+  font-size: 0.37rem;
+  background: linear-gradient(#2e2f32, #414246);
+  position: fixed;
+  top: 0;
+  z-index: 6;
+}
+
+.title {
+  padding: 0 0.24rem;
+  //   height: 0.88rem;
+  font-size: 0.36rem;
+  margin-top: .88rem;
+  div {
+    width: 100%;
+    line-height: 0.88rem;
+    &.info {
+      overflow: hidden;
+      line-height: 0.45rem;
+      border-bottom: 0.01rem rgb(223, 222, 222) solid;
+      span {
+        color: #999;
+        font-size: 0.24rem;
+      }
+    }
+  }
+}
+
+.content {
+  color: #333;
+  font-size: 0.32rem;
+  padding: 0.32rem;
+  line-height: 0.45rem;
+  text-indent: 0.7rem;
+  margin-bottom: 0.32rem;
+  overflow: hidden;
+  .table{
+    width: 100% !important;
+  }
+}
+.txtRight {
+  color: #333;
+  font-size: 0.32rem;
+  text-align: right;
+  padding-right: 0.32rem;
+  line-height: 0.45rem;
+}
+</style>

src/views/incidentDetails.vue

@@ -1,661 +0,0 @@
-<template>
-    <div class="bgColor">
-        <div class="rapirMessage">
-            <div class="label">
-                报修信息
-            </div>
-            <div class="state">
-                <div>报修编号:&nbsp;{{data.bxcode}}</div>
-                <div :class="stateClassFn(data.state.name)">{{data.state.name}}</div>
-            </div>
-            <div class="description">
-                <div>
-                    报修内容:
-                </div>
-                <div>
-                    {{data.description||"暂无"}}
-                </div>
-            </div>
-            <div class="ipt">
-                <div>
-                    报修图片:
-                </div>
-                <div class="imgs-container">
-                    <img :src="img" v-for="(img, index) in imgs" @click="handleImgsClick(index)" v-if="imgs.length">
-                    <span v-if="!imgs.length">暂无</span>
-                </div>
-            </div>
-            <div class="faultLocation">
-                <div>
-                    报修地址:
-                </div>
-                <div>
-                    {{data.address}}
-                </div>
-            </div>
-        </div>
-        <div class="repairProgress">
-            <div class="label">
-                报修进度
-            </div>
-            <div class="handleUser">
-                <div>维修人:&nbsp;&nbsp;{{data.incident.handlingPersonnelUser&&data.incident.handlingPersonnelUser.name?data.incident.handlingPersonnelUser.name:"暂无"}}</div>
-                <div>电话:&nbsp;&nbsp;<span>{{data.incident.handlingPersonnelUser&&data.incident.handlingPersonnelUser.phone?data.incident.handlingPersonnelUser.phone:"暂无"}}</span></div>
-                <!-- <a href="tel:13429850125"><i class="iconfont icon-shouji"></i></a> -->
-                <a :href="getPhoneNum(data.incident.handlingPersonnelUser)"><i class="iconfont icon-shouji"></i></a>
-            </div>
-        </div>
-        <!-- 流程图 -->
-        <div class="processBox">
-            <div class="process" v-if="processData=='不受理'||processData=='结束'||processData=='已撤回'||processData=='重复事件'">
-                <div class="status">
-                    {{processMessage[4]?processMessage[4].name:""}}
-                </div>
-                <div class="ico">
-                    <i class="iconfont icon-icon_weizuo last"></i>
-                </div>
-                <div class="time">
-                    {{processTime[4]?processTime[4].startTime:""}}
-                </div>
-            </div>
-            <div class="processCont" v-if="processData=='不受理'||processData=='结束'||processData=='已撤回'||processData=='重复事件'">
-                <div class="status">
-                </div>
-                <div class="conents">
-                    {{processMessage[4]?processMessage[4].desc:""}}
-                </div>
-            </div>
-            <div class="process" v-if="processData=='评价'||processData=='结束'&&processData!='重复事件'">
-                <div class="status">
-                    {{processMessage[3]?processMessage[3].name:""}}
-                </div>
-                <div class="ico">
-                    <i class="iconfont icon-icon_zhengzaijinx now" v-if="processData=='评价'"></i>
-                    <i class="iconfont icon-icon_weizuo last" v-if="processData!='评价'"></i>
-                </div>
-                <div class="time">
-                    {{processTime[3]?processTime[3].startTime:""}}
-                </div>
-            </div>
-            <div class="processCont" v-if="processData=='评价'||processData=='结束'&&processData!='重复事件'">
-                <div class="status">
-                </div>
-                <div class="conents">
-                    {{processMessage[3]?processMessage[3].desc:""}}
-                </div>
-            </div>
-            <div class="process" v-if="processData=='处理'||processData=='评价'||processData=='结束'&&processData!='重复事件'">
-                <div class="status">
-                    {{processMessage[2]?processMessage[2].name:""}}
-                </div>
-                <div class="ico">
-                    <i class="iconfont icon-icon_zhengzaijinx now" v-if="processData=='处理'"></i>
-                    <i class="iconfont icon-icon_weizuo last" v-if="processData!='处理'"></i>
-                </div>
-                <div class="time">
-                    {{processTime[2]?processTime[2].startTime:""}}
-                </div>
-            </div>
-            <div class="processCont" v-if="processData=='处理'||processData=='评价'||processData=='结束'&&processData!='重复事件'">
-                <div class="status">
-                </div>
-                <div class="conents">
-                    {{processMessage[2]?processMessage[2].desc:""}}
-                </div>
-            </div>
-            <div class="process" v-if="processData=='受理'||processData=='处理'||processData=='评价'||processData=='结束'&&processData!='重复事件'">
-                <div class="status">
-                    {{processMessage[1]?processMessage[1].name:""}}
-                </div>
-                <div class="ico">
-                    <i class="iconfont icon-icon_zhengzaijinx now" v-if="processData=='受理'"></i>
-                    <i class="iconfont icon-icon_weizuo last" v-if="processData!='受理'"></i>
-                </div>
-                <div class="time">
-                    {{processTime[1]?processTime[1].startTime:""}}
-                </div>
-            </div>
-            <div class="processCont" v-if="processData=='受理'||processData=='处理'||processData=='评价'||processData=='结束'&&processData!='重复事件'">
-                <div class="status">
-                </div>
-                <div class="conents">
-                    {{processMessage[1]?processMessage[1].desc:""}}
-                </div>
-            </div>
-            <div class="process">
-                <div class="status">
-                    {{processMessage[0]?processMessage[0].name:""}}
-                </div>
-                <div class="ico">
-                    <i class="iconfont icon-icon_zhengzaijinx now" v-if="processData=='申请'"></i>
-                    <i class="iconfont icon-icon_weizuo last" v-if="processData!='申请'"></i>
-                </div>
-                <div class="time">
-                    {{data.createTime}}
-                </div>
-            </div>
-            <div class="processCont">
-                <div class="status">
-                </div>
-                <div class="conents lastConents">
-                    {{processMessage[0]?processMessage[0].desc:""}}
-                </div>
-            </div>
-        </div>
-        <!-- 撤回原因 -->
-        <div class="label" v-if="processData=='已撤回'">
-            撤回原因
-        </div>
-        <div class="faultLocation" v-if="processData=='已撤回'">
-            <div>
-                撤回原因:
-            </div>
-            <div>
-                {{data.retractReason||"暂无"}}
-            </div>
-        </div>
-        <!-- 不受理原因 -->
-        <div class="label" v-if="processData=='不受理'">
-            不受理原因
-        </div>
-        <div class="faultLocation2" v-if="processData=='不受理'">
-            <div>
-                不受理原因:
-            </div>
-            <div>
-                {{data.rejectRemark||"暂无"}}
-            </div>
-        </div>
-        <div class="chehui" v-if="processData=='申请'">
-            <div class="btn" @click="cehui()">撤&nbsp;回</div>
-        </div>
-        <div class="chehui" v-if="processData=='评价'">
-            <div class="btn" @click="evaluate()">评&nbsp;价</div>
-        </div>
-        <div class="fot"></div>
-        <load-ing v-show="loadShow"></load-ing>
-        <promp-ting :conents="promptingConent" :status="promptingStatus"></promp-ting>
-    </div>
-</template>
-<script>
-import PrompTing from './../views/prompting.vue'
-import LoadIng from './../views/loading.vue'
-export default {
-    data(){
-        return{
-            data:"",
-            initialIndex: 0,
-            imgs: [
-
-            ],
-            processData:"",
-            loadShow:false,
-            promptingConent:"",
-            promptingStatus:"",
-            processTime:[],
-            processMessage:[],
-            shenqing:"",
-            shouli:"",
-            chuli:"",
-            pingjia:"",
-            jieshu:""
-        }
-    },
-    methods:{
-        getPhoneNum(res){
-            if(res){
-                return "tel:"+res.phone
-            }else{
-                return "tel:"+""
-            }
-        },
-        evaluate(){
-            var that=this;
-            this.$router.push({
-                name:'Evaluate',
-                params:{
-                    data:JSON.stringify(that.data)
-                }
-            })
-        },
-        cehui(){
-            var that=this;
-            this.dialog = this.$createDialog({
-                type: 'prompt',
-                title: '请填写撤回原因',
-                prompt: {
-                value: '',
-                placeholder: '请输入撤回原因'
-                },
-                onConfirm: (e, promptValue) => {
-                    if(!promptValue){
-                        this.$createDialog({
-                            type: 'alert',
-                            title: '撤回原因不能为空',
-                            content: '请重新填写',
-                            icon: 'cubeic-wrong'
-                        }).show()
-                    }else{
-                        // that.loadShow=true;
-                        that.$http.post('service/apply/bpm/retract',{
-                            "id":that.data.id,
-                            "retractReason":promptValue
-                        }).then(function(res){
-                            // that.loadShow=false;
-                            if(res.status==200){
-                                that.promptingConent="恭喜您,撤回成功!";
-                                that.promptingStatus=true;
-                                $("#fade").fadeIn();
-                                setTimeout(function(){
-                                    $("#fade").fadeOut();
-                                },2000);
-                                that.dialog = that.$createDialog({
-                                    type: 'alert',
-                                    title: '撤回成功',
-                                    icon: 'cubeic-right',
-                                    onConfirm: (e, promptValue) => {
-                                        that.$router.push({path:'/main/incidentList'})
-                                    }
-                                }).show()
-                            }else{
-                                that.promptingConent="撤回失败,请稍后再试!";
-                                that.promptingStatus=false;
-                                $("#fade").fadeIn();
-                                setTimeout(function(){
-                                    $("#fade").fadeOut();
-                                },2000);
-                                that.dialog = that.$createDialog({
-                                    type: 'alert',
-                                    title: '撤回失败',
-                                    icon: 'cubeic-wrong',
-                                    onConfirm: (e, promptValue) => {
-
-                                    }
-                                }).show()
-                            }
-                        })
-                    }
-                }
-            }).show()
-        },
-        handleImgsClick(index) {
-            this.initialIndex = index
-            const params = {
-            $props: {
-                imgs: this.imgs,
-                initialIndex: 'initialIndex',
-                loop: false
-            },
-            $events: {
-                change: (i) => {
-                this.initialIndex = i
-                }
-            }
-            }
-            this.$createImagePreview({ ...params }).show()
-        },
-        getParamsData(){
-            this.data=JSON.parse(this.$route.params.data);
-            if(this.data.incident.repeat){
-                this.processData="重复事件"
-            }else if(this.data.state.name=="不受理"){
-                this.processData="不受理"
-            }else if(this.data.state.name=="未受理"){
-                this.processData="申请"
-            }else if(this.data.state.name=="处理中"){
-                this.processData="处理"
-            }else if(this.data.state.name=="待评价"){
-                this.processData="评价"
-            }else if(this.data.state.name=="已解决"){
-                this.processData="结束"
-            }else if(this.data.state.name=="已撤回"){
-                this.processData="已撤回"
-            }
-            console.log(this.processData)
-        },
-        getProcessTime(){
-            var that=this;
-            if(this.data.incident.processInstanceId){
-                this.$http.post('service/bpm/bpm/flowTracing/'+this.data.incident.processInstanceId,{
-
-                }).then(function(res){
-                    that.processTime=res.data.data
-                })
-            }
-        },
-        getImgsData(){
-            var that=this;
-            this.$http.get('service/common/common/listAttachment/wechatRequesterIncident/'+this.data.id,{
-            // this.$http.get('service/common/common/listAttachment/wechatRequesterIncident/'+this.data.bxcode,{
-            }).then(function(res){
-                for(var i=0;i<res.data.data.length;i++){
-                    // that.imgs.push("http://localhost/service/common/common/downloadAttachment/"+res.data.data[i].token)
-                    // that.imgs.push("http://weixintest.ngser.dashitech.com/service/common/common/downloadAttachment/"+res.data.data[i].token)
-                    that.imgs.push(res.data.data[i].previewUrl)
-                    // that.imgs.push("http://192.168.3.95/service/common/common/downloadAttachment/"+res.data.data[i].token)
-                }
-            })
-        },
-        stateClassFn(data){
-            if(data=="未受理"){
-                return "weishouli"
-            }else if(data=="不受理"){
-                return "bushouli"
-            }else if(data=="处理中"){
-                return "chulizhong"
-            }else if(data=="待评价"){
-                return "daipingjia"
-            }else if(data=="已解决"){
-                return "yijiejue"
-            }else if(data=="已撤回"){
-                return "yichehui"
-            }else{
-                return "yichehui"
-            }
-        },
-        getProcessData(){
-            var that=this;
-            this.$http.post('service/bpm/bpm/flowTracing/'+this.data.incident.processInstanceId,{
-
-            }).then(function(res){
-                var data=res.data.data;
-                // if(data.length==0&&that.data.state.name=="已解决"){
-                //     that.processData="不受理"
-                // }else if(data.length==0&&that.data.state.name=="未受理"){
-                //     that.processData="申请"
-                // }else if(data.length>0&&data[data.length-1].activityName=="接单"){
-                //     that.processData="处理"
-                // }else if(data.length>0&&data[data.length-1].activityName=="事件处理"){
-                //     that.processData="处理"
-                // }else if(data.length>0&&data[data.length-1].activityName=="事件关闭"){
-                //     that.processData="评价"
-                // }else if(data.length>0&&data[data.length-1].activityName=="结束"){
-                //     that.processData="结束"
-                // }else{
-                //     that.processData="已撤回"
-                // }
-            });
-        },
-        getProcessMessageData(){
-            var that=this;
-            this.$http.post('service/sysinfo/data/fetchDataList/dictionary',{
-                "idx":0,
-                "sum":10,
-                "dictionary":{
-                    "key":"wxincident_task_default"
-                }
-            }).then(function(res){
-                that.processMessage=res.data.list;
-                console.log(that.processMessage)
-                // that.shenqing=that.processMessage[0].desc;
-                // that.shouli=that.processMessage[1].desc;
-                // that.chuli=that.processMessage[2].desc;
-                // that.pingjia=that.processMessage[3].desc;
-                // that.jieshu=that.processMessage[4].desc;
-            })
-        }
-    },
-    mounted(){
-    },
-    components: {
-        LoadIng,
-        PrompTing
-    },
-    created(){
-        this.getParamsData();
-        this.getImgsData();
-        this.getProcessData();
-        this.getProcessMessageData();
-        this.getProcessTime()
-    }
-}
-</script>
-<style scoped>
-.bgColor{
-    background-color: white
-}
-.fot{
-    height: 1.3rem;
-}
-.chehui{
-    height: 1.3rem;
-    width: 100%;
-    border-top: .01rem rgb(223, 222, 222) solid;
-    background-color: rgb(248,248,248);
-    position: fixed;
-    left: 0;
-    bottom: 0;
-    display: flex;
-    align-items:center;
-    justify-content:center
-}
-.chehui .btn{
-    width: 90%;
-    height: 1rem;
-    background-color: #005395;
-    border-radius: 10px;
-    line-height: 1rem;
-    color: white;
-    font-size: .36rem;
-    text-align: center
-}
-.label{
-    background-color: rgb(238, 238, 238);
-    height: .6rem;
-    line-height: .6rem;
-    padding-left: .24rem;
-    font-size: .24rem;
-    color: #666666
-}
-.state{
-  display: flex;
-  justify-content:space-between;
-  align-items:center;
-  padding: 0 .24rem;
-  height: .88rem;
-  border-top: .01rem rgb(223, 222, 222) solid;
-  border-bottom: .01rem rgb(223, 222, 222) solid;
-}
-.state div:nth-child(1){
-  font-size: .32rem;
-  line-height: .45rem;
-  color:#333333
-}
-.state div:nth-child(2){
-  padding: .05rem .3rem;
-  /* border: 0.01rem rgb(0,0,255) solid; */
-  border-radius: 16px ;
-  /* color: rgb(0,0,255) */
-}
-.weishouli{
-  color:#991f00;
-  border: 0.01rem #991f00 solid;
-  background-color: #f4e8e5
-}
-.bushouli{
-  color:#666666;
-  background-color: #eeeeee;
-  border: 0.01rem #666666 solid;
-}
-.chulizhong{
-  color:#003057;
-  background-color: #e5eaee;
-  border: 0.01rem #003057 solid;
-}
-.daipingjia{
-  color:#825b00;
-  background-color: #f2eee5;
-  border: 0.01rem #825b00 solid;
-}
-.yijiejue{
-  color:#40a19c;
-  background-color: #ebf5f5;
-  border: 0.01rem #40a19c solid;
-}
-.yichehui{
-  color:#48a843;
-  background-color: #ecf6ec;
-  border: 0.01rem #48a843 solid;
-}
-.description{
-    display: flex;
-    justify-content:space-between;
-    padding: .24rem;
-    border-bottom: .01rem rgb(223, 222, 222) solid;
-}
-.description div:nth-child(1){
-    width: 20%;
-    font-size: .32rem;
-    color: #333333;
-    line-height: .45rem
-}
-.description div:nth-child(2){
-    width: 80%;
-    font-size: .32rem;
-    line-height: .45rem;
-    color: #333333
-}
-.ipt{
-    display: flex;
-    justify-content:space-between;
-    padding: .24rem;
-    border-bottom: .01rem rgb(223, 222, 222) solid;
-}
-.ipt div:nth-child(1){
-    width: 20%;
-    font-size: .32rem;
-    line-height: .45rem;
-    color: #333333
-}
-.ipt div:nth-child(2){
-    width: 80%;
-}
-.faultLocation{
-    display: flex;
-    justify-content:space-between;
-    padding: .24rem;
-    border-bottom: .01rem rgb(223, 222, 222) solid;
-}
-.faultLocation div:nth-child(1){
-    width: 20%;
-    font-size: .32rem;
-    line-height: .45rem;
-    color: #333333
-}
-.faultLocation div:nth-child(2){
-    width: 80%;
-    font-size: .32rem;
-    line-height: .45rem;
-    color: #333333
-}
-.faultLocation2{
-    display: flex;
-    justify-content:space-between;
-    padding: .24rem;
-    border-bottom: .01rem rgb(223, 222, 222) solid;
-}
-.faultLocation2 div:nth-child(1){
-    width: 27%;
-    font-size: .32rem;
-    line-height: .45rem;
-    color: #333333
-}
-.faultLocation2 div:nth-child(2){
-    width: 73%;
-    font-size: .32rem;
-    line-height: .45rem;
-    color: #333333
-}
-.imgs-container img{
-    width: 1.5rem;
-    height: 1.5rem;
-    margin-left: .2rem
-}
-.imgs-container img:nth-child(1){
-    margin-left: 0
-}
-.imgs-container span{
-    font-size: .32rem;
-    line-height: .45rem
-}
-.handleUser{
-    display: flex;
-    justify-content:space-between;
-    align-items:center;
-    height: .88rem;
-    line-height: .88rem;
-    border-top: .01rem rgb(223, 222, 222) solid;
-    border-bottom: .01rem rgb(223, 222, 222) solid;
-    padding: 0 .24rem
-}
-.handleUser div:nth-child(1){
-    width: 49%;
-    border-right: .01rem rgb(223, 222, 222) solid;
-    /* padding-left: .24rem; */
-    font-size: .32rem;
-}
-.handleUser div:nth-child(2){
-    width: 50%;
-    padding-left: .24rem;
-    font-size: .32rem;
-}
-.handleUser div:nth-child(2) span{
-    color: #005395
-}
-.handleUser i{
-    font-size: .44rem;
-    color: #005395
-}
-.processBox{
-    margin-top: .24rem
-}
-.process{
-    padding: 0 .24rem;
-    display: flex
-}
-.process .status{
-    width: 12%;
-    font-size: .28rem;
-    text-align: center
-}
-.process .ico{
-    width: 6%;
-    text-align: center
-}
-.process .ico i{
-    font-size: .28rem
-}
-.process .last{
-    color: #005359
-}
-.process .now{
-    color:#48a843
-}
-.process .time{
-    width: 80%;
-    font-size: .25rem;
-    color:#999999;
-    padding-left: 2%
-}
-.processCont{
-    padding: 0 .24rem;
-    display: flex;
-    margin: .07rem 0;
-}
-.processCont .status{
-    width: 12%;
-}
-.processCont .conents{
-    width: 80%;
-    margin-left: 3%;
-    font-size: .25rem;
-    color: #666666;
-    padding: .07rem 0;
-    padding-left: 5%;
-    border-left: .01rem #999999 solid;
-    line-height: .3rem
-}
-.processCont .lastConents{
-    border-left: 0ch
-}
-</style>

src/views/incidentList.vue

@@ -1,115 +1,134 @@
 <template>
-    <div class="bgColor">
-        <div slot="content" class="scroll-wrapper">
-            <div class="demo">
-                <div class="scroll-list-wrap">
-                    <cube-scroll ref="scroll" :data="items" :options="options" @pulling-down="onPullingDown" @pulling-up="onPullingUp">
-                        <cube-select
-                          v-model="stateValue"
-                          :options="stateData"
-                          @change="stateChange()">
-                        </cube-select>
-                        <ul class="foods-wrapper">
-                            <li v-for="data in items" class="food-item border-1px" @click="toIncidentDetails(data)">
-                                <div class="food-content">
-                                    <div class="title">
-                                      <div><i class="iconfont icon-baoxiuliebiao"></i><span>报修编号:&nbsp;{{data.bxcode||"暂无"}}</span></div>
-                                      <div :class="stateClassFn(data.state.name)">{{data.state.name}}</div>
-                                    </div>
-                                    <div class="conent">
-                                      {{data.description}}
-                                    </div>
-                                    <div class="timeBox">
-                                      <div>
-                                        维修人:&nbsp;{{data.incident.handlingPersonnelUser?data.incident.handlingPersonnelUser.name:"暂无"}}
-                                      </div>
-                                      <div>
-                                        报修时间:&nbsp;{{data.createTime}}
-                                      </div>
-                                    </div>
-                                </div>
-                            </li>
-                            <div class="wushuju" v-show="wushuju">
-                              <img src="./../../static/images/wushuju.svg" alt="">
-                              <div class="noDataFont">暂无数据</div>
-                          </div>
-                        </ul>
-                        <template v-if="customPullDown" slot="pulldown" slot-scope="props">
-                            <div v-if="props.pullDownRefresh" class="cube-pulldown-wrapper" :style="props.pullDownStyle">
-                                <div v-show="props.beforePullDown" class="before-trigger" :style="{paddingTop: props.bubbleY + 'px'}">
-                                    <span :class="{rotate: props.bubbleY > pullDownRefreshThreshold - 40}">↓</span>
-                                </div>
-                                <div class="after-trigger" v-show="!props.beforePullDown">
-                                    <div v-show="props.isPullingDown" class="loading">
-                                        <cube-loading></cube-loading>
-                                    </div>
-                                    <div v-show="!props.isPullingDown" class="text">
-                                        <span class="refresh-text">更新成功</span>
-                                    </div>
-                                </div>
-                            </div>
-                        </template>
-                    </cube-scroll>
+  <div class="bgColor">
+    <div slot="content" class="scroll-wrapper">
+      <div class="demo">
+        <div class="header">事件列表</div>
+        <cube-select
+          class="stateSearch"
+          v-model="searchType"
+          :options="searchsType"
+          @change="stateChange()"
+        ></cube-select>
+        <!-- <div class="cont"> -->
+        <div class="scroll-list-wrap">
+          <cube-scroll
+            ref="scroll"
+            :data="items"
+            :options="options"
+            @pulling-down="onPullingDown"
+            @pulling-up="onPullingUp"
+          >
+            <div class="conentBox">
+              <div class="conent" v-for="item in items" @click="toIncidentDetails(item)">
+                <div class="head">
+                  <p>
+                    <i class="iconfont icon-zuixinbaoxiu newPapir"></i>
+                    事件编号：{{item.incidentsign}}
+                    <span
+                      :class="{'btn':true, 'daipingjia':item.state.name=='待评价', 'daijiedan':(item.state.name=='待接单'&&item.handlerUser&&!item.candidateGroups), 'daiqiangdan':(item.state.name=='待接单'&&!item.handlerUser&&item.candidateGroups), 'chulizhong':item.state.name=='处理中', 'yijiejue':item.state.name=='已解决', 'yiguanbi':item.state.name=='已关闭', 'chongxinzhipai':item.state.name=='重新指派'}"
+                    >{{item.state.name=='待接单'?((item.handlerUser&&!item.candidateGroups)?'待接单':'待抢单'):item.state.name}}</span>
+                  </p>
                 </div>
+                <div class="center">
+                  <p class="desc">
+                    <span class="fl">事件描述：</span>
+                    <span class="grayFont overflowEllipsis2" v-html="item.description"></span>
+                  </p>
+                  <p>
+                    报修<span>{{valConfig==1?'人':'科室'}}</span> ：
+                    <span class="grayFont">{{item.contacts}}</span>
+                  </p>
+                </div>
+                <div class="bottom">
+                  <span class="fl"><span>{{valConfig==1?'联系电话':'科室电话'}}</span>：{{item.contactsInformation}}</span>
+                  <span class="fr">报修时间：{{item.acceptDate}}</span>
+                </div>
+              </div>
+              <div class="wushuju" v-show="wushuju">
+                <img src="./../../static/images/wushuju.svg" alt>
+                <p>暂无事件</p>
+              </div>
             </div>
+            <template v-if="customPullDown" slot="pulldown" slot-scope="props">
+              <div
+                v-if="props.pullDownRefresh"
+                class="cube-pulldown-wrapper"
+                :style="props.pullDownStyle"
+              >
+                <div
+                  v-show="props.beforePullDown"
+                  class="before-trigger"
+                  :style="{paddingTop: props.bubbleY + 'px'}"
+                >
+                  <span :class="{rotate: props.bubbleY > pullDownRefreshThreshold - 80}">↓</span>
+                </div>
+                <div class="after-trigger" v-show="!props.beforePullDown">
+                  <div v-show="props.isPullingDown" class="loading">
+                    <cube-loading></cube-loading>
+                  </div>
+                  <div v-show="!props.isPullingDown" class="text">
+                    <span class="refresh-text">更新成功</span>
+                  </div>
+                </div>
+              </div>
+            </template>
+          </cube-scroll>
         </div>
-        <load-ing v-show="loadShow"></load-ing>
+      </div>
     </div>
+    <load-ing v-show="!items.length&&!wushuju"></load-ing>
+  </div>
 </template>
 <script>
-import Vue from 'vue'
-import CubePage from '../components/cube-page.vue'
-import SwitchOption from '../components/switch-option'
-import InputOption from '../components/input-option'
-import SelectOption from '../components/select-option'
-import {formatDate} from './../components/js/date.js';
-import LoadIng from './../views/loading.vue'
+import Vue from "vue";
+import CubePage from "../components/cube-page.vue";
+import SwitchOption from "../components/switch-option";
+import InputOption from "../components/input-option";
+import SelectOption from "../components/select-option";
+import { formatDate } from "./../components/js/date.js";
+import LoadIng from "./../views/loading.vue";
 export default {
   data() {
     return {
-    //   items: _foods,
-    loginUser:JSON.parse(localStorage.getItem("loginUser")),
-        items:[],
+      //   items: _foods,
+      loginUser: JSON.parse(localStorage.getItem("loginUser")),
+      valConfig: JSON.parse(localStorage.getItem("valConfig"))-0,//报修主体
+      items: [],
       pullDownRefresh: true,
       pullDownRefreshThreshold: 60,
       pullDownRefreshStop: 40,
-      pullDownRefreshTxt: 'Refresh success',
+      pullDownRefreshTxt: "Refresh success",
       pullUpLoad: true,
       pullUpLoadThreshold: 0,
-      pullUpLoadMoreTxt: 'Load more',
-      pullUpLoadNoMoreTxt: '没有更多数据',
+      pullUpLoadMoreTxt: "加载更多",
+      pullUpLoadNoMoreTxt: "没有更多数据",
       customPullDown: true,
-      wushuju:false,
-      stateData:[
+      wushuju: false,
+      candidateGroups: "",
+      searchsType: [
+        {
+          text: "全部",
+          value: "userAll"
+        },
+        {
+          text: "待处理",
+          value: "todo"
+        },
         {
-          text:"全部",
-          value:0
-        },{
-          text:"未受理",
-          value:1592
-        },{
-          text:"不受理",
-          value:1593
-        },{
-          text:"处理中",
-          value:1594
-        },{
-          text:"待评价",
-          value:1595
-        },{
-          text:"已解决",
-          value:1596
-        },{
-          text:"已撤回",
-          value:1597
+          text: "处理过",
+          value: "done"
+        },
+        {
+          text: "我创建",
+          value: "create"
         }
       ],
-      stateValue:0,
-      sum:10,
-      idx:0,
-      stateClass:"",
-      loadShow:true
-    }
+      searchType: "userAll",
+      sum: 10,
+      idx: 0,
+      stateClass: "",
+      loadShow: true
+    };
   },
   components: {
     CubePage,
@@ -124,364 +143,450 @@ export default {
         pullDownRefresh: this.pullDownRefreshObj,
         pullUpLoad: this.pullUpLoadObj,
         scrollbar: true
-      }
+      };
     },
     pullDownRefreshObj: function() {
-      return this.pullDownRefresh ? {
-        threshold: parseInt(this.pullDownRefreshThreshold),
-        txt: this.pullDownRefreshTxt
-      } : false
+      return this.pullDownRefresh
+        ? {
+            threshold: parseInt(this.pullDownRefreshThreshold),
+            txt: this.pullDownRefreshTxt
+          }
+        : false;
     },
     pullUpLoadObj: function() {
-      return this.pullUpLoad ? {
-        threshold: parseInt(this.pullUpLoadThreshold),
-        txt: {
-          more: this.pullUpLoadMoreTxt,
-          noMore: this.pullUpLoadNoMoreTxt
-        }
-      } : false
+      return this.pullUpLoad
+        ? {
+            threshold: parseInt(this.pullUpLoadThreshold),
+            txt: {
+              more: this.pullUpLoadMoreTxt,
+              noMore: this.pullUpLoadNoMoreTxt
+            }
+          }
+        : false;
     }
   },
   methods: {
-    getParamsState(){
-      if(this.$route.params.state){
-        this.stateValue=this.$route.params.state
+    getParamsState() {
+      if (this.$route.params.searchType) {
+        this.searchType = this.$route.params.searchType;
       }
     },
-    stateClassFn(data){
-      if(data=="未受理"){
-        return "weishouli"
-      }else if(data=="不受理"){
-        return "bushouli"
-      }else if(data=="处理中"){
-        return "chulizhong"
-      }else if(data=="待评价"){
-        return "daipingjia"
-      }else if(data=="已解决"){
-        return "yijiejue"
-      }else if(data=="已撤回"){
-        return "yichehui"
-      }else{
-        return "yichehui"
+    stateChange() {
+      var that = this;
+      this.loadShow = true;
+      that.items = [];
+      that.idx = 0;
+      that.sum = 10;
+      that.getData();
+    },
+    toIncidentDetails(data) {
+      console.log(1111111);
+      console.log(data);
+      var name = "";
+      if (data.state.value == 'pending') {
+        if (data.handlerUser && !data.candidateGroups) {
+          // 指派给人 接单
+          name = "Order";
+        } else if (data.candidateGroups && !data.handlerUser) {
+          // 指派给组 抢单
+          name = "GrabSheet";
+        }
+      } else if (data.state.value == "reassign") {
+        name = "AgainAssign";
+      } else if (data.state.value == 'handler') {
+        name = "Processing";
+      } else if (data.state.value == 'resolved') {
+        name = "Solved";
+      } else if (data.state.value == 'close') {
+        name = "Closed";
       }
+      this.$router.push({
+        name: name,
+        params: {
+          data: data,
+        }
+      });
     },
-    stateChange(){
-      var that=this;
-      this.loadShow=true;
-      that.items=[];
-      this.$http.post('service/apply/bpm/fetchServiceTasks',{
-          'assignee':that.loginUser.id,
-          'state':that.stateValue,
-          'idx':0,
-          'sum':10
-          }).then(function(res){
-            if(res.data.data.length>0){
-              for(var i=0;i<res.data.data.length;i++){
-                res.data.data[i].createTime=formatDate(new Date(res.data.data[i].createTime), 'yyyy-MM-dd hh:mm');
-              }
-              that.items=res.data.data;
-              that.wushuju=false
-            }else{
-              that.wushuju=true
-            }           
-            that.loadShow=false
+
+    getData() {
+      var that = this;
+
+      that.$http
+        .post("service/bpm/bpm/fetchTask/bpm_incident", {
+          assignee: that.loginUser.id,
+          candidateGroups: that.candidateGroups,
+          searchType: that.searchType,
+          idx: that.idx,
+          sum: that.sum,
+          incident: {temporary:true}
         })
-    },
-    toIncidentDetails(data){
-      this.$router.push({
-          name:'IncidentDetails',
-          params:{
-              data:JSON.stringify(data)
+        .then(function(res) {
+          if (res.data.data.length > 0) {
+            that.wushuju = false;
+            for (var i = 0; i < res.data.data.length; i++) {
+              res.data.data[i].createTime = formatDate(
+                new Date(res.data.data[i].createTime),
+                "yyyy-MM-dd hh:mm"
+              );
+            }
+            that.items = that.items.concat(res.data.data);
+          } else if(res.data.data.length <= 0) {
+            that.wushuju = true;
           }
-      })
+          that.loadShow = false;
+        });
     },
     onPullingDown() {
-      // 模拟更新数据
-      this.idx=0;
+      var that = this;
+      that.idx = 0;
+      that.sum = 10;
+      that.items = [];
       setTimeout(() => {
-        var that=this;
-        // that.items=[];
-        this.$http.post('service/apply/bpm/fetchServiceTasks',{
-          'assignee':that.loginUser.id,
-          'state':that.stateValue,
-          'idx':0,
-          'sum':10
-          }).then(function(res){
-            if(res.data.data.length>0){
-                that.wushuju=false;
-                for(var i=0;i<res.data.data.length;i++){
-                  res.data.data[i].createTime=formatDate(new Date(res.data.data[i].createTime), 'yyyy-MM-dd hh:mm');
-                }
-                that.items=res.data.data;
-            }else{
-                that.wushuju=true;
-                that.$refs.scroll.forceUpdate()
-            }
-        })
-      }, 1000)
-    },
-    getData(idx,sum){
-        var that=this;
-        this.$http.post('service/apply/bpm/fetchServiceTasks',{
-            'assignee':that.loginUser.id,
-            'state':that.stateValue,
-            'idx':idx,
-            'sum':sum
-        }).then(function(res){
-            if(res.data.data.length>0){
-              that.wushuju=false;
-              for(var i=0;i<res.data.data.length;i++){
-                res.data.data[i].createTime=formatDate(new Date(res.data.data[i].createTime), 'yyyy-MM-dd hh:mm');
-              }
-              that.items=res.data.data;
-            }else{
-              that.wushuju=true
-            }
-            that.loadShow=false
-        })
+        that.getData();
+      }, 1000);
     },
     onPullingUp() {
-      var that=this;
-      that.idx=that.idx+1;
-        this.$http.post('service/apply/bpm/fetchServiceTasks',{
-          'assignee':that.loginUser.id,
-          'state':that.stateValue,
-          'idx':that.idx,
-          'sum':that.sum,         
-          }).then(function(res){
-            for(var i=0;i<res.data.data.length;i++){
-              res.data.data[i].createTime=formatDate(new Date(res.data.data[i].createTime), 'yyyy-MM-dd hh:mm');
-            }       
-            setTimeout(() => {
-                if(res.data.data.length>0){
-                    that.items=that.items.concat(res.data.data);
-                }else{
-                    that.$refs.scroll.forceUpdate()
-                }
-            }, 1000)
-        })
+      var that = this;
+      that.idx = that.idx + 1;
+      that.getData();
     },
     updatePullDownRefresh(val) {
-      this.pullDownRefresh = val
+      this.pullDownRefresh = val;
     },
     updatePullDownRefreshThreshold(val) {
-      this.pullDownRefreshThreshold = val
+      this.pullDownRefreshThreshold = val;
     },
     updatePullDownRefreshTxt(val) {
-      this.pullDownRefreshTxt = val
+      this.pullDownRefreshTxt = val;
     },
     updatePullUpLoad(val) {
-      this.pullUpLoad = val
+      this.pullUpLoad = val;
     },
     updatePullUpLoadThreshold(val) {
-      this.pullUpLoadThreshold = val
+      this.pullUpLoadThreshold = val;
     },
     updatePullUpLoadMoreTxt(val) {
-      this.pullUpLoadMoreTxt = val
+      this.pullUpLoadMoreTxt = val;
     },
     updatePullUpLoadNoMoreTxt(val) {
-      this.pullUpLoadNoMoreTxt = val
+      this.pullUpLoadNoMoreTxt = val;
     },
     updateCustomPullDown(val) {
-      this.customPullDown = val
+      this.customPullDown = val;
     },
     rebuildScroll() {
       Vue.nextTick(() => {
-        this.$refs.scroll.destroy()
-        this.$refs.scroll.initScroll()
-      })
+        this.$refs.scroll.destroy();
+        this.$refs.scroll.initScroll();
+      });
     }
   },
-  created(){
-      this.getParamsState();
-      this.getData(this.idx,this.sum);
+  created() {
+    var that = this;
+    that.loginUser.group.forEach(element => {
+      that.candidateGroups += element.id + ",";
+    });
+    that.candidateGroups = that.candidateGroups.substring(
+      0,
+      that.candidateGroups.length - 1
+    );
+    this.getParamsState();
+    this.getData();
+
+    localStorage.removeItem("modelData");
+    localStorage.removeItem("category");
+    localStorage.removeItem("categoryVal");
+    localStorage.removeItem("referenceInfo");
+    localStorage.removeItem("order");
+    localStorage.removeItem("model");
+    localStorage.removeItem("selectedCategoryTxt");
   }
-}
+};
 </script>
 <style lang="stylus" rel="stylesheet/stylus" scoped>
-.scroll-list-wrap 
+.scroll-list-wrap {
   /* height: 350px */
-  height:95vh
+  height: 85vh;
   /* border: 1px solid rgba(0, 0, 0, 0.1) */
-  border-radius: 5px
-  transform: rotate(0deg) // fix 子元素超出边框圆角部分不隐藏的问题
-  overflow: hidden
+  border-radius: 5px;
+  transform: rotate(0deg); // fix 子元素超出边框圆角部分不隐藏的问题
+  overflow: hidden;
+  padding-top: 1.76rem;
+}
+
+.foods-wrapper {
+  .food-item {
+    display: flex;
 
-.foods-wrapper 
-  .food-item 
-    display: flex
     /* padding: 18px */
     /* border-bottom: 1px solid rgba(7, 17, 27, 0.1) */
     /* border-top: 1px solid rgba(7, 17, 27, 0.1)!important */
+    &:last-child {
+      border-none();
+      margin-bottom: 0;
+    }
+
+    .icon {
+      flex: 0 0 57px;
+      margin-right: 10px;
+    }
+
+    .food-content {
+      flex: 1;
+
+      .name {
+        margin: 2px 0 8px 0;
+        height: 14px;
+        line-height: 14px;
+        font-size: 14px;
+        color: rgb(7, 17, 27);
+      }
+
+      .description, .extra {
+        line-height: 10px;
+        font-size: 10px;
+        color: rgb(147, 153, 159);
+      }
 
-    &:last-child 
-      border-none()
-      margin-bottom: 0
-    .icon 
-      flex: 0 0 57px
-      margin-right: 10px
+      .description {
+        line-height: 12px;
+        margin-bottom: 8px;
+      }
 
-    .food-content 
-      flex: 1
-      .name 
-        margin: 2px 0 8px 0
-        height: 14px
-        line-height: 14px
-        font-size: 14px
-        color: rgb(7, 17, 27)
-      .description, .extra 
-        line-height: 10px
-        font-size: 10px
-        color: rgb(147, 153, 159)
-      .description 
-        line-height: 12px
-        margin-bottom: 8px
-      .extra 
-        .count 
-          margin-right: 12px
-      .price 
-        font-weight: 700
-        line-height: 24px
-        .now 
-          margin-right: 8px
-          font-size: 14px
-          color: rgb(240, 20, 20)
-        .old 
-          text-decoration: line-through
-          font-size: 10px
-          color: rgb(147, 153, 159)
-      .cartcontrol-wrapper 
-        position: absolute
-        right: 0
-        bottom: 12px
-        .scroll-wrapper{
-  .cube-pulldown-wrapper{
-    .before-trigger{
-      font-size: 30px;
-      line-height: 30px;
-      align-self: flex-end;
-      span{
-        display: inline-block;
-        transition: all 0.3s;
-        color: #666;
-        &.rotate{
-            transform: rotate(180deg)
+      .extra {
+        .count {
+          margin-right: 12px;
+        }
+      }
+
+      .price {
+        font-weight: 700;
+        line-height: 24px;
+
+        .now {
+          margin-right: 8px;
+          font-size: 14px;
+          color: rgb(240, 20, 20);
+        }
+
+        .old {
+          text-decoration: line-through;
+          font-size: 10px;
+          color: rgb(147, 153, 159);
+        }
+      }
+
+      .cartcontrol-wrapper {
+        position: absolute;
+        right: 0;
+        bottom: 12px;
+
+        .scroll-wrapper {
+          .cube-pulldown-wrapper {
+            .before-trigger {
+              font-size: 30px;
+              line-height: 30px;
+              align-self: flex-end;
+
+              span {
+                display: inline-block;
+                transition: all 0.3s;
+                color: #666;
+
+                &.rotate {
+                  transform: rotate(180deg);
+                }
+              }
+            }
+
+            .after-trigger {
+              .refresh-text {
+                color: grey;
+              }
+            }
           }
-      } 
-    }
-    .after-trigger{
-      .refresh-text{
-        color: grey
+        }
       }
     }
- }
+  }
 }
 </style>
-<style scoped>
-.bgColor{
-    background-color: white
+<style lang='less' scoped>
+.cont {
+  margin-top: 1.86rem;
+}
+.scroll-list-wrap {
+  padding-top: 1.76rem;
+}
+.header {
+  width: 100%;
+  height: 0.88rem;
+  line-height: 0.88rem;
+  text-align: center;
+  color: #fff;
+  font-size: 0.37rem;
+  background: linear-gradient(#2e2f32, #414246);
+  position: fixed;
+  top: 0;
+  z-index: 6;
 }
-.food-item{
-  border-top: .16rem rgb(238,238,238) solid;
+.stateSearch {
+  width: 100%;
+  position: fixed;
+  top: 0.88rem;
+  z-index: 6;
 }
-.food-content{
-  border-top: .01rem rgb(223, 222, 222) solid;
-  border-bottom: .01rem rgb(223, 222, 222) solid;
+.bgColor {
+  background-color: white;
 }
-.cube-select{
-  height: .88rem;
-  line-height: .88rem;
-  padding: 0 .24rem;
-  font-size: .36rem;
-  color:#333333
+.food-item {
+  border-top: 0.16rem rgb(238, 238, 238) solid;
 }
-.title{
+.food-content {
+  border-top: 0.01rem rgb(223, 222, 222) solid;
+  border-bottom: 0.01rem rgb(223, 222, 222) solid;
+}
+.cube-select {
+  height: 0.88rem;
+  line-height: 0.88rem;
+  padding: 0 0.24rem;
+  font-size: 0.36rem;
+  color: #333333;
+  border-bottom: 0.08rem solid #e5e5e5;
+}
+.title {
   display: flex;
-  justify-content:space-between;
-  height: .7rem;
-  line-height: .7rem;
-  border-top: .01rem rgb(223, 222, 222) solid;
-  padding: 0 .24rem;
-  border-bottom: .01rem rgb(223, 222, 222) solid;
+  justify-content: space-between;
+  height: 0.7rem;
+  line-height: 0.7rem;
+  border-top: 0.01rem rgb(223, 222, 222) solid;
+  padding: 0 0.24rem;
+  border-bottom: 0.01rem rgb(223, 222, 222) solid;
 }
-.title i{
-  font-size: .32rem;
-  color: #005395
+.title i {
+  font-size: 0.32rem;
+  color: #005395;
 }
-.title div:nth-child(1){
-  font-size: .32rem;
+.title div:nth-child(1) {
+  font-size: 0.32rem;
 }
-.title div:nth-child(1) span{
+.title div:nth-child(1) span {
   display: inline-block;
-  margin-left: .08rem
+  margin-left: 0.08rem;
 }
-.title div:nth-child(2){
-  padding: .05rem .3rem;
+.title div:nth-child(2) {
+  padding: 0.05rem 0.3rem;
   /* border: 0.01rem rgb(0,0,255) solid; */
-  border-radius: 16px ;
+  border-radius: 16px;
   /* color: rgb(0,0,255); */
-  height: .25rem;
-  line-height: .25rem;
-  margin-top: .15rem;
-  font-size: .24rem
+  height: 0.25rem;
+  line-height: 0.25rem;
+  margin-top: 0.15rem;
+  font-size: 0.24rem;
 }
-.weishouli{
-  color:#991f00;
+.weishouli {
+  color: #991f00;
   border: 0.01rem #991f00 solid;
-  background-color: #f4e8e5
+  background-color: #f4e8e5;
 }
-.bushouli{
-  color:#666666;
+.bushouli {
+  color: #666666;
   background-color: #eeeeee;
   border: 0.01rem #666666 solid;
 }
-.chulizhong{
-  color:#003057;
+.chulizhong {
+  color: #003057;
   background-color: #e5eaee;
   border: 0.01rem #003057 solid;
 }
-.daipingjia{
-  color:#825b00;
+.daipingjia {
+  color: #825b00;
   background-color: #f2eee5;
   border: 0.01rem #825b00 solid;
 }
-.yijiejue{
-  color:#40a19c;
+.yijiejue {
+  color: #40a19c;
   background-color: #ebf5f5;
   border: 0.01rem #40a19c solid;
 }
-.yichehui{
-  color:#48a843;
+.yichehui {
+  color: #48a843;
   background-color: #ecf6ec;
   border: 0.01rem #48a843 solid;
 }
-.conent{
-  font-size: .28rem;
-  line-height: .39rem;
-  overflow: hidden;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  word-break: break-all;
-  padding: 0 .64rem;
-  margin: .24rem 0
-}
-.timeBox{
+// .conent {
+//   font-size: 0.28rem;
+//   line-height: 0.39rem;
+//   overflow: hidden;
+//   display: -webkit-box;
+//   -webkit-line-clamp: 2;
+//   -webkit-box-orient: vertical;
+//   word-break: break-all;
+//   padding: 0 0.64rem;
+//   margin: 0.24rem 0;
+// }
+.timeBox {
   display: flex;
-  justify-content:space-between;
-  font-size: .24rem;
+  justify-content: space-between;
+  font-size: 0.24rem;
   color: #999999;
-  border-top: .01rem rgb(223, 222, 222) solid;
-  height: .7rem;
-  line-height: .7rem;
-  padding: 0 .24rem 0 .64rem
+  border-top: 0.01rem rgb(223, 222, 222) solid;
+  height: 0.7rem;
+  line-height: 0.7rem;
+  padding: 0 0.24rem 0 0.64rem;
+}
+.wushuju {
+  margin-top: 2.4rem;
+  text-align: center;
+  color: #999;
 }
-.wushuju{
-    margin-top: 2.4rem;
-    text-align: center;
+.wushuju img {
+  width: 5.12rem;
+  height: 2.84rem;
 }
-.wushuju img{
-    width: 5.12rem;
-    height: 2.84rem;
+.conentBox {
+  width: 100%;
+  height: 100%;
+  .conent {
+    font-size: 0.32rem;
+    font-weight: 400;
+    line-height: 0.45rem;
+    border-bottom: 0.16rem solid #e5e5e5;
+    .head {
+      border-bottom: 0.01rem solid #e6e6e6;
+      p {
+        padding: 0.24rem 0.48rem;
+        i {
+          color: #00559d;
+        }
+        .btn {
+          float: right;
+        }
+      }
+    }
+    .center {
+      color: #333333;
+      border-bottom: 0.01rem solid #e6e6e6;
+      padding: 0.24rem 0.48rem;
+      p {
+        &.desc{
+        overflow: hidden;
+        max-height: .88rem;
+        }
+        .grayFont {
+          overflow-x: scroll;
+          color: #666;
+        }
+      }
+    }
+    .bottom {
+      overflow: hidden;
+      line-height: 0.86rem;
+      border-bottom: 0.01rem solid #e6e6e6;
+      font-size: 0.24rem;
+      color: #999;
+      padding: 0 0.24rem 0 0.48rem;
+    }
+  }
 }
 </style>

src/views/indes.vue

@@ -1,460 +1,431 @@
 <template>
-    <div class="fle bgColor">
-        <!-- 头部导航栏 -->
-        <div class="tav">
-            <div @click="toRapir()">
-                <i class="iconfont icon-xinjian"></i>
-                <span>快速报修</span>
+  <div class="fle bgColor">
+    <!-- 头部导航栏 -->
+    <div class="tav">
+      <router-link to="/NewIncident">
+        <i class="iconfont icon-xinjian"></i>
+        <span>新建事件</span>
+      </router-link>
+      <!-- <div @click="toNewIncident()">
+        <i class="iconfont icon-xinjian"></i>
+        <span>新建事件</span>
+      </div>-->
+      <router-link to="/knowList">
+        <i class="iconfont icon-message"></i>
+        <span>常见问题</span>
+      </router-link>
+      <router-link to="/guide">
+        <i class="iconfont icon-fuwuzhinan"></i>
+        <span>公告公示</span>
+      </router-link>
+      <!-- <div @click="toKnowList()">
+        <i class="iconfont icon-message"></i>
+        <span>常见问题</span>
+      </div>
+      <div @click="toGuide()">
+        <i class="iconfont icon-fuwuzhinan"></i>
+        <span>公告公示</span>
+      </div>-->
+    </div>
+    <div class="bigBody">
+      <!-- 最新报修 -->
+      <div class="newRepair">
+        <div class="titHead">
+          <span class="tit">
+            <i class="iconfont icon-zuixinbaoxiu newPapir"></i>
+            <span>待办事项</span>
+          </span>
+          <span class="link" @click="toIncidentList('todo')">
+            更多
+            <i class="iconfont icon-moren"></i>
+          </span>
+        </div>
+        <div
+          class="conentBox"
+          v-for="item in dataList"
+          @click="toIncidentDetails(item)"
+          v-if="!!dataList.length"
+        >
+          <!-- <div class="conentBox" v-for="v in dataList" @click="toIncidentDetails(v)" v-if="!newRapirNoData&&!newRapirLoading"> -->
+          <div class="conent">
+            <div class="head">
+              <p>
+                事件单号：{{item.incidentsign}}
+                <span
+                  :class="{'btn':true, 'daipingjia':item.state.name=='待评价', 'daijiedan':(item.state.name=='待接单'&&item.state.name=='待接单'&&item.handlerUser&&!item.candidateGroups), 'daiqiangdan':(item.state.name=='待接单'&&item.state.name=='待接单'&&!item.handlerUser&&item.candidateGroups), 'chulizhong':item.state.name=='处理中', 'yijiejue':item.state.name=='已解决', 'yiguanbi':item.state.name=='已关闭', 'chongxinzhipai':item.state.name=='重新指派'}"
+                >{{item.state.name=='待接单'?((item.handlerUser&&!item.candidateGroups)?'待接单':'待抢单'):item.state.name}}</span>
+              </p>
             </div>
-            <div @click="toKnowList()">
-                <i class="iconfont icon-message"></i>
-                <span>常见问题</span>
+            <div class="center">
+              <p class="desc">
+                <span class="fl">事件描述：</span>
+                <span class="grayFont overflowEllipsis2" v-html="item.description"></span>
+              </p>
+              <p v-if='valConfig==1'>
+                报修人：
+                <span class="grayFont">{{item.requester.name}}</span>
+              </p>
+              <p v-if='valConfig==2'>
+                报修科室 ：
+                <span class="grayFont">{{item.department?item.department.dept:''}}</span>
+              </p>
             </div>
-            <div @click="toGuide()">
-                <i class="iconfont icon-fuwuzhinan"></i>
-                <span>服务指南</span>
+            <div class="bottom">
+              <span class="fl">联系电话：{{item.contactsInformation}}</span>
+              <span class="fr">报修时间：{{item.acceptDate}}</span>
             </div>
+          </div>
         </div>
-        <div class="bigBody">
-            <!-- 最新报修 -->
-            <div class="newRepair">
-                <div class="titHead">
-                    <span class="tit"><i class="iconfont icon-zuixinbaoxiu newPapir"></i><span>最新报修</span></span>
-                    <span class="link" @click="toIncidentList()">更多<i class="iconfont icon-moren"></i></span>
-                </div>
-                <div class="conentBox" v-for="v in newRapirData" @click="toIncidentDetails(v)" v-if="!newRapirNoData&&!newRapirLoading">
-                    <div class="conent">
-                        <div class="head">
-                            <!-- <span>{{v.requester.name}}</span> -->
-                            <span>报修编号:{{v.bxcode}}</span>
-                            <span>{{v.createTime}}</span>
-                        </div>
-                        <div class="cot">
-                            {{v.description}}
-                        </div>
-                    </div>
-                    <div class="flowChart">
-                        <div class="pits">
-                            <div :class="state!=1?'yesLine':''"></div>
-                            <div :class="state!=1&&state!=2?'yesLine':''"></div>
-                            <div :class="state!=1&&state!=2&&state!=3?'yesLine':''"></div>
-                            <div :class="state!=1&&state!=2&&state!=3&&state!=4?'yesLine':''"></div>
-
-                            <i class="iconfont icon-icon_weizuo shenqing no" v-if="false"></i>
-                            <i class="iconfont icon-icon_weizuo shouli no" v-if="state==1"></i>
-                            <i class="iconfont icon-icon_weizuo chuli no" v-if="state==2||state==1"></i>
-                            <i class="iconfont icon-icon_weizuo pingjia no" v-if="state==3||state==2||state==1"></i>
-                            <i class="iconfont icon-icon_weizuo wancheng no" v-if="state==4||state==3||state==2||state==1"></i>
-
-                            <i class="iconfont icon-icon_weizuo shenqing yes" v-if="state!=1"></i>
-                            <i class="iconfont icon-icon_weizuo shouli yes" v-if="state!=1&&state!=2"></i>
-                            <i class="iconfont icon-icon_weizuo chuli yes" v-if="state!=1&&state!=2&&state!=3"></i>
-                            <i class="iconfont icon-icon_weizuo pingjia yes" v-if="state!=1&&state!=2&&state!=3&&state!=4"></i>
-                            <i class="iconfont icon-icon_weizuo wancheng yes" v-if="false"></i>
-
-                            <i class="iconfont icon-icon_zhengzaijinx shenqing now" v-if="state==1"></i>
-                            <i class="iconfont icon-icon_zhengzaijinx shouli now" v-if="state==2"></i>
-                            <i class="iconfont icon-icon_zhengzaijinx chuli now" v-if="state==3"></i>
-                            <i class="iconfont icon-icon_zhengzaijinx pingjia now" v-if="state==4"></i>
-                            <i class="iconfont icon-icon_zhengzaijinx wancheng now" v-if="state==5"></i>
-                        </div>
-                        <div class="words">
-                            <div>申请</div>
-                            <div>受理</div>
-                            <div>处理</div>
-                            <div>评价</div>
-                            <div>完成</div>
-                        </div>
-                    </div>
-                </div>
-                <!-- 无数据 -->
-                <div class="wushuju" v-if="newRapirNoData">
-                    <img src="./../../static/images/wushuju.svg" alt="">
-                    <div class="noDataFont">暂无数据</div>
-                </div>
-                <!-- loading -->
-                <div class="loading" v-if="newRapirLoading">
-                    <cube-loading :size="30"></cube-loading>
-                </div>
-            </div>
-            <!-- 最新公告 -->
-            <div class="newNotice">
-                <div class="titHead titHead1">
-                    <span class="tit"><i class="iconfont icon-message newNoticeico"></i><span>最新公告</span></span>
-                    <span class="link" @click="toNoticeList()">更多<i class="iconfont icon-moren"></i></span>
-                </div>
-                <div class="conentBox" v-if="!newNoticeNoData&&!newNoticeLoading">
-                    <div class="conent" v-for="v in noticeData" @click="toNoticeDetails(v)">
-                        <div class="head">
-                            <!-- <span>{{v.title}}</span> -->
-                            {{v.title}}
-                        </div>
-                        <div class="cot">
-                                {{v.createTime.substring(0,v.createTime.length-5)}}
-                        </div>
-                    </div>
-                </div>
-                <!-- 无数据 -->
-                <div class="wushuju" v-if="newNoticeNoData">
-                    <img src="./../../static/images/wugonggao.svg" alt="">
-                    <div class="noDataFont">暂无数据</div>
-                </div>
-                <!-- loading -->
-                <div class="loading" v-if="newNoticeLoading">
-                    <cube-loading :size="30"></cube-loading>
-                </div>
-            </div>
+        <!-- 无数据 -->
+        <div class="wushuju" v-if="!dataList.length&&!newRapirLoading">
+          <img src="./../../static/images/wushuju.svg" alt />
+          <p>暂无待办事项</p>
+        </div>
+        <!-- loading -->
+        <div class="loading" v-if="newRapirLoading">
+          <cube-loading :size="30"></cube-loading>
         </div>
+      </div>
+      <!-- 最新公告 -->
+      <div class="newNotice">
+        <div class="titHead">
+          <span class="tit">
+            <i class="iconfont icon-message newNoticeico"></i>
+            <span>最新公告</span>
+          </span>
+          <span class="link" @click="toGuide()">
+            更多
+            <i class="iconfont icon-moren"></i>
+          </span>
+        </div>
+        <div class="conentBox" v-if="!newNoticeNoData&&!newNoticeLoading">
+          <div class="conent" v-for="v in noticeData" @click="toGuideDetail(v)">
+            <div class="head overflowEllipsis2">{{v.title}}</div>
+            <div class="cot">{{v.createTime.substring(0,v.createTime.length-5)}}</div>
+          </div>
+        </div>
+        <!-- 无数据 -->
+        <div class="wushuju" v-if="newNoticeNoData">
+          <img src="./../../static/images/wugonggao.svg" alt />
+          <p>暂无最新公告</p>
+        </div>
+        <!-- loading -->
+        <div class="loading" v-if="newNoticeLoading">
+          <cube-loading :size="30"></cube-loading>
+        </div>
+      </div>
     </div>
+  </div>
 </template>
 <script>
-import {formatDate} from './../components/js/date.js';
+import { formatDate } from "./../components/js/date.js";
 export default {
-    data(){
-        return{
-            loginUser:JSON.parse(localStorage.getItem("loginUser")),
-            noticeData:"",//公告列表
-            newRapirData:"",//最新报修
-            state:"",//流程状态
-            newRapirNoData:false,//最新报修无数据
-            newNoticeNoData:false,
-            newRapirLoading:true,//最新报修loading
-            newNoticeLoading:true//最新公告loading
+  data() {
+    return {
+      loginUser: JSON.parse(localStorage.getItem("loginUser")),
+      noticeData: "", //公告列表
+      dataList: "", //最新报修
+      state: "", //流程状态
+      newRapirNoData: false, //最新报修无数据
+      newNoticeNoData: false,
+      newRapirLoading: true, //最新报修loading
+      newNoticeLoading: true, //最新公告loading
+      candidateGroups: "",
+      valConfig: JSON.parse(localStorage.getItem("valConfig"))-0,//报修主体
+    };
+  },
+  methods: {
+    // 获取公告列表数据
+    getNoticData() {
+      console.log(this.valConfig)
+      // alert('公告列表')
+      var that = this;
+      this.$http
+        .post("service/user/data/fetchDataList/notice", {
+          idx: 0,
+          sum: 3,
+          notice: { status: 1 }
+        })
+        .then(function(res) {
+          // alert(JSON.stringify(res.data))
+          that.newNoticeLoading = false;
+          if (res.data.list.length > 0) {
+            that.newNoticeNoData = false;
+            that.noticeData = res.data.list;
+          } else {
+            that.newNoticeNoData = true;
+          }
+        });
+    },
+    // 获取最新报修
+    getNewRapir() {
+      var that = this;
+      this.$http
+        .post("service/bpm/bpm/fetchTask/bpm_incident", {
+          assignee: that.loginUser.id,
+          candidateGroups: that.candidateGroups,
+          searchType: "todo",
+          idx: 0,
+          sum: 2,
+          incident: { temporary: true }
+        })
+        .then(function(res) {
+          that.newRapirLoading = false;
+          if (res.data.data.length > 0) {
+            that.newRapirNoData = false;
+            that.dataList = res.data.data;
+            that.dataList[0].createTime = formatDate(
+              new Date(that.dataList[0].createTime),
+              "MM-dd hh:mm"
+            );
+          } else {
+            that.newRapirNoData = true;
+          }
+        });
+    },
+    // toNewIncident() {
+    //   this.$router.push({ path: "/newIncident" });
+    // },
+    toNoticeDetails(data) {
+      this.$router.push({
+        name: "NoticeDetails",
+        params: {
+          data: JSON.stringify(data)
+        }
+      });
+    },
+    toNoticeList() {
+      this.$router.push({ path: "/noticeList" });
+    },
+    toIncidentList(searchType) {
+      this.$router.push({
+        name: "IncidentList",
+        params: {
+          searchType: searchType
         }
+      });
     },
-    methods:{
-        ceshi(){
-            alert($('html').css("font-size"));
-        },
-        // 获取公告列表数据
-        getNoticData(){
-            var that=this;
-            this.$http.post('service/user/data/fetchDataList/notice',{
-                idx: 0,
-                sum: 3,
-                notice:{
-                    status:1
-                }
-            }).then(function(res){
-                that.newNoticeLoading=false;
-                if(res.data.list.length>0){
-                    that.newNoticeNoData=false;
-                    that.noticeData=res.data.list;
-                }else{
-                    that.newNoticeNoData=true
-                }
-            })
-        },
-        // 获取最新报修
-        getNewRapir(){
-            var that=this;
-            this.$http.post('service/apply/bpm/fetchServiceTasks',{
-                assignee:that.loginUser.id,
-                idx: 0,
-                sum: 1
-            }).then(function(res){
-                that.newRapirLoading=false;
-                if(res.data.data.length>0){
-                    that.newRapirNoData=false;
-                    that.newRapirData=res.data.data;
-                    that.newRapirData[0].createTime=formatDate(new Date(that.newRapirData[0].createTime), 'MM-dd hh:mm');
-                    if(that.newRapirData[0].state.name=="未受理"){
-                        that.state=1
-                    }else if(that.newRapirData[0].state.name=="已转换"){
-                        that.state=2
-                    }else if(that.newRapirData[0].state.name=="处理中"){
-                        that.state=3
-                    }else if(that.newRapirData[0].state.name=="待评价"){
-                        that.state=4
-                    }else if(that.newRapirData[0].state.name=="已解决"){
-                        that.state=5
-                    }else{
-                        that.state=5
-                    }
-                    if(that.newRapirData[0].incident.state&&that.newRapirData[0].incident.state.name){
-                        if(that.newRapirData[0].incident.state.name=="待接单"){
-                            that.state=3
-                        }else if(that.newRapirData[0].incident.state.name=="处理中"){
-                            that.state=3
-                        }
-                    }
-                    console.log(that.state)
-                }else{
-                    that.newRapirNoData=true
-                }
-            })
-        },
-        toRapir(){
-            this.$router.push({path:'/repair'})
-        },
-        toNoticeDetails(data){
-            this.$router.push({
-                name:'NoticeDetails',
-                params:{
-                    data:JSON.stringify(data)
-                }
-            })
-            // this.$router.push({
-            //     name:'NoticeDetails',
-            //     params:{
-            //         data:data
-            //     }
-            // })
-        },
-        toNoticeList(){
-            this.$router.push({path:'/noticeList'})
-        },
-        toIncidentList(){
-            this.$router.push({path:'/main/incidentList'})
-        },
-        toKnowList(){
-            this.$router.push({path:'/knowList'})
-        },
-        toGuide(){
-            this.$router.push({path:'/guide'})
-        },
-        toIncidentDetails(data){
-            this.$router.push({
-                name:'IncidentDetails',
-                params:{
-                    data:JSON.stringify(data)
-                }
-            })
-        },
+    // toKnowList() {
+    //   this.$router.push({ path: "/knowList" });
+    // },
+    toGuide() {
+      this.$router.push({ path: "/guide" });
     },
-    created(){
-        this.getNoticData(),
-        this.getNewRapir()
+    toGuideDetail(v) {
+      this.$router.push({ name: "GuideDetail", params: { data: v } });
     },
-    mounted(){
+    toIncidentDetails(data) {
+      var name = "";
+      if (data.state.value == "pending") {
+        if (data.handlerUser && !data.candidateGroups) {
+          // 指派给人 接单
+          name = "Order";
+        } else if (data.candidateGroups && !data.handlerUser) {
+          // 指派给组 抢单
+          name = "GrabSheet";
+        }
+      } else if (data.state.value == "reassign") {
+        name = "AgainAssign";
+      } else if (data.state.value == "handler") {
+        name = "Processing";
+      } else if (data.state.value == "resolved") {
+        name = "Solved";
+      } else if (data.state.value == "close") {
+        name = "Closed";
+      }
+      this.$router.push({
+        name: name,
+        params: {
+          data: data
+        }
+      });
     }
-}
+  },
+  created() {
+    var that = this;
+    that.valConfig=JSON.parse(localStorage.getItem("valConfig"))-0
+    that.loginUser.group.forEach(element => {
+      that.candidateGroups += element.id + ",";
+    });
+    that.candidateGroups = that.candidateGroups.substring(
+      0,
+      that.candidateGroups.length - 1
+    );
+    localStorage.removeItem("category");
+    localStorage.removeItem("categoryVal");
+    localStorage.removeItem("selectedCategoryTxt");
+    localStorage.removeItem("model");
+    localStorage.removeItem("modelData");
+    localStorage.removeItem("place");
+    localStorage.removeItem("referenceInfo");
+    localStorage.removeItem("solution");
+    localStorage.removeItem("order");
+    this.getNoticData();
+    this.getNewRapir();
+  },
+  mounted() {}
+};
 </script>
-<style scoped>
-.bgColor{
-    background-color: white
+<style scoped lang="less">
+.fl {
+  float: left;
 }
-.fle{
-    display: flex;
-    flex-direction:column;
-    background-color: white
+.fr {
+  float: right;
 }
-.bigBody{
-    display: flex;
-    flex-direction:column;
-    height: 100%;
-    width: 100%
+.bgColor {
+  background-color: white;
 }
-/* 头部导航栏 */
-.tav{
-    height: 2rem;
-    background: linear-gradient(#005395, #226CA8,#003057);
-    display: flex;
-    width: 100%
-}
-.tav div{
-    flex: 1;
-    text-align: center;
-    display: flex;
-    flex-direction:column;
-    align-items:center;
-    justify-content:center
+.fle {
+  display: flex;
+  flex-direction: column;
+  background-color: white;
 }
-.tav div i{
-    font-size: .6rem;
-    color: white
+.bigBody {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
 }
-.tav div span{
-    font-size: .32rem;
-    color: white;
-    display: inline-block;
-    margin-top: .16rem
+/* 头部导航栏 */
+.tav {
+  height: 2rem;
+  background: linear-gradient(#005395, #226ca8, #003057);
+  display: flex;
+  width: 100%;
+}
+.tav a {
+  flex: 1;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+.tav a i {
+  font-size: 0.6rem;
+  color: white;
+}
+.tav a span {
+  font-size: 0.32rem;
+  color: white;
+  display: inline-block;
+  margin-top: 0.16rem;
 }
 /* .bigBody{
     height: auto;
 } */
 /* tit导航 */
-.titHead{
-    display: flex;
-    justify-content:space-between;
-    padding: 0 .24rem;
-    height: .88rem;
-    line-height: .88rem;
-    border-bottom: .01rem rgb(238,238,238) solid
-}
-.titHead1{
-    height: 1rem;
-}
-.titHead .tit .newPapir{
-    font-size: .36rem;
-    color: #A37200
-}
-.titHead .tit .newNoticeico{
-    font-size: .36rem;
-    color: #005395
-}
-.titHead .tit span{
-    display: inline-block;
-    margin-left: .08rem;
-    font-size: .36rem
-}
-.titHead .link{
-    font-size: .24rem;
-    color: #999999
-}
-.titHead .link i{
-    font-size: .24rem;
-    color: #999999;
-    display: inline-block;
-    margin-left: .08rem
-}
-/* 最新报修 */
-.newRepair{
-    border-top: .16rem rgb(238,238,238) solid;
-}
-.newRepair .conentBox{
-    padding: 0 .16rem;
-    height: auto;
+.titHead {
+  display: flex;
+  justify-content: space-between;
+  padding: 0 0.24rem;
+  height: 0.88rem;
+  line-height: 0.88rem;
+  border-bottom: 0.01rem rgb(238, 238, 238) solid;
+}
+.titHead1 {
+  height: 0.88rem;
+}
+.titHead .tit .newPapir {
+  font-size: 0.36rem;
+  color: #a37200;
+}
+.titHead .tit .newNoticeico {
+  font-size: 0.36rem;
+  color: #005395;
+}
+.titHead .tit span {
+  display: inline-block;
+  margin-left: 0.08rem;
+  font-size: 0.36rem;
+}
+.titHead .link {
+  font-size: 0.24rem;
+  color: #999999;
+}
+.titHead .link i {
+  font-size: 0.24rem;
+  color: #999999;
+  display: inline-block;
+  margin-left: 0.08rem;
 }
-.newRepair .conentBox .conent{
-    padding: .24rem .48rem
-}
-.newRepair .conentBox .conent .head{
-    height: .45rem;
-    line-height: .45rem
-}
-.newRepair .conentBox .conent .head span:nth-child(1){
-    float: left;
-    font-size: .32rem;
-    font-weight: 400;
-    color: #333333
-}
-.newRepair .conentBox .conent .head span:nth-child(2){
-    float: right;
-    font-size: .23rem;
-    color: #999999
-}
-.newRepair .conentBox .conent .cot{
-    font-size: .28rem;
-    color: #666666;
-    line-height: .39rem;
-    margin-top: .08rem;
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-    word-break: break-all;
-    overflow: hidden;
-}
-.newRepair .conentBox .flowChart{
-    border-top: .01rem rgb(238,238,238) solid;
-    padding: .24rem 0
-}
-.newRepair .conentBox .flowChart .pits{
-    display: flex;
-    margin-top: .24rem;
-    padding: 0 10%;
-    position: relative
-}
-.newRepair .conentBox .flowChart .pits i{
-    font-size: .3rem
-}
-.newRepair .conentBox .flowChart .pits div{
-    border-top: .03rem rgb(224, 222, 222) solid;
-    flex: 1
-}
-.newRepair .conentBox .flowChart .pits .yesLine{
-    border-top: .03rem rgb(1,85,157) solid;
-}
-.newRepair .conentBox .flowChart .pits .no{
-    color:#cccccc
-}
-.newRepair .conentBox .flowChart .pits .yes{
-    color:#005359
-}
-.newRepair .conentBox .flowChart .pits .now{
-    color:#48a843
-}
-.newRepair .conentBox .flowChart .pits .shenqing{
-    position: absolute;
-    left: 8%;
-    top:-.12rem
-}
-.newRepair .conentBox .flowChart .pits .shouli{
-    position: absolute;
-    left: 28%;
-    top:-.12rem
-}
-.newRepair .conentBox .flowChart .pits .chuli{
-    position: absolute;
-    left: 48%;
-    top:-.12rem
-}
-.newRepair .conentBox .flowChart .pits .pingjia{
-    position: absolute;
-    left: 68%;
-    top:-.12rem
-}
-.newRepair .conentBox .flowChart .pits .wancheng{
-    position: absolute;
-    left: 88%;
-    top:-.12rem
-}
-.newRepair .conentBox .flowChart .words{
-    display: flex;
-    margin-top: .3rem
-}
-.newRepair .conentBox .flowChart .words div{
-    flex: 1;
-    font-size: .32rem;
-    text-align: center;
-    color:#333333
+
+.newRepair {
+  border-top: 0.16rem rgb(238, 238, 238) solid;
+  .conentBox {
+    .conent {
+      font-size: 0.32rem;
+      font-weight: 400;
+      line-height: 0.45rem;
+      .head {
+        border-bottom: 0.01rem solid #e6e6e6;
+        p {
+          padding: 0.24rem 0.48rem;
+          .btn {
+            float: right;
+          }
+        }
+      }
+      .center {
+        color: #333333;
+        border-bottom: 0.01rem solid #e6e6e6;
+        padding: 0.24rem 0.48rem;
+        p {
+          &.desc {
+            overflow: hidden;
+            max-height: 0.88rem;
+          }
+          .grayFont {
+            overflow-x: scroll;
+            color: #666;
+          }
+        }
+      }
+      .bottom {
+        overflow: hidden;
+        line-height: 0.86rem;
+        border-bottom: 0.01rem solid #e6e6e6;
+        font-size: 0.24rem;
+        color: #999;
+        padding: 0 0.24rem 0 0.48rem;
+      }
+    }
+  }
 }
+
 /* 最新公告 */
-.newNotice{
-    border-top: .16rem rgb(238,238,238) solid;
-    height: 100%;
-    display: flex;
-    flex-direction:column;
-    min-height: 0
-}
-.newNotice .conentBox{
-    height: 100%;
-    overflow: hidden;
-    overflow-y: scroll
-}
-.newNotice .conentBox .conent{
-    padding: .24rem .64rem;
-    border-bottom: .01rem rgb(238,238,238) solid
-}
-.newNotice .conentBox .conent .head{
-    line-height: .45rem;
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-    word-break: break-all;
-    overflow: hidden;
-    font-size: .32rem;
-}
-/* .newNotice .conentBox .conent .head span{
-    font-size: .32rem;
-} */
-.newNotice .conentBox .conent .cot{
-    font-size: .24rem;
-    color: #999999;
-    line-height: .34rem;
-    margin-top: .08rem
+.newNotice {
+  border-top: 0.16rem rgb(238, 238, 238) solid;
+  .conentBox {
+    .conent {
+      padding: 0.24rem 0.64rem;
+      border-bottom: 0.01rem solid #eee;
+      .head {
+        font-size: 0.32rem;
+        line-height: 0.45rem;
+      }
+      .cot {
+        font-size: 0.24rem;
+        color: #999;
+        line-height: 0.34rem;
+      }
+    }
+  }
 }
-.wushuju{
-    text-align: center;
+
+.wushuju {
+  text-align: center;
+  color: #999;
 }
-.wushuju img{
-    width: 5.12rem;
-    height: 2.84rem;
+.wushuju img {
+  width: 5.12rem;
+  height: 2.84rem;
 }
-.loading{
-    height: 2rem;
-    display: flex;
-    justify-content:center;
-    align-items:center
+.loading {
+  height: 2rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
-</style>
+</style>

src/views/inspectionDoneDetail.vue

@@ -0,0 +1,281 @@
+<template>
+  <div class="inspedtionDetail">
+    <div class="label">巡检信息</div>
+    <div class="head">
+      <p>
+        <i class="iconfont icon-zuixinbaoxiu newPapir"></i>
+        巡检单号
+        <span class="num">{{baseInfo.sign}}</span>
+        <span class="btn zhixingzhong">{{baseInfo.stateName}}</span>
+      </p>
+    </div>
+    <div class="info">
+      <p>
+        <span class="fl">巡检类型</span>
+        <span class="fr">{{baseInfo.inspectionType.type}}</span>
+      </p>
+      <p>
+        <span class="fl">计划主题</span>
+        <span class="fr">{{baseInfo.inspection.title}}</span>
+      </p>
+      <p>
+        <span class="fl">计划内容</span>
+        <span class="fr showwrap">{{baseInfo.inspection.content}}</span>
+      </p>
+      <p>
+        <span class="fl">巡检状态</span>
+        <span class="fr">{{baseInfo.stateName}}</span>
+      </p>
+      <p>
+        <span class="fl">巡检策略</span>
+        <span class="fr">{{baseInfo.inspection.planStrategy.name}}</span>
+      </p>
+      <p>
+        <span class="fl">执行时长</span>
+        <span class="fr">{{baseInfo.inspection.executionTime}}分钟</span>
+      </p>
+      <p>
+        <span class="fl">开始时间</span>
+        <span
+          class="fr"
+        >{{baseInfo.inspection.planStartTime.slice(0,baseInfo.inspection.planStartTime.length-2)}}</span>
+      </p>
+      <p>
+        <span class="fl">逾期时间</span>
+        <span class="fr">{{baseInfo.overdueTime}}</span>
+      </p>
+    </div>
+    <div class="label">巡检结果</div>
+    <div class="form">
+      <p v-for="(item,index) in forms">
+        <span v-if="index%2==0">{{item.templateOptions.placeholder}}</span>
+        <span v-if="index%2==1" class="colorGray">{{param[item.key]?'不正常':'正常'}}</span>
+      </p>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      loginUser: JSON.parse(localStorage.getItem("loginUser")),
+      valConfig: JSON.parse(localStorage.getItem("valConfig")) - 0, //报修主体
+      baseInfo: {}, //巡检基础信息
+      items: [], //巡检项目
+      labels: [], //巡检项目label
+      status: [], //巡检项目的状态
+      forms: [], //巡检结果
+      abnormal: "", //异常项
+      param: {
+        inspectionProcessActual: {}
+      },
+      model: {}
+    };
+  },
+  methods: {
+    // 获取项目异常状态
+    getItems() {
+      var that = this;
+      that.$http
+        .get(
+          "/service/form/renderForm/inspection_confirm/" +
+            that.baseInfo.processInstanceId +
+            "/" +
+            that.loginUser.id,
+          {}
+        )
+        .then(function(res) {
+          console.log(res.data);
+          that.model = res.data.model;
+          var fields = res.data.fields;
+          console.log(fields);
+          fields.forEach(v => {
+            if (v.templateOptions.label == "检查项目") {
+              that.labels.push(v);
+            }
+            if (v.templateOptions.label == "状态") {
+              that.status.push(v);
+            }
+          });
+          console.log(that.labels);
+          console.log(that.status);
+          let labels = that.labels;
+          let status = that.status;
+          let j = 0,
+            newArr = new Array();
+          for (let i = 0; i < that.labels.length; i++) {
+            j = i * 2;
+            newArr[j] = that.labels[i];
+            newArr[j + 1] = that.status[i];
+          }
+          console.log(newArr);
+          that.forms = newArr;
+          window.localStorage.setItem("forms", JSON.stringify(that.forms));
+        });
+    },
+    // 提交
+    submit() {
+      this.param.loginUser = this.loginUser;
+      this.param.save = this.model.save;
+      this.param.close = this.model.close;
+      this.param.submit = this.model.submit;
+      this.param.toIncident = this.model.toIncident;
+      this.param.handler_code = "resolve";
+      this.param.inspectionProcessActual = this.baseInfo;
+      console.log(this.param);
+      var that = this;
+      that.$http
+        .post(
+          "/service/bpm/bpm/completeTask/" +
+            that.baseInfo.processInstanceId +
+            "/" +
+            that.loginUser.id+'/'+that.baseInfo.id,
+          that.param
+        )
+        .then(function(res) {
+          console.log(res.data);
+          if (res.data.status == 200) {
+            $("#fade").fadeIn();
+            that.promptingConent = "恭喜您,提交成功!";
+            that.promptingStatus = true;
+            that.dialog = that
+              .$createDialog({
+                type: "alert",
+                title: "提交成功",
+                content: "点击返回列表",
+                icon: "cubeic-right",
+                onConfirm: (e, promptValue) => {
+                  that.$router.push({ path: "/main/inspection" });
+                }
+              })
+              .show();
+            setTimeout(function() {
+              $("#fade").fadeOut();
+            }, 2000);
+          }
+        });
+    },
+    // 取消
+    cancle() {
+      var that = this;
+      that.$router.go(-1);
+    },
+    // 生成事件
+    createIncident() {
+      for (var i = 0; i < $(".cube-switch.abnormal").length; i++) {
+        this.abnormal += $(".cube-switch.abnormal")[i].dataset.label + ",";
+      }
+      this.$router.push({
+        name: "NewIncident",
+        params: { data: this.baseInfo, abnormal: this.abnormal }
+      });
+    }
+  },
+  created() {
+    this.baseInfo =
+      this.$route.params.data ||
+      JSON.parse(window.localStorage.getItem("insDetailInfo"));
+    this.forms = JSON.parse(window.localStorage.getItem("forms")) || [];
+    this.title = this.baseInfo.inspectionType.type;
+    this.getItems();
+  }
+};
+</script>
+<style lang="less" scoped>
+.inspedtionDetail {
+    .colorGray{
+        color: #999;
+    }
+  .label {
+    background-color: #eee;
+    height: 0.6rem;
+    line-height: 0.6rem;
+    padding-left: 0.2rem;
+    font-size: 0.24rem;
+    color: #666;
+  }
+
+  .head {
+    font-size: 0.34rem;
+    line-height: 0.45rem;
+    border-bottom: 0.01rem solid #e6e6e6;
+    p {
+      padding: 0.24rem 0.48rem;
+      i {
+        color: #00559d;
+      }
+      .num {
+        margin-left: 1rem;
+      }
+      .btn {
+        float: right;
+      }
+    }
+  }
+
+  .info {
+    color: #999;
+    font-size: 0.28rem;
+    overflow: hidden;
+    p {
+      line-height: 0.4rem;
+      padding: 0.1rem 0.24rem;
+      overflow: hidden;
+      .overflowEllipsis2 {
+        margin-left: 1.96rem;
+      }
+    }
+  }
+
+  .form {
+    font-size: 0.32rem;
+    color: #333;
+    line-height: 0.86rem;
+    overflow: hidden;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    p {
+      line-height: 0.4rem;
+      padding: 0.2rem 0.24rem;
+      // border-bottom: 0.01rem solid #ccc;
+      width: 35%;
+      &:nth-child(2n){
+          text-align: right;
+      }
+    }
+  }
+
+  .btns {
+    font-size: 0.32px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.24rem;
+    .btn {
+      border: 0.01rem solid #005395;
+      color: #005395;
+      background-color: #fff;
+      width: 1.8rem;
+      height: 0.88rem;
+      line-height: 0.88rem;
+      text-align: center;
+      border-radius: 0.1rem;
+      &.submit {
+        width: 3.06rem;
+        background-color: #005395;
+        color: #fff;
+      }
+      &.cancel {
+        border-color: #ccc;
+        color: #333;
+      }
+    }
+  }
+  .showwrap {
+    width: 75%;
+    text-align: right;
+  }
+}
+</style>

src/views/knowDetails.vue

@@ -1,231 +1,252 @@
 <template>
-    <div class="body bgColor">
-        <div class="title">
-            <!-- <div>主题:</div> -->
-            {{data.title}}
-        </div>
-        <div class="timeBox">
-            <div>{{data.createUser.dept?data.createUser.dept.dept:"暂无"}}</div>
-            <div>{{data.createtime.substring(0,data.createtime.length-3)}}</div>
-        </div>
-        <div class="conents" v-html="data.content">
-            {{data.content}}
-        </div>
-        <div class="release">
-            {{data.createUser.dept?data.createUser.dept.dept:"暂无"}}
-        </div>
-        <div class="time">
-            {{data.createtime.substring(0,data.createtime.length-3)||"暂无"}}
-        </div>
-        <div class="files" v-if="files.length">
-            <!-- <div @click="downFile(v.token,v.name)" v-for="(v,index) in files">{{v.name}}</div> -->
-            <a :href="getFileUrl(v.previewUrl)" v-for="(v,index) in files" target="_blank" :download="getDownload(v.name)">{{v.name}}</a>
-        </div>
-        <div class="keyword" v-if="data.label">
-            <span v-for="v in data.label" @click="toKnowList(v)">{{v}}</span>
-        </div>
-        <div class="good" @click="starClick()" v-show="starIf">
-            <i class="iconfont icon-dianzan"></i>
-            <span>{{data.star||0}}</span>
-        </div>
-        <div class="goodClick" v-show="!starIf">
-            <i class="iconfont icon-dianzan"></i>
-            <span>{{data.star||0}}</span>
-        </div>
+  <div class="body">
+    <div class="header">常见问题</div>
+    <div class="bgColor">
+      <div class="title">
+        <!-- <div>主题:</div> -->
+        {{data.title}}
+      </div>
+      <div class="timeBox">
+        <div>{{data.createUser.dept?data.createUser.dept.dept:"暂无"}}</div>
+        <div>{{data.createtime.substring(0,data.createtime.length-3)}}</div>
+      </div>
+      <div class="conents" v-html="data.content">{{data.content}}</div>
+      <!-- <div class="release">{{data.createUser.dept?data.createUser.dept.dept:"暂无"}}</div>
+      <div class="time">{{data.createtime.substring(0,data.createtime.length-3)||"暂无"}}</div> -->
+      <div class="files" v-if="files.length">
+        <!-- <div @click="downFile(v.token,v.name)" v-for="(v,index) in files">{{v.name}}</div> -->
+        <a
+          :href="getFileUrl(v.previewUrl)"
+          v-for="(v,index) in files"
+          target="_blank"
+          :download="getDownload(v.name)"
+        >{{v.name}}</a>
+      </div>
+      <div class="keyword" v-if="data.label">
+        <span v-for="v in data.label" @click="toKnowList(v)">{{v}}</span>
+      </div>
+      <div class="good" @click="starClick()" v-show="starIf">
+        <i class="iconfont icon-dianzan"></i>
+        <span>{{data.star||0}}</span>
+      </div>
+      <div class="goodClick" v-show="!starIf">
+        <i class="iconfont icon-dianzan"></i>
+        <span>{{data.star||0}}</span>
+      </div>
     </div>
+  </div>
 </template>
 <script>
 export default {
-    data(){
-        return{
-            loginUser:JSON.parse(localStorage.getItem("loginUser")),
-            data:"",
-            starIf:"",
-            files:[]
+  data() {
+    return {
+      loginUser: JSON.parse(localStorage.getItem("loginUser")),
+      valConfig: JSON.parse(localStorage.getItem("valConfig")) - 0, //报修主体
+      data: "",
+      starIf: "",
+      files: []
+    };
+  },
+  methods: {
+    getFileUrl(res) {
+      return res;
+    },
+    getDownload(res) {
+      return res;
+    },
+    downFile(token, fileName) {
+      this.$http
+        .get("service/common/common/downloadAttachment/" + token, {
+          headers: {
+            Accept: "*/*"
+          },
+          responseType: "arraybuffer"
+        })
+        .then(function(res) {
+          var file = new Blob([res.data], {
+            type: "application/octet-stream"
+          });
+          var fileURL = URL.createObjectURL(file);
+          var a = document.createElement("a");
+          a.href = fileURL;
+          a.target = "_blank";
+          a.download = fileName;
+          document.body.appendChild(a);
+          a.click();
+        });
+    },
+    getFiles() {
+      var that = this;
+      this.$http
+        .get(
+          "service/common/common/listAttachment/solution/" + this.data.id,
+          {}
+        )
+        .then(function(res) {
+          that.files = res.data.data;
+        });
+    },
+    toKnowList(res) {
+      this.$router.push({
+        name: "KnowList",
+        params: {
+          keword: res
         }
+      });
+    },
+    getParamsData() {
+      this.data = JSON.parse(this.$route.params.data);
     },
-    methods:{
-        getFileUrl(res){
-            return res
-        },
-        getDownload(res){
-            return res
-        },
-        downFile(token,fileName){
-            this.$http.get('service/common/common/downloadAttachment/'+token,{
-                headers:{
-                    'Accept': '*/*'
-                },
-                responseType: 'arraybuffer'
-            }).then(function(res){
-                var file = new Blob([res.data], {
-                    type: 'application/octet-stream'
-                });
-                var fileURL = URL.createObjectURL(file);
-                var a = document.createElement('a');
-                a.href = fileURL;
-                a.target = '_blank';
-                a.download = fileName;
-                document.body.appendChild(a);
-                a.click();
-            })
-        },
-        getFiles(){
-            var that=this;
-            this.$http.get('service/common/common/listAttachment/solution/'+this.data.id,{}).then(function(res){
-                that.files=res.data.data;
-            })
-        },
-        toKnowList(res){
-            this.$router.push({
-                name:"KnowList",
-                params:{
-                    keword:res
-                }
-            })
-        },
-        getParamsData(){
-            this.data=JSON.parse(this.$route.params.data);
-        },
-        // 关键字查询
-        getKeyWords(){
-            if(this.data.label){
-                this.data.label=this.data.label.split("/");
-            }
-        },
-        // 获取是否点过赞
-        getStarIf(){
-            var that=this;
-            this.$http.get('service/solution/canStar/requester/'+this.data.id+"/"+this.loginUser.id,{}).then(function(res){
-                that.starIf=res.data.result;
-            })
-        },
-        // 点赞
-        starClick(){
-            var that=this;
-            that.starIf=false;
-            that.data.star=Number(that.data.star)+1;
-            this.$http.get('service/solution/star/requester/'+this.data.id+"/"+this.loginUser.id,{}).then(function(res){
-            })
-        },
+    // 关键字查询
+    getKeyWords() {
+      if (this.data.label) {
+        this.data.label = this.data.label.split("/");
+      }
     },
-    created(){
-        this.getParamsData();
-        this.getStarIf();
-        this.getKeyWords();
-        this.getFiles()
+    // 获取是否点过赞
+    getStarIf() {
+      var that = this;
+      this.$http
+        .get(
+          "service/solution/canStar/requester/" +
+            this.data.id +
+            "/" +
+            this.loginUser.id,
+          {}
+        )
+        .then(function(res) {
+          that.starIf = res.data.result;
+        });
     },
-    mounted(){
+    // 点赞
+    starClick() {
+      var that = this;
+      that.starIf = false;
+      that.data.star = Number(that.data.star) + 1;
+      this.$http
+        .get(
+          "service/solution/star/requester/" +
+            this.data.id +
+            "/" +
+            this.loginUser.id,
+          {}
+        )
+        .then(function(res) {});
     }
-}
+  },
+  created() {
+    this.getParamsData();
+    this.getStarIf();
+    this.getKeyWords();
+    this.getFiles();
+  },
+  mounted() {}
+};
 </script>
-<style scoped>
-.bgColor{
-    background-color: white
-}
-.body{
-    padding: 0 .24rem
-}
-.title{
-    font-size: .32rem;
-    line-height: .45rem;
-    padding: .24rem .24rem 0 .24rem;
-    color: #333333;
-    font-weight: bold
-}
-.timeBox{
-    display: flex;
-    justify-content:space-between;
-    font-size: .24rem;
-    color:#999999;
-    padding: .16rem 0;
-    line-height: .33rem
-}
-.conents{
-    font-size: .28rem;
-    padding-top: .24rem;
-    border-top: .01rem rgb(223, 222, 222) solid;
-    text-indent:2em;
-    line-height: .39rem;
-    padding-bottom: .48rem;
-    color: #666666;
-    overflow: hidden;
-    width: 100%;
-    overflow-x: scroll
-}
-.release{
-    display: flex;
-    justify-content:flex-end;
-    font-size: .28rem;
-    line-height: .39rem;
-    color: #666666
-}
-.time{
-    display: flex;
-    justify-content:flex-end;
-    font-size: .28rem;
-    line-height: .39rem;
-    color: #666666;
-    margin-top: .08rem;
-    padding-bottom: .24rem;
-    border-bottom: .01rem rgb(223, 222, 222) solid;
-}
-.files{
-    font-size: .28rem;
-    /* color: #005395; */
-    line-height: .4rem;
-    padding: .24rem 0;
-    border-bottom: .01rem rgb(223, 222, 222) solid;
-}
-.files a{
-    display: block;
-    color: #005395;
-    margin-top: .1rem
-}
-.keyword{
-    padding: .24rem 0;
-    border-bottom: .01rem rgb(223, 222, 222) solid;
-}
-.keyword span{
-    display: inline-block;
-    color: rgb(0,0,255);
-    margin-left: .2rem;
-    text-decoration: underline;
-    font-size: .28rem;
-    line-height: .35rem
-}
-.good{
-    text-align: center;
-    margin: .24rem auto;
-    width: 2rem;
-    height: .88rem;
-    line-height: .75rem;
-    background-color: rgb(235,221,188);
-    border-radius: 20px
-}
-.good i{
-    font-size: .4rem;
-    color: rgb(163,114,0)
-}
-.good span{
-    font-size: .3rem;
-    color: rgb(163,114,0)
-}
-.goodClick{
-    text-align: center;
-    margin: .24rem auto;
-    width: 2rem;
-    height: .88rem;
-    line-height: .75rem;
-    background-color: rgb(235,221,188);
-    border-radius: 20px
-}
-.goodClick i{
-    font-size: .4rem;
-    color: rgb(226,38,77)
-}
-.goodClick span{
-    font-size: .3rem;
-    color: rgb(226,38,77)
+<style scoped lang='less'>
+.header {
+  height: 0.88rem;
+  line-height: 0.88rem;
+  text-align: center;
+  color: #fff;
+  font-size: 0.37rem;
+  background: linear-gradient(#2e2f32, #414246);
+  padding: 0;
+}
+.bgColor {
+  background-color: white;
+  padding: 0 0.24rem;
+}
+.title {
+  font-size: 0.32rem;
+  line-height: 0.45rem;
+  padding: 0.24rem 0.24rem 0 0.24rem;
+  color: #333333;
+  font-weight: bold;
+}
+.timeBox {
+  display: flex;
+  justify-content: space-between;
+  font-size: 0.24rem;
+  color: #999999;
+  padding: 0.16rem 0;
+  line-height: 0.33rem;
+}
+.conents {
+  font-size: 0.28rem;
+  padding-top: 0.24rem;
+  border-top: 0.01rem rgb(223, 222, 222) solid;
+  border-bottom: 0.01rem rgb(223, 222, 222) solid;
+  text-indent: 2em;
+  line-height: 0.39rem;
+  padding-bottom: 0.48rem;
+  color: #666666;
+  overflow: hidden;
+  width: 100%;
+  overflow-x: scroll;
+}
+.release {
+  display: flex;
+  justify-content: flex-end;
+  font-size: 0.28rem;
+  line-height: 0.39rem;
+  color: #666666;
+}
+.time {
+  display: flex;
+  justify-content: flex-end;
+  font-size: 0.28rem;
+  line-height: 0.39rem;
+  color: #666666;
+  margin-top: 0.08rem;
+  padding-bottom: 0.24rem;
+  border-bottom: 0.01rem rgb(223, 222, 222) solid;
+}
+.files {
+  font-size: 0.28rem;
+  /* color: #005395; */
+  line-height: 0.4rem;
+  padding: 0.24rem 0;
+  border-bottom: 0.01rem rgb(223, 222, 222) solid;
+}
+.files a {
+  display: block;
+  color: #005395;
+  margin-top: 0.1rem;
+}
+.keyword {
+  padding: 0.24rem 0;
+  border-bottom: 0.01rem rgb(223, 222, 222) solid;
+}
+.keyword span {
+  display: inline-block;
+  color: rgb(0, 0, 255);
+  margin-left: 0.2rem;
+  text-decoration: underline;
+  font-size: 0.28rem;
+  line-height: 0.35rem;
+}
+.good {
+  text-align: center;
+  margin: 0.24rem auto;
+  width: 2rem;
+  height: 0.88rem;
+  line-height: 0.88rem;
+  background-color: #b8d1e6;
+  border-radius: 20px;
+  font-size: 0.4rem;
+  color: #005395;
+}
+
+.goodClick {
+  text-align: center;
+  margin: 0.24rem auto;
+  width: 2rem;
+  height: 0.88rem;
+  line-height: 0.88rem;
+  background-color: #b8d1e6;
+  border-radius: 20px;
+  font-size: 0.4rem;
+  color: #005395;
 }
 </style>

src/views/knowList.vue

@@ -1,394 +1,406 @@
 <template>
-    <div class="bgColor">
-        <div slot="content" class="scroll-wrapper">
-            <div class="demo">
-                <div class="scroll-list-wrap">
-                    <cube-scroll ref="scroll" :data="items" :options="options" @pulling-down="onPullingDown" @pulling-up="onPullingUp">
-                        <div class="search">
-                            <input type="text" placeholder="搜索" v-model="search" @input="searchFn()">
-                        </div>
-                        <ul class="foods-wrapper">
-                            <li v-for="data in items" class="food-item border-1px" @click="toKnowDetails(data)">
-                                <div class="food-content">
-                                    <div class="title">
-                                        <div>
-                                            <i class="iconfont icon-changjianwenti1"></i>
-                                        </div>
-                                        <div>主题:{{data.title}}</div>
-                                    </div>
-                                    <div class="content" v-html="data.content">
-                                    </div>
-                                    <div class="timeBox">
-                                        <div class="time">{{data.createtime.substring(0,data.createtime.length-3)}}</div>
-                                        <div class="good">
-                                            <i class="iconfont icon-dianzan"></i>&nbsp;&nbsp;<span>{{data.star}}</span>
-                                        </div>
-                                    </div>
-                                </div>
-                            </li>
-                            <div class="wushuju" v-show="wushuju">
-                                <img src="./../../static/images/wushuju.svg" alt="">
-                                <div class="noDataFont">暂无数据</div>
-                            </div>
-                        </ul>
-                        <template v-if="customPullDown" slot="pulldown" slot-scope="props">
-                            <div v-if="props.pullDownRefresh" class="cube-pulldown-wrapper" :style="props.pullDownStyle">
-                                <div v-show="props.beforePullDown" class="before-trigger" :style="{paddingTop: props.bubbleY + 'px'}">
-                                    <span :class="{rotate: props.bubbleY > pullDownRefreshThreshold - 40}">↓</span>
-                                </div>
-                                <div class="after-trigger" v-show="!props.beforePullDown">
-                                    <div v-show="props.isPullingDown" class="loading">
-                                        <cube-loading></cube-loading>
-                                    </div>
-                                    <div v-show="!props.isPullingDown" class="text">
-                                        <span class="refresh-text">更新成功</span>
-                                    </div>
-                                </div>
-                            </div>
-                        </template>
-                    </cube-scroll>
+  <div class="bgColor">
+    <div class="header">常见问题</div>
+    <div class="search">
+      <input type="text" placeholder="搜索" v-model="search" @input="searchFn()">
+    </div>
+    <div slot="content" class="scroll-wrapper nav">
+      <div class="demo">
+        <div class="scroll-list-wrap">
+          <cube-scroll
+            ref="scroll"
+            :data="items"
+            :options="options"
+            @pulling-down="onPullingDown"
+            @pulling-up="onPullingUp"
+          >
+            <ul class="foods-wrapper">
+              <li v-for="data in items" class="food-item border-1px" @click="toKnowDetails(data)">
+                <div class="food-content">
+                  <div class="title">
+                    <div>
+                      <i class="iconfont icon-changjianwenti1"></i>
+                    </div>
+                    <div>主题:{{data.title}}</div>
+                  </div>
+                  <div
+                    class="content"
+                    v-html="data.content"
+                    style="-webkit-box-orient: vertical !important;"
+                  ></div>
+                  <div class="timeBox">
+                    <div class="time">{{data.createtime.substring(0,data.createtime.length-3)}}</div>
+                    <div class="good">
+                      <i class="iconfont icon-dianzan"></i>&nbsp;&nbsp;
+                      <span>{{data.star}}</span>
+                      点赞
+                    </div>
+                  </div>
+                </div>
+              </li>
+              <div class="wushuju" v-show="wushuju">
+                <img src="./../../static/images/wushuju.svg" alt>
+                <p>暂无常见问题</p>
+              </div>
+            </ul>
+            <template v-if="customPullDown" slot="pulldown" slot-scope="props">
+              <div
+                v-if="props.pullDownRefresh"
+                class="cube-pulldown-wrapper"
+                :style="props.pullDownStyle"
+              >
+                <div
+                  v-show="props.beforePullDown"
+                  class="before-trigger"
+                  :style="{paddingTop: props.bubbleY + 'px'}"
+                >
+                  <span :class="{rotate: props.bubbleY > pullDownRefreshThreshold - 40}">↓</span>
                 </div>
-            </div>
+                <div class="after-trigger" v-show="!props.beforePullDown">
+                  <div v-show="props.isPullingDown" class="loading">
+                    <cube-loading></cube-loading>
+                  </div>
+                  <div v-show="!props.isPullingDown" class="text">
+                    <span class="refresh-text">更新成功</span>
+                  </div>
+                </div>
+              </div>
+            </template>
+          </cube-scroll>
         </div>
-        <load-ing v-show="loadShow"></load-ing>
+      </div>
     </div>
+    <load-ing v-show="!items.length&&!wushuju"></load-ing>
+  </div>
 </template>
 <script>
-import Vue from 'vue'
-import CubePage from '../components/cube-page.vue'
-import SwitchOption from '../components/switch-option'
-import InputOption from '../components/input-option'
-import SelectOption from '../components/select-option'
-import LoadIng from './../views/loading.vue'
+import Vue from "vue";
+import LoadIng from "./../views/loading.vue";
 export default {
-    data() {
+  data() {
     return {
-    //   items: _foods,
-        items:[],
-        pullDownRefresh: true,
-        pullDownRefreshThreshold: 60,
-        pullDownRefreshStop: 40,
-        pullDownRefreshTxt: 'Refresh success',
-        pullUpLoad: true,
-        pullUpLoadThreshold: 0,
-        pullUpLoadMoreTxt: 'Load more',
-        pullUpLoadNoMoreTxt: '没有更多数据',
-        wushuju:false,
-        customPullDown: true,
-        search:"",
-        sum:10,
-        idx:0,
-        loadShow:true
-    }
-    },
-    components: {
-        CubePage,
-        SwitchOption,
-        InputOption,
-        SelectOption,
-        LoadIng
-    },
-    computed: {
+      //   items: _foods,
+      items: [],
+      pullDownRefresh: true,
+      pullDownRefreshThreshold: 60,
+      pullDownRefreshStop: 40,
+      pullDownRefreshTxt: "Refresh success",
+      pullUpLoad: true,
+      pullUpLoadThreshold: 0,
+      pullUpLoadMoreTxt: "加载更多",
+      pullUpLoadNoMoreTxt: "没有更多数据",
+      wushuju: false,
+      customPullDown: true,
+      search: "",
+      sum: 10,
+      idx: 0,
+      loadShow: true
+    };
+  },
+  components: {
+    // CubePage,
+    // SwitchOption,
+    // InputOption,
+    // SelectOption,
+    LoadIng
+  },
+  computed: {
     options() {
-        return {
+      return {
         pullDownRefresh: this.pullDownRefreshObj,
         pullUpLoad: this.pullUpLoadObj,
         scrollbar: true
-        }
+      };
     },
     pullDownRefreshObj: function() {
-        return this.pullDownRefresh ? {
-        threshold: parseInt(this.pullDownRefreshThreshold),
-        txt: this.pullDownRefreshTxt
-        } : false
+      return this.pullDownRefresh
+        ? {
+            threshold: parseInt(this.pullDownRefreshThreshold),
+            txt: this.pullDownRefreshTxt
+          }
+        : false;
     },
     pullUpLoadObj: function() {
-        return this.pullUpLoad ? {
-        threshold: parseInt(this.pullUpLoadThreshold),
-        txt: {
-            more: this.pullUpLoadMoreTxt,
-            noMore: this.pullUpLoadNoMoreTxt
-        }
-        } : false
+      return this.pullUpLoad
+        ? {
+            threshold: parseInt(this.pullUpLoadThreshold),
+            txt: {
+              more: this.pullUpLoadMoreTxt,
+              noMore: this.pullUpLoadNoMoreTxt
+            }
+          }
+        : false;
     }
+  },
+  methods: {
+    getParams() {
+      if (this.$route.params.keword) {
+        this.search = this.$route.params.keword;
+      }
     },
-    methods: {
-    getParams(){
-        if(this.$route.params.keword){
-            this.search=this.$route.params.keword
-        }
+    searchFn() {
+      var that = this;
+      that.loadShow = true;
+      var that = this;
+      that.idx = 0;
+      that.sum = 10;
+      that.items=[];
+      that.getData();
     },
-    searchFn(){
-      var that=this;
-      that.loadShow=true;
-      this.idx=0;
-      this.$http.post('service/solution/fetchDataList/solution',{
-        'idx':0,
-        'sum':10,
-        'solution':{
-            'title':that.search,
-            'status':{'id':72},
-            'solutionRange':1
-        }
-    }).then(function(res){
-        if(res.data.list.length>0){
-            that.items=res.data.list;
-            that.wushuju=false
-        }else{
-            that.wushuju=true;
-            that.items=[]
+    toKnowDetails(data) {
+      // this.$router.push({path:'/knowDetails'})
+      this.$router.push({
+        name: "KnowDetails",
+        params: {
+          data: JSON.stringify(data)
         }
-        that.loadShow=false
-    })
+      });
     },
-    toKnowDetails(data){
-        // this.$router.push({path:'/knowDetails'})
-        this.$router.push({
-            name:'KnowDetails',
-            params:{
-                data:JSON.stringify(data)
-            }
+    getData() {
+      var that = this;
+      this.$http
+        .post("service/solution/fetchDataList/solution", {
+          idx: that.idx,
+          solution: {
+            keywords: that.search,
+            solutionType: { id: "" },
+            status: { id: 72 },
+            createUser: { name: "" }
+          },
+          sum: that.sum
         })
+        .then(function(res) {
+          if (res.data.list.length > 0) {
+            // that.items = res.data.list;
+            that.items = that.items.concat(res.data.list);
+            that.wushuju = false;
+          } else {
+            that.wushuju = true;
+            that.$refs.scroll.forceUpdate()
+          }
+          that.loadShow = false;
+        });
     },
     onPullingDown() {
-        // 模拟更新数据
-        this.idx=0;
-        setTimeout(() => {
-        var that=this;
-        this.$http.post('service/solution/fetchDataList/solution',{
-            'idx':0,
-            'sum':10,
-            'solution':{
-                'title':that.search,
-                'status':{'id':72},
-                'solutionRange':1
-            }
-        }).then(function(res){
-            if(res.data.list.length>0){
-                that.items=res.data.list;
-                that.wushuju=false
-            }else{
-                that.$refs.scroll.forceUpdate();
-                that.wushuju=true
-            }
-        })
-        }, 1000)
-    },
-    getData(idx,sum){
-        var that=this;
-        this.$http.post('service/solution/fetchDataList/solution',{
-            'idx':idx,
-            'sum':sum,
-            'solution':{
-                'title':that.search,
-                'status':{'id':72},
-                'solutionRange':1
-            }
-        }).then(function(res){
-            if(res.data.list.length>0){
-                that.items=res.data.list;
-                that.wushuju=false
-            }else{
-                that.wushuju=true
-            }
-            that.loadShow=false
-        })
+      var that = this;
+      that.idx = 0;
+      that.sum = 10;
+      that.items = [];
+      setTimeout(() => {
+        that.getData();
+      }, 1000);
     },
     onPullingUp() {
-        var that=this;
-        that.idx=that.idx+1;
-        this.$http.post('service/solution/fetchDataList/solution',{
-            'idx':that.idx,
-            'sum':that.sum,
-            'solution':{
-                'title':that.search,
-                'status':{'id':72},
-                'solutionRange':1
-            }
-        }).then(function(res){
-            setTimeout(() => {
-                if(res.data.list.length>0){
-                    that.items=that.items.concat(res.data.list);
-                }else{
-                    that.$refs.scroll.forceUpdate()
-                }
-            }, 1000)
-        })
+      var that = this;
+      that.idx += 1;
+      that.getData();
     },
     updatePullDownRefresh(val) {
-        this.pullDownRefresh = val
+      this.pullDownRefresh = val;
     },
     updatePullDownRefreshThreshold(val) {
-        this.pullDownRefreshThreshold = val
+      this.pullDownRefreshThreshold = val;
     },
     updatePullDownRefreshTxt(val) {
-        this.pullDownRefreshTxt = val
+      this.pullDownRefreshTxt = val;
     },
     updatePullUpLoad(val) {
-        this.pullUpLoad = val
+      this.pullUpLoad = val;
     },
     updatePullUpLoadThreshold(val) {
-        this.pullUpLoadThreshold = val
+      this.pullUpLoadThreshold = val;
     },
     updatePullUpLoadMoreTxt(val) {
-        this.pullUpLoadMoreTxt = val
+      this.pullUpLoadMoreTxt = val;
     },
     updatePullUpLoadNoMoreTxt(val) {
-        this.pullUpLoadNoMoreTxt = val
+      this.pullUpLoadNoMoreTxt = val;
     },
     updateCustomPullDown(val) {
-        this.customPullDown = val
+      this.customPullDown = val;
     },
     rebuildScroll() {
-        Vue.nextTick(() => {
-        this.$refs.scroll.destroy()
-        this.$refs.scroll.initScroll()
-        })
+      Vue.nextTick(() => {
+        this.$refs.scroll.destroy();
+        this.$refs.scroll.initScroll();
+      });
     }
-    },
-    created(){
-        this.getParams();
-        this.getData(this.idx,this.sum)
-    }
-}
+  },
+  created() {
+    this.getParams();
+    this.getData();
+  }
+};
 </script>
     <style lang="stylus" rel="stylesheet/stylus" scoped>
-    .scroll-list-wrap
+    .scroll-list-wrap {
       /* height: 350px */
-      height:100vh
+      height: 90vh;
       /* border: 1px solid rgba(0, 0, 0, 0.1) */
-      border-radius: 5px
-      transform: rotate(0deg) // fix 子元素超出边框圆角部分不隐藏的问题
-      overflow: hidden
+      border-radius: 5px;
+      transform: rotate(0deg); // fix 子元素超出边框圆角部分不隐藏的问题
+      overflow: hidden;
+    }
+
+    .foods-wrapper {
+      .food-item {
+        display: flex;
 
-    .foods-wrapper
-      .food-item
-        display: flex
         /* min-width: 0 */
         /* padding: 18px
         border-bottom: 1px solid rgba(7, 17, 27, 0.1) */
+        &:last-child {
+          border-none();
+          margin-bottom: 0;
+        }
 
-        &:last-child
-          border-none()
-          margin-bottom: 0
-
-        .food-content
-          flex: 1
+        .food-content {
+          flex: 1;
           min-width: 0;
-          .cartcontrol-wrapper
-            position: absolute
-            right: 0
-            bottom: 12px
-            .scroll-wrapper{
-      .cube-pulldown-wrapper{
-        .before-trigger{
-          font-size: 30px;
-          line-height: 30px;
-          align-self: flex-end;
-          span{
-            display: inline-block;
-            transition: all 0.3s;
-            color: #666;
-            &.rotate{
-                transform: rotate(180deg)
+
+          .cartcontrol-wrapper {
+            position: absolute;
+            right: 0;
+            bottom: 12px;
+
+            .scroll-wrapper {
+              .cube-pulldown-wrapper {
+                .before-trigger {
+                  font-size: 30px;
+                  line-height: 30px;
+                  align-self: flex-end;
+
+                  span {
+                    display: inline-block;
+                    transition: all 0.3s;
+                    color: #666;
+
+                    &.rotate {
+                      transform: rotate(180deg);
+                    }
+                  }
+                }
+
+                .after-trigger {
+                  .refresh-text {
+                    color: grey;
+                  }
+                }
               }
+            }
           }
         }
-        .after-trigger{
-          .refresh-text{
-            color: grey
-          }
-        }
-     }
+      }
     }
-    </style>
-<style scoped>
-.bgColor{
-    background-color: white
-}
-.search{
-    padding: .16rem .24rem;
-    height: .6rem;
-    background-color: #eeeeee;
-    border-bottom: .01rem #999999 solid
-}
-.search input{
+</style>
+<style scoped lang='less'>
+.bgColor {
+  background-color: white;
+  .header {
     width: 100%;
-    height: .56rem;
-    border-radius: 4px;
+    height: 0.88rem;
+    line-height: 0.88rem;
     text-align: center;
-    font-size: .28rem
+    color: #fff;
+    font-size: 0.37rem;
+    background: linear-gradient(#2e2f32, #414246);
+    position: fixed;
+    top: 0;
+    z-index: 6;
+  }
+  .search {
+    width: 100%;
+    padding: 0.16rem 0.24rem;
+    box-sizing: border-box;
+    background-color: #eeeeee;
+    border-bottom: 0.01rem #b7b7b7 solid;
+    position: fixed;
+    top: 0.88rem;
+    z-index: 6;
+    input {
+      width: 100%;
+      height: 0.56rem;
+      border-radius: 4px;
+      text-align: center;
+      font-size: 0.28rem;
+    }
+    &:focus {
+      outline: none;
+    }
+  }
 }
-.search:focus{
-    outline:none
+.nav {
+  margin-top: 1.76rem;
 }
-.food-item{
-  border-top: .16rem rgb(238,238,238) solid;
+.food-item {
+  border-top: 0.16rem rgb(238, 238, 238) solid;
 }
-.food-content{
-  border-top: .01rem rgb(223, 222, 222) solid;
-  border-bottom: .01rem rgb(223, 222, 222) solid;
+.food-content {
+  border-top: 0.01rem rgb(223, 222, 222) solid;
+  border-bottom: 0.01rem rgb(223, 222, 222) solid;
 }
-.title{
-    display: flex;
-    min-width: 0;
-    padding: .2rem .24rem;
-    line-height: .45rem;
-    border-bottom: .01rem rgb(223, 222, 222) solid;
+.title {
+  display: flex;
+  min-width: 0;
+  padding: 0.2rem 0.24rem;
+  line-height: 0.45rem;
+  border-bottom: 0.01rem rgb(223, 222, 222) solid;
 }
-.title div:nth-child(1){
-    width: 6%;
+.title div:nth-child(1) {
+  width: 6%;
 }
-.title div:nth-child(1) i{
-    font-size: .32rem;
-    color: #005395;
-    line-height: .49rem
+.title div:nth-child(1) i {
+  font-size: 0.32rem;
+  color: #005395;
+  line-height: 0.49rem;
 }
-.title div:nth-child(2){
-    width: 94%;
-    font-size: .32rem;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
+.title div:nth-child(2) {
+  width: 94%;
+  font-size: 0.32rem;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
 }
-.content{
-    font-size: .28rem;
-    /* margin-top: .3rem; */
-    line-height: .39rem;
-    overflow: hidden;
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-    word-break: break-all;
-    padding: 0 .64rem;
-    margin: .24rem 0;
-    max-height:0.78rem;
+.content {
+  font-size: 0.28rem;
+  /* margin-top: .3rem; */
+  line-height: 0.39rem;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  word-break: break-all;
+  padding: 0 0.64rem;
+  width: 83%;
+  margin: 0.24rem 0;
+  max-height: 0.8rem;
 }
-.timeBox{
-    display: flex;
-    justify-content:space-between;
-    /* margin-top: .3rem; */
-    border-top: .01rem rgb(223, 222, 222) solid;
-    padding: .2rem .64rem
+.timeBox {
+  display: flex;
+  justify-content: space-between;
+  /* margin-top: .3rem; */
+  border-top: 0.01rem rgb(223, 222, 222) solid;
+  padding: 0.2rem 0.64rem;
 }
-.timeBox .time{
-    color:#999999;
-    font-size: .24rem
+.timeBox .time {
+  color: #999999;
+  font-size: 0.24rem;
 }
-.timeBox .good i{
-    font-size: .3rem;
-    color: #A37200
+.timeBox .good {
+  font-size: 0.3rem;
+  color: #999;
 }
-.timeBox .good span{
-    color: #A37200;
-    font-size: .24rem
+.timeBox .good span {
+  color: #a37200;
+  font-size: 0.24rem;
 }
-.wushuju{
-    margin-top: 2.4rem;
-    text-align: center;
+.wushuju {
+  margin-top: 2.4rem;
+  text-align: center;
+  color: #999;
 }
-.wushuju img{
-    width: 5.12rem;
-    height: 2.84rem;
+.wushuju img {
+  width: 5.12rem;
+  height: 2.84rem;
 }
-</style>
+</style>

src/views/loading.vue

@@ -30,7 +30,8 @@ export default {
     background-color: rgba(0,0,0,0.5)!important;
     display: flex;
     justify-content:center;
-    align-items:center
+    align-items:center;
+    z-index: 9;
 }
 </style>
 <style scoped>

src/views/maintenance.vue

@@ -1,74 +0,0 @@
-<template>
-    <div>
-        <div class="label">
-            {{tit}}</div>
-        <div class="contents" v-for="v in items" v-html="v.content">
-            <!-- {{}} -->
-        </div>
-    </div>
-</template>
-<script>
-export default {
-    data(){
-        return{
-            state:"",
-            tit:"",
-            items:[],
-            getId:""
-        }
-    },
-    methods:{
-        getDictionaryId(){
-            var that=this;
-            this.$http.post('service/common/common/getDictionary',{
-                key: "service_type",
-                type: "list"
-            }).then(function(res){
-                that.state=that.$route.params.state;
-                if(that.state==2){
-                    that.tit="维修范围划分";
-                    that.getId=res.data[1].id
-                }else if(that.state==3){
-                    that.tit="不属于维修范围划分";
-                    that.getId=res.data[2].id
-                };
-                that.$http.post('service/solution/fetchDataList/serviceGuide',{
-                    "idx": 0, 
-                    "sum": 10,
-                    "serviceGuide":{
-                        "serviceType":{"id":that.getId},
-                        "status":1
-                    }
-                }).then(function(res1){
-                    that.items=res1.data.list
-                }) 
-            })
-        }
-    },
-    created(){
-        this.getDictionaryId();
-    },
-    mounted(){
-    }
-}
-</script>
-<style scoped>
-.label {
-    background-color: rgb(238, 238, 238);
-    height: .6rem;
-    line-height: .6rem;
-    padding-left: .2rem;
-    font-size: .24rem;
-    color:#666666;
-    border-top: .01rem rgb(223, 222, 222) solid;
-    border-bottom: .01rem rgb(223, 222, 222) solid;
-}
-.contents{
-    padding: .24rem;
-    font-size: .28rem;
-    line-height: .39rem;
-    color: #666666;
-    overflow: hidden;
-    overflow-x: scroll
-}
-</style>

src/views/mb.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="mb">
+
+  </div>
+</template>
+<script>
+export default {
+  data(){
+      return{
+
+      }
+  },
+  methods: {
+
+  },
+  created(){
+
+  }
+}
+</script>
+<style lang="less" scoped>
+    .mb{
+        
+    }
+</style>
+
+

src/views/my.vue

@@ -8,280 +8,157 @@
       <div class="label">个人信息</div>
       <ul>
         <li>
-          <div>姓名</div>
-          <div>{{loginUser.name}}</div>
-        </li>
-        <li v-if="repairMain.valueconfig == 2">
-          <div>科室名称</div>
-          <div>{{loginUser.dept?loginUser.dept.dept:'暂无'}}</div>
-        </li>
-        <li>
           <div>工号</div>
           <div>{{loginUser.account}}</div>
         </li>
         <li>
-          <div>联系电话</div>
-          <div>{{repairMain.valueconfig ==1?loginUser.mphone:loginUser.dept?loginUser.dept.phone:'暂无'}}</div>
+          <div>手机号</div>
+          <div>{{loginUser.phone}}</div>
         </li>
-        <li class="myArea">
-          <div>区域地点</div>
-          <div>
-            <cube-button @click="showCascadePicker">
-              {{areaData||"暂无"}}
-              <i class="iconfont icon-moren"></i>
-            </cube-button>
-          </div>
+        <li>
+          <div>部门</div>
+          <div>{{loginUser.dept?loginUser.dept.dept:''}}</div>
         </li>
         <li>
-          <div>详细地址</div>
-          <div class="factionAdd" @click="toModify()">
-            <span>{{loginUser.houseNumber||"暂无"}}</span>
-            <i class="iconfont icon-moren"></i>
-          </div>
+          <div>工作组</div>
+          <div>{{groups}}</div>
         </li>
       </ul>
     </div>
     <div class="myRapir">
-      <div class="label">我的报修</div>
+      <div class="label">我的事件工单</div>
       <div class="tit">
-        <div>我的报修</div>
-        <div @click="toIncidentList( )">{{incidentStateData.resultCount}}条&nbsp;&nbsp;&nbsp;></div>
+        <div>全部</div>
+        <div @click="toIncidentList('all')">{{incidentCount.incidentAll||0}}条&nbsp;&nbsp;&nbsp;></div>
       </div>
       <div class="rapirMessage">
-        <div class="status" @click="toIncidentList(1592)">
-          <div>
-            <svg class="icon" aria-hidden="true">
-              <use xlink:href="#icon-daishouli" />
-            </svg>
-          </div>
-          <div>
-            <span>未受理</span>
-            <span>{{incidentStateData.notAcc>99?99:incidentStateData.notAcc}}</span>
-          </div>
-        </div>
-        <div class="status" @click="toIncidentList(1593)">
+        <div class="status" @click="toIncidentList('todo')">
           <div>
             <svg class="icon" aria-hidden="true">
-              <use xlink:href="#icon-bushouli" />
+              <use xlink:href="#icon-daishouli"></use>
             </svg>
           </div>
           <div>
-            <span>不受理</span>
-            <span>{{incidentStateData.noAcc>99?99:incidentStateData.noAcc}}</span>
+            <span>待处理</span>
+            <span>{{incidentCount.incidentTodo||0}}</span>
           </div>
         </div>
-        <div class="status" @click="toIncidentList(1594)">
+        <div class="status" @click="toIncidentList('done')">
           <div>
             <svg class="icon" aria-hidden="true">
-              <use xlink:href="#icon-chulizhong" />
+              <use xlink:href="#icon-yijiejue"></use>
             </svg>
           </div>
           <div>
-            <span>处理中</span>
-            <span>{{incidentStateData.processing>99?99:incidentStateData.processing}}</span>
+            <span>处理过</span>
+            <span>{{incidentCount.incidentDone||0}}</span>
           </div>
         </div>
-        <div class="status" @click="toIncidentList(1595)">
+        <div class="status" @click="toIncidentList('create')">
           <div>
             <svg class="icon" aria-hidden="true">
-              <use xlink:href="#icon-daipingjia" />
+              <use xlink:href="#icon-daipingjia"></use>
             </svg>
           </div>
           <div>
-            <span>待评价</span>
-            <span>{{incidentStateData.evaluated>99?99:incidentStateData.evaluated}}</span>
+            <span>我创建</span>
+            <span>{{incidentCount.incidentCreate||0}}</span>
           </div>
         </div>
-        <div class="status" @click="toIncidentList(1596)">
+      </div>
+    </div>
+    <div class="myRapir">
+      <div class="label">我的巡检</div>
+      <div class="tit">
+        <div>全部</div>
+        <div @click="toinspectionList()">{{(incidentCount.inspectionTodo+incidentCount.inspectionDone)||0}}条&nbsp;&nbsp;&nbsp;></div>
+      </div>
+      <div class="rapirMessage">
+        <div class="status">
+          <!-- <div class="status" @click="toIncidentList(1594)"> -->
           <div>
             <svg class="icon" aria-hidden="true">
-              <use xlink:href="#icon-yijiejue" />
+              <use xlink:href="#icon-chulizhong"></use>
             </svg>
           </div>
-          <div>
-            <span>已解决</span>
-            <span>{{incidentStateData.solve>99?99:incidentStateData.solve}}</span>
+          <div @click="toinspectionList('todo')">
+            <span>待处理</span>
+            <span>{{incidentCount.inspectionTodo||0}}</span>
           </div>
         </div>
-        <div class="status" @click="toIncidentList(1597)">
+        <div @click="toinspectionList('done')" class="status">
           <div>
             <svg class="icon" aria-hidden="true">
-              <use xlink:href="#icon-yichehui" />
+              <use xlink:href="#icon-yijiejue"></use>
             </svg>
           </div>
           <div>
-            <span>已撤回</span>
-            <span>{{incidentStateData.retract>99?99:incidentStateData.retract}}</span>
+            <span>处理过</span>
+            <span>{{incidentCount.inspectionDone||0}}</span>
           </div>
         </div>
       </div>
     </div>
-    <promp-ting :conents="promptingConent" :status="promptingStatus"></promp-ting>
   </div>
 </template>
 <script>
 import "./../../static/css/iconfont.js";
-import PrompTing from "./../views/prompting.vue";
 export default {
   data() {
     return {
-      repairMain: null,
       loginUser: JSON.parse(localStorage.getItem("loginUser")),
-      incidentStateData: "",
-      treeData: [],
-      areaData: "",
+      valConfig: JSON.parse(localStorage.getItem("valConfig")) - 0, //报修主体
+      incidentCount: "",
       promptingConent: "",
-      promptingStatus: ""
+      promptingStatus: "",
+      groups: "", //工作组
+      candidateGroups:''
     };
   },
   methods: {
-    toModify(res) {
-      this.$router.push({
-        name: "MyModify",
-        params: {
-          data: this.loginUser.houseNumber
-        }
-      });
-    },
-    getUserAreaData() {
-      if (this.loginUser.place) {
-        this.areaData =
-          this.loginUser.place.area.area + " " + this.loginUser.place.place;
+    // 工作组
+    getGroups() {
+      var that = this;
+      if (that.loginUser.group) {
+        that.loginUser.group.forEach(element => {
+          that.groups += element.groupName + "/";
+          that.candidateGroups+=element.id+','
+        });
       }
+      that.candidateGroups=that.candidateGroups.slice(0,that.candidateGroups.length-1)
     },
-    toIncidentList(res) {
+    // 跳转到事件列表
+    toIncidentList(searchType) {
       this.$router.push({
         name: "IncidentList",
         params: {
-          state: res
+          searchType: searchType
         }
       });
     },
-    getIncidentData() {
-      var that = this;
-      this.$http
-        .post("service/apply/bpm/fetchServiceTasks", {
-          assignee: that.loginUser.id,
-          idx: 0,
-          sum: 9999
-        })
-        .then(function(res) {
-          that.incidentStateData = res.data;
-        });
-    },
-    getAreaData() {
-      var that = this;
-      this.$http
-        .post("service/user/data/fetchDataList/area", {
-          idx: 0,
-          sum: 1000,
-          area: {
-            wechatArea: true
-          }
-        })
-        .then(function(res) {
-          var data = res.data.list;
-          for (var i = 0; i < data.length; i++) {
-            that.treeData.push({
-              text: data[i].area,
-              value: data[i].id,
-              children: []
-            });
-          }
-        });
+    // 巡检列表
+    toinspectionList(state) {
+      this.$router.push({
+        name: "Inspection",
+        params:{
+          state:state
+        }
+      });
     },
-    getPlaceData() {
-      var that = this;
-      this.$http
-        .post("service/user/data/fetchDataList/place", {
-          idx: 0,
-          sum: 1000,
-          area: {
-            wechatAreaId: ""
-          }
+    // 事件数量
+    getIncidentData(){
+        var that=this;
+        this.$http.post('service/bpm/data/getIncidentCount',{
+            assignee:that.loginUser.id,
+            candidateGroups:that.candidateGroups
+        }).then(function(res){
+            that.incidentCount=res.data;
         })
-        .then(function(res) {
-          var data = res.data.list;
-          for (var i = 0; i < data.length; i++) {
-            for (var j = 0; j < that.treeData.length; j++) {
-              if (data[i].area.id == that.treeData[j].value) {
-                that.treeData[j].children.push({
-                  text: data[i].place,
-                  value: data[i].id
-                });
-              }
-            }
-          }
-          that.cascadePicker = that.$createCascadePicker({
-            title: "请选择区域地点",
-            data: that.treeData,
-            selectedIndex: [0, 0],
-            onSelect: that.selectHandle,
-            onCancel: that.cancelHandle
-          });
-        });
-    },
-    showCascadePicker() {
-      this.cascadePicker.show();
-    },
-    selectHandle(selectedVal, selectedIndex, selectedText) {
-      var that = this;
-      this.$http
-        .get(
-          "service/user/updPlace/" + this.loginUser.id + "/" + selectedVal[1],
-          {}
-        )
-        .then(function(res) {
-          if (res.status == 200) {
-            that.promptingConent = "恭喜您,修改区域地点成功!";
-            that.promptingStatus = true;
-            $("#fade").fadeIn();
-            setTimeout(function() {
-              $("#fade").fadeOut();
-            }, 2000);
-            if (!that.loginUser.place) {
-              that.loginUser.place = {
-                area:{}
-              };
-            }
-            that.loginUser.place.id = selectedVal[1];
-            that.loginUser.place.area.id = selectedVal[0];
-            that.loginUser.place.place = selectedText[1];
-            that.loginUser.place.area.area = selectedText[0];
-            var loginUserStr = JSON.stringify(that.loginUser);
-            localStorage.setItem("loginUser", loginUserStr);
-            that.areaData = selectedText[0] + " " + selectedText[1];
-          } else {
-            that.promptingConent = "对不起,修改失败,请稍后再试!";
-            that.promptingStatus = false;
-            $("#fade").fadeIn();
-            setTimeout(function() {
-              $("#fade").fadeOut();
-            }, 2000);
-          }
-        });
     },
-    cancelHandle() {}
   },
   created() {
-    this.getUserAreaData();
-    this.getAreaData();
-    this.getPlaceData();
+    this.getGroups();
     this.getIncidentData();
-    // 获取报修主体
-    this.repairMain = JSON.parse(localStorage.getItem("repairMain"));
-  },
-  mounted() {
-    // this.cascadePicker = this.$createCascadePicker({
-    //     title: '请选择区域地点',
-    //     data: this.treeData,
-    //     selectedIndex: [0,0],
-    //     onSelect: this.selectHandle,
-    //     onCancel: this.cancelHandle
-    // })
-  },
-  components: {
-    PrompTing
   }
 };
 </script>
@@ -320,7 +197,7 @@ export default {
   border-radius: 50%;
   margin: 0 auto;
   overflow: hidden;
-  background: url(./../../static/images/avatar-1-big.jpg);
+  background: url(./../../static/images/pig.jpg);
   background-size: contain;
 }
 
@@ -362,6 +239,8 @@ export default {
   font-size: 0.32rem;
   /* line-height: .3rem */
 }
+.myArea {
+}
 .factionAdd {
   display: flex;
   justify-content: space-between;
@@ -396,12 +275,12 @@ export default {
 
 .rapirMessage {
   display: flex;
-  height: 1.4rem;
+  height: 1.8rem;
   border-bottom: 0.01rem rgb(223, 222, 222) solid;
 }
 .rapirMessage .status {
-  width: 16.5%;
-  border-left: 0.01rem rgb(223, 222, 222) solid;
+  width: 25%;
+  border-right: 0.01rem rgb(223, 222, 222) solid;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -440,4 +319,4 @@ export default {
   white-space: nowrap;
   text-overflow: ellipsis;
 }
-</style>
+</style>

src/views/myModify.vue

@@ -1,116 +0,0 @@
-<template>
-    <div>
-        <div class="label">
-            详细地址
-        </div>
-        <cube-textarea v-model="value" placeholder="请输入你的详细地址"></cube-textarea>
-        <div class="chehui">
-            <div class="btn" @click="sub()">保&nbsp;存</div>
-        </div>
-        <promp-ting :conents="promptingConent" :status="promptingStatus"></promp-ting>
-    </div>
-</template>
-<script>
-    import PrompTing from './../views/prompting.vue'
-    export default {
-        data() {
-            return {
-                loginUser:JSON.parse(localStorage.getItem("loginUser")),
-                data:"",
-                value:"",
-                promptingConent:"",
-                promptingStatus:""
-            }
-        },
-        methods: {
-            getAddData(){
-                this.value=this.$route.params.data
-            },
-            sub(){
-                if(this.value==""){
-                    this.$createDialog({
-                        type: 'alert',
-                        title: '保存失败',
-                        content: '详细地址不能为空',
-                        icon: 'cubeic-wrong'
-                    }).show()
-                }else{
-                    var that=this;
-                    this.$http.post('service/user/updHouseNum',{
-                        "reqId":that.loginUser.id,
-                        "houseNum":that.value
-                    }).then(function(res){
-                        if(res.status==200){
-                            that.promptingConent="恭喜您,修改地址成功!";
-                            that.promptingStatus=true;
-                            $("#fade").fadeIn();
-                            setTimeout(function(){
-                                $("#fade").fadeOut();
-                            },2000);
-                            that.loginUser.houseNumber=that.value;
-                            var loginUserStr=JSON.stringify(that.loginUser);
-                            localStorage.setItem('loginUser',loginUserStr);
-                            that.dialog = that.$createDialog({
-                                type: 'alert',
-                                title: '修改成功',
-                                content: '点击确定返回我的信息',
-                                icon: 'cubeic-right',
-                                onConfirm: (e, promptValue) => {
-                                    that.$router.push({path:"/main/my"})
-                                }
-                            }).show()
-                        }else{
-                            that.promptingConent="修改失败,请稍后再试!";
-                            that.promptingStatus=false;
-                            $("#fade").fadeIn();
-                            setTimeout(function(){
-                                $("#fade").fadeOut();
-                            },2000);
-                        }
-                    })
-                }
-            }
-        },
-        created(){
-            this.getAddData()
-        },
-        mounted() {
-            
-        },
-        components: {
-            PrompTing
-        },
-    }
-</script>
-<style scoped>
- .label{
-    background-color: rgb(238, 238, 238);
-    height: .6rem;
-    line-height: .6rem;
-    padding-left: .24rem;
-    font-size: .24rem;
-    color: #666666
-}   
-.chehui{
-    height: 1.3rem;
-    width: 100%;
-    border-top: .01rem rgb(223, 222, 222) solid;
-    background-color: rgb(248,248,248);
-    position: fixed;
-    left: 0;
-    bottom: 0;
-    display: flex;
-    align-items:center;
-    justify-content:center
-}
-.chehui .btn{
-    width: 90%;
-    height: 1rem;
-    background-color: #005395;
-    border-radius: 10px;
-    line-height: 1rem;
-    color: white;
-    font-size: .36rem;
-    text-align: center
-}
-</style>

src/views/noticeDetails.vue

@@ -27,7 +27,7 @@ export default {
     },
     methods:{
         getParamsData(){
-            this.data=JSON.parse(this.$route.params.data);
+            this.data=this.$route.params.data;
         }
     },
     created(){

src/views/noticeList.vue

@@ -20,8 +20,8 @@
                                 </div>
                             </li>
                             <div class="wushuju" v-show="wushuju">
-                                <img src="./../../static/images/wugonggao.svg" alt="">
-                                <div class="noDataFont">暂无数据</div>
+                                <img src="./../../static/images/wushuju.svg" alt="">
+                                <p>暂无公告列表</p>
                             </div>
                         </ul>
                         <template v-if="customPullDown" slot="pulldown" slot-scope="props">
@@ -64,7 +64,7 @@ export default {
       pullDownRefreshTxt: 'Refresh success',
       pullUpLoad: true,
       pullUpLoadThreshold: 0,
-      pullUpLoadMoreTxt: 'Load more',
+      pullUpLoadMoreTxt: '加载更多',
       pullUpLoadNoMoreTxt: '没有更多数据',
       wushuju:false,
       search:"",
@@ -108,7 +108,6 @@ export default {
   methods: {
     searchFn(){
       var that=this;
-      this.idx=0;
       that.loadShow=true;
       this.$http.post('service/user/data/fetchDataList/notice',{
         'idx':0,
@@ -133,7 +132,7 @@ export default {
       this.$router.push({
           name:'NoticeDetails',
           params:{
-              data:JSON.stringify(data)
+              data
           }
       })
     },
@@ -318,6 +317,7 @@ export default {
 }
 </style>
 <style scoped>
+
 .search{
     padding: .16rem .24rem;
     height: .6rem;
@@ -359,6 +359,7 @@ export default {
 .wushuju{
     margin-top: 2.4rem;
     text-align: center;
+    color: #999;
 }
 .wushuju img{
     width: 5.12rem;

src/views/order.vue

@@ -0,0 +1,592 @@
+<template>
+  <div class="order">
+    <div class="conentBox">
+      <div class="conent">
+        <div class="header">处理方案</div>
+        <div v-if="model.incident">
+          <div class="navBar">
+            <div class="fl" :class="{'p50':model.incident.handlerUser.id!=loginUser.id}">
+              <a :class="{active:actives=='info'}" href="javascript:;" @click="toInfo('info')">事件信息</a>
+            </div>
+            <div class="fl" :class="{'p50':model.incident.handlerUser.id!=loginUser.id}">
+              <a
+                :class="{active:actives=='progress'}"
+                href="javascript:;"
+                @click="toInfo('progress')"
+              >处理进度</a>
+            </div>
+            <div class="fl" v-if="model.incident.handlerUser.id==loginUser.id">
+              <a :class="{active:actives=='jd'}" href="javascript:;" @click="toInfo('jd')">接单</a>
+            </div>
+          </div>
+          <div class="label headtop" id="info">事件信息</div>
+
+          <div class="info">
+            <div class="head">
+              <p>
+                <i class="iconfont icon-zuixinbaoxiu newPapir"></i>
+                事件单号：{{model.incident.incidentsign}}
+                <span
+                  :class="{ 'fr':true,'btn':true, 'daijiedan':(model.incident.state.value=='pending'&&model.incident.handlerUser&&!model.incident.candidateGroups), 'daiqiangdan':(model.incident.state.value=='pending'&&!model.incident.handlerUser&&model.incident.candidateGroups)}"
+                >{{model.incident.state.value=='pending'?(model.incident.handlerUser&&!model.incident.candidateGroups?'待接单':'待抢单'):model.incident.state.name}}</span>
+              </p>
+            </div>
+            <p>
+              <span class="fl">事件分类</span>
+              <span class="fr">{{model.incident.category.category}}</span>
+            </p>
+            <!-- <p>
+              <span class="fl">事件主题</span>
+              <span class="fr">{{model.incident.title}}</span>
+            </p> -->
+            <p class="desc">
+              <span class="fl">事件描述</span>
+              <span class="grayFont fr" v-html="model.incident.description"></span>
+            </p>
+            <div class="shows" id="shows">
+              <p v-if="valConfig==2">
+                <span class="fl">报修科室</span>
+                <span class="fr">{{model.incident.department?model.incident.department.dept:''}}</span>
+              </p>
+            <p v-if="valConfig==1">
+              <span class="fl">报修人</span>
+              <span class="fr">{{model.incident.requester.name}}</span>
+            </p>
+            <p v-if="valConfig==2">
+              <span class="fl">联系人</span>
+              <span class="fr">{{model.incident.contacts}}</span>
+            </p>
+              <p>
+                <span class="fl">联系电话</span>
+                <span class="fr">{{model.incident.contactsInformation}}</span>
+              </p>
+              <p>
+                <span class="fl">联系地址</span>
+                <span class="fr">{{model.incident.houseNumber||''}}</span>
+              </p>
+              <p class="boeder_B">
+                <span class="fl">事件来源</span>
+                <span class="fr">{{model.incident.source.name}}</span>
+              </p>
+              <!-- <p>
+                <span class="fl">影响度</span>
+                <span class="fr">{{model.incident.influence?model.incident.influence.name:''}}</span>
+              </p>
+              <p>
+                <span class="fl">紧急度</span>
+                <span class="fr">{{model.incident.emergency?model.incident.emergency.name:''}}</span>
+              </p> -->
+              <p>
+                <span class="fl">优先级</span>
+                <span class="fr">{{model.incident.priority?model.incident.priority.name:''}}</span>
+              </p>
+              <p>
+                <span class="fl">逾期响应时间</span>
+                <span class="fr">{{model.incident.overdueResponseDate}}</span>
+              </p>
+              <p>
+                <span class="fl">逾期解决时间</span>
+                <span class="fr">{{model.incident.overdueTime}}</span>
+              </p>
+              <p>
+                <span class="fl">区域</span>
+                <span class="fr">{{model.incident.place?model.incident.place.area.area:'--'}}</span>
+              </p>
+              <p>
+                <span class="fl">地点</span>
+                <span class="fr">{{model.incident.place?model.incident.place.place:'--'}}</span>
+              </p>
+              <!-- <p v-if="model.incident.synergeticReason">
+                <span class="fl" >协同原因</span>
+                <span class="fr">{{model.incident.synergeticReason}}</span>
+              </p>
+              <p v-if="model.isupreason">
+                <span class="fl">升级原因</span>
+                <span class="fr">{{model.isupreason}}</span>
+              </p>
+              <p v-if="model.transferReason">
+                <span class="fl">转派原因</span>
+                <span class="fr" >{{model.transferReason}}</span>
+              </p> -->
+            </div>
+            <p class="info_hide">
+              <span class="fl hide" @click="hides()" v-if="!item_hides">展开详情 >></span>
+              <span class="fl hide" @click="hides()" v-if="item_hides">隐藏详情 <<</span>
+            </p>
+            <div class="imgs-container" v-if="imgs.length">
+              <div class="imgs-cont">
+                <img v-if='img.suffix=="jpeg"||img.suffix=="jpg"||img.suffix=="gif"||img.suffix=="png"||img.suffix=="svg"||img.suffix=="pdf"' :src="img.previewUrl" v-for="(img, index) in imgs" class="imgs">
+                <p v-else>
+                  <a :href='[img.previewUrl]'>{{img.name}}</a>
+                </p>
+              </div>
+            </div>
+
+            <div class="label" id="progress">处理进度</div>
+            <div :class="{'progress':true,'progressHide':!pro_hides}" id="progressBox">
+              <div class="progress_info" v-for="item in progressInfo">
+                <div class="progress_info_L">{{item.activityName}}</div>
+                <div class="progress_info_R">
+                  <div class="time">
+                    <i
+                      :class="{'iconfont':true, 'icon-icon_weizuo':item.endTime!='','icon-icon_zhengzaijinx':item.endTime=='' }"
+                    ></i>
+                    <span class="text1">{{item.startTime}}</span>
+                  </div>
+                  <div :class="{'cont':true,'blue':item.endTime!='' }">
+                    <p class="text2" v-if="item.desc">{{item.desc}}</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <p class="info_hide">
+              <span class="fl hide" @click="proHides()">{{pro_hides?'隐藏详情 <<':'展开详情 >>'}}</span>
+            </p>
+            <div v-if="model.incident.handlerUser.id==loginUser.id">
+              <div class="label" id="jd">接单</div>
+              <cube-radio-group
+                v-model="selected"
+                :options="options"
+                position="right"
+                :hollow-style="true"
+              />
+
+              <div class="txtLabel" v-if="selected==2">
+                <div class="txt fl">
+                  <span style="color:red;">*</span> 重新指派理由:
+                </div>
+                <cube-textarea class="fl" v-model="resignComment" placeholder="重新指派理由"></cube-textarea>
+              </div>
+              <cube-form-group class="sub">
+                <cube-button type="submit" @click="subVali()">{{selected==1?'接单':'重新指派'}}</cube-button>
+              </cube-form-group>
+            </div>
+          </div>
+        </div>
+        <load-ing v-if="!model.incident"></load-ing>
+        <promp-ting :conents="promptingConent" :status="promptingStatus"></promp-ting>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import LoadIng from "./../views/loading.vue";
+import PrompTing from "./../views/prompting.vue";
+export default {
+  data() {
+    return {
+      loginUser: JSON.parse(localStorage.getItem("loginUser")),
+      valConfig: JSON.parse(localStorage.getItem("valConfig")) - 0, //报修主体
+      selected: 1,
+      id:'',
+      options: [
+        {
+          label: "接单",
+          value: 1
+        },
+        {
+          label: "重新指派",
+          value: 2
+        }
+      ],
+      promptingConent: "",
+      promptingStatus: "",
+      resignComment: "", //重新指派原因
+      item_hides: false,
+      actives: "info",
+      processInstanceId: "",
+      progressInfo: [], //处理进度
+      imgs: [], //图片
+      model: {}, //提交数据
+      pro_hides:false,//展开/收起处理进度
+    };
+  },
+  components: {
+    LoadIng,
+    PrompTing
+  },
+  methods: {
+    //   获取事件数据
+    getParamsData() {
+      var that = this;
+      that.$http
+        .get(
+          "/service/form/renderForm/receiveform/" +
+            that.processInstanceId +
+            "/" +
+            that.loginUser.id+'/'+that.id,
+          {}
+        )
+        .then(function(res) {
+          console.log(res.data);
+          that.model = res.data.model;
+          //seimin
+          localStorage.setItem('modelData',JSON.stringify(that.model))
+        });
+    },
+    // 获取图片
+    getImgs() {
+      var that = this;
+      that.$http
+        .get(
+          "service/common/common/listAttachment/incident/" +
+            that.processInstanceId,
+          {}
+        )
+        .then(function(res) {
+          console.log(res.data);
+          that.imgs = res.data.data.splice(0, 3);
+          console.log(that.imgs);
+        });
+    },
+    // 获取处理进度
+    getProgressInfo() {
+      var that = this;
+      that.$http
+        .post(
+          "/service/bpm/bpm/flowTracingCustom/" + that.processInstanceId,
+          {}
+        )
+        .then(function(res) {
+          console.log(res.data);
+          that.progressInfo = res.data.data;
+          that.progressInfo.reverse();
+        });
+    },
+    //隐藏显示详情
+    hides() {
+      this.item_hides = !this.item_hides;
+      $("#shows").slideToggle();
+    },
+    // 处理进度隐藏/展开
+    proHides(){
+      if(!this.pro_hides){
+        $('#progressBox').animate({'height':$('#progressBox')[0].scrollHeight})
+      }else{
+        $('#progressBox').animate({'height':'1.7rem'})
+      }
+      this.pro_hides=!this.pro_hides;
+    },
+    //数据提交
+    subVali() {
+      var that = this;
+      delete that.model.handlerCode;
+      that.model.handler_code = "resolve";
+      that.model.incident.assignee = that.loginUser.id;
+      if (that.selected == 1) {
+        that.model.receive_code = "handler";
+        that.model.loginUser = that.loginUser;
+      } else if (that.selected == 2) {
+        that.model.receive_code = "transferment";
+        that.model.resignComment = that.resignComment;
+        if (!that.resignComment) {
+          $("#fade").fadeIn();
+          that.promptingConent = "提交失败,请填写必填信息!";
+          that.promptingStatus = false;
+          setTimeout(function() {
+            $("#fade").fadeOut();
+          }, 2000);
+          return;
+        }
+      }
+      console.log(that.model);
+      that.$http
+        .post(
+          "service/bpm/bpm/completeTask/" +
+            that.model.incident.taskId +
+            "/" +
+            that.loginUser.id,
+          that.model
+        )
+        .then(function(res) {
+          console.log(res.data);
+          if (res.data) {
+            $("#fade").fadeIn();
+            that.promptingConent = that.selected==1?"恭喜您,接单成功!":"恭喜您,重新指派成功!";
+            that.promptingStatus = true;
+            that.dialog = that
+              .$createDialog({
+                type: "alert",
+                title: that.selected==1?"接单成功":"重新指派成功",
+                content: "点击返回首页",
+                icon: "cubeic-right",
+                onConfirm: (e, promptValue) => {
+                  that.$router.push({ path: "/main" });
+                }
+              })
+              .show();
+            setTimeout(function() {
+              $("#fade").fadeOut();
+            }, 2000);
+          }
+        });
+    },
+    // 快速定位
+    toInfo(id) {
+      this.actives = id;
+      $("body,html").animate(
+        {
+          scrollTop:
+            $("#" + id).offset().top -
+            $(".header")[0].offsetHeight -
+            $(".navBar")[0].offsetHeight
+        },
+        260
+      );
+    }
+  },
+  created() {
+    // seimin
+    this.processInstanceId = this.$route.params.data
+      ? this.$route.params.data.processInstanceId
+      : JSON.parse(localStorage.getItem("modelData")).incident
+          .processInstanceId;
+          this.id=this.$route.params.data?this.$route.params.data.id:JSON.parse(localStorage.getItem("modelData")).incident.id;
+    this.getParamsData();
+    this.getProgressInfo();
+    this.getImgs();
+  }
+};
+</script>
+<style lang="less" scoped>
+i.iconfont.blue {
+  color: #005395;
+  // &::after {
+  //   content: "";
+  //   width: 0.01rem;
+  //   height: 0.4rem;
+  //   background: #005395;
+  //   position: relative;
+  //   display: block;
+  //   left: 0.14rem;
+  // }
+}
+.order {
+  .header {
+    width: 100%;
+    height: 0.88rem;
+    line-height: 0.88rem;
+    text-align: center;
+    color: #fff;
+    font-size: 0.37rem;
+    background: linear-gradient(#2e2f32, #414246);
+    position: fixed;
+    top: 0;
+    z-index: 6;
+  }
+  .navBar {
+    width: 100%;
+    height: 0.96rem;
+    line-height: 0.96rem;
+    background-color: #fafafa;
+    font-size: 0.28rem;
+    position: fixed;
+    top: 0.88rem;
+
+    div {
+      width: 33.33%;
+      text-align: center;
+      &.p50{
+        width: 49.99% ;
+    }
+      a {
+        display: inline-block;
+        height: 0.9rem;
+        width: 1.7rem;
+        padding: 0 0.1rem;
+        &.active {
+          color: #005395;
+          border-bottom: 0.06rem solid #005395;
+        }
+      }
+    }
+  }
+
+  .headtop {
+    margin-top: 1.84rem;
+  }
+  .label {
+    background-color: #eeeeee;
+    height: 0.6rem;
+    line-height: 0.58rem;
+    padding-left: 0.2rem;
+    font-size: 0.24rem;
+    color: #666666;
+    span {
+      font-size: 0.2rem;
+      display: inline-block;
+      margin-left: 0.08rem;
+      color: #999999;
+    }
+    &.formLabel {
+      background-color: #fff;
+    }
+  }
+  .conentBox {
+    width: 100%;
+    .conent {
+      font-size: 0.32rem;
+      font-weight: 400;
+      line-height: 0.45rem;
+      // border-bottom: 0.16rem solid #e5e5e5;
+
+      .shows {
+        display: none;
+      }
+      .boeder_B {
+        border-bottom: 0.01rem solid #ccc;
+      }
+        p {
+          &.desc{
+            overflow: hidden;
+          }
+          .grayFont {
+            width: 75%;
+            text-align: right;
+            overflow-x: scroll;
+          }
+      }
+      .bottom {
+        overflow: hidden;
+        line-height: 0.86rem;
+        border-bottom: 0.01rem solid #e6e6e6;
+        font-size: 0.24rem;
+        color: #999;
+        padding: 0 0.24rem 0 0.48rem;
+      }
+      .info {
+        color: #999;
+        font-size: 0.28rem;
+        overflow: hidden;
+        .head {
+          border-bottom: 0.01rem solid #e6e6e6;
+          p {
+            padding: 0.24rem 0.3rem;
+            i {
+              color: #00559d;
+            }
+          }
+        }
+        p {
+          line-height: 0.4rem;
+          padding: 0.1rem 0.24rem;
+          overflow: hidden;
+          .overflowEllipsis2 {
+            margin-left: 1.96rem;
+          }
+        }
+        .info_hide {
+          padding: 0.2rem 0.24rem;
+          border-bottom: 0.01rem solid #e6e6e6;
+          .hide {
+            color: #00559d;
+          }
+        }
+        .imgs-container{
+          a{
+            color:#03c !important;
+            &:visited{
+              color: #551a8b !important;
+            }
+          }
+           img {
+            width: 1.5rem;
+            height: 1.5rem;
+            margin-right: 0.7rem;
+            &:nth-child(1) {
+              margin-left: 0.75rem;
+            }
+          }
+        }
+        .progress {
+          padding: 0.2rem 0.2rem;
+          overflow: hidden;
+          transition-duration: .2s;
+          transition-timing-function: linear;
+          &.progressHide{
+            height: 1.7rem;
+          }
+          .progress_info {
+            overflow: hidden;
+            margin-bottom: 0.1rem;
+            &:nth-last-child(1) {
+              .cont {
+                border: none !important;
+              }
+            }
+            .progress_info_L {
+              float: left;
+              color: #333;
+              max-width: 18%;
+            }
+            .progress_info_R {
+              float: right;
+              margin-left: 0.09rem;
+              width: 80%;
+              font-size: 0.25rem;
+              .time {
+                i {
+                  margin-left: -0.15rem;
+                  &.icon-icon_weizuo {
+                    color: #005495;
+                  }
+                  &.icon-icon_zhengzaijinx {
+                    color: #48a843;
+                    font-size: 0.37rem;
+                  }
+                }
+                span {
+                  margin-left: 0.15rem;
+                }
+              }
+              .cont {
+                border-left: 1px solid #999;
+                padding-left: 0.4rem;
+                min-height: 0.4rem;
+                &.blue {
+                  border-left: 1px solid #005395;
+                }
+              }
+
+              .text1 {
+                font-size: 0.15rem;
+              }
+              .text2 {
+                color: #666;
+              }
+              p {
+                padding: 0;
+              }
+            }
+          }
+        }
+      }
+      .txtLabel {
+        width: 100%;
+        overflow: hidden;
+        padding: 0.32rem 0.24rem 0.32rem 0.32rem;
+        .txt {
+          width: 30%;
+          color: #666;
+        }
+        .cube-textarea-wrapper {
+          width: 62%;
+        }
+      }
+      .sub {
+        background: #ececec;
+        .cube-btn {
+          background-color: #005395 !important;
+          width: 90%;
+          margin: 0.2rem auto;
+          border-radius: 8px;
+        }
+      }
+    }
+  }
+  .showwrap {
+    width: 75%;
+    text-align: right;
+  }
+}
+</style>

src/views/referenceDetail.vue

@@ -0,0 +1,264 @@
+<template>
+  <div class="body">
+    <div class="header">常见问题</div>
+    <div class="bgColor">
+      <div class="title">
+        <!-- <div>主题:</div> -->
+        {{data.title}}
+      </div>
+      <div class="timeBox">
+        <div>{{data.createUser.dept?data.createUser.dept.dept:"暂无"}}</div>
+        <div>{{data.createtime.substring(0,data.createtime.length-3)}}</div>
+      </div>
+      <div class="conents" v-html="data.content">{{data.content}}</div>
+      <!-- <div class="release">{{data.createUser.dept?data.createUser.dept.dept:"暂无"}}</div>
+      <div class="time">{{data.createtime.substring(0,data.createtime.length-3)||"暂无"}}</div>-->
+      <div class="files" v-if="files.length">
+        <!-- <div @click="downFile(v.token,v.name)" v-for="(v,index) in files">{{v.name}}</div> -->
+        <a
+          :href="getFileUrl(v.previewUrl)"
+          v-for="(v,index) in files"
+          target="_blank"
+          :download="getDownload(v.name)"
+        >{{v.name}}</a>
+      </div>
+      <div class="keyword" v-if="data.label">
+        <span v-for="v in data.label" @click="toKnowList(v)">{{v}}</span>
+      </div>
+      <!-- <div class="good" @click="referClick()" v-show="starIf">
+        <i class="iconfont icon-yinyong"></i>
+        <span>{{data.solutionQuote||0}}</span>
+      </div> -->
+      <div class="goodClick" @click="referClick()">
+        <i class="iconfont icon-yinyong"></i>
+        <span>{{data.solutionQuote||0}}</span>
+      </div>
+    </div>
+    <promp-ting :conents="promptingConent" :status="promptingStatus"></promp-ting>
+  </div>
+</template>
+<script>
+import PrompTing from "./../views/prompting.vue";
+export default {
+  data() {
+    return {
+      promptingConent: "",
+      promptingStatus: "",
+      loginUser: JSON.parse(localStorage.getItem("loginUser")),
+      valConfig: JSON.parse(localStorage.getItem("valConfig")) - 0, //报修主体
+      data: "",
+      // starIf: "",
+      files: []
+    };
+  },
+  components:{
+    PrompTing
+  },
+  methods: {
+    getFileUrl(res) {
+      return res;
+    },
+    getDownload(res) {
+      return res;
+    },
+    downFile(token, fileName) {
+      this.$http
+        .get("service/common/common/downloadAttachment/" + token, {
+          headers: {
+            Accept: "*/*"
+          },
+          responseType: "arraybuffer"
+        })
+        .then(function(res) {
+          var file = new Blob([res.data], {
+            type: "application/octet-stream"
+          });
+          var fileURL = URL.createObjectURL(file);
+          var a = document.createElement("a");
+          a.href = fileURL;
+          a.target = "_blank";
+          a.download = fileName;
+          document.body.appendChild(a);
+          a.click();
+        });
+    },
+    getFiles() {
+      var that = this;
+      this.$http
+        .get(
+          "service/common/common/listAttachment/solution/" + this.data.id,
+          {}
+        )
+        .then(function(res) {
+          that.files = res.data.data;
+        });
+    },
+    toKnowList(res) {
+      this.$router.push({
+        name: "KnowList",
+        params: {
+          keword: res
+        }
+      });
+    },
+    getParamsData() {
+      this.data = JSON.parse(this.$route.params.data);
+    },
+    // 关键字查询
+    getKeyWords() {
+      if (this.data.label) {
+        this.data.label = this.data.label.split("/");
+      }
+    },
+    // 获取是否点过赞
+    // getStarIf() {
+    //   var that = this;
+    //   this.$http
+    //     .get(
+    //       "service/solution/canStar/requester/" +
+    //         this.data.id +
+    //         "/" +
+    //         this.loginUser.id,
+    //       {}
+    //     )
+    //     .then(function(res) {
+    //       that.starIf = res.data.result;
+    //     });
+    // },
+    // 引用
+    referClick() {
+      var that = this;
+      localStorage.setItem("referenceInfo", that.$route.params.data);
+      that.data.solutionQuote++;
+      that.$http
+        .get(
+          "service/solution/solutionQuote/" +that.data.id,
+          {}
+        )
+        .then(function(res) {
+          $("#fade").fadeIn();
+            that.promptingConent = "恭喜您,引用成功!";
+            that.promptingStatus = true;
+            setTimeout(function() {
+              $("#fade").fadeOut();
+              that.$router.go(-2);
+            }, 2000);
+        });
+    }
+  },
+  created() {
+    this.getParamsData();
+    // this.getStarIf();
+    this.getKeyWords();
+    this.getFiles();
+  },
+  mounted() {}
+};
+</script>
+<style scoped lang='less'>
+.header {
+  height: 0.88rem;
+  line-height: 0.88rem;
+  text-align: center;
+  color: #fff;
+  font-size: 0.37rem;
+  background: linear-gradient(#2e2f32, #414246);
+  padding: 0;
+}
+.bgColor {
+  background-color: white;
+  padding: 0 0.24rem;
+}
+.title {
+  font-size: 0.32rem;
+  line-height: 0.45rem;
+  padding: 0.24rem 0.24rem 0 0.24rem;
+  color: #333333;
+  font-weight: bold;
+}
+.timeBox {
+  display: flex;
+  justify-content: space-between;
+  font-size: 0.24rem;
+  color: #999999;
+  padding: 0.16rem 0;
+  line-height: 0.33rem;
+}
+.conents {
+  font-size: 0.28rem;
+  padding-top: 0.24rem;
+  border-top: 0.01rem rgb(223, 222, 222) solid;
+  border-bottom: 0.01rem rgb(223, 222, 222) solid;
+  text-indent: 2em;
+  line-height: 0.39rem;
+  padding-bottom: 0.48rem;
+  color: #666666;
+  overflow: hidden;
+  width: 100%;
+  overflow-x: scroll;
+}
+.release {
+  display: flex;
+  justify-content: flex-end;
+  font-size: 0.28rem;
+  line-height: 0.39rem;
+  color: #666666;
+}
+.time {
+  display: flex;
+  justify-content: flex-end;
+  font-size: 0.28rem;
+  line-height: 0.39rem;
+  color: #666666;
+  margin-top: 0.08rem;
+  padding-bottom: 0.24rem;
+  border-bottom: 0.01rem rgb(223, 222, 222) solid;
+}
+.files {
+  font-size: 0.28rem;
+  /* color: #005395; */
+  line-height: 0.4rem;
+  padding: 0.24rem 0;
+  border-bottom: 0.01rem rgb(223, 222, 222) solid;
+}
+.files a {
+  display: block;
+  color: #005395;
+  margin-top: 0.1rem;
+}
+.keyword {
+  padding: 0.24rem 0;
+  border-bottom: 0.01rem rgb(223, 222, 222) solid;
+}
+.keyword span {
+  display: inline-block;
+  color: rgb(0, 0, 255);
+  margin-left: 0.2rem;
+  text-decoration: underline;
+  font-size: 0.28rem;
+  line-height: 0.35rem;
+}
+.good {
+  text-align: center;
+  margin: 0.24rem auto;
+  width: 2rem;
+  height: 0.88rem;
+  line-height: 0.88rem;
+  background-color: #b8d1e6;
+  border-radius: 20px;
+  font-size: 0.4rem;
+  color: #005395;
+}
+
+.goodClick {
+  text-align: center;
+  margin: 0.24rem auto;
+  width: 2rem;
+  height: 0.88rem;
+  line-height: 0.88rem;
+  background-color: #b8d1e6;
+  border-radius: 20px;
+  font-size: 0.4rem;
+  color: #005395;
+}
+</style>

src/views/referenceList.vue

@@ -0,0 +1,395 @@
+<template>
+  <div class="bgColor">
+    <div class="header">常见问题</div>
+    <div slot="content" class="scroll-wrapper">
+      <div class="demo">
+        <div class="scroll-list-wrap">
+          <cube-scroll
+            ref="scroll"
+            :data="items"
+            :options="options"
+            @pulling-down="onPullingDown"
+            @pulling-up="onPullingUp"
+          >
+            <div class="search">
+              <input type="text" placeholder="搜索" v-model="search" @input="searchFn()">
+            </div>
+            <ul class="foods-wrapper">
+              <li v-for="data in items" class="food-item border-1px" @click="toKnowDetails(data)">
+                <div class="food-content">
+                  <div class="title">
+                    <div>
+                      <i class="iconfont icon-changjianwenti1"></i>
+                    </div>
+                    <div>主题:{{data.title}}</div>
+                  </div>
+                  <div class="content" v-html="data.content" style="-webkit-box-orient: vertical !important;"></div>
+                  <div class="timeBox">
+                    <div class="time">{{data.createtime.substring(0,data.createtime.length-3)}}</div>
+                    <div class="good">
+                      <i class="iconfont icon-yinyong"></i>&nbsp;&nbsp;
+                      <span>{{data.solutionQuote}}</span>
+                      引用
+                    </div>
+                  </div>
+                </div>
+              </li>
+              <div class="wushuju" v-show="items.length==0&&wushuju">
+                <img src="./../../static/images/wushuju.svg" alt>
+                <p>暂无常见问题</p>
+              </div>
+            </ul>
+            <template v-if="customPullDown" slot="pulldown" slot-scope="props">
+              <div
+                v-if="props.pullDownRefresh"
+                class="cube-pulldown-wrapper"
+                :style="props.pullDownStyle"
+              >
+                <div
+                  v-show="props.beforePullDown"
+                  class="before-trigger"
+                  :style="{paddingTop: props.bubbleY + 'px'}"
+                >
+                  <span :class="{rotate: props.bubbleY > pullDownRefreshThreshold - 40}">↓</span>
+                </div>
+                <div class="after-trigger" v-show="!props.beforePullDown">
+                  <div v-show="props.isPullingDown" class="loading">
+                    <cube-loading></cube-loading>
+                  </div>
+                  <div v-show="!props.isPullingDown" class="text">
+                    <span class="refresh-text">更新成功</span>
+                  </div>
+                </div>
+              </div>
+            </template>
+          </cube-scroll>
+        </div>
+      </div>
+    </div>
+    <load-ing v-show="!items.length&&!wushuju"></load-ing>
+  </div>
+</template>
+<script>
+import Vue from "vue";
+import CubePage from "../components/cube-page.vue";
+import SwitchOption from "../components/switch-option";
+import InputOption from "../components/input-option";
+import SelectOption from "../components/select-option";
+import LoadIng from "./../views/loading.vue";
+export default {
+  data() {
+    return {
+      //   items: _foods,
+      items: [],
+      pullDownRefresh: true,
+      pullDownRefreshThreshold: 60,
+      pullDownRefreshStop: 40,
+      pullDownRefreshTxt: "Refresh success",
+      pullUpLoad: true,
+      pullUpLoadThreshold: 0,
+      pullUpLoadMoreTxt: "加载更多",
+      pullUpLoadNoMoreTxt: "没有更多数据",
+      wushuju: false,
+      customPullDown: true,
+      search: "",
+      sum: 10,
+      idx: 0,
+      loadShow: true
+    };
+  },
+  components: {
+    CubePage,
+    SwitchOption,
+    InputOption,
+    SelectOption,
+    LoadIng
+  },
+  computed: {
+    options() {
+      return {
+        pullDownRefresh: this.pullDownRefreshObj,
+        pullUpLoad: this.pullUpLoadObj,
+        scrollbar: true
+      };
+    },
+    pullDownRefreshObj: function() {
+      return this.pullDownRefresh
+        ? {
+            threshold: parseInt(this.pullDownRefreshThreshold),
+            txt: this.pullDownRefreshTxt
+          }
+        : false;
+    },
+    pullUpLoadObj: function() {
+      return this.pullUpLoad
+        ? {
+            threshold: parseInt(this.pullUpLoadThreshold),
+            txt: {
+              more: this.pullUpLoadMoreTxt,
+              noMore: this.pullUpLoadNoMoreTxt
+            }
+          }
+        : false;
+    }
+  },
+  methods: {
+    getParams() {
+      if (this.$route.params.keword) {
+        this.search = this.$route.params.keword;
+      }
+    },
+    searchFn() {
+      var that = this;
+      that.loadShow = true;
+      that.items=[]
+      that.getData()
+    },
+    toKnowDetails(data) {
+      // this.$router.push({path:'/knowDetails'})
+      this.$router.push({
+        name: "ReferenceDetail",
+        params: {
+          data: JSON.stringify(data)
+        }
+      });
+    },
+    
+    getData() {
+      var that = this;
+      this.$http
+        .post("service/solution/fetchDataList/solution", {
+          idx: that.idx,
+          solution: {
+            searchWord: that.search,
+            // solutionType: { id: "" },
+            // status: { id: 72 },
+            // createUser: { name: "" }
+          },
+          sum: that.sum
+        })
+        .then(function(res) {
+          if (res.data.list.length > 0) {
+            that.items=that.items.concat(res.data.list);
+            that.wushuju = false;
+          } else {
+            that.wushuju = true;
+            that.$refs.scroll.forceUpdate()
+          }
+          that.loadShow = false;
+        });
+    },
+    onPullingDown() {
+     var that = this;
+      // 模拟更新数据
+      that.idx = 0;
+      that.sum = 10;
+        that.items=[];
+      setTimeout(() => {
+        that.getData();
+      }, 1000);
+    },
+    onPullingUp() {var that = this;
+      that.idx += 1;
+      that.getData();
+    },
+    updatePullDownRefresh(val) {
+      this.pullDownRefresh = val;
+    },
+    updatePullDownRefreshThreshold(val) {
+      this.pullDownRefreshThreshold = val;
+    },
+    updatePullDownRefreshTxt(val) {
+      this.pullDownRefreshTxt = val;
+    },
+    updatePullUpLoad(val) {
+      this.pullUpLoad = val;
+    },
+    updatePullUpLoadThreshold(val) {
+      this.pullUpLoadThreshold = val;
+    },
+    updatePullUpLoadMoreTxt(val) {
+      this.pullUpLoadMoreTxt = val;
+    },
+    updatePullUpLoadNoMoreTxt(val) {
+      this.pullUpLoadNoMoreTxt = val;
+    },
+    updateCustomPullDown(val) {
+      this.customPullDown = val;
+    },
+    rebuildScroll() {
+      Vue.nextTick(() => {
+        this.$refs.scroll.destroy();
+        this.$refs.scroll.initScroll();
+      });
+    }
+  },
+  created() {
+    this.search=this.$route.params.data||'';
+    this.getParams();
+    this.getData(this.idx, this.sum);
+
+  }
+};
+</script>
+    <style lang="stylus" rel="stylesheet/stylus" scoped>
+    .scroll-list-wrap {
+      /* height: 350px */
+      height: 100vh;
+      /* border: 1px solid rgba(0, 0, 0, 0.1) */
+      border-radius: 5px;
+      transform: rotate(0deg); // fix 子元素超出边框圆角部分不隐藏的问题
+      overflow: hidden;
+    }
+
+    .foods-wrapper {
+      .food-item {
+        display: flex;
+
+        /* min-width: 0 */
+        /* padding: 18px
+        border-bottom: 1px solid rgba(7, 17, 27, 0.1) */
+        &:last-child {
+          border-none();
+          margin-bottom: 0;
+        }
+
+        .food-content {
+          flex: 1;
+          min-width: 0;
+
+          .cartcontrol-wrapper {
+            position: absolute;
+            right: 0;
+            bottom: 12px;
+
+            .scroll-wrapper {
+              .cube-pulldown-wrapper {
+                .before-trigger {
+                  font-size: 30px;
+                  line-height: 30px;
+                  align-self: flex-end;
+
+                  span {
+                    display: inline-block;
+                    transition: all 0.3s;
+                    color: #666;
+
+                    &.rotate {
+                      transform: rotate(180deg);
+                    }
+                  }
+                }
+
+                .after-trigger {
+                  .refresh-text {
+                    color: grey;
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+</style>
+<style scoped lang='less'>
+
+.bgColor {
+  background-color: white;
+  .header {
+    height: 0.88rem;
+    line-height: 0.88rem;
+    text-align: center;
+    color: #fff;
+    font-size: 0.37rem;
+    background: linear-gradient(#2e2f32, #414246);
+  }
+}
+.search {
+  padding: 0.16rem 0.24rem;
+  height: 0.6rem;
+  background-color: #eeeeee;
+  border-bottom: 0.01rem #b7b7b7 solid;
+}
+.search input {
+  width: 100%;
+  height: 0.56rem;
+  border-radius: 4px;
+  text-align: center;
+  font-size: 0.28rem;
+}
+.search:focus {
+  outline: none;
+}
+.food-item {
+  border-top: 0.16rem rgb(238, 238, 238) solid;
+}
+.food-content {
+  border-top: 0.01rem rgb(223, 222, 222) solid;
+  border-bottom: 0.01rem rgb(223, 222, 222) solid;
+}
+.title {
+  display: flex;
+  min-width: 0;
+  padding: 0.2rem 0.24rem;
+  line-height: 0.45rem;
+  border-bottom: 0.01rem rgb(223, 222, 222) solid;
+}
+.title div:nth-child(1) {
+  width: 6%;
+}
+.title div:nth-child(1) i {
+  font-size: 0.32rem;
+  color: #005395;
+  line-height: 0.49rem;
+}
+.title div:nth-child(2) {
+  width: 94%;
+  font-size: 0.32rem;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.content {
+  font-size: 0.28rem;
+  /* margin-top: .3rem; */
+  line-height: 0.39rem;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  word-break: break-all;
+  padding: 0 0.64rem;
+  margin: 0.24rem 0;
+  max-height: .8rem;
+  width: 83%;
+}
+.timeBox {
+  display: flex;
+  justify-content: space-between;
+  /* margin-top: .3rem; */
+  border-top: 0.01rem rgb(223, 222, 222) solid;
+  padding: 0.2rem 0.64rem;
+}
+.timeBox .time {
+  color: #999999;
+  font-size: 0.24rem;
+}
+.timeBox .good {
+  font-size: 0.3rem;
+  color: #999;
+}
+.timeBox .good span {
+  color: #a37200;
+  font-size: 0.24rem;
+}
+.wushuju {
+  margin-top: 2.4rem;
+  text-align: center;
+  color: #999;
+}
+.wushuju img {
+  width: 5.12rem;
+  height: 2.84rem;
+}
+</style>

src/views/repair.vue

@@ -1,670 +0,0 @@
-<template>
-  <div slot="content" class="bgColor">
-    <cube-form :model="model" @validate="validateHandler" @submit="submitHandler">
-      <cube-form-group>
-        <!-- <div class="label">
-                    报修联系人</div>
-                <div class="zhidu">
-                    <div>联系人:</div>
-                    <div>{{name}}</div>
-        </div>-->
-        <cube-form-item :field="fields[5]" v-if="repairMain.valueconfig == 2">
-          <cube-input
-            @input="showDeptId(model.deptId)"
-            @blur="model.deptId = deptIdText"
-            v-model="model.deptId"
-          >{{model.deptId || '请输入报修科室'}}</cube-input>
-        </cube-form-item>
-
-        <cube-form-item :field="fields[0]"></cube-form-item>
-        <cube-form-item :field="fields[1]"></cube-form-item>
-        <!-- <cube-form-item :field="fields[2]" class="btn_plcaeholde"></cube-form-item> -->
-        <cube-form-item :field="fields[3]">
-          <cube-input
-            @input="showAddress(model.address)"
-            v-model="model.address"
-          >{{model.address || '请输入故障地点'}}</cube-input>
-        </cube-form-item>
-        <cube-form-item :field="fields[6]" v-if="ifCreate.valueconfig == 1"></cube-form-item>
-        <div class="label">报修信息</div>
-        <cube-form-item :field="fields[4]"></cube-form-item>
-        <div class="label">
-          报修图片
-          <span>(最多可上传3张JPG或PNG,每张不能超过10M)</span>
-        </div>
-        <div class="uplod">
-          <!-- <div>报修图片:</div> -->
-          <cube-upload
-            ref="upload"
-            :max="3"
-            :action="action"
-            :simultaneous-uploads="3"
-            @files-added="filesAdded"
-            @file-submitted="fileSubmitted"
-          />
-        </div>
-      </cube-form-group>
-      <cube-form-group class="sub">
-        <cube-button type="submit" @click="subVali()">提交报修</cube-button>
-      </cube-form-group>
-    </cube-form>
-    <load-ing v-show="loadShow"></load-ing>
-    <promp-ting :conents="promptingConent" :status="promptingStatus"></promp-ting>
-  </div>
-</template>
-<script>
-import CubePage from "./../components/cube-page.vue";
-import CubeButtonGroup from "./../components/cube-button-group.vue";
-import DatePicker from "./../components/date-picker.vue";
-import CubeExtendPopup from "./../components/extend-popup.vue";
-import LoadIng from "./../views/loading.vue";
-import PrompTing from "./../views/prompting.vue";
-// const PCA = {
-//   props: {
-//     value: {
-//       default() {
-//         return [];
-//       }
-//     }
-//   },
-//   data() {
-//     return {
-//       selected: [],
-//       selectData: []
-//     };
-//   },
-//   render(createElement) {
-//     return createElement(
-//       "cube-input",
-//       {
-//         on: {
-//           click: this.showPicker
-//         }
-//       },
-//       this.selected.length ? this.selected.join(" ") : "请选择区域地点"
-//     );
-//   },
-//   mounted() {},
-//   methods: {
-//     showPicker() {
-//       this.picker.show();
-//     },
-//     selectHandler(selectedVal, selectedIndex, selectedTxt) {
-//       this.selected = selectedTxt;
-//       this.$emit("input", selectedVal);
-//     },
-//     getAreaData() {
-//       var that = this;
-//       this.$http
-//         .post("service/user/data/fetchDataList/area", {
-//           idx: 0,
-//           sum: 1000,
-//           area: {
-//             wechatArea: true
-//           }
-//         })
-//         .then(function(res) {
-//           var data = res.data.list;
-//           for (var i = 0; i < data.length; i++) {
-//             that.selectData.push({
-//               text: data[i].area,
-//               value: data[i].id,
-//               children: []
-//             });
-//           }
-//         });
-//     },
-//     getPlaceData() {
-//       var that = this;
-//       this.$http
-//         .post("service/user/data/fetchDataList/place", {
-//           idx: 0,
-//           sum: 1000,
-//           area: {
-//             wechatAreaId: ""
-//           }
-//         })
-//         .then(function(res) {
-//           var data = res.data.list;
-//           for (var i = 0; i < data.length; i++) {
-//             for (var j = 0; j < that.selectData.length; j++) {
-//               if (data[i].area.id == that.selectData[j].value) {
-//                 that.selectData[j].children.push({
-//                   text: data[i].place,
-//                   value: data[i].id
-//                 });
-//               }
-//             }
-//           }
-//           that.picker = that.$createCascadePicker({
-//             title: "区域地点选择",
-//             data: that.selectData,
-//             selectedIndex: [0, 0],
-//             onSelect: that.selectHandler
-//           });
-//         });
-//     },
-//     getParamsPlace() {
-//       var data = JSON.parse(localStorage.getItem("loginUser"));
-//       this.selected[0] = data.place.area.area;
-//       this.selected[1] = data.place.place;
-//     }
-//   },
-//   created() {
-//     this.getAreaData();
-//     this.getPlaceData();
-//     this.getParamsPlace();
-//   }
-// };
-const delay = (function() {
-  let timer = 0;
-  return function(callback, ms) {
-    clearTimeout(timer);
-    timer = setTimeout(callback, ms);
-  };
-})();
-export default {
-  data() {
-    return {
-      loginUser: null,
-      // 故障地点下拉数据
-      addressData: [],
-      // 故障地点选中文本
-      addressText: "",
-      // 报修科室下拉数据
-      deptIdData: [],
-      // 报修科室选中文本
-      deptIdText: "",
-      // 报修科室选中id
-      deptIdNum: -1,
-      // 报修主体
-      repairMain: null,
-      // 自动创建
-      ifCreate: null,
-      validity: {},
-      valid: undefined,
-      // action: 'http://localhost:8080/service/common/common/uploadAttachment/wechatRequesterIncident/',
-      // action: 'http://192.168.199.164:8080/service/common/common/uploadAttachment/wechatRequesterIncident/',
-      action: {
-        // "target":'http://192.168.3.100:8080/service/common/common/uploadAttachment/wechatRequesterIncident/',
-        // "fileName":"upload",
-        // "target":'http://localhost/service/common/common/uploadAttachment/wechatRequesterIncident/',
-        // "target":'http://weixintest.ngser.dashitech.com/service/common/common/uploadAttachment/wechatRequesterIncident/',
-        target:this.$host+"/service/common/common/uploadAttachment/wechatRequesterIncident/",
-        data: {}
-      },
-      isUploading: false,
-      loadShow: false,
-      name: "",
-      phone: "",
-      model: {
-        contactsInformation: "",
-        // pcaValue: [],
-        address: "",
-        description: "",
-        bxcode: "",
-        deptId: "",
-        contacts: ""
-      },
-      // showPrompting:false,
-      promptingConent: "",
-      promptingStatus: "",
-      vali: false,
-      fields: [
-        {
-          type: "input",
-          modelKey: "contacts",
-          label: "联系人:",
-          props: {
-            placeholder: "请输入联系人"
-          },
-          rules: {
-            // required: this.repairMain.valueconfig == 1
-            required: true
-          }
-        },
-        {
-          type: "input",
-          modelKey: "contactsInformation",
-          label: "联系电话:",
-          props: {
-            placeholder: "请输入联系电话"
-          },
-          rules: {
-            required: true
-          }
-        },
-        {
-          component: "input",
-          modelKey: "pcaValue",
-          label: "区域地点:",
-          rules: {
-            required: true
-          },
-          messages: {
-            required: "请选择区域地点"
-          }
-        },
-        {
-          type: "input",
-          modelKey: "address",
-          label: "故障地点:",
-          props: {
-            placeholder: "请输入故障地点"
-          },
-          rules: {
-            required: true
-          }
-        },
-        {
-          type: "textarea",
-          modelKey: "description",
-          label: "报修内容:",
-          props: {
-            placeholder: "请输入报修内容"
-          },
-          rules: {
-            required: true
-          },
-          debounce: 100
-        },
-        {
-          type: "input",
-          modelKey: "deptId",
-          label: "报修科室:",
-          props: {
-            placeholder: "请选择报修科室"
-          },
-          rules: {
-            required: true
-          }
-        },
-        {
-          type: "select",
-          modelKey: "categoryId",
-          label: "故障类型:",
-          props: {
-            placeholder: "请选择故障类型",
-            options: []
-          },
-          rules: {
-            required: true
-          }
-        }
-      ]
-    };
-  },
-  methods: {
-    // -----------故障地点-----
-    showAddressPicker() {
-      if (!this.picker) {
-        this.picker = this.$createPicker({
-          title: "故障地点",
-          data: [this.addressData],
-          onSelect: this.selectAddressHandle
-        });
-      }
-      this.picker.show();
-    },
-    selectAddressHandle(selectedVal, selectedIndex, selectedText) {
-      this.model.address = selectedText[0];
-      this.addressText = selectedText[0];
-    },
-    // ----------------
-    // -----------报修科室-----
-    showDeptIdPicker() {
-      if (!this.picker1) {
-        this.picker1 = this.$createPicker({
-          title: "报修科室",
-          data: [this.deptIdData],
-          onSelect: this.selectDeptIdHandle
-        });
-      }
-      this.picker1.show();
-    },
-    selectDeptIdHandle(selectedVal, selectedIndex, selectedText) {
-      this.model.deptId = selectedText[0];
-      this.deptIdText = selectedText[0];
-      this.deptIdNum = selectedVal[0];
-      this.deptIdList.forEach(item => {
-        if (item.id == this.deptIdNum) {
-          this.model.contactsInformation = item.phone;
-          this.model.address = item.place
-            ? item.place.place
-              ? item.place.area.area + item.place.place
-              : item.place.area
-            : ""; //seimin
-        }
-      });
-    },
-    // ----------------
-    subVali() {
-      this.vali = true;
-    },
-    getbxcode() {
-      var that = this;
-      this.$http.get("service/bpm/bpm/restful/wxbx", {}).then(function(res) {
-        that.model.bxcode = res.data.data;
-      });
-    },
-    submitHandler() {
-      // if (this.model.pcaValue.length == 2) {
-      //   this.model.areaId = this.model.pcaValue[this.model.pcaValue.length - 2];
-      //   this.model.placeId = this.model.pcaValue[
-      //     this.model.pcaValue.length - 1
-      //   ];
-      // } else if (this.model.pcaValue.length == 1) {
-      //   this.model.areaId = this.model.pcaValue[this.model.pcaValue.length - 1];
-      //   this.model.placeId = "";
-      // }
-
-      this.model["requester"] = this.loginUser;
-      // delete this.model.pcaValue;
-      this.model.fileUrl = "url";
-      this.model.sourceType = "wechatRequesterIncident";
-      var that = this;
-      this.loadShow = true;
-      var reqData = {
-        verification: "true",
-        loginUser: {
-          id: that.loginUser.id
-        },
-        incident: JSON.parse(JSON.stringify(this.model))
-      };
-    //  报修主体是报修科室的时候，不传科室id艺洛
-      if(this.repairMain.valueconfig == 2){
-        reqData.incident.deptId = this.deptIdNum;
-      }else{
-        delete reqData.incident.deptId;
-      }
-      this.$http
-        .post("service/apply/bpm/addWxIncident", reqData)
-        .then(function(res) {
-          if (res.data.state == 200) {
-            that.action.target = that.action.target + res.data.incident.id;
-            // that.action.target=that.action.target+res.data.incident.bxcode;
-            setTimeout(function() {
-              that.$refs.upload.start();
-            }, 100);
-            $("#fade").fadeIn();
-            that.promptingConent = "恭喜您,新建报修成功!";
-            that.promptingStatus = true;
-            that.dialog = that
-              .$createDialog({
-                type: "alert",
-                title: "报修成功",
-                content: "点击返回首页",
-                icon: "cubeic-right",
-                onConfirm: (e, promptValue) => {
-                  that.$router.push({ path: "/main" });
-                }
-              })
-              .show();
-            setTimeout(function() {
-              $("#fade").fadeOut();
-            }, 2000);
-          } else {
-            $("#fade").fadeIn();
-            that.promptingConent = "系统错误,请稍后再试!";
-            that.promptingStatus = false;
-            that.loadShow = false;
-            that.dialog = that
-              .$createDialog({
-                type: "alert",
-                title: "系统错误,请稍后再试!",
-                content: "点击返回首页",
-                icon: "cubeic-wrong",
-                onConfirm: (e, promptValue) => {
-                  that.$router.push({ path: "/main" });
-                }
-              })
-              .show();
-            setTimeout(function() {
-              $("#fade").fadeOut();
-            }, 2000);
-          }
-        });
-      event.preventDefault();
-    },
-    validateHandler(result) {
-      this.validity = result.validity;
-      this.valid = result.valid;
-      if (this.valid == false) {
-        $("#fade").fadeIn();
-        this.promptingConent = "提交失败,请填写必填信息!";
-        this.promptingStatus = false;
-        setTimeout(function() {
-          $("#fade").fadeOut();
-        }, 2000);
-      }
-      this.valid = false;
-    },
-    // 展示故障地点搜索下拉
-    showAddress(data) {
-      if (this.addressText !== this.model.address) {
-        delay(() => {
-          this.$http
-            .post("service/apply/bpm/searchFaultLocation", {
-              searchKey: data
-            })
-            .then(result => {
-              if (result.data.state == 200) {
-                if (result.data.result.length > 0) {
-                  this.addressData.length = 0;
-                  result.data.result.forEach(item => {
-                    this.addressData.push({
-                      text: item.place
-                        ? item.area.area + item.place
-                        : item.area,
-                      value: item.place
-                        ? item.area.area + item.place
-                        : item.area
-                    });
-                  });
-                  // 显示
-                  this.showAddressPicker();
-                }
-              }
-            });
-        }, 500);
-      }
-    },
-    // 展示报修科室搜索下拉
-    showDeptId(data) {
-      if (this.deptIdText !== this.model.deptId) {
-        delay(() => {
-          this.$http
-            .post("service/user/data/fetchDataList/department", {
-              idx: 0,
-              sum: 50,
-              department: { dept: data }
-            })
-            .then(result => {
-              if (result.data.status == 200) {
-                if (result.data.list.length > 0) {
-                  this.deptIdData.length = 0;
-                  this.deptIdList = result.data.list;
-                  result.data.list.forEach(item => {
-                    this.deptIdData.push({
-                      text: item.dept,
-                      value: item.id
-                    });
-                  });
-                  // 显示
-                  this.showDeptIdPicker();
-                }
-              }
-            });
-        }, 500);
-      }
-    },
-    filesAdded(files) {
-      let hasIgnore = false;
-      const maxSize = 1000 * 1024 * 1024; // 1M
-      for (let k in files) {
-        const file = files[k];
-        if (file.size > maxSize) {
-          file.ignore = true;
-          hasIgnore = true;
-        }
-      }
-      hasIgnore &&
-        this.$createToast({
-          type: "warn",
-          time: 1000,
-          txt: "不能上传超过100M的文件"
-        }).show();
-    },
-    fileSubmitted(files) {
-      files.base64Value = files.file.base64;
-      this.action.data = { fileName: files.name };
-      console.log("ok");
-    },
-    fileSuccess() {
-      console.log("上传成功");
-    },
-    getMessage() {
-      this.name = this.loginUser.name;
-      this.model.contactsInformation =
-        this.repairMain.valueconfig == 1
-          ? this.loginUser.mphone
-          : this.loginUser.dept
-          ? this.loginUser.dept.phone
-          : "";
-      this.model.contacts = this.loginUser.name;
-      this.model.address = this.loginUser.place
-        ? this.loginUser.place.area.area + this.loginUser.place.place
-        : "";
-      this.model.deptId = this.loginUser.dept ? this.loginUser.dept.dept : "";
-    }
-  },
-  created() {
-    this.repairMain = JSON.parse(localStorage.getItem("repairMain"));
-    this.ifCreate = JSON.parse(localStorage.getItem("ifCreate"));
-
-    this.fields.forEach(item => {
-      // 联系人在报修人主体下必填，报修科室主体下非必填
-      if (item.modelKey == "contacts") {
-        item.rules.required = this.repairMain.valueconfig == 1;
-      }
-    });
-    // 获取故障类型
-    this.$http
-      .post("service/bpm/data/fetchDataList/incidentcategory", {
-        idx: 0,
-        sum: 100,
-        incidentcategory: { selectType: "one" }
-      })
-      .then(result => {
-        if(result.data.status ==200){
-          let arr = [];
-          result.data.list.forEach(item=>{
-            arr.push({value:item.id,text:item.category})
-          })
-          this.fields.forEach(item => {
-          // 初始化故障类型下拉框列表
-          if (item.modelKey == "categoryId") {
-            item.props.options = arr;
-          }
-        });
-        }
-      });
-  },
-  mounted() {
-    this.loginUser = JSON.parse(localStorage.getItem("loginUser"));
-    this.getMessage();
-    this.getbxcode();
-    // 获取报修主体
-    this.deptIdNum = this.loginUser.dept ? this.loginUser.dept.id : "";
-    this.deptIdText = this.loginUser.dept ? this.loginUser.dept.dept : "";
-    this.addressText = this.loginUser.place
-      ? this.loginUser.place.place
-        ? this.loginUser.place.area.area + this.loginUser.place.place
-        : this.loginUser.place.area
-      : "";
-    this.$refs.upload.pause();
-  },
-  components: {
-    CubePage,
-    CubeButtonGroup,
-    DatePicker,
-    // JsonView
-    CubeExtendPopup,
-    LoadIng,
-    PrompTing
-  }
-};
-</script>
-<style lang="stylus" rel="stylesheet/stylus" scoped>
-.form-custom {
-  .cube-form-item {
-    .cube-btn {
-      padding-left: 0;
-      padding-right: 0;
-      text-align: left;
-      color: inherit;
-      background: none;
-      border: none;
-    }
-  }
-}
-
-.label {
-  background-color: rgb(238, 238, 238);
-  height: 0.6rem;
-  line-height: 0.5rem;
-  padding-left: 0.2rem;
-  font-size: 0.24rem;
-  color: #666666;
-}
-
-.label span {
-  font-size: 0.2rem;
-  display: inline-block;
-  margin-left: 0.08rem;
-  color: #999999;
-}
-
-.zhidu {
-  display: flex;
-  height: 0.7rem;
-  line-height: 0.7rem;
-  border-bottom: 0.02rem rgb(245, 245, 245) solid;
-}
-
-.bgColor {
-  background-color: white;
-}
-
-.zhidu div:nth-child(1) {
-  width: 27.5%;
-  padding-left: 6%;
-}
-
-.uplod {
-  padding: 0 0.24rem;
-}
-</style>
-<style>
-.btn_plcaeholde .cube-btn {
-  padding-left: 0;
-  padding-right: 0;
-  text-align: left;
-  color: inherit;
-  background: none;
-  border: none;
-}
-.cube-form_standard .cube-upload-def .cube-upload-btn,
-.cube-form_standard .cube-upload-def .cube-upload-file {
-  margin-left: 3% !important;
-}
-.sub .cube-btn {
-  background-color: #005395 !important;
-  width: 90%;
-  margin: 0 auto;
-  border-radius: 8px;
-}
-.cube-picker-wheel-item {
-  text-overflow: ellipsis;
-}
-</style>

src/views/solved.vue

@@ -0,0 +1,704 @@
+<template>
+  <div class="solved">
+    <div class="conentBox">
+      <div class="header">处理方案</div>
+      <div v-if="model.incident" class="conent">
+        <div class="navBar">
+          <div class="fl">
+            <a :class="{active:actives=='info'}" href="javascript:;" @click="toInfo('info')">事件信息</a>
+          </div>
+          <div class="fl">
+            <a
+              :class="{active:actives=='handlerInfo'}"
+              href="javascript:;"
+              @click="toInfo('handlerInfo')"
+            >处理信息</a>
+          </div>
+          <div class="fl">
+            <a
+              :class="{active:actives=='progress'}"
+              href="javascript:;"
+              @click="toInfo('progress')"
+            >处理进度</a>
+          </div>
+        </div>
+
+        <div class="info">
+          <div class="label headtop" id="info">事件信息</div>
+          <div class="head">
+            <p>
+              <i class="iconfont icon-zuixinbaoxiu newPapir"></i>
+              事件编号：{{model.incident.incidentsign}}
+              <span class="fr btn yijiejue">{{model.incident.state.name}}</span>
+            </p>
+          </div>
+          <p>
+            <span class="fl">事件分类</span>
+            <span class="fr">{{model.incident.category.category}}</span>
+          </p>
+          <!-- <p>
+            <span class="fl">事件主题</span>
+            <span class="fr">{{model.incident.title}}</span>
+          </p> -->
+          <p class="desc">
+            <span class="fl">事件描述</span>
+            <span class="grayFont fr " v-html="model.incident.description"></span>
+          </p>
+          <div class="shows" id="shows">
+              <p v-if="valConfig==2">
+                <span class="fl">报修科室</span>
+                <span class="fr">{{model.incident.department?model.incident.department.dept:''}}</span>
+              </p>
+            <p v-if="valConfig==1">
+              <span class="fl">报修人</span>
+              <span class="fr">{{model.incident.requester.name}}</span>
+            </p>
+            <p v-if="valConfig==2">
+              <span class="fl">联系人</span>
+              <span class="fr">{{model.incident.contacts}}</span>
+            </p>
+            <p>
+              <span class="fl">联系电话</span>
+              <span class="fr">{{model.incident.contactsInformation}}</span>
+            </p>
+            <p>
+              <span class="fl">联系地址</span>
+              <span class="fr">{{model.incident.houseNumber||''}}</span>
+            </p>
+            <p class="boeder_B">
+              <span class="fl">事件来源</span>
+              <span class="fr">{{model.incident.source.name}}</span>
+            </p>
+            <!-- <p>
+              <span class="fl">影响度</span>
+              <span class="fr">{{model.incident.influence?model.incident.influence.name:''}}</span>
+            </p>
+            <p>
+              <span class="fl">紧急度</span>
+              <span class="fr">{{model.incident.emergency?model.incident.emergency.name:''}}</span>
+            </p> -->
+            <p>
+              <span class="fl">优先级</span>
+              <span class="fr">{{model.incident.priority?model.incident.priority.name:''}}</span>
+            </p>
+            <p>
+              <span class="fl">逾期响应时间</span>
+              <span class="fr">{{model.incident.overdueResponseDate}}</span>
+            </p>
+            <p>
+              <span class="fl">逾期解决时间</span>
+              <span class="fr">{{model.incident.overdueTime}}</span>
+            </p>
+            <p>
+              <span class="fl">区域</span>
+              <span class="fr">{{model.incident.place?model.incident.place.area.area:'--'}}</span>
+            </p>
+            <p>
+              <span class="fl">地点</span>
+              <span class="fr">{{model.incident.place?model.incident.place.place:'--'}}</span>
+            </p>
+          </div>
+          <p class="info_hide">
+            <span class="fl hide" @click="hides()" v-if="!item_hides">展开详情 >></span>
+            <span class="fl hide" @click="hides()" v-if="item_hides">隐藏详情<<</span>
+          </p>
+          <div class="imgs-container" v-if="imgs.length">
+            <div class="imgs-cont">
+              <img v-if='img.suffix=="jpeg"||img.suffix=="jpg"||img.suffix=="gif"||img.suffix=="png"||img.suffix=="svg"||img.suffix=="pdf"' :src="img.previewUrl" v-for="(img, index) in imgs" class="imgs">
+              <p v-else>
+                <a :href='[img.previewUrl]'>{{img.name}}</a>
+              </p>
+            </div>
+          </div>
+
+          <div class="label" id="handlerInfo">处理信息</div>
+          <p>
+            <span class="fl">处理人</span>
+            <span class="fr">{{model.incident.acceptUser?model.incident.acceptUser.name:''}}</span>
+          </p>
+          <p>
+            <span class="fl">联系电话</span>
+            <span class="fr">{{model.incident.contactsInformation}}</span>
+          </p>
+          <p>
+            <span class="fl">处理方式</span>
+            <span
+              class="fr showwrap"
+            >{{model.incident.handleCategory?model.incident.handleCategory.name:''}}</span>
+          </p>
+          <p>
+            <span class="fl">关闭代码</span>
+            <span class="fr">{{model.incident.closecode?model.incident.closecode.name:''}}</span>
+          </p>
+          <p class="desc">
+            <span class="fl">处理方案</span>
+            <span class="fr grayFont" v-html="model.incident.handleDescription"></span>
+          </p>
+          <!-- <p>
+            <span class="fl" v-if="model.incident.synergeticReason">协同对象</span>
+            <span class="fl" v-else-if="model.isupreason">升级对象</span>
+            <span class="fl" v-else-if="model.transferReason">转派对象</span>
+            <span class="fr">{{model.incident.handlerUser?model.incident.handlerUser.name:''}}</span>
+          </p>
+              <p v-if="model.incident.synergeticReason">
+                <span class="fl" >协同原因</span>
+                <span class="fr">{{model.incident.synergeticReason}}</span>
+              </p>
+              <p v-if="model.isupreason">
+                <span class="fl">升级原因</span>
+                <span class="fr">{{model.isupreason}}</span>
+              </p>
+              <p v-if="model.transferReason">
+                <span class="fl">转派原因</span>
+                <span class="fr" >{{model.transferReason}}</span>
+              </p> -->
+
+          <div class="label" id="progress">处理进度</div>
+          <div :class="{'progress':true,'progressHide':!pro_hides}" id="progressBox">
+            <div class="progress_info" v-for="item in progressInfo">
+              <div class="progress_info_L">{{item.activityName}}</div>
+              <div class="progress_info_R">
+                <div class="time">
+                  <i
+                    :class="{'iconfont':true, 'icon-icon_weizuo':item.endTime!='','icon-icon_zhengzaijinx':item.endTime=='' }"
+                  ></i>
+                  <span class="text1">{{item.startTime}}</span>
+                </div>
+                <div
+                  :class="{'cont':true,'blue':item.endTime!='' }"
+                >
+                  <p class="text2" v-if="item.desc">{{item.desc}}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <p class="info_hide">
+            <span class="fl hide" @click="proHides()">{{pro_hides?'隐藏详情 <<':'展开详情 >>'}}</span>
+          </p>
+
+          <div class="form"  v-if="model.incident.handlerUser.id==loginUser.id">
+            <div class="txtLabel">
+              <div class="txt fl handler">
+                <span style="color:red;">*</span>是否已解决：
+              </div>
+              <cube-select class="selectGroup fl" v-model="isclose" :options="iscloseArr"></cube-select>
+            </div>
+            <div class="txtLabel">
+              <div class="txt fl">
+                <span style="color:red;">*</span> 结果类型:
+              </div>
+              <cube-select class="selectGroup fl" v-model="handleResult" :options="handleResultArr"></cube-select>
+            </div>
+            <div class="txtLabel">
+              <div class="txt fl">满意度评价:</div>
+              <cube-select class="selectGroup fl" v-model="degree" :options="degreeArr"></cube-select>
+            </div>
+            <div class="txtLabel">
+              <div class="txt fl">回访备注:</div>
+              <cube-input v-model="model.incident.visitRemarks"></cube-input>
+            </div>
+            <cube-form-group class="sub">
+              <cube-button type="submit" @click="subVali()">提交</cube-button>
+            </cube-form-group>
+          </div>
+        </div>
+      </div>
+      <load-ing v-if="!model.incident"></load-ing>
+    </div>
+  </div>
+</template>
+<script>
+import LoadIng from "./../views/loading.vue";
+export default {
+  data() {
+    return {
+      id:'',
+      loginUser: JSON.parse(localStorage.getItem("loginUser")),
+      valConfig: JSON.parse(localStorage.getItem("valConfig")) - 0, //报修主体
+      selected: 1,
+      isclose: "close", //是否已解决
+      iscloseArr: [
+        {
+          text: "已解决",
+          value: "close"
+        },
+        {
+          text: "未解决",
+          value: "notsolved"
+        }
+      ],
+      handleResult: "", //结果类型
+      handleResultArr: [], //结果类型
+      degree: "",
+      degreeArr: [],
+      visitRemarks: "", //回访备注
+      item_hides: false,
+      item_hides1: false,
+      pro_hides:false,//展开/收起处理进度
+      actives: "info",
+      processInstanceId: "",
+      progressInfo: [], //处理进度
+      imgs: [], //图片
+      model: {} //提交数据
+    };
+  },
+  components: {
+    LoadIng
+  },
+  methods: {
+    //   获取事件数据
+    getParamsData() {
+      var that = this;
+      that.$http
+        .get(
+          "/service/form/renderForm/closeform/" +
+            that.processInstanceId +
+            "/" +
+            that.loginUser.id+'/'+that.id,
+          {}
+        )
+        .then(function(res) {
+          console.log(res.data);
+          that.model = res.data.model;
+          that.model.msgflag = '已解决';
+          //seimin
+          localStorage.setItem('modelData',JSON.stringify(that.model))
+        });
+    },
+    // 获取图片
+    getImgs() {
+      var that = this;
+      that.$http
+        .get(
+          "service/common/common/listAttachment/incident/" +
+            that.processInstanceId,
+          {}
+        )
+        .then(function(res) {
+          console.log(res.data);
+          that.imgs = res.data.data.splice(0, 3);
+          console.log(that.imgs);
+        });
+    },
+    // 获取处理进度
+    getProgressInfo() {
+      var that = this;
+      that.$http
+        .post(
+          "/service/bpm/bpm/flowTracingCustom/" + that.processInstanceId,
+          {}
+        )
+        .then(function(res) {
+          console.log(res.data);
+          that.progressInfo = res.data.data;
+          that.progressInfo.reverse();
+        });
+    },
+    // 获取结果类型
+    getHandlerRes() {
+      var that = this;
+      that.$http
+        .post("/service/common/common/getDictionary", {
+          type: "list",
+          key: "incident_handleresult"
+        })
+        .then(function(res) {
+          console.log(res.data);
+          // that.handleResultArr = res.data;
+          res.data.forEach(function(v, i) {
+            that.handleResultArr.push({
+              text: v.name,
+              value: v.id
+            });
+          });
+        });
+    },
+    // 获取满意度评价
+    getDegree() {
+      var that = this;
+      that.$http
+        .post("/service/common/common/getDictionary", {
+          type: "list",
+          key: "incident_degree"
+        })
+        .then(function(res) {
+          console.log(res.data);
+          // that.degreeArr = res.data;
+          res.data.forEach(function(v, i) {
+            that.degreeArr.push({
+              text: v.name,
+              value: v.id
+            });
+          });
+        });
+    },
+    //隐藏显示详情
+    hides() {
+      this.item_hides = !this.item_hides;
+      $("#shows").slideToggle();
+    },
+    //隐藏显示详情
+    hides1() {
+      this.item_hides1 = !this.item_hides1;
+      $("#shows1").slideToggle();
+    },
+    // 处理进度隐藏/展开
+    proHides(){
+      if(!this.pro_hides){
+        $('#progressBox').animate({'height':$('#progressBox')[0].scrollHeight})
+      }else{
+        $('#progressBox').animate({'height':'1.7rem'})
+      }
+      this.pro_hides=!this.pro_hides;
+    },
+    // 快速定位
+    toInfo(id) {
+      this.actives = id;
+      $("body,html").animate(
+        {
+          scrollTop:
+            $("#" + id).offset().top -
+            $(".header")[0].offsetHeight -
+            $(".navBar")[0].offsetHeight
+        },
+        260
+      );
+    },
+    // 提交
+    subVali() {
+      var that = this;
+      delete that.model.handlerCode;
+      that.model.handler_code = "resolve";
+      that.model.isclose = that.isclose;
+      if(that.model.isclose=='close'){
+        delete that.model.receive_code;
+      }
+      that.model.incident.handleResult = { id: that.handleResult };
+      that.model.loginUser = that.loginUser;
+      if (that.degree) {
+        that.model.incident.degree = { id: that.degree };
+      }
+
+      console.log(that.model);
+      if (!that.model.incident.handleResult) {
+        $("#fade").fadeIn();
+        that.promptingConent = "提交失败,请填写必填信息!";
+        that.promptingStatus = false;
+        setTimeout(function() {
+          $("#fade").fadeOut();
+        }, 2000);
+      }
+
+      that.$http
+        .post(
+          "service/bpm/bpm/completeTask/" +
+            that.model.incident.taskId +
+            "/" +
+            that.loginUser.id,
+          that.model
+        )
+        .then(function(res) {
+          if (res.data.status == 200) {
+            $("#fade").fadeIn();
+            that.promptingConent = "恭喜您,提交成功!";
+            that.promptingStatus = true;
+            that.dialog = that
+              .$createDialog({
+                type: "alert",
+                title: "提交成功",
+                content: "点击返回首页",
+                icon: "cubeic-right",
+                onConfirm: (e, promptValue) => {
+                  that.$router.push({ path: "/main" });
+                }
+              })
+              .show();
+            setTimeout(function() {
+              $("#fade").fadeOut();
+            }, 2000);
+          }
+        });
+    }
+  },
+  created() {
+    // seimin
+    this.processInstanceId = this.$route.params.data
+      ? this.$route.params.data.processInstanceId
+      : JSON.parse(localStorage.getItem("modelData")).incident
+          .processInstanceId;
+          this.id=this.$route.params.data?this.$route.params.data.id:JSON.parse(localStorage.getItem("modelData")).incident.id;
+    this.getParamsData();
+    this.getProgressInfo();
+    this.getImgs();
+    this.getHandlerRes();
+    this.getDegree();
+  }
+};
+</script>
+<style lang="less" scoped>
+i.iconfont {
+  &.blue {
+    color: #005395;
+    // &::after {
+    //   content: "";
+    //   width: 0.01rem;
+    //   height: 0.4rem;
+    //   background: #005395;
+    //   position: relative;
+    //   display: block;
+    //   left: 0.14rem;
+    // }
+  }
+  &.blue1 {
+    color: #005395;
+  }
+}
+.solved {
+  .header {
+    width: 100%;
+    height: 0.88rem;
+    line-height: 0.88rem;
+    text-align: center;
+    color: #fff;
+    font-size: 0.37rem;
+    background: linear-gradient(#2e2f32, #414246);
+    position: fixed;
+    top: 0;
+    z-index: 6;
+  }
+  .navBar {
+    width: 100%;
+    height: 0.96rem;
+    line-height: 0.96rem;
+    background-color: #fafafa;
+    font-size: 0.28rem;
+    position: fixed;
+    top: 0.88rem;
+    div {
+      width: 33.33%;
+      text-align: center;
+      a {
+        display: inline-block;
+        height: 0.9rem;
+        width: 1.7rem;
+        padding: 0 0.1rem;
+        &.active {
+          color: #005395;
+          border-bottom: 0.06rem solid #005395;
+        }
+      }
+    }
+  }
+
+  .headtop {
+    margin-top: 1.84rem;
+  }
+  .label {
+    background-color: #eeeeee;
+    height: 0.6rem;
+    line-height: 0.58rem;
+    padding-left: 0.2rem;
+    font-size: 0.24rem;
+    color: #666666;
+    span {
+      font-size: 0.2rem;
+      display: inline-block;
+      margin-left: 0.08rem;
+      color: #999999;
+    }
+    &.formLabel {
+      background-color: #fff;
+    }
+  }
+  .txtLabel {
+    width: 100%;
+    overflow: hidden;
+    padding: 0.32rem 0.24rem 0.32rem 0.32rem;
+    .txt {
+      width: 25%;
+      color: #666;
+      &.handler {
+        width: 40%;
+      }
+    }
+    .selectGroup {
+      width: 62%;
+    }
+    .cube-input {
+      width: 62%;
+    }
+  }
+  .conentBox {
+    width: 100%;
+    .conent {
+      font-size: 0.32rem;
+      font-weight: 400;
+      line-height: 0.45rem;
+      // border-bottom: 0.16rem solid #e5e5e5;
+
+      .shows {
+        display: none;
+      }
+
+      .shows1 {
+        display: none;
+      }
+      .boeder_B {
+        border-bottom: 0.01rem solid #ccc;
+      }
+        p {
+          &.desc{
+            overflow: hidden;
+          }
+          .grayFont {
+            width: 75%;
+            text-align: right;
+            overflow-x: scroll;
+          }
+      }
+      .bottom {
+        overflow: hidden;
+        line-height: 0.86rem;
+        border-bottom: 0.01rem solid #e6e6e6;
+        font-size: 0.24rem;
+        color: #999;
+        padding: 0 0.24rem 0 0.48rem;
+      }
+      .info {
+        color: #999;
+        font-size: 0.28rem;
+        overflow: hidden;
+        .head {
+          border-bottom: 0.01rem solid #e6e6e6;
+          p {
+            padding: 0.24rem 0.3rem;
+            i {
+              color: #00559d;
+            }
+          }
+        }
+        p {
+          line-height: 0.4rem;
+          padding: 0.1rem 0.24rem;
+          overflow: hidden;
+          .overflowEllipsis2 {
+            margin-left: 1.96rem;
+          }
+        }
+        .info_hide {
+          padding: 0.2rem 0.24rem;
+          border-bottom: 0.01rem solid #e6e6e6;
+          .hide {
+            color: #00559d;
+          }
+        }
+        .imgs-container{
+          a{
+            color:#03c !important;
+            &:visited{
+              color: #551a8b !important;
+            }
+          }
+           img {
+            width: 1.5rem;
+            height: 1.5rem;
+            margin-right: 0.7rem;
+            &:nth-child(1) {
+              margin-left: 0.75rem;
+            }
+          }
+        }
+
+        .progress {
+          padding: 0.2rem 0.2rem;
+          overflow: hidden;
+          transition-duration: .2s;
+          transition-timing-function: linear;
+          &.progressHide{
+            height: 1.7rem;
+          }
+          .progress_info {
+            overflow: hidden;
+            margin-bottom: 0.1rem;
+            &:nth-last-child(1){
+              .cont{
+                border:none !important;
+              }
+            }
+            .progress_info_L {
+              float: left;
+              color: #333;
+              max-width: 18%;
+            }
+            .progress_info_R {
+              float: right;
+              margin-left: 0.09rem;
+              width: 80%;
+              font-size: 0.25rem;
+              .time {
+                i {
+                  margin-left: -0.15rem;
+                  &.icon-icon_weizuo {
+                    color: #005495;
+                  }
+                  &.icon-icon_zhengzaijinx {
+                    color: #48a843;
+                    font-size: 0.37rem;
+                  }
+                }
+                span {
+                  margin-left: 0.15rem;
+                }
+              }
+              .cont {
+                border-left: 1px solid #999;
+                padding-left: 0.4rem;
+                min-height: 0.4rem;
+                &.blue {
+                  border-left: 1px solid #005395;
+                }
+              }
+
+              .text1 {
+                font-size: 0.15rem;
+              }
+              .text2 {
+                color: #666;
+              }
+              p {
+                padding: 0;
+              }
+            }
+          }
+        }
+      }
+      .txtLabel {
+        width: 100%;
+        overflow: hidden;
+        padding: 0.32rem 0.24rem 0.32rem 0.32rem;
+        .txt {
+          width: 30%;
+          color: #666;
+        }
+        .cube-textarea-wrapper {
+          width: 62%;
+        }
+      }
+      .sub {
+        background: #ececec;
+        .cube-btn {
+          background-color: #005395 !important;
+          width: 90%;
+          margin: 0.2rem auto;
+          border-radius: 8px;
+        }
+      }
+    }
+  }
+  .showwrap {
+    width: 75%;
+    text-align: right;
+  }
+}
+</style>

src/views/waitConfirm.vue

@@ -0,0 +1,509 @@
+<template>
+  <div class="waitConfirm">
+    <div class="conentBox">
+      <div class="conent">
+        <div class="header">处理方案</div>
+        <div class="navBar">
+          <div class="fl">
+            <a :class="{active:actives=='info'}" href="javascript:;" @click="toInfo('info')">事件信息</a>
+          </div>
+          <div class="fl">
+            <a
+              :class="{active:actives=='handlerInfo'}"
+              href="javascript:;"
+              @click="toInfo('handlerInfo')"
+            >处理信息</a>
+          </div>
+          <div class="fl">
+            <a
+              :class="{active:actives=='progress'}"
+              href="javascript:;"
+              @click="toInfo('progress')"
+            >处理进度</a>
+          </div>
+        </div>
+
+        <div class="info">
+          <div class="label headtop" id="info">事件信息</div>
+          <div class="head">
+            <p>
+              <i class="iconfont icon-zuixinbaoxiu newPapir"></i>
+              事件编号：{{model.incident.incidentsign}}
+              <span
+                :class="{ 'fr':true,'btn':true, 'daipingjia':model.incident.state.name=='待评价', 'daijiedan':(model.incident.state.name=='待接单'&&model.incident.handlerUser&&!model.incident.candidateGroups), 'daiqiangdan':(model.incident.state.name=='待接单'&&!model.incident.handlerUser&&model.incident.candidateGroups), 'chulizhong':model.incident.state.name=='处理中', 'yijiejue':model.incident.state.name=='已解决', 'yiguanbi':model.incident.state.name=='已关闭'}"
+              >{{model.incident.state.name=='待接单'?(model.incident.handlerUser&&!model.incident.candidateGroups?'待接单':'待抢单'):model.incident.state.name}}</span>
+            </p>
+          </div>
+          <p>
+            <span class="fl">事件分类</span>
+            <span class="fr">{{model.incident.category.category}}</span>
+          </p>
+          <!-- <p>
+            <span class="fl">事件主题</span>
+            <span class="fr">{{model.incident.title}}</span>
+          </p> -->
+          <p>
+            <span class="fl">事件描述</span>
+            <span class="fr showwrap">{{model.incident.description}}</span>
+          </p>
+          <div class="shows" id="shows">
+              <p v-if="valConfig==2">
+                <span class="fl">报修科室</span>
+                <span class="fr">{{model.incident.department?model.incident.department.dept:''}}</span>
+              </p>
+            <p v-if="valConfig==1">
+              <span class="fl">报修人</span>
+              <span class="fr">{{model.incident.requester.name}}</span>
+            </p>
+            <p v-if="valConfig==2">
+              <span class="fl">联系人</span>
+              <span class="fr">{{model.incident.contacts}}</span>
+            </p>
+            <p>
+              <span class="fl">联系电话</span>
+              <span class="fr">{{model.incident.contactsInformation}}</span>
+            </p>
+            <p>
+              <span class="fl">联系地址</span>
+              <span class="fr">{{model.incident.houseNumber||''}}</span>
+            </p>
+            <p class="boeder_B">
+              <span class="fl">事件来源</span>
+              <span class="fr">{{model.incident.source.name}}</span>
+            </p>
+            <!-- <p>
+              <span class="fl">影响度</span>
+              <span class="fr">{{model.incident.influence?model.incident.influence.name:''}}</span>
+            </p>
+            <p>
+              <span class="fl">紧急度</span>
+              <span class="fr">{{model.incident.emergency?model.incident.emergency.name:''}}</span>
+            </p> -->
+            <p>
+              <span class="fl">优先级</span>
+              <span class="fr">{{model.incident.priority?model.incident.priority.name:''}}</span>
+            </p>
+            <p>
+              <span class="fl">逾期响应时间</span>
+              <span class="fr">{{model.incident.overdueResponseDate}}</span>
+            </p>
+            <p>
+              <span class="fl">逾期解决时间</span>
+              <span class="fr">{{model.incident.overdueTime}}</span>
+            </p>
+          </div>
+          <p class="info_hide">
+            <span class="fl hide" @click="hides()" v-if="!item_hides">展开详情 >></span>
+            <span class="fl hide" @click="hides()" v-if="item_hides">隐藏详情<<</span>
+          </p>
+          <div class="imgs-container" v-if="imgs.length">
+            <div class="imgs-cont">
+              <img v-if='img.suffix=="jpeg"||img.suffix=="jpg"||img.suffix=="gif"||img.suffix=="png"||img.suffix=="svg"||img.suffix=="pdf"' :src="img.previewUrl" v-for="(img, index) in imgs" class="imgs">
+              <p v-else>
+                <a :href='[img.previewUrl]'>{{img.name}}</a>
+              </p>
+            </div>
+          </div>
+
+          <div class="label" id="handlerInfo">处理信息</div>
+          <p>
+            <span class="fl">处理人</span>
+            <span class="fr">{{model.incident.acceptUser?model.incident.acceptUser.name:''}}</span>
+          </p>
+          <p>
+            <span class="fl">联系电话</span>
+            <span class="fr">{{model.incident.contactsInformation}}</span>
+          </p>
+          <p>
+            <span class="fl">处理方式</span>
+            <span class="fr showwrap">{{model.incident.handleCategory}}</span>
+          </p>
+          <p>
+            <span class="fl">关闭代码</span>
+            <span class="fr">{{model.incident.closecode?model.incident.closecode.name:''}}</span>
+          </p>
+          <p>
+            <span class="fl">处理方案</span>
+            <span class="fr">{{model.incident.handleDescription||''}}</span>
+          </p>
+          <p>
+            <span class="fl">升级对象</span>
+            <span class="fr">{{model.incident.handlerUser?model.incident.handlerUser.name:''}}</span>
+          </p>
+          <!-- <p>
+            <span class="fl">升级原因</span>
+            <span class="fr">升级原因</span>
+          </p> -->
+
+          <div class="label" id="progress">处理进度</div>
+          <div class="progress">
+            <div class="progress_info" v-for="item in progressInfo">
+              <div class="progress_info_L">{{item.activityName}}</div>
+              <div class="progress_info_R">
+                <div class="time">
+                  <i
+                    :class="{'iconfont':true, 'icon-icon_weizuo':item.endTime!='','icon-icon_zhengzaijinx':item.endTime=='' }"
+                  ></i>
+                  <span class="text1">{{item.startTime}}</span>
+                </div>
+                <div
+                  :class="{'cont':true,'blue':item.endTime!='' }"
+                >
+                  <p class="text2" v-if="item.desc">{{item.desc}}</p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      loginUser: JSON.parse(localStorage.getItem("loginUser")),
+      valConfig: JSON.parse(localStorage.getItem("valConfig")) - 0, //报修主体
+      selected: 1,
+      options: [
+        {
+          label: "接单",
+          value: 1
+        },
+        {
+          label: "关单信息",
+          value: 2
+        }
+      ],
+      resignComment: "", //重新指派原因
+      item_hides: false,
+      item_hides1: false,
+      actives: "info",
+      processInstanceId: "",
+      progressInfo: [], //处理进度
+      imgs: [], //图片
+      model: {} //提交数据
+    };
+  },
+  methods: {
+    //   获取事件数据
+    getParamsData() {
+      var that = this;
+      that.$http
+        .get(
+          "/service/form/renderForm/receiveform/" +
+            that.processInstanceId +
+            "/" +
+            that.loginUser.id,
+          {}
+        )
+        .then(function(res) {
+          console.log(res.data);
+          that.model = res.data.model;
+        });
+    },
+    // 获取图片
+    getImgs() {
+      var that = this;
+      that.$http
+        .get(
+          "service/common/common/listAttachment/incident/" +
+            that.processInstanceId,
+          {}
+        )
+        .then(function(res) {
+          console.log(res.data);
+          that.imgs = res.data.data.splice(0, 3);
+          console.log(that.imgs);
+        });
+    },
+    // 获取处理进度
+    getHandlerInfo() {
+      var that = this;
+      that.$http
+        .post(
+          "/service/bpm/bpm/flowTracingCustom/" + that.processInstanceId,
+          {}
+        )
+        .then(function(res) {
+          console.log(res.data);
+          that.progressInfo = res.data.data;
+          that.progressInfo.reverse();
+        });
+    },
+    //隐藏显示详情
+    hides() {
+      this.item_hides = !this.item_hides;
+      $("#shows").slideToggle();
+    },
+    //隐藏显示详情
+    hides1() {
+      this.item_hides1 = !this.item_hides1;
+      $("#shows1").slideToggle();
+    },
+    // 快速定位
+    toInfo(id) {
+      this.actives = id;
+      $("body,html").animate(
+        {
+          scrollTop:
+            $("#" + id).offset().top -
+            $(".header")[0].offsetHeight -
+            $(".navBar")[0].offsetHeight
+        },
+        260
+      );
+    }
+  },
+  created() {
+    this.processInstanceId = this.$route.params.data.processInstanceId;
+    this.getParamsData();
+    this.getHandlerInfo();
+    this.getImgs();
+  }
+};
+</script>
+<style lang="less" scoped>
+i.iconfont {
+  &.blue {
+    color: #005395;
+    // &::after {
+    //   content: "";
+    //   width: 0.01rem;
+    //   height: 0.4rem;
+    //   background: #005395;
+    //   position: relative;
+    //   display: block;
+    //   left: 0.14rem;
+    // }
+  }
+  &.blue1 {
+    color: #005395;
+  }
+}
+.waitConfirm {
+  .header {
+    width: 100%;
+    height: 0.88rem;
+    line-height: 0.88rem;
+    text-align: center;
+    color: #fff;
+    font-size: 0.37rem;
+    background: linear-gradient(#2e2f32, #414246);
+    position: fixed;
+    top: 0;
+    z-index: 6;
+  }
+  .navBar {
+    width: 100%;
+    height: 0.96rem;
+    line-height: 0.96rem;
+    background-color: #fafafa;
+    font-size: 0.28rem;
+    position: fixed;
+    top: 0.88rem;
+    div {
+      width: 33.33%;
+      text-align: center;
+      a {
+        display: inline-block;
+        height: 0.9rem;
+        width: 1.7rem;
+        padding: 0 0.1rem;
+        &.active {
+          color: #005395;
+          border-bottom: 0.06rem solid #005395;
+        }
+      }
+    }
+  }
+
+  .headtop {
+    margin-top: 1.84rem;
+  }
+  .label {
+    background-color: #eeeeee;
+    height: 0.6rem;
+    line-height: 0.58rem;
+    padding-left: 0.2rem;
+    font-size: 0.24rem;
+    color: #666666;
+    span {
+      font-size: 0.2rem;
+      display: inline-block;
+      margin-left: 0.08rem;
+      color: #999999;
+    }
+    &.formLabel {
+      background-color: #fff;
+    }
+  }
+  .conentBox {
+    width: 100%;
+    .conent {
+      font-size: 0.32rem;
+      font-weight: 400;
+      line-height: 0.45rem;
+      // border-bottom: 0.16rem solid #e5e5e5;
+
+      .shows {
+        display: none;
+      }
+
+      .shows1 {
+        display: none;
+      }
+      .boeder_B {
+        border-bottom: 0.01rem solid #ccc;
+      }
+      .center {
+        color: #333333;
+        border-bottom: 0.01rem solid #e6e6e6;
+        padding: 0.24rem 0.48rem;
+        p {
+          .grayFont {
+            color: #666;
+          }
+        }
+      }
+      .bottom {
+        overflow: hidden;
+        line-height: 0.86rem;
+        border-bottom: 0.01rem solid #e6e6e6;
+        font-size: 0.24rem;
+        color: #999;
+        padding: 0 0.24rem 0 0.48rem;
+      }
+      .info {
+        color: #999;
+        font-size: 0.28rem;
+        overflow: hidden;
+        .head {
+          border-bottom: 0.01rem solid #e6e6e6;
+          p {
+            padding: 0.24rem 0.3rem;
+            i {
+              color: #00559d;
+            }
+          }
+        }
+        p {
+          line-height: 0.4rem;
+          padding: 0.1rem 0.24rem;
+          overflow: hidden;
+          .overflowEllipsis2 {
+            margin-left: 1.96rem;
+          }
+        }
+        .info_hide {
+          padding: 0.2rem 0.24rem;
+          border-bottom: 0.01rem solid #e6e6e6;
+          .hide {
+            color: #00559d;
+          }
+        }
+        .imgs-container{
+          a{
+            color:#03c !important;
+            &:visited{
+              color: #551a8b !important;
+            }
+          }
+           img {
+            width: 1.5rem;
+            height: 1.5rem;
+            margin-right: 0.7rem;
+            &:nth-child(1) {
+              margin-left: 0.75rem;
+            }
+          }
+        }
+        .progress {
+          padding: 0.2rem 0.2rem;
+          overflow: hidden;
+          margin-bottom: 0.7rem;
+          .progress_info {
+            overflow: hidden;
+            margin-bottom: 0.1rem;
+            &:nth-last-child(1){
+              .cont{
+                border:none !important;
+              }
+            }
+            .progress_info_L {
+              float: left;
+              color: #333;
+              max-width: 18%;
+            }
+            .progress_info_R {
+              float: right;
+              margin-left: 0.09rem;
+              width: 80%;
+              font-size: 0.25rem;
+              .time {
+                i {
+                  margin-left: -0.15rem;
+                  &.icon-icon_weizuo {
+                    color: #005495;
+                  }
+                  &.icon-icon_zhengzaijinx {
+                    color: #48a843;
+                    font-size: 0.37rem;
+                  }
+                }
+                span {
+                  margin-left: 0.15rem;
+                }
+              }
+              .cont {
+                border-left: 1px solid #999;
+                padding-left: 0.4rem;
+                min-height: 0.4rem;
+                &.blue {
+                  border-left: 1px solid #005395;
+                }
+              }
+
+              .text1 {
+                font-size: 0.15rem;
+              }
+              .text2 {
+                color: #666;
+              }
+              p {
+                padding: 0;
+              }
+            }
+          }
+        }
+      }
+      .txtLabel {
+        width: 100%;
+        overflow: hidden;
+        padding: 0.32rem 0.24rem 0.32rem 0.32rem;
+        .txt {
+          width: 30%;
+          color: #666;
+        }
+        .cube-textarea-wrapper {
+          width: 62%;
+        }
+      }
+      .sub {
+        background: #ececec;
+        .cube-btn {
+          background-color: #005395 !important;
+          width: 90%;
+          margin: 0.2rem auto;
+          border-radius: 8px;
+        }
+      }
+    }
+  }
+  .showwrap {
+    width: 75%;
+    text-align: right;
+  }
+}
+</style>

static/css/demo_index.html

@@ -31,6 +31,18 @@
           <ul class="icon_lists dib-box">
           
             <li class="dib">
+              <span class="icon iconfont">&#xe6cc;</span>
+                <div class="name">正常</div>
+                <div class="code-name">&amp;#xe6cc;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe6a9;</span>
+                <div class="name">已逾期</div>
+                <div class="code-name">&amp;#xe6a9;</div>
+              </li>
+          
+            <li class="dib">
               <span class="icon iconfont">&#xe65c;</span>
                 <div class="name">错误</div>
                 <div class="code-name">&amp;#xe65c;</div>
@@ -67,6 +79,12 @@
               </li>
           
             <li class="dib">
+              <span class="icon iconfont">&#xe687;</span>
+                <div class="name">即将</div>
+                <div class="code-name">&amp;#xe687;</div>
+              </li>
+          
+            <li class="dib">
               <span class="icon iconfont">&#xe68f;</span>
                 <div class="name">默认</div>
                 <div class="code-name">&amp;#xe68f;</div>
@@ -192,6 +210,30 @@
                 <div class="code-name">&amp;#xe684;</div>
               </li>
           
+            <li class="dib">
+              <span class="icon iconfont">&#xe685;</span>
+                <div class="name">巡检</div>
+                <div class="code-name">&amp;#xe685;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe686;</span>
+                <div class="name">巡检2</div>
+                <div class="code-name">&amp;#xe686;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe688;</span>
+                <div class="name">巡检</div>
+                <div class="code-name">&amp;#xe688;</div>
+              </li>
+          
+            <li class="dib">
+              <span class="icon iconfont">&#xe689;</span>
+                <div class="name">引用</div>
+                <div class="code-name">&amp;#xe689;</div>
+              </li>
+          
           </ul>
           <div class="article markdown">
           <h2 id="unicode-">Unicode 引用</h2>
@@ -243,6 +285,24 @@
         <ul class="icon_lists dib-box">
           
           <li class="dib">
+            <span class="icon iconfont icon-zhengchang"></span>
+            <div class="name">
+              正常
+            </div>
+            <div class="code-name">.icon-zhengchang
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-yiyuqi"></span>
+            <div class="name">
+              已逾期
+            </div>
+            <div class="code-name">.icon-yiyuqi
+            </div>
+          </li>
+          
+          <li class="dib">
             <span class="icon iconfont icon-cuowu"></span>
             <div class="name">
               错误
@@ -297,6 +357,15 @@
           </li>
           
           <li class="dib">
+            <span class="icon iconfont icon-jijiang"></span>
+            <div class="name">
+              即将
+            </div>
+            <div class="code-name">.icon-jijiang
+            </div>
+          </li>
+          
+          <li class="dib">
             <span class="icon iconfont icon-moren"></span>
             <div class="name">
               默认
@@ -485,6 +554,42 @@
             </div>
           </li>
           
+          <li class="dib">
+            <span class="icon iconfont icon-xunjian"></span>
+            <div class="name">
+              巡检
+            </div>
+            <div class="code-name">.icon-xunjian
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-xunjian1"></span>
+            <div class="name">
+              巡检2
+            </div>
+            <div class="code-name">.icon-xunjian1
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-xunjian2"></span>
+            <div class="name">
+              巡检
+            </div>
+            <div class="code-name">.icon-xunjian2
+            </div>
+          </li>
+          
+          <li class="dib">
+            <span class="icon iconfont icon-yinyong"></span>
+            <div class="name">
+              引用
+            </div>
+            <div class="code-name">.icon-yinyong
+            </div>
+          </li>
+          
         </ul>
         <div class="article markdown">
         <h2 id="font-class-">font-class 引用</h2>
@@ -516,6 +621,22 @@
           
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-zhengchang"></use>
+                </svg>
+                <div class="name">正常</div>
+                <div class="code-name">#icon-zhengchang</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-yiyuqi"></use>
+                </svg>
+                <div class="name">已逾期</div>
+                <div class="code-name">#icon-yiyuqi</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
                   <use xlink:href="#icon-cuowu"></use>
                 </svg>
                 <div class="name">错误</div>
@@ -564,6 +685,14 @@
           
             <li class="dib">
                 <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-jijiang"></use>
+                </svg>
+                <div class="name">即将</div>
+                <div class="code-name">#icon-jijiang</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
                   <use xlink:href="#icon-moren"></use>
                 </svg>
                 <div class="name">默认</div>
@@ -730,6 +859,38 @@
                 <div class="code-name">#icon-yijiejue</div>
             </li>
           
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-xunjian"></use>
+                </svg>
+                <div class="name">巡检</div>
+                <div class="code-name">#icon-xunjian</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-xunjian1"></use>
+                </svg>
+                <div class="name">巡检2</div>
+                <div class="code-name">#icon-xunjian1</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-xunjian2"></use>
+                </svg>
+                <div class="name">巡检</div>
+                <div class="code-name">#icon-xunjian2</div>
+            </li>
+          
+            <li class="dib">
+                <svg class="icon svg-icon" aria-hidden="true">
+                  <use xlink:href="#icon-yinyong"></use>
+                </svg>
+                <div class="name">引用</div>
+                <div class="code-name">#icon-yinyong</div>
+            </li>
+          
           </ul>
           <div class="article markdown">
           <h2 id="symbol-">Symbol 引用</h2>