巡查养护页面

2 years ago · fcea9240bb
7 changed files with 293 additions and 29 deletions
--- a/weapp/src/packages/patrol/index.config.js
+++ b/weapp/src/packages/patrol/index.config.js
@ -0,0 +1,3 @@
+export default {
+    navigationBarTitleText: '巡查养护'
+}
--- a/weapp/src/packages/patrol/index.jsx
+++ b/weapp/src/packages/patrol/index.jsx
@ -1,9 +1,206 @@
-import React from 'react'
-import { View } from '@tarojs/components';
+import React, { useState, useEffect } from 'react';
+import {
+  View,
+  RadioGroup,
+  Radio,
+  Button,
+  Image,
+  Input,
+  Textarea,
+  Picker
+} from '@tarojs/components';
+import { AtForm, AtInput, AtButton, AtTextarea, AtImagePicker, AtTimeline } from 'taro-ui';
+// import InputPicker from '../components/inputPicker';
+import './index.scss';
+import arrowIcon from '../../static/img/patrol/arrow-down.svg';

 const Index = () => {
+  const [isPatrol, setIsPatrol] = useState(true) // 巡查 or 养护
+  const [prjTypeSelector, setPrjTypeSelector] = useState([])
+  const [roadSelector, setRoadSelector] = useState([])
+  const [projectType, setProjectType] = useState('')
+  const [road, setRoad] = useState('')
+
+  const [images, setimages] = useState([])
+
+  const reportType = [
+    {
+      value: '巡查',
+      text: '巡查',
+      checked: true
+    },
+    {
+      value: '养护',
+      text: '养护',
+      checked: false
+    }
+  ]
+
+  useEffect(() => {
+    const prjTypeSelector = ['道路', '桥梁', '涵洞']
+    const roadSelector = ['富山一路', '金沙大道', '玉湖路']
+    setPrjTypeSelector(prjTypeSelector)
+    setRoadSelector(roadSelector)
+  }, [])
+
+  useEffect(() => {
+    if (projectType) {
+      setPrjTypeSelector(prjTypeSelector.filter(s => s.includes(projectType)))
+    }
+  }, [projectType])
+  // useEffect(() => {
+  //   if (projectType) {
+  //     setPrjTypeSelector(prjTypeSelector.filter(s => s.includes(projectType)))
+  //   }
+  // }, [projectType])
+
+  function onTypeChange(e) {
+    if (e.detail.value === '巡查') {
+      setIsPatrol(true)
+    } else {
+      setIsPatrol(false)
+    }
+  }
+
+  function onPrjTypeChange(e) {
+    setProjectType(selector[e.detail.value])
+  }
+
+  function onImgPickerChange() {
+
+  }
+
  return (
-    <View>巡查养护</View>
+    <View className='patrol'>
+      <View className='report-type'>
+        <View className='text'>上报类型</View>
+        <RadioGroup onChange={onTypeChange}>
+          {
+            reportType.map((item, i) => {
+              return (
+                <Radio
+                  key={i}
+                  value={item.value}
+                  checked={item.checked}
+                  className='radio'
+                  color='#346FC2'
+                >
+                  {item.text}
+                </Radio>
+              )
+            })
+          }
+        </RadioGroup>
+      </View>
+
+      <View className='input-picker'>
+        <AtInput
+          className='input'
+          title='工程类型：'
+          type='text'
+          placeholder='请选择工程类型'
+          border={false}
+          value={projectType}
+          onChange={value => setProjectType(value)}
+        />
+        <Picker mode='selector' range={prjTypeSelector} onChange={onPrjTypeChange}>
+          <Image src={arrowIcon} className='img-r' />
+        </Picker>
+      </View>
+      <View className='input-picker'>
+        <AtInput
+          className='input'
+          title='所在道路：'
+          type='text'
+          placeholder='请选择您所在的道路'
+          border={false}
+          value={road}
+          onChange={value => setRoad(value)}
+        />
+        <Picker mode='selector' range={roadSelector} onChange={onPrjTypeChange}>
+          <Image src={arrowIcon} className='img-r' />
+        </Picker>
+      </View>
+
+      {/* <InputPicker 
+        className='input-picker'
+        title='工程类型：'
+        placeholder='请选择工程类型'
+        value={projectType}
+        onChange={setProjectType}
+        selector={prjTypeSelector}
+      />
+      <InputPicker 
+        className='input-picker'
+        title='所在道路：'
+        placeholder='请选择您所在的道路'
+        value={road}
+        onChange={setRoad}
+        selector={roadSelector}
+      /> */}
+
+      <View className='input-picker'>
+        <AtInput
+          className='input'
+          title='所属路段:'
+          type='text'
+          placeholder='路段名称'
+          border={false}
+        // value={this.state.value}
+        // onChange={this.handleChange.bind(this, 'value')}
+        />
+        <Image src={arrowIcon} className='img-l' />
+        <AtInput
+          className='input'
+          type='text'
+          placeholder='路段名称'
+          border={false}
+        // value={this.state.value}
+        // onChange={this.handleChange.bind(this, 'value')}
+        />
+        <Image src={arrowIcon} className='img-r' />
+      </View>
+
+      <View>
+        <AtTextarea
+          count={false}
+          title='具体位置:'
+          type='text'
+          placeholder='具体位置：根据定位自动获取，可手动修改'
+          border={false}
+        // value={this.state.value}
+        // onChange={this.handleChange.bind(this, 'value')}
+        />
+      </View>
+
+      {
+        isPatrol ?
+          <View className='img-picker'>
+            现场图片：
+            <AtImagePicker
+              length={3}
+              files={images}
+              onChange={onImgPickerChange}
+            />
+          </View> :
+          <View>
+            养护图片:
+            <AtTimeline
+              items={[
+                {
+                  title: '养护前', 
+                },
+                { title: '养护中' },
+                { title: '养护后' }
+              ]}
+            >
+            </AtTimeline>
+          </View>
+      }
+
+      <AtButton formType='submit' type='primary' className='sub-btn'>上报</AtButton>
+
+    </View>
  )
 }

--- a/weapp/src/packages/patrol/index.scss
+++ b/weapp/src/packages/patrol/index.scss
@ -0,0 +1,51 @@
+.patrol {
+  height: 100vh;
+  width: 100vw;
+  background-color: #f6f6f6;
+  padding-top: 20px;
+
+  .report-type {
+    height: 96px;
+    background-color: #fff;
+    margin-bottom: 20px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .text {
+      margin-left: 30px;
+    }
+
+    .radio {
+      margin-right: 30px;
+    }
+  }
+
+  .input-picker {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background-color: #fff;
+    margin-bottom: 5px;
+
+    .img-r {
+      width: 24px;
+      height: 14px;
+      margin-right: 30px;
+      // margin-left: 10px;
+    }
+    .img-l {
+      width: 24px;
+      height: 14px;
+    }
+  }
+
+  .img-picker {
+    background-color: #fff;
+
+  }
+
+  .sub-btn {
+    width: 70%;
+  }
+}
--- a/weapp/src/pages/auth/login/login.scss
+++ b/weapp/src/pages/auth/login/login.scss
@ -1,5 +1,3 @@
-@import "~taro-ui/dist/style/components/divider.scss";
-
 .page {
  height: 100vh;
  background: #fff;
--- a/weapp/src/pages/home/index.scss
+++ b/weapp/src/pages/home/index.scss
@ -1,29 +1,29 @@
 .page {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;

-    .fill {
-        margin-top: 30px;
-        padding: 10px;
-        width: 94%;
-        height: 360px;
-        background: url('../../static/img/patrol//fill-bg.svg') no-repeat;
-        background-size:100% 100%;
-    }
+  .fill {
+    margin-top: 30px;
+    padding: 10px;
+    width: 94%;
+    height: 360px;
+    background: url('../../static/img/home/fill-bg.svg') no-repeat;
+    background-size: 100% 100%;
+  }

-    .title {
-        margin: 50px 0 0 48px;
-        color: #fff;
-        font-size: 48px;
-    }
+  .title {
+    margin: 50px 0 0 48px;
+    color: #fff;
+    font-size: 48px;
+  }

-    .btn {
-        margin: 20px 0 0 50px;
-        color: #fff;
-        text-align: center;
-        width: 200px;
-        border: solid 1px #fff;
-        border-radius: 10px;
-    }
+  .btn {
+    margin: 30px 0 0 50px;
+    color: #fff;
+    text-align: center;
+    width: 200px;
+    border: solid 1px #fff;
+    border-radius: 10px;
+  }
 }
--- a/weapp/src/static/img/patrol/fill-bg.svg
+++ b/weapp/src/static/img/patrol/fill-bg.svg
--- a/weapp/src/static/img/patrol/arrow-down.svg
+++ b/weapp/src/static/img/patrol/arrow-down.svg
@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="12px" height="7px" viewBox="0 0 12 7" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>chevron-down</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" fill-opacity="0.65">
+        <g id="首页_巡查养护-填写（第三方）" transform="translate(-349.000000, -164.000000)" fill="#000000" fill-rule="nonzero">
+            <g id="编组-5" transform="translate(0.000000, 80.000000)">
+                <g id="卡片-/-通栏" transform="translate(0.000000, 63.000000)">
+                    <g id="chevron-down" transform="translate(349.000000, 21.000000)">
+                        <path d="M1.46323438,0.256281566 C1.12849928,-0.0854271888 0.585786438,-0.0854271888 0.25105133,0.256281566 C-0.0836837768,0.597990322 -0.0836837768,1.15200968 0.25105133,1.49371843 L5.39390847,6.74371843 C5.72864358,7.08542719 6.27135642,7.08542719 6.60609153,6.74371843 L11.7489487,1.49371843 C12.0836838,1.15200968 12.0836838,0.597990322 11.7489487,0.256281566 C11.4142136,-0.0854271888 10.8715007,-0.0854271888 10.5367656,0.256281566 L6,4.88756313 L1.46323438,0.256281566 Z" id="Shape"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>