41 changed files with 1046 additions and 105 deletions
@ -0,0 +1,144 @@ |
|||
import React, { useState, useEffect } from 'react' |
|||
import Taro, { useDidShow } from '@tarojs/taro' |
|||
import { View, Picker, Input, Image } from '@tarojs/components' |
|||
import moment from 'moment' |
|||
import './index.scss' |
|||
import NoData from '@/components/no-data/noData' |
|||
import request from '@/services/request' |
|||
import { getReportList } from '@/services/api'; |
|||
import chevronDown from '../../static/img/patrolView/chevron-down.png' |
|||
import searchIcon from '../../static/img/patrolView/search.png' |
|||
import cardImg from '../../static/img/patrolView/card-img.png' |
|||
import patrolIcon from '../../static/img/patrolView/patrol.svg' |
|||
import patrolActiveIcon from '../../static/img/patrolView/patrol-active.svg' |
|||
import conserveIcon from '../../static/img/patrolView/conserve.svg' |
|||
import conserveActiveIcon from '../../static/img/patrolView/conserve-active.svg' |
|||
|
|||
function Index() { |
|||
const [isPatrol, setIsPatrol] = useState(true) |
|||
const [datePicker, setDatePicker] = useState(moment().format('YYYY-MM-DD')) |
|||
const [listData, setListData] = useState([]) |
|||
const [inputSite, setInputSite] = useState('') |
|||
const [page, setPage] = useState(0) |
|||
const [total, setTotal] = useState(0) |
|||
const [num, setNum] = useState(Math.random()) |
|||
const [systemInfo, setSystemInfo] = useState('') |
|||
|
|||
const userInfo = Taro.getStorageSync('userInfo') || {}; |
|||
|
|||
function dealError(error) { |
|||
Taro.showToast({ |
|||
title: error, |
|||
icon: 'none', |
|||
duration: 1500 |
|||
}); |
|||
throw new Error(error); |
|||
} |
|||
useEffect(() => { |
|||
request.get(getReportList(),{}, { hideErrorToast: true, hideLoading: true }).then(res => { |
|||
if (res.statusCode == 200) { |
|||
console.log(res); |
|||
setListData(res.data) |
|||
return res.data; |
|||
} else { |
|||
dealError(res.data.message || '请求出错'); |
|||
} |
|||
}, err => { |
|||
dealError(err.message || '请求出错'); |
|||
}); |
|||
}, []) |
|||
|
|||
useDidShow(() => { |
|||
let refresh = Taro.getStorageSync('refresh'); // 返回列表需要刷新 |
|||
if (refresh) { |
|||
setPage(0) |
|||
setNum(Math.random()) |
|||
Taro.removeStorageSync('refresh'); // 返回列表需要刷新 |
|||
} |
|||
Taro.getSystemInfo({ |
|||
success: (res) => { |
|||
// windows | mac为pc端 |
|||
// android | ios为手机端 |
|||
setSystemInfo(res.platform); |
|||
} |
|||
}); |
|||
}) |
|||
|
|||
const onTypeChange = bool => { |
|||
setIsPatrol(bool) |
|||
} |
|||
|
|||
const onDateChange = e => { |
|||
setDatePicker(e.detail.value); |
|||
} |
|||
|
|||
const handleConfirm = () => { |
|||
setPage(0) |
|||
setListData([]); |
|||
setTotal(0); |
|||
setNum(Math.random()) |
|||
} |
|||
|
|||
const handleInput = e => { |
|||
setInputSite(e.detail.value); |
|||
if (!e.detail.value) { |
|||
setPage(0) |
|||
setListData([]); |
|||
setTotal(0); |
|||
setNum(Math.random()) |
|||
} |
|||
} |
|||
|
|||
return ( |
|||
<View> |
|||
<View className='type-box'> |
|||
<View className='item' onClick={() => onTypeChange(true)}> |
|||
<Image className='type-img' src={isPatrol ? patrolActiveIcon : patrolIcon} /> |
|||
<View style={{color: isPatrol ? '#346FC2': '#999999'}}>巡查</View> |
|||
</View> |
|||
<View className='line'></View> |
|||
<View className='item' onClick={() => onTypeChange(false)}> |
|||
<Image className='type-img' src={isPatrol ? conserveIcon : conserveActiveIcon} /> |
|||
<View style={{color: isPatrol ? '#999999': '#346FC2'}}>养护</View> |
|||
</View> |
|||
</View> |
|||
<View className='filter-box'> |
|||
<View className='filter-item'> |
|||
<View style={{ float: 'left', marginLeft: '20rpx', color: '#333' }}>日期：</View> |
|||
<Picker className='picker' style={{ overflow: 'hidden', float: 'left' }} mode='date' end={(systemInfo == 'windows' || systemInfo == 'mac') ? moment().add(1, 'd').format('YYYY-MM-DD') : moment().format('YYYY-MM-DD')} onChange={onDateChange}> |
|||
<View className='filter-name'>{datePicker || '请选择'}</View> |
|||
<Image className='filter-img' src={chevronDown} /> |
|||
</Picker> |
|||
</View> |
|||
<View class='head-search'> |
|||
<Image className='search-img' src={searchIcon} /> |
|||
<Input class='heard-search-input' value={inputSite} placeholder='请输入场所名称' onConfirm={handleConfirm} onInput={handleInput} /> |
|||
</View> |
|||
</View> |
|||
|
|||
<View style={{ marginTop: '110px' }}> |
|||
{ |
|||
listData && listData.length > 0 ? listData && listData.map((e, index) => { |
|||
return ( |
|||
<View className='cardBox' key={index} onClick={() => handleDetail(index)}> |
|||
<View className='card-item' > |
|||
<Image className='card-bg' src={cardImg} /> |
|||
<View className='card-position'> |
|||
<View className='card-title'>{e.road}</View> |
|||
<View style={{ float: 'left', width: '100%', fontSize: '28rpx', marginTop: '16rpx' }}> |
|||
<View style={{ float: 'left' }}>填报人：</View> |
|||
<View style={{ float: 'left' }}>{e.user.name}</View> |
|||
</View> |
|||
<View className='card-date'>{moment(e.time).format('YYYY-MM-DD HH:mm:ss')}</View> |
|||
</View> |
|||
</View> |
|||
</View> |
|||
) |
|||
}) : <NoData top='400rpx'></NoData> |
|||
} |
|||
</View> |
|||
</View> |
|||
) |
|||
} |
|||
|
|||
export default Index |
|||
@ -0,0 +1,139 @@ |
|||
page { |
|||
background-color: #f6f6f6; |
|||
|
|||
.type-box { |
|||
position: fixed; |
|||
top: 0px; |
|||
width: 100%; |
|||
z-index: 100; |
|||
background-color: #fff; |
|||
height: 80px; |
|||
display: flex; |
|||
justify-content: space-around; |
|||
align-items: center; |
|||
|
|||
.item { |
|||
flex-grow: 1; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
|
|||
.type-img { |
|||
width: 40px; |
|||
height: 40px; |
|||
margin: 0 10px; |
|||
} |
|||
} |
|||
|
|||
.line { |
|||
width: 1px; |
|||
height: 30px; |
|||
background-color: #f6f6f6; |
|||
} |
|||
} |
|||
|
|||
.filter-box { |
|||
position: fixed; |
|||
top: 80px; |
|||
display: flex; |
|||
width: 100%; |
|||
z-index: 100; |
|||
background: #fff; |
|||
color: #999999; |
|||
font-size: 28rpx; |
|||
border-top: 2rpx solid #f6f6f6; |
|||
|
|||
.filter-item { |
|||
overflow: hidden; |
|||
height: 98rpx; |
|||
line-height: 98rpx; |
|||
flex: 1; |
|||
|
|||
.filter-name { |
|||
float: left; |
|||
// margin-left: 20rpx; |
|||
} |
|||
|
|||
.filter-img { |
|||
width: 14px; |
|||
height: 8px; |
|||
float: left; |
|||
margin: 46rpx 20rpx 18rpx 10rpx; |
|||
} |
|||
} |
|||
|
|||
.head-search { |
|||
width: 400rpx; |
|||
display: flex; |
|||
background: #fff; |
|||
padding: 10rpx 26rpx 15rpx; |
|||
box-sizing: border-box; |
|||
border-radius: 50rpx; |
|||
box-shadow: 0 8rpx 10rpx 0rpx #00000008; |
|||
border: 2rpx solid #00000011; |
|||
height: 68rpx; |
|||
line-height: 68rpx; |
|||
margin: 14rpx 30rpx 14rpx 0; |
|||
|
|||
.search-img { |
|||
width: 36rpx; |
|||
height: 36rpx; |
|||
margin-top: 5rpx; |
|||
} |
|||
|
|||
.heard-search-input { |
|||
margin-left: 26rpx; |
|||
font-size: 28rpx; |
|||
width: 100%; |
|||
color: #333; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.cardBox { |
|||
width: 690rpx; |
|||
margin: 40rpx auto; |
|||
|
|||
.card-item { |
|||
position: relative; |
|||
margin-bottom: 10rpx; |
|||
|
|||
.card-bg { |
|||
width: 100%; |
|||
height: 260rpx; |
|||
display: block; |
|||
|
|||
} |
|||
|
|||
.card-position { |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
width: 88%; |
|||
padding: 16rpx 0 16rpx 36rpx; |
|||
overflow: hidden; |
|||
text-align: justify; |
|||
|
|||
.card-title { |
|||
font-size: 28rpx; |
|||
color: #333333; |
|||
float: left; |
|||
margin-bottom: 30rpx; |
|||
width: 470rpx; |
|||
text-overflow: ellipsis; |
|||
white-space: nowrap; |
|||
overflow: hidden; |
|||
margin-top: 8rpx; |
|||
} |
|||
|
|||
.card-date { |
|||
float: left; |
|||
font-size: 28rpx; |
|||
color: #999999; |
|||
margin-top: 30rpx; |
|||
width: 100%; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
After Width: | Height: | Size: 3.6 KiB |
|
After Width: | Height: | Size: 174 B |
|
After Width: | Height: | Size: 5.2 KiB |
|
After Width: | Height: | Size: 5.4 KiB |
|
After Width: | Height: | Size: 4.1 KiB |
|
After Width: | Height: | Size: 4.0 KiB |
|
After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
@ -0,0 +1,110 @@ |
|||
import React from 'react' |
|||
import { useEffect, useRef } from 'react'; |
|||
import * as echarts from 'echarts'; |
|||
|
|||
const PieChart = (props) => { |
|||
|
|||
const { width, height, data, colorList, underColorList, total, text } = props |
|||
|
|||
const chartRef = useRef(null); |
|||
let name = [], emptyName = [] |
|||
// const name = data?.map(d)
|
|||
data?.forEach(d => { |
|||
name.push(d.name) |
|||
emptyName.push({ |
|||
name: '', |
|||
value: d.value |
|||
}) |
|||
}) |
|||
useEffect(() => { |
|||
let chartInstance = echarts.init(chartRef.current); |
|||
const option = { |
|||
tooltip: { |
|||
trigger: "item", |
|||
}, |
|||
legend: { |
|||
orient: "vertical", |
|||
itemWidth: 10, |
|||
itemHeight: 10, |
|||
right: '30%', |
|||
top: 'center', |
|||
align: 'left', |
|||
data: name, |
|||
textStyle: { |
|||
color: "#fff", |
|||
}, |
|||
}, |
|||
grid: { |
|||
left: '10%' |
|||
}, |
|||
// title: [
|
|||
// {
|
|||
// text: text,
|
|||
// top: "58%",
|
|||
// left: '16%',
|
|||
// textStyle: {
|
|||
// color: "#E9F7FF",
|
|||
// fontSize: 14,
|
|||
// },
|
|||
// },
|
|||
// {
|
|||
// text: total,
|
|||
// top: "40%",
|
|||
// left: '10%',
|
|||
// textStyle: {
|
|||
// fontSize: "30",
|
|||
// color: "#FFFFFF",
|
|||
// fontFamily: "YouSheBiaoTiHei",
|
|||
// },
|
|||
// },
|
|||
// ],
|
|||
series: [ |
|||
{ |
|||
name: "底层背景", |
|||
type: "pie", |
|||
hoverAnimation: false, |
|||
legendHoverLink: false, |
|||
radius: ["60%", "72%"], |
|||
center: ['25%', '50%'], |
|||
color: underColorList, |
|||
label: { |
|||
show: false |
|||
}, |
|||
labelLine: { |
|||
show: false |
|||
}, |
|||
tooltip: { |
|||
show: false, |
|||
}, |
|||
|
|||
data: emptyName, |
|||
}, |
|||
{ |
|||
name: "已绿化里程统计", |
|||
type: "pie", |
|||
radius: ["67%", "80%"], |
|||
center: ['25%', '50%'], |
|||
color: colorList, |
|||
label: { |
|||
show: false |
|||
}, |
|||
data: data, |
|||
}, |
|||
], |
|||
}; |
|||
|
|||
chartInstance.setOption(option); |
|||
window.addEventListener('resize', () => { |
|||
if (chartInstance) { |
|||
chartInstance.resize() |
|||
} |
|||
}) |
|||
}, []) |
|||
return ( |
|||
<div style={{ width: width || '100%', height: height || '100%' }}> |
|||
<div ref={chartRef} style={{ width: '100%', height: '100%' }}></div> |
|||
</div> |
|||
|
|||
) |
|||
} |
|||
export default PieChart |
|||
@ -1,14 +1,39 @@ |
|||
import React from 'react' |
|||
import Module from '../../../public/module' |
|||
import PieChart from '../chart/pie-chart'; |
|||
|
|||
let data = [ |
|||
{ value: 435, name: "县道" }, |
|||
{ value: 679, name: "乡道" }, |
|||
{ value: 848, name: "村道" }, |
|||
] |
|||
let colorList = [ |
|||
"rgba(7,185,254,1)", |
|||
"rgba(28,96,254,1)", |
|||
"rgba(4,251,240,1)", |
|||
] |
|||
let underColorList = [ |
|||
"rgba(7,185,254,0.5)", |
|||
"rgba(28,96,254,0.5)", |
|||
"rgba(4,251,240,0.5)", |
|||
] |
|||
const LeftBottom = () => { |
|||
const style = { height: "31%", marginTop: "3%" } |
|||
return ( |
|||
<> |
|||
<Module style={style} title={"已绿化里程统计"}> |
|||
|
|||
</Module> |
|||
</> |
|||
<> |
|||
<Module style={style} title={"已绿化里程统计"}> |
|||
{/* <div ref = {chartRef} style={{ width: '100%', height: '100%' }}></div> */} |
|||
<PieChart |
|||
data={data} |
|||
width='100%' |
|||
height='100%' |
|||
text='已绿化里程' |
|||
total={2344.13} |
|||
colorList={colorList} |
|||
underColorList={underColorList} |
|||
/> |
|||
</Module> |
|||
</> |
|||
) |
|||
} |
|||
export default LeftBottom |
|||
@ -1,14 +1,42 @@ |
|||
import React from 'react' |
|||
import Module from '../../../public/module' |
|||
import PieChart from '../chart/pie-chart'; |
|||
|
|||
let data = [ |
|||
{ value: 435, name: "道路" }, |
|||
{ value: 679, name: "桥梁" }, |
|||
{ value: 848, name: "涵洞" }, |
|||
{ value: 666, name: "其他" }, |
|||
] |
|||
let colorList = [ |
|||
"rgba(7,185,254,1)", |
|||
"rgba(28,96,254,1)", |
|||
"rgba(4,251,240,1)", |
|||
"rgba(255,194,20,1)" |
|||
] |
|||
let underColorList = [ |
|||
"rgba(7,185,254,0.5)", |
|||
"rgba(28,96,254,0.5)", |
|||
"rgba(4,251,240,0.5)", |
|||
"rgba(255,194,20,0.5)" |
|||
] |
|||
const RightBottom = () => { |
|||
const style = { height: "31%", marginTop: "3%" } |
|||
return ( |
|||
<> |
|||
<Module style={style} title={"养护完成情况"}> |
|||
|
|||
</Module> |
|||
</> |
|||
<> |
|||
<Module style={style} title={"养护完成情况"}> |
|||
{/* <div ref = {chartRef} style={{ width: '100%', height: '100%' }}></div> */} |
|||
<PieChart |
|||
data={data} |
|||
width='100%' |
|||
height='100%' |
|||
text='养护总数' |
|||
total={2344.13} |
|||
colorList={colorList} |
|||
underColorList={underColorList} |
|||
/> |
|||
</Module> |
|||
</> |
|||
) |
|||
} |
|||
export default RightBottom |
|||
@ -1,8 +1,13 @@ |
|||
import React from 'react' |
|||
import Left from './left' |
|||
import Right from './right' |
|||
|
|||
const Operation = () => { |
|||
return ( |
|||
<>运营</> |
|||
<div style={{ display: 'flex', width: '100%',height: '100%',justifyContent: 'space-between' }}> |
|||
<Left /> |
|||
<Right /> |
|||
</div> |
|||
) |
|||
} |
|||
export default Operation |
|||
@ -0,0 +1,180 @@ |
|||
import React, { useMemo, useState, useEffect } from 'react'; |
|||
import { SearchOutlined } from '@ant-design/icons'; |
|||
import { Col, Row, Input, Tree } from 'antd' |
|||
import Module from '../../public/module' |
|||
|
|||
const { Search } = Input; |
|||
const x = 3; |
|||
const y = 2; |
|||
const z = 1; |
|||
const defaultData = []; |
|||
|
|||
const generateData = (_level, _preKey, _tns) => { |
|||
const preKey = _preKey || '0'; |
|||
const tns = _tns || defaultData; |
|||
const children = []; |
|||
|
|||
for (let i = 0; i < x; i++) { |
|||
const key = `${preKey}-${i}`; |
|||
tns.push({ |
|||
title: key, |
|||
key, |
|||
}); |
|||
|
|||
if (i < y) { |
|||
children.push(key); |
|||
} |
|||
} |
|||
|
|||
if (_level < 0) { |
|||
return tns; |
|||
} |
|||
|
|||
const level = _level - 1; |
|||
children.forEach((key, index) => { |
|||
tns[index].children = []; |
|||
return generateData(level, key, tns[index].children); |
|||
}); |
|||
}; |
|||
|
|||
generateData(z); |
|||
const dataList = []; |
|||
|
|||
const generateList = (data) => { |
|||
for (let i = 0; i < data.length; i++) { |
|||
const node = data[i]; |
|||
const { key } = node; |
|||
dataList.push({ |
|||
key, |
|||
title: key, |
|||
}); |
|||
|
|||
if (node.children) { |
|||
generateList(node.children); |
|||
} |
|||
} |
|||
}; |
|||
|
|||
generateList(defaultData); |
|||
|
|||
const getParentKey = (key, tree) => { |
|||
let parentKey; |
|||
|
|||
for (let i = 0; i < tree.length; i++) { |
|||
const node = tree[i]; |
|||
|
|||
if (node.children) { |
|||
if (node.children.some((item) => item.key === key)) { |
|||
parentKey = node.key; |
|||
} else if (getParentKey(key, node.children)) { |
|||
parentKey = getParentKey(key, node.children); |
|||
} |
|||
} |
|||
} |
|||
|
|||
return parentKey; |
|||
}; |
|||
|
|||
const Left = () => { |
|||
|
|||
useEffect(() => { |
|||
|
|||
}, []) |
|||
|
|||
const style = { height: "97%", marginTop: "3%" } |
|||
const [expandedKeys, setExpandedKeys] = useState([]); |
|||
const [searchValue, setSearchValue] = useState(''); |
|||
const [autoExpandParent, setAutoExpandParent] = useState(true); |
|||
|
|||
const onExpand = (newExpandedKeys) => { |
|||
setExpandedKeys(newExpandedKeys); |
|||
setAutoExpandParent(false); |
|||
}; |
|||
|
|||
const onChange = (e) => { |
|||
const { value } = e.target; |
|||
const newExpandedKeys = dataList |
|||
.map((item) => { |
|||
if (item.title.indexOf(value) > -1) { |
|||
return getParentKey(item.key, defaultData); |
|||
} |
|||
|
|||
return null; |
|||
}) |
|||
.filter((item, i, self) => item && self.indexOf(item) === i); |
|||
setExpandedKeys(newExpandedKeys); |
|||
setSearchValue(value); |
|||
setAutoExpandParent(true); |
|||
}; |
|||
|
|||
const treeData = useMemo(() => { |
|||
const loop = (data) => |
|||
data.map((item) => { |
|||
const strTitle = item.title; |
|||
const index = strTitle.indexOf(searchValue); |
|||
const beforeStr = strTitle.substring(0, index); |
|||
const afterStr = strTitle.slice(index + searchValue.length); |
|||
const title = |
|||
index > -1 ? ( |
|||
<span> |
|||
{beforeStr} |
|||
<span className="site-tree-search-value">{searchValue}</span> |
|||
{afterStr} |
|||
</span> |
|||
) : ( |
|||
<span>{strTitle}</span> |
|||
); |
|||
|
|||
if (item.children) { |
|||
return { |
|||
title, |
|||
key: item.key, |
|||
children: loop(item.children), |
|||
}; |
|||
} |
|||
|
|||
return { |
|||
title, |
|||
key: item.key, |
|||
}; |
|||
}); |
|||
|
|||
return loop(defaultData); |
|||
}, [searchValue]); |
|||
return ( |
|||
<div style={{ display: 'flex', flexDirection: 'column', width: "23%", height: "100%", marginLeft: "1%" }}> |
|||
<Module style={style} title={"公交车辆信息"}> |
|||
<div style={{ width: '90%', height: '96', margin: '2% 5%', }}> |
|||
<div style={{ border: '1px solid rgba(10, 114, 255, 1)', backgroundColor: 'rgba(10, 114, 255, 0.1)' }}> |
|||
<img src='assets/images/quanju/search.png' style={{ width: '5%', margin: '0 1.5% 1% 3.5%' }} /> |
|||
<Input |
|||
style={{ |
|||
width: '90%', |
|||
background: 'none', |
|||
backgroundColor: 'none', |
|||
color: 'rgba(216, 240, 255, 0.8)', |
|||
border: 'none', |
|||
boxShadow: 'none', |
|||
}} |
|||
placeholder="请输入车牌号" |
|||
onChange={onChange} |
|||
/> |
|||
</div> |
|||
<Tree |
|||
rootStyle={{ |
|||
background: 'none', |
|||
borderColor: 'none', |
|||
color: 'rgba(255, 255, 255, 1)' |
|||
}} |
|||
onExpand={onExpand} |
|||
expandedKeys={expandedKeys} |
|||
autoExpandParent={autoExpandParent} |
|||
treeData={treeData} |
|||
/> |
|||
</div> |
|||
</Module> |
|||
</div> |
|||
); |
|||
}; |
|||
|
|||
export default Left; |
|||
@ -0,0 +1,9 @@ |
|||
import React from 'react' |
|||
|
|||
const Right = () => { |
|||
return ( |
|||
<div style={{ display: 'flex', flexDirection: 'column', width: "23%", height: "100%", marginRight: "1%", }}>555555555 |
|||
</div> |
|||
) |
|||
} |
|||
export default Right |
|||
Loading…
Reference in new issue