小程序养护抽查

weapp/src/app.config.js

@@ -12,6 +12,10 @@ export default {
       'changePassword/index',
       'changePassword/success/index',
       'video/index',
+      'maintenanceSpotCheck/index',
+      'maintenanceSpotCheck/startSpotCheck/index',
+      'maintenanceSpotCheck/spotCheckRoadDetail/index',
+      'maintenanceSpotCheck/spotChange/index',
     ]
   }],
   permission: {

weapp/src/packages/maintenanceSpotCheck/index.config.js

@@ -0,0 +1,3 @@
+export default {
+	navigationBarTitleText: '养护抽查'
+}

weapp/src/packages/maintenanceSpotCheck/index.jsx

@@ -0,0 +1,112 @@
+import React, { useEffect, useState } from 'react'
+import Taro, { useDidShow } from '@tarojs/taro'
+import { View, Input, Picker, ScrollView } from '@tarojs/components'
+import { AtButton, AtIcon } from 'taro-ui'
+import { NoData } from '@/components/index'
+import moment from 'moment'
+import request from '@/services/request'
+import { getRoadSpotList } from '@/services/api'
+import './index.scss'
+
+function Index() {
+  // const pageSize = 10
+  // const count = 0
+  // const [page, setPage] = useState(1)
+  const [startTime, setStartTime] = useState('')
+  const [endTime, setEndTime] = useState('')
+  const [roadSpotList, setRoadSpotList] = useState([])
+
+  useDidShow(() => {
+    getSpotList()
+  })
+
+  const getSpotList = () => {
+    request.get(`${getRoadSpotList()}?startTime=${startTime}&endTime=${endTime}`)
+      .then(res => {
+        if (res.statusCode === 200) {
+          setRoadSpotList(res.data)
+        }
+      })
+  }
+
+  const resetTime = () => {
+    setStartTime('')
+    setEndTime('')
+  }
+
+  const navigateTo = (url) => {
+    Taro.navigateTo({ url })
+  }
+
+  const onScrollToLower = (e) => {
+    console.log(e)
+  }
+
+  return (
+    <View className='page'>
+      <View className='flex spot-check-filter-box'>
+        <Picker
+          mode='date'
+          onChange={e => setStartTime(e.detail.value)}
+        >
+          <View className='flex'>
+            <AtIcon value='calendar' size='20' color='#999' />
+            <Input className='input' placeholder='开始日期' disabled value={startTime} />
+          </View>
+        </Picker>
+        <Picker
+          mode='date'
+          onChange={e => setEndTime(e.detail.value)}
+        >
+          <View className='flex'>
+            <AtIcon value='calendar' size='20' color='#999' />
+            <Input className='input' placeholder='结束日期' disabled value={endTime} />
+          </View>
+        </Picker>
+        <AtButton
+          type='primary'
+          size='small'
+          circle
+          onClick={getSpotList}
+        >查询</AtButton>
+        <AtButton
+          className='reset-bth'
+          type='secondary'
+          size='small'
+          circle
+          onClick={resetTime}
+        >重置</AtButton>
+      </View>
+
+      <ScrollView
+        className='scrollview'
+        scrollY
+        scrollWithAnimation
+        scrollTop={0}
+        onScrollToLower={onScrollToLower}
+        enhanced
+        pagingEnabled
+      >
+        {roadSpotList.length ? roadSpotList.map(item => <View
+          key={item.id}
+          className='card'
+          onClick={() => navigateTo(`/packages/maintenanceSpotCheck/spotCheckRoadDetail/index?item=${encodeURIComponent(JSON.stringify(item))}`
+          )}
+        >
+          <View className='item'>抽查县道比例（%）：{item.countyPercentage}</View>
+          <View className='item'>抽查县道（条）：{item.spotCountyRoadCount}</View>
+          <View className='item'>抽查乡道（条）：{item.spotTownRoadCount}</View>
+          <View className='item'>抽查村道（条）：{item.spotVillageRoadCount}</View>
+          <View className='item'>抽查日期：{moment(item.date).format('YYYY-MM-DD')}</View>
+        </View>) : <View style={{ paddingTop: 100 }}><NoData /></View>}
+      </ScrollView>
+      <AtButton
+        className='to-start-btn'
+        type='primary'
+        onClick={() => navigateTo('/packages/maintenanceSpotCheck/startSpotCheck/index')}
+      >发起抽查</AtButton>
+    </View>
+  )
+}
+
+export default Index

weapp/src/packages/maintenanceSpotCheck/index.scss

@@ -0,0 +1,44 @@
+.page {
+  height: 100vh;
+  background-color: #fff;
+  font-size: 28px;
+
+  .spot-check-filter-box {
+    box-sizing: border-box;
+    width: 100%;
+    padding: 15px 20px;
+
+    .input {
+      margin-left: 10px;
+    }
+
+    .reset-bth {
+      margin-left: 20px;
+    }
+  }
+
+  .scrollview {
+    height: calc(100vh - 280px);
+    margin-bottom: 40px;
+
+    .card {
+      padding: 20px;
+      border: gainsboro 1px solid;
+      border-radius: 10px;
+      background-color: #fff;
+      box-shadow: 10px 10px 5px rgb(219, 218, 218);
+      margin: 0 0 20px 20px;
+      width: calc(100% - 40px);
+      box-sizing: border-box;
+
+      .item {
+        padding: 10px 0;
+      }
+    }
+  }
+
+  .to-start-btn {
+    width: 70%;
+    margin: 0 auto;
+  }
+}

weapp/src/packages/maintenanceSpotCheck/spotChange/index.config.js

@@ -0,0 +1,3 @@
+export default {
+	navigationBarTitleText: '调整'
+}

weapp/src/packages/maintenanceSpotCheck/spotChange/index.jsx

@@ -0,0 +1,224 @@
+import React, { useEffect, useState } from 'react'
+import Taro, { useRouter } from '@tarojs/taro'
+import { View, Text, Picker, } from '@tarojs/components'
+import { AtButton, AtIcon, } from 'taro-ui'
+import request from '@/services/request'
+import { roadSpotChange, roadUrl } from '@/services/api'
+import './index.scss'
+
+function Index() {
+  const { spot, detail } = useRouter().params
+  const spotItem = spot ? JSON.parse(decodeURIComponent(spot)) : null
+  const detailItem = detail ? JSON.parse(decodeURIComponent(detail)) : null
+
+  const [road, setRoad] = useState([])
+  const [roadLevel, setRoadLevel] = useState('')
+
+  const [nameList, setNameList] = useState([]);
+  const [codeList, setCodeList] = useState([]);
+  const [noList, setNoList] = useState([]);
+  const [checked, setChecked] = useState({
+    routeName: '',
+    routeCode: '',
+    sectionNo: '',
+    startingPlaceName: '',
+    stopPlaceName: '',
+  })
+
+  useEffect(() => {
+    getRoad()
+  }, [])
+
+  const getRoad = () => {
+    if (!detailItem) return
+
+    const level = detailItem.road?.level
+    setRoadLevel(level)
+
+    const alterIdArr = level == '县' ? spotItem.countyRoadId
+      : level == '乡' ? spotItem.townshipRoadId
+        : level == '村' ? spotItem.villageRoadId : []
+    let query = `?level=${level}`
+    for (let i = 0; i < alterIdArr.length; i++) {
+      query += `&alterId=${alterIdArr[i]}`
+    }
+    request.get(`${roadUrl()}${query}`).then(res => {
+      if (res.statusCode === 200) {
+        let name = []
+        let code = []
+        let no = []
+        res.data?.forEach(v => {
+          if (v.routeName && !name.includes(v.routeName)) {
+            name.push(v.routeName)
+          }
+          if (v.routeCode && !code.includes(v.routeCode)) {
+            code.push(v.routeCode)
+          }
+          if (v.sectionNo && !no.includes(v.sectionNo)) {
+            no.push(v.sectionNo)
+          }
+        });
+        setRoad(res.data)
+        setNameList(name)
+        setCodeList(code)
+        setNoList(no)
+
+      } else {
+        Taro.showToast({ title: '获取路线失败', icon: 'error' })
+      }
+    })
+  }
+
+  const handleCheckChange = (value, key) => {
+    let nextValue = {
+      ...checked,
+      [key]: value
+    }
+
+    let name = []
+    let code = []
+    let no = []
+    let data = road?.filter(d => (nextValue?.routeName ? nextValue?.routeName == d?.routeName : true)
+      && (nextValue?.routeCode ? nextValue?.routeCode == d?.routeCode : true)
+      && (nextValue?.sectionNo ? nextValue?.sectionNo == d?.sectionNo : true))
+
+    data.forEach(v => {
+      if (v.routeName && !name.includes(v.routeName)) {
+        name.push(v.routeName)
+      }
+      if (v.routeCode && !code.includes(v.routeCode)) {
+        code.push(v.routeCode)
+      }
+      if (v.sectionNo && !no.includes(v.sectionNo)) {
+        no.push(v.sectionNo)
+      }
+    });
+    setNameList(name)
+    setCodeList(code)
+    setNoList(no)
+
+    if (nextValue.routeName && nextValue.routeCode && nextValue.sectionNo) {
+      nextValue.startingPlaceName = data[0]?.startingPlaceName
+      nextValue.stopPlaceName = data[0]?.stopPlaceName
+    } else {
+      nextValue.startingPlaceName = ''
+      nextValue.stopPlaceName = ''
+    }
+    setChecked(nextValue)
+  }
+
+  const handleSubmit = () => {
+    if (!checked.routeName || !checked.routeCode || !checked.sectionNo) {
+      Taro.showToast({ title: '请选择路线', icon: 'error' })
+      return
+    }
+    let data = road.find(d => checked.routeName == d?.routeName
+      && checked.routeCode == d.routeCode
+      && checked.sectionNo == d.sectionNo
+    )
+    Taro.showLoading({ title: '调整中...' })
+    request.post(`${roadSpotChange()}`, {
+      previewId: spotItem.id,
+      originRoadId: detailItem.road?.id,
+      changeRoadId: data.id,
+    }).then(res => {
+      Taro.hideLoading()
+      if (res.statusCode === 204) {
+        Taro.showToast({ title: '调整成功', icon: 'success' })
+        setTimeout(() => {
+          Taro.navigateBack()
+        }, 1500)
+      } else {
+        Taro.showToast({ title: '调整失败', icon: 'error' })
+      }
+    })
+  }
+
+  return (
+    <View className='page'>
+      <View className='cell'>
+        <View className='title'>道路类型</View>
+        <View className='content'>{roadLevel}</View>
+      </View>
+      <View className='cell'>
+        <View className='title'><Text className='star'>*</Text>路线名称</View>
+        <View className='content'>
+          <Picker
+            mode='selector'
+            range={nameList}
+            onChange={e => handleCheckChange(nameList[e.detail.value], 'routeName')}
+          >
+            <View className='picker'>
+              <View>{checked.routeName || '请选择'}</View>
+              <AtIcon className='arrow' value='chevron-down' size='20' color='#999' />
+            </View>
+          </Picker>
+          <AtIcon
+            value='close-circle'
+            size='20'
+            color='#999'
+            onClick={() => handleCheckChange('', 'routeName')}
+          />
+        </View>
+      </View>
+      <View className='cell'>
+        <View className='title'><Text className='star'>*</Text>路线代码</View>
+        <View className='content'>
+          <Picker
+            mode='selector'
+            range={codeList}
+            onChange={e => handleCheckChange(codeList[e.detail.value], 'routeCode')}
+          >
+            <View className='picker'>
+              <View>{checked.routeCode || '请选择'}</View>
+              <AtIcon className='arrow' value='chevron-down' size='20' color='#999' />
+            </View>
+          </Picker>
+          <AtIcon
+            value='close-circle'
+            size='20'
+            color='#999'
+            onClick={() => handleCheckChange('', 'routeCode')}
+          />
+        </View>
+      </View>
+      <View className='cell'>
+        <View className='title'><Text className='star'>*</Text>路段序号</View>
+        <View className='content'>
+          <Picker
+            mode='selector'
+            range={noList}
+            onChange={e => handleCheckChange(noList[e.detail.value], 'sectionNo')}
+          >
+            <View className='picker'>
+              <View>{checked.sectionNo || '请选择'}</View>
+              <AtIcon className='arrow' value='chevron-down' size='20' color='#999' />
+            </View>
+          </Picker>
+          <AtIcon
+            value='close-circle'
+            size='20'
+            color='#999'
+            onClick={() => handleCheckChange('', 'sectionNo')}
+          />
+        </View>
+      </View>
+      <View className='cell'>
+        <View className='title'>起点地名</View>
+        <View className='content'>{checked.startingPlaceName}</View>
+      </View>
+      <View className='cell'>
+        <View className='title'>止点地名</View>
+        <View className='content'>{checked.stopPlaceName}</View>
+      </View>
+
+      <AtButton
+        className='btn'
+        type='primary'
+        onClick={handleSubmit}
+      >确定</AtButton>
+    </View>
+  )
+}
+
+export default Index

weapp/src/packages/maintenanceSpotCheck/spotChange/index.scss

@@ -0,0 +1,54 @@
+.page {
+  height: 100vh;
+  background-color: #fff;
+  // font-size: 28px;
+
+  .cell {
+    padding: 24px 0px;
+    margin: 0 32px;
+    display: flex;
+    justify-content: space-between;
+    border-bottom: rgb(223, 237, 243) 1px solid;
+
+    .title {
+      display: inline-block;
+      width: 192px;
+      margin-right: 16px;
+
+      .star {
+        color: #ff0000;
+        margin-right: 8px;
+      }
+    }
+
+    .content {
+      width: calc(100% - 192px - 16px);
+      display: flex;
+      justify-content: flex-end;
+
+      .picker {
+        width: 400px;
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+
+        .arrow {
+          margin: 0 32px;
+        }
+      }
+    }
+  }
+
+  .list-item {
+    width: calc(100% - 60px);
+  }
+
+  .list-clear {
+    margin-right: 20px;
+  }
+
+  .btn {
+    width: 70%;
+    margin: 100px auto 0;
+  }
+}

weapp/src/packages/maintenanceSpotCheck/spotCheckRoadDetail/index.config.js

@@ -0,0 +1,3 @@
+export default {
+	navigationBarTitleText: '抽查详情'
+}

weapp/src/packages/maintenanceSpotCheck/spotCheckRoadDetail/index.jsx

@@ -0,0 +1,73 @@
+import React, { useEffect, useState } from 'react'
+import Taro, { useRouter, useDidShow } from '@tarojs/taro'
+import { View } from '@tarojs/components'
+import { AtButton, AtSearchBar } from 'taro-ui'
+import { NoData } from '@/components/index'
+import moment from 'moment'
+import request from '@/services/request'
+import { getRoadSpotDetail } from '@/services/api'
+import './index.scss'
+
+function Index() {
+  const { item } = useRouter().params
+  const spotItem = item ? JSON.parse(decodeURIComponent(item)) : null
+
+  const [keyword, setKeyword] = useState('')
+  const [roadDetailList, setRoadDetailList] = useState([])
+
+  useDidShow(() => {
+    getDetail()
+  })
+
+  const getDetail = () => {
+    if (spotItem) {
+      Taro.showLoading({ title: '加载中' })
+      request.get(`${getRoadSpotDetail()}?previewId=${spotItem.id}&keyword=${keyword}`).then(res => {
+        Taro.hideLoading()
+        if (res.statusCode === 200) {
+          setRoadDetailList(res.data)
+        } else {
+          Taro.showToast({ title: '获取详情失败', icon: 'error' })
+        }
+      })
+    }
+  }
+
+  return (<View className='page'>
+    <AtSearchBar
+      placeholder='道路名称关键字'
+      showActionButton
+      value={keyword}
+      onChange={v => setKeyword(v)}
+      onActionClick={getDetail}
+    />
+    <View className='top flex'>抽查日期：{moment(spotItem.date).format('YYYY-MM-DD')}</View>
+
+    {roadDetailList.length ? roadDetailList.map(item => <View key={item.id} className='card'>
+      <View className='item'>道路类型：{item.road?.level ? (item.road?.level + '道') : '--'}</View>
+      <View className='item'>路线名称：{item.road?.routeName || '--'}</View>
+      <View className='item at-row'>
+        <View className='at-col-6'>路线代码：{item.road?.routeCode || '--'}</View>
+        <View className='at-col-6'>路段序号：{item.road?.sectionNo || '--'}</View>
+      </View>
+      <View className='item at-row'>
+        <View className='at-col-6'>起点地名：{item.road?.startingPlaceName || '--'}</View>
+        <View className='at-col-6'>止点地名：{item.road?.stopPlaceName || '--'}</View>
+      </View>
+      <View className='item'>里程：{item.road?.chainageMileage || '--'}</View>
+      <View className='item at-row'>
+        <View className='at-col-6'>养护次数（次）：{item.maintenanceCount}</View>
+        <View className='at-col-6'>
+          <AtButton
+            className='edit-btn'
+            type='primary'
+            size='small'
+            onClick={() => Taro.navigateTo({ url: `/packages/maintenanceSpotCheck/spotChange/index?detail=${encodeURIComponent(JSON.stringify(item))}&spot=${encodeURIComponent(JSON.stringify(spotItem))}` })}
+          >调整</AtButton>
+        </View>
+      </View>
+    </View>) : <View style={{ paddingTop: 100 }}><NoData /></View>}
+  </View>)
+}
+
+export default Index

weapp/src/packages/maintenanceSpotCheck/spotCheckRoadDetail/index.scss

@@ -0,0 +1,29 @@
+.page {
+  background-color: #fff;
+  height: 100vh;
+  font-size: 28px;
+  padding-bottom: 40px;
+
+  .top {
+    height: 90px;
+  }
+
+  .card {
+    padding: 20px;
+    border: gainsboro 1px solid;
+    border-radius: 10px;
+    background-color: #fff;
+    box-shadow: 10px 10px 5px rgb(219, 218, 218);
+    margin: 0 0 20px 20px;
+    width: calc(100% - 40px);
+    box-sizing: border-box;
+
+    .item {
+      padding: 10px 0;
+
+      .edit-btn {
+        width: 100px;
+      }
+    }
+  }
+}

weapp/src/packages/maintenanceSpotCheck/startSpotCheck/index.config.js

@@ -0,0 +1,3 @@
+export default {
+	navigationBarTitleText: '开始抽查'
+}

weapp/src/packages/maintenanceSpotCheck/startSpotCheck/index.jsx

@@ -0,0 +1,85 @@
+import React, { useState } from 'react'
+import Taro from '@tarojs/taro'
+import { View, Picker } from '@tarojs/components'
+import { AtButton, AtIcon, } from 'taro-ui'
+import request from '@/services/request'
+import { roadSpotPrepare, roadSpotConfirm } from '@/services/api'
+import './index.scss'
+
+function Index() {
+  const rateArr = ['50%', '75%'];
+  const [rate, setRate] = useState('50%')
+  const [prepare, setPrepare] = useState({
+    previewId: null,
+    spotCountyRoadCount: null,
+    spotTownRoadCount: null,
+    spotVillageRoadCount: null,
+  })
+
+  const startSpotCheck = () => {
+    request.post(roadSpotPrepare(), { countyPercentage: rate === '50%' ? 50 : 75 }).then(res => {
+      if (res.statusCode === 200 || res.statusCode === 204) {
+        Taro.showToast({ title: '抽取成功', icon: 'success' })
+        setPrepare(res.data)
+      } else {
+        Taro.showToast({ title: '抽取失败', icon: 'error' })
+        console.log(res.errMsg)
+      }
+    })
+  }
+
+  const onSubmit = () => {
+    if (!prepare.previewId) {
+      Taro.showToast({ title: '请先抽取道路' })
+      return
+    }
+    request.post(roadSpotConfirm(), { previewId: prepare.previewId }).then(res => {
+      if (res.statusCode === 204) {
+        Taro.showToast({ title: '提交成功', icon: 'success' })
+        setTimeout(() => {
+          Taro.navigateBack()
+        }, 1500)
+      } else {
+        Taro.showToast({ title: '提交失败', icon: 'error' })
+        console.log(res.errMsg)
+      }
+    })
+  }
+
+  return (
+    <View className='page'>
+      <View className='content'>
+        <View className='fs24'>默认抽查乡道比例为25%，村道比例为10%</View>
+        <View className='item'>
+          <View className='title'>抽查县道比例（%）:</View>
+          <Picker mode='selector'
+            range={rateArr}
+            onChange={e => setRate(rateArr[e.detail.value])}
+          >
+            <View className='input'>
+              {rate || '请选择'}
+              <AtIcon value='chevron-down' size='20' color='#ccc' />
+            </View>
+          </Picker>
+        </View>
+        <AtButton type='primary' className='start-btn' size='small'
+          onClick={startSpotCheck}
+        >开始抽取</AtButton>
+        <View className='item'>
+          <View className='title'>抽查县道（条）：</View>
+          <View className='input disabled'>{prepare.spotCountyRoadCount}</View>
+        </View>
+        <View className='item'>
+          <View className='title'>抽查乡道（条）：</View>
+          <View className='input disabled'>{prepare.spotTownRoadCount}</View>
+        </View>
+        <View className='item'>
+          <View className='title'>抽查村道（条）：</View>
+          <View className='input disabled'>{prepare.spotVillageRoadCount}</View>
+        </View>
+        <AtButton type='primary' className='submit-btn' onClick={onSubmit}>提交</AtButton>
+      </View>
+    </View>
+  )
+}
+export default Index

weapp/src/packages/maintenanceSpotCheck/startSpotCheck/index.scss

@@ -0,0 +1,43 @@
+.page {
+  background-color: #fff;
+  height: 100vh;
+  padding: 60px;
+  box-sizing: border-box;
+
+  .content {
+    margin: 0 auto;
+    width: 100%;
+    min-height: 60%;
+
+    .item {
+      margin-top: 30px;
+
+
+      .title {}
+
+      .input {
+        margin-top: 10px;
+        border: 1px solid #ccc;
+        border-radius: 10px;
+        padding: 10px 20px;
+        display: flex;
+        justify-content: space-between;
+        height: 42px;
+      }
+
+      .disabled {
+        background-color: #eee;
+      }
+    }
+
+    .start-btn {
+      width: 150px;
+      margin: 30px auto;
+    }
+
+    .submit-btn {
+      width: 70%;
+      margin: 100px auto 0;
+    }
+  }
+}

weapp/src/pages/home/index.jsx

@@ -26,6 +26,10 @@ const Index = () => {
     }
   }, [])
 
+  const navigateTo = (url) => {
+    Taro.navigateTo({ url })
+  }
+
   function toPatrol(kind) {
     Taro.navigateTo({
       url: `/packages/patrol/index?type=edit&kind=${kind}`
@@ -107,7 +111,18 @@ const Index = () => {
           <View className='card fill_wait'>
             <View className='title'>待 办 事 项</View>
             <View className='btn' onClick={
-                () => toPatrolView('wait')
+              () => toPatrolView('wait')
+            }>
+              查看
+            </View>
+          </View> : ''
+      }
+      {
+        judgeRight('MAINTENANCESPOTCHECK') ?
+          <View className='card fill_anomaly'>
+            <View className='title'>养护抽查</View>
+            <View className='btn' onClick={
+              () => navigateTo('/packages/maintenanceSpotCheck/index')
             }>
               查看
             </View>

weapp/src/services/api.js

@@ -67,13 +67,32 @@ export const postHandle = reportId => {
   return `/report/${reportId}/handle`;
 };
 
+// 道路抽查列表
+export const getRoadSpotList = () => {
+  return `/road/spot/list`;
+};
 
+// 道路抽查详情
+export const getRoadSpotDetail = () => {
+  return `/road/spot/detail`;
+};
 
+// 获取道路
+export const roadUrl = () => {
+  return `/road`;
+};
 
+// 调整已抽查的道路
+export const roadSpotChange = () => {
+  return `/road/spot/change`;
+};
 
+// 开始抽取
+export const roadSpotPrepare = () => {
+  return `/road/spot/prepare`;
+};
 
-
+// 提交抽查
-
+export const roadSpotConfirm = () => {
-
+  return `/road/spot/confirm`;
-
+};
-