68 changed files with 5833 additions and 2559 deletions
@ -0,0 +1,3 @@ |
|||
export default { |
|||
navigationBarTitleText: '巡查养护' |
|||
} |
|||
@ -1,9 +1,246 @@ |
|||
import React from 'react' |
|||
import { View } from '@tarojs/components'; |
|||
import React, { useState, useEffect } from 'react'; |
|||
import Taro from '@tarojs/taro'; |
|||
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(files) { |
|||
setimages(files) |
|||
} |
|||
function onImageClick(index, file) { |
|||
Taro.previewImage({ |
|||
urls: [file.url] // 需要预览的图片http链接列表 |
|||
}) |
|||
} |
|||
|
|||
useEffect(() => { |
|||
console.log(images); |
|||
}, [images]) |
|||
|
|||
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')} |
|||
/> |
|||
<Picker mode='selector' range={roadSelector} onChange={onPrjTypeChange}> |
|||
<Image src={arrowIcon} className='img-l' /> |
|||
</Picker> |
|||
<AtInput |
|||
className='input' |
|||
type='text' |
|||
placeholder='路段名称' |
|||
border={false} |
|||
// value={this.state.value} |
|||
// onChange={this.handleChange.bind(this, 'value')} |
|||
/> |
|||
<Picker mode='selector' range={roadSelector} onChange={onPrjTypeChange}> |
|||
<Image src={arrowIcon} className='img-r' /> |
|||
</Picker> |
|||
</View> |
|||
|
|||
<AtTextarea |
|||
count={false} |
|||
title='具体位置：' |
|||
placeholder='具体位置：根据定位自动获取，可手动修改' |
|||
// value={this.state.value} |
|||
// onChange={this.handleChange.bind(this, 'value')} |
|||
/> |
|||
<AtTextarea |
|||
count={false} |
|||
title='巡查内容：' |
|||
placeholder='请输入巡查内容' |
|||
// value={this.state.value} |
|||
// onChange={this.handleChange.bind(this, 'value')} |
|||
/> |
|||
|
|||
{ |
|||
isPatrol ? |
|||
<View className='patrol-picker'> |
|||
现场图片： |
|||
<AtImagePicker |
|||
className='img-picker' |
|||
count={3 - images.length} |
|||
showAddBtn={images.length >= 3 ? false : true} |
|||
files={images} |
|||
onChange={onImgPickerChange} |
|||
onImageClick={onImageClick} |
|||
/> |
|||
</View> : |
|||
<View className='conserve-picker'> |
|||
养护图片: |
|||
<View className='horizontal-line hl-one'> |
|||
<View className='circle c-one'></View> |
|||
<View className='text t-one'>养护前</View> |
|||
</View> |
|||
<AtImagePicker |
|||
className='img-picker' |
|||
count={3} |
|||
files={images} |
|||
onChange={onImgPickerChange} |
|||
/> |
|||
<View className='horizontal-line hl-two'> |
|||
<View className='circle c-two'></View> |
|||
<View className='text t-two'>养护中</View> |
|||
</View> |
|||
<AtImagePicker |
|||
className='img-picker' |
|||
count={3} |
|||
files={images} |
|||
onChange={onImgPickerChange} |
|||
/> |
|||
<View className='horizontal-line hl-three'> |
|||
<View className='circle c-three'></View> |
|||
<View className='text t-three'>养护后</View> |
|||
</View> |
|||
<AtImagePicker |
|||
className='img-picker' |
|||
count={3} |
|||
files={images} |
|||
onChange={onImgPickerChange} |
|||
/> |
|||
</View> |
|||
} |
|||
|
|||
<AtButton formType='submit' type='primary' className='sub-btn'>上报</AtButton> |
|||
|
|||
</View> |
|||
) |
|||
} |
|||
|
|||
|
|||
@ -0,0 +1,116 @@ |
|||
.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; |
|||
} |
|||
} |
|||
|
|||
.patrol-picker { |
|||
background-color: #fff; |
|||
padding: 20px; |
|||
|
|||
} |
|||
|
|||
.conserve-picker { |
|||
background-color: #fff; |
|||
padding: 20px; |
|||
|
|||
.horizontal-line { |
|||
height: 30px; |
|||
width: 100%; |
|||
display: flex; |
|||
justify-content: left; |
|||
align-items: center; |
|||
|
|||
.circle { |
|||
margin-left: 4px; |
|||
width: 22px; |
|||
height: 22px; |
|||
background-color: #fff; |
|||
border-radius: 50%; |
|||
} |
|||
|
|||
.text { |
|||
margin-left: 46px; |
|||
font-size: 24px; |
|||
} |
|||
} |
|||
.hl-one { |
|||
background-color: #DFDFDF; |
|||
|
|||
.c-one { |
|||
border: solid 4px #999999; |
|||
} |
|||
|
|||
.t-one { |
|||
color: #999999; |
|||
} |
|||
} |
|||
.hl-two { |
|||
background-color: #f7d3a5; |
|||
|
|||
.c-two { |
|||
border: solid 4px #FE9B1C; |
|||
} |
|||
|
|||
.t-two { |
|||
color: #FE9B1C; |
|||
} |
|||
} |
|||
.hl-three { |
|||
background-color: #a0f3a4; |
|||
|
|||
.c-three { |
|||
border: solid 4px #08D514; |
|||
} |
|||
|
|||
.t-three { |
|||
color: #08D514; |
|||
} |
|||
} |
|||
|
|||
.img-picker { |
|||
margin: 20px; |
|||
} |
|||
} |
|||
|
|||
.sub-btn { |
|||
width: 70%; |
|||
margin-top: 100px; |
|||
} |
|||
} |
|||
@ -1,45 +1,92 @@ |
|||
.page { |
|||
height: 100vh; |
|||
background: #F0F2F5; |
|||
box-sizing: border-box; |
|||
|
|||
.personal { |
|||
padding: 20px; |
|||
|
|||
.info { |
|||
border-radius: 10px; |
|||
background: #fff; |
|||
height: 30vh; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
justify-content: center; |
|||
|
|||
.icon { |
|||
width: 150px; |
|||
height: 150px; |
|||
border-radius: 50%; |
|||
.myBox { |
|||
width: 90%; |
|||
height: 300rpx; |
|||
margin: 30rpx auto; |
|||
background: url('../../static/img/my/card-bg.svg') no-repeat; |
|||
background-size: 100%; |
|||
border-radius: 8rpx; |
|||
|
|||
.my-top { |
|||
overflow: hidden; |
|||
padding: 70rpx 0 28rpx 30rpx; |
|||
|
|||
.my-portrait { |
|||
width: 120rpx; |
|||
height: 120rpx; |
|||
display: block; |
|||
float: left; |
|||
} |
|||
|
|||
.my-item { |
|||
float: left; |
|||
margin-left: 32rpx; |
|||
width: 70%; |
|||
|
|||
.my-username { |
|||
font-size: 32rpx; |
|||
color: #FFFFFF; |
|||
margin-bottom: 24rpx; |
|||
margin-top: 6rpx; |
|||
display: -webkit-box; |
|||
-webkit-box-orient: vertical; |
|||
-webkit-line-clamp: 2; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.name { |
|||
font-size: 30px; |
|||
margin-top: 30px; |
|||
.my-phone { |
|||
font-size: 28rpx; |
|||
font-weight: bold; |
|||
color: #FFFFFF; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.box { |
|||
overflow: hidden; |
|||
background-color: #fff; |
|||
width: 100%; |
|||
height: 92rpx; |
|||
line-height: 92rpx; |
|||
|
|||
.box-img { |
|||
width: 52rpx; |
|||
height: 52rpx; |
|||
display: block; |
|||
float: left; |
|||
padding: 20rpx 20rpx 20rpx 30rpx; |
|||
} |
|||
|
|||
.logout { |
|||
box-sizing: border-box; |
|||
width: 100vw; |
|||
margin-top: 50px; |
|||
padding: 0 20px; |
|||
.box-txt { |
|||
float: left; |
|||
font-size: 28rpx; |
|||
color: #333333; |
|||
} |
|||
|
|||
.btn { |
|||
background: #fff; |
|||
font-size: 28px; |
|||
padding: 8px 0; |
|||
.img { |
|||
width: 52rpx; |
|||
height: 52rpx; |
|||
display: block; |
|||
float: right; |
|||
padding: 20rpx 30rpx 20rpx 0; |
|||
} |
|||
} |
|||
|
|||
.logout { |
|||
width: 550rpx; |
|||
height: 80rpx; |
|||
line-height: 80rpx; |
|||
background: #346FC2; |
|||
border-radius: 8rpx; |
|||
font-size: 28rpx; |
|||
color: #FFFFFF; |
|||
margin: 98rpx auto 0; |
|||
text-align: center; |
|||
} |
|||
} |
|||
|
Before Width: | Height: | Size: 12 KiB After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 889 B |
|
After Width: | Height: | Size: 2.4 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 5.2 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 21 KiB |
|
After Width: | Height: | Size: 21 KiB |
|
After Width: | Height: | Size: 21 KiB |
|
After Width: | Height: | Size: 93 KiB |
|
After Width: | Height: | Size: 44 KiB |
File diff suppressed because it is too large
@ -1,118 +0,0 @@ |
|||
// import React, { useEffect, useState } from 'react';
|
|||
// import { connect } from 'react-redux';
|
|||
// import { Spin, Drawer, Button } from 'antd';
|
|||
// import '../style.less';
|
|||
// import { EditableProTable } from '@ant-design/pro-table';
|
|||
|
|||
// const CompileDrawer = (props) => {
|
|||
// const { dispatch, actions, user, loading, visible, checkRow, close, reportRectifyDetail, checkAction } = props
|
|||
// const [requesting, setRequesting] = useState(false)
|
|||
// const [dataSource, setDataSource] = useState([])
|
|||
// const { report } = actions
|
|||
// const isCheck = checkAction == 'check'
|
|||
|
|||
// useEffect(() => {
|
|||
// if (checkRow.day) {
|
|||
// dispatch(report.reportRectifyDetail(checkRow.day, checkRow.depId))
|
|||
// }
|
|||
// }, [checkRow])
|
|||
|
|||
// useEffect(() => {
|
|||
// let data = reportRectifyDetail
|
|||
// let i = 1
|
|||
// for (let d of data) {
|
|||
// d.index_ = i++
|
|||
// }
|
|||
// setDataSource(data)
|
|||
// }, [reportRectifyDetail])
|
|||
|
|||
// return (
|
|||
// <Drawer
|
|||
// title={"合用场所安全隐患排查整治汇总表"}
|
|||
// placement="right"
|
|||
// onClose={() => {
|
|||
// close()
|
|||
// }}
|
|||
// visible={visible}
|
|||
// width={'82%'}
|
|||
// >
|
|||
// <Spin spinning={loading || requesting}>
|
|||
// <EditableProTable
|
|||
// columns={[
|
|||
// {
|
|||
// title: '序号',
|
|||
// dataIndex: 'index_',
|
|||
// readonly: true,
|
|||
// },
|
|||
// {
|
|||
// title: '名称',
|
|||
// dataIndex: 'name',
|
|||
// readonly: true,
|
|||
// }, {
|
|||
// title: '地址',
|
|||
// dataIndex: 'address',
|
|||
// readonly: true,
|
|||
// }, {
|
|||
// title: '排查发现隐患',
|
|||
// dataIndex: 'hiddenDanger',
|
|||
// readonly: true,
|
|||
// }, {
|
|||
// title: '采取整改措施',
|
|||
// dataIndex: 'correctiveAction',
|
|||
// }, {
|
|||
// title: '实施处罚、强制措施情况',
|
|||
// dataIndex: 'punishment',
|
|||
// },
|
|||
// ]}
|
|||
// controlled={true}
|
|||
// value={dataSource}
|
|||
// onChange={setDataSource}
|
|||
// rowKey="id"
|
|||
// headerTitle={`填报单位：${checkRow.region}；时间：${checkRow.day}`}
|
|||
// maxLength={5}
|
|||
// recordCreatorProps={false}
|
|||
// editable={{
|
|||
// type: 'multiple',
|
|||
// editableKeys: isCheck ? [] : dataSource.map(r => r.id)
|
|||
// }}
|
|||
// toolBarRender={() => [
|
|||
// isCheck ? '' :
|
|||
// <Button
|
|||
// type="primary"
|
|||
// key="save"
|
|||
// onClick={() => {
|
|||
// // dataSource 就是当前数据，可以调用 api 将其保存
|
|||
// setRequesting(true)
|
|||
// const data = dataSource
|
|||
// for (let d of data) {
|
|||
// d.userId = user.id
|
|||
// delete d.index_
|
|||
// }
|
|||
// dispatch(report.compileReportRectifyDetail(dataSource)).then(res => {
|
|||
// setRequesting(false)
|
|||
// })
|
|||
// }}
|
|||
// >
|
|||
// 保存数据
|
|||
// </Button>
|
|||
// ]}
|
|||
// >
|
|||
|
|||
// </EditableProTable>
|
|||
// </Spin>
|
|||
// </Drawer >
|
|||
// )
|
|||
// }
|
|||
|
|||
// function mapStateToProps (state) {
|
|||
// const { auth, global, members, reportRectifyDetail } = state;
|
|||
// return {
|
|||
// loading: reportRectifyDetail.isRequesting,
|
|||
// user: auth.user,
|
|||
// actions: global.actions,
|
|||
// members: members.data,
|
|||
// reportRectifyDetail: reportRectifyDetail.data || []
|
|||
// };
|
|||
// }
|
|||
|
|||
// export default connect(mapStateToProps)(CompileDrawer);
|
|||
@ -1,124 +0,0 @@ |
|||
// import React, { useEffect, useRef } from 'react';
|
|||
// import { connect } from 'react-redux';
|
|||
// import { Spin, Button, Modal, Form, Switch } from 'antd';
|
|||
// import ProForm, { ProFormText, ProFormSelect } from '@ant-design/pro-form';
|
|||
// import { useState } from 'react';
|
|||
|
|||
// const ConfigModal = (props) => {
|
|||
// const { dispatch, actions, user, loading, visible, close, editData, allAreas, reportType } = props
|
|||
// const [excuteTimeOptions, setExcuteTimeOptions] = useState([])
|
|||
// const formRef = useRef()
|
|||
// const { report } = actions
|
|||
|
|||
// useEffect(() => {
|
|||
// let excuteTimeOptions = []
|
|||
// for (let i = 0; i < 24; i++) {
|
|||
// let curT = i
|
|||
// if (curT < 10) {
|
|||
// curT = '0' + curT
|
|||
// }
|
|||
// excuteTimeOptions.push({
|
|||
// value: curT + ':00',
|
|||
// label: curT + ':00',
|
|||
// })
|
|||
// excuteTimeOptions.push({
|
|||
// value: curT + ':30',
|
|||
// label: curT + ':30',
|
|||
// })
|
|||
// }
|
|||
// setExcuteTimeOptions(excuteTimeOptions);
|
|||
// }, [])
|
|||
|
|||
// return (
|
|||
// <Modal
|
|||
// title={`${editData ? '编辑' : '新增'}报表配置`}
|
|||
// visible={visible}
|
|||
// onOk={() => {
|
|||
// formRef.current.validateFields().then(v => {
|
|||
// v.excuteTime = String(v.excuteTime)
|
|||
// console.log(v);
|
|||
// dispatch(editData ? report.editReportConfig(v, editData.id) : report.addReportConfig(v)).then(res => {
|
|||
// if (res.success) {
|
|||
// dispatch(report.getReportConfig())
|
|||
// close()
|
|||
// }
|
|||
// })
|
|||
// })
|
|||
// }}
|
|||
// onCancel={() => {
|
|||
// close()
|
|||
// }}
|
|||
// >
|
|||
// <ProForm
|
|||
// formRef={formRef}
|
|||
// autoFocusFirstInput
|
|||
// layout={'horizontal'}
|
|||
// labelCol={{ span: 4 }}
|
|||
// wrapperCol={{ span: 18 }}
|
|||
// initialValues={
|
|||
// editData ?
|
|||
// editData :
|
|||
// {
|
|||
// excuteTime: '00:00',
|
|||
// isEnable: true
|
|||
// }
|
|||
// }
|
|||
// submitter={false}
|
|||
// formKey='config-form'
|
|||
// >
|
|||
// <ProFormText
|
|||
// name={'reportName'}
|
|||
// label="报表名称"
|
|||
// placeholder="请输入名称"
|
|||
// required
|
|||
// rules={[{ required: true, message: '请输入名称' }]}
|
|||
// />
|
|||
// <ProFormSelect
|
|||
// options={reportType}
|
|||
// cacheForSwr
|
|||
// name="reportTypeId"
|
|||
// label="报表类型"
|
|||
// required
|
|||
// rules={[{ required: true, message: '请选择报表类型' }]}
|
|||
// />
|
|||
// <ProFormSelect
|
|||
// options={
|
|||
// allAreas.map(a => {
|
|||
// return {
|
|||
// value: a.id,
|
|||
// label: a.name,
|
|||
// }
|
|||
// })}
|
|||
// cacheForSwr
|
|||
// name="regionId"
|
|||
// label="区域"
|
|||
// required
|
|||
// rules={[{ required: true, message: '请选择区域' }]}
|
|||
// />
|
|||
// <Form.Item name="isEnable" label="状态" valuePropName="checked">
|
|||
// <Switch checkedChildren="启用" unCheckedChildren="禁用" />
|
|||
// </Form.Item>
|
|||
// <ProFormSelect
|
|||
// options={excuteTimeOptions}
|
|||
// addonBefore={'每天'}
|
|||
// addonAfter={'时'}
|
|||
// cacheForSwr
|
|||
// name="excuteTime"
|
|||
// label="生成时间"
|
|||
// />
|
|||
// </ProForm>
|
|||
// </Modal>
|
|||
// )
|
|||
// }
|
|||
|
|||
// function mapStateToProps (state) {
|
|||
// const { auth, global, allAreas } = state;
|
|||
// console.log(allAreas);
|
|||
// return {
|
|||
// user: auth.user,
|
|||
// actions: global.actions,
|
|||
// allAreas: allAreas.data || []
|
|||
// };
|
|||
// }
|
|||
|
|||
// export default connect(mapStateToProps)(ConfigModal);
|
|||
File diff suppressed because it is too large
File diff suppressed because it is too large
@ -1,124 +0,0 @@ |
|||
// import React from 'react';
|
|||
// import { connect } from 'react-redux';
|
|||
// import { Spin, Table } from 'antd';
|
|||
// import { ModalForm } from '@ant-design/pro-form';
|
|||
// import moment from 'moment';
|
|||
// const UserModal = (props) => {
|
|||
// const { visible, onVisibleChange } = props
|
|||
// const datas = props.modalRecord || {}
|
|||
// const scopeOfExamination = { ...datas }.hiddenDangerItem12
|
|||
// const arr = [
|
|||
// ' 1、合用场所的所有权人、使用人是否遵守消防法律、法规、规章;',
|
|||
// ' 2、住宿场所是否违规搭建；',
|
|||
// ' 3、合用场所是否配置灭火器、消防应急照明等消防器材和设施；',
|
|||
// ' 4、合用场所的电器产品的安装、使用及其线路和管路的设计、敷设、维护保养、检测，是否符合消防技术标准和管理规定；',
|
|||
// ' 5、合用场所住宿是否超过2人;(judge_0) 若超过，人员住宿是否设置在首层，并直通室外安全出口；(judge_1)',
|
|||
// ' 6、电动自行车是否违规室内充电、停放;',
|
|||
// ' 7、合用场所是否违规生产、储存、经营易燃易爆危险品;',
|
|||
// ' 8、合用场所除厨房外是否违规使用或者放置瓶装液化石油气、可燃液体;',
|
|||
// ' 9、放置瓶装液化石油气的厨房是否采取防火分隔措施，并设置自然排风窗;',
|
|||
// ' 10、合用场所疏散通道、安全出口是否保持畅通;',
|
|||
// ' 11、合用场所的外窗或阳台是否设置金属栅栏;(judge_0) 若设置，是否能从内部易于开启。(judge_1)',
|
|||
// ' 12、存在其他安全隐患;',
|
|||
// ]
|
|||
// const columns = [
|
|||
// {
|
|||
// title: '场所名称',
|
|||
// dataIndex: 'reportName',
|
|||
// hideInSearch: true,
|
|||
// render: () => {
|
|||
// return <div>{datas.placeName}</div>
|
|||
// }
|
|||
// }, {
|
|||
// title: '场所基本情况',
|
|||
// dataIndex: 'reportName',
|
|||
// hideInSearch: true,
|
|||
// render: () => {
|
|||
// return <div>
|
|||
// <li>使用性质：{datas.placeType}</li>
|
|||
// <li>地址：{datas.address}</li>
|
|||
// <li>负责人：{datas.placeOwner}</li>
|
|||
// <li>电话：{datas.phone}</li>
|
|||
// <li>面积：{datas.dimension}</li>
|
|||
// <li>层数：{datas.floors}</li>
|
|||
// <li>常驻人口:{datas.numberOfPeople}</li>
|
|||
// </div>
|
|||
// }
|
|||
// }, {
|
|||
// title: '检查内容',
|
|||
// dataIndex: 'reportName',
|
|||
// hideInSearch: true,
|
|||
// render: () => {
|
|||
// return datas.hiddenDangerItem12 ?
|
|||
// scopeOfExamination.map((item, index) => {
|
|||
// let message = arr[index]
|
|||
// if (arr[index].indexOf('judge_') > -1) {
|
|||
// if (item.child && item.child.itemIndex) {
|
|||
// message = message.replace(`judge_${item.child.itemIndex}`, item.child.value ? "是" : "否")
|
|||
// } else {
|
|||
// message = message.replace(`judge_1`, '---')
|
|||
// }
|
|||
|
|||
// if (arr[index].indexOf('judge_0') > -1) {
|
|||
// return <li key={index}>{message.replace(`judge_0`, item.value ? "是" : "否")}</li>
|
|||
// }
|
|||
// }
|
|||
// return <li key={index}>{message}({item.value ? "是" : "否"})</li>
|
|||
// })
|
|||
// : '---'
|
|||
// }
|
|||
// }, {
|
|||
// title: '存在具体问题',
|
|||
// dataIndex: 'reportName',
|
|||
// hideInSearch: true,
|
|||
// render: () => {
|
|||
// return <div>{datas.description ? datas.description : '---'}</div>
|
|||
// }
|
|||
// },
|
|||
// ]
|
|||
// const data = [
|
|||
// {
|
|||
// key: '1',
|
|||
|
|||
// address: 'New York No. 1 Lake Park',
|
|||
// tags: ['nice', 'developer'],
|
|||
// },
|
|||
// ];
|
|||
// return (
|
|||
// <Spin spinning={false}>
|
|||
// <ModalForm
|
|||
// width={'90rem'}
|
|||
// visible={visible}
|
|||
// onVisibleChange={onVisibleChange}
|
|||
// submitter={false}
|
|||
// >
|
|||
// <div style={{ width:'71vw'}}><span style={{ fontSize: '16px' }}>排查单位：{(datas || {}).checkAreaName || ''}</span>
|
|||
// <span style={{ fontSize: '16px', float:'right',marginBottom:'10px'}}>填报日期：{moment((datas || {}).time).format('YYYY-MM-DD') || ''}</span><span style={{clear:'both'}}></span></div>
|
|||
// <Table columns={columns} dataSource={data} width={'50rem'} pagination={false}
|
|||
|
|||
// />
|
|||
// <div style={{ width:'71vw',marginTop:'10px'}}>
|
|||
// <span style={{ fontSize: '16px' }}>排查人：{(datas || {}).checkUserName || ''}</span>
|
|||
// <span style={{ fontSize: '16px',float:'right' }}>手机号：{(datas || {}).checkUserPhone || ''}</span></div>
|
|||
// </ModalForm>
|
|||
// </Spin>
|
|||
// )
|
|||
// }
|
|||
// function mapStateToProps (state) {
|
|||
// const { depMessage } = state;
|
|||
// const pakData = (dep) => {
|
|||
// return dep.map((d) => {
|
|||
// return {
|
|||
// title: d.name,
|
|||
// value: d.id,
|
|||
// children: pakData(d.subordinate)
|
|||
// }
|
|||
// })
|
|||
// }
|
|||
// let depData = pakData(depMessage.data || [])
|
|||
// return {
|
|||
// loading: depMessage.isRequesting,
|
|||
// depData,
|
|||
// };
|
|||
// }
|
|||
// export default connect(mapStateToProps)(UserModal);
|
|||
@ -0,0 +1,203 @@ |
|||
import React, { useEffect, useRef } from 'react' |
|||
import * as echarts from 'echarts'; |
|||
|
|||
const Leftbottomecharts = () => { |
|||
const chartRef = useRef(null); |
|||
useEffect(() => { |
|||
var chartInstance = echarts.init(chartRef.current); |
|||
var colorArray = [ |
|||
{ |
|||
top: "#1978E5", //黄
|
|||
bottom: "#10274B", |
|||
}, |
|||
{ |
|||
top: "#C31E00", //绿
|
|||
bottom: "#10274B", |
|||
}, |
|||
{ |
|||
top: "#00B5E0 ", //蓝
|
|||
bottom: "#10274B", |
|||
}, |
|||
{ |
|||
top: "#19E5D6", //深蓝
|
|||
bottom: "#10274B", |
|||
}, |
|||
// {
|
|||
// top: "#b250ff", //粉
|
|||
// bottom: "rgba(11,42,84,.3)",
|
|||
// },
|
|||
]; |
|||
const option = { |
|||
tooltip: { |
|||
show: true, |
|||
formatter: "{b}:{c}", |
|||
}, |
|||
grid: { |
|||
left: "5%", |
|||
top: "12%", |
|||
right: "1%", |
|||
bottom: "8%", |
|||
containLabel: true, |
|||
}, |
|||
|
|||
xAxis: { |
|||
type: "value", |
|||
show: true, |
|||
position: "bottom", |
|||
axisTick: { |
|||
show: true, |
|||
lineStyle: { |
|||
color: "rgba(176,215,255,0.25)", |
|||
// type: "dashed",
|
|||
}, |
|||
}, |
|||
axisLine: { |
|||
show: false, |
|||
lineStyle: { |
|||
color: "rgba(216,240,255,0.8000)", |
|||
}, |
|||
}, |
|||
splitLine: { |
|||
show: true, |
|||
lineStyle: { |
|||
color: "rgba(176,215,255,0.25)", |
|||
type: "dashed", |
|||
}, |
|||
}, |
|||
}, |
|||
yAxis: [ |
|||
{ |
|||
type: "category", |
|||
axisTick: { |
|||
show: false, |
|||
alignWithLabel: false, |
|||
length: 5, |
|||
}, |
|||
splitLine: { |
|||
//网格线
|
|||
show: false, |
|||
}, |
|||
inverse: "true", //排序
|
|||
// nameTextStyle: {
|
|||
// color: ["rgba(216,240,255,0.8)"],
|
|||
// },
|
|||
axisLine: { |
|||
// show: true,
|
|||
lineStyle: { |
|||
color: "rgba(216,240,255,0.8000)", |
|||
width: 2, |
|||
}, |
|||
}, |
|||
data: ["客运车", "危险货运", "出租车", "公交"], |
|||
}, |
|||
], |
|||
series: [ |
|||
{ |
|||
type: "bar", |
|||
barWidth: 10, |
|||
barGap: "100%", |
|||
// zlevel: 1,
|
|||
barCategoryGap: "50%", |
|||
color: "#042B7F", |
|||
data: [150, 150, 150, 150], |
|||
tooltip: { |
|||
show: false, |
|||
}, |
|||
}, |
|||
{ |
|||
name: "能耗值", |
|||
type: "bar", |
|||
// zlevel: 2,
|
|||
barWidth: 10, |
|||
barGap: "-100%", |
|||
barCategoryGap: "50%", |
|||
data: [60, 132, 89, 134], |
|||
markPoint: { |
|||
Symbol: "",/* 可以通过’image: *///url’设置为图片，其中url为图片的链接
|
|||
data: [{ type: "max", name: "最大值" }], |
|||
}, |
|||
itemStyle: { |
|||
normal: { |
|||
show: true, |
|||
color: function (params) { |
|||
let num = colorArray.length; |
|||
return { |
|||
type: "linear", |
|||
colorStops: [ |
|||
{ |
|||
offset: 0, |
|||
color: colorArray[params.dataIndex % num].bottom, |
|||
}, |
|||
{ |
|||
offset: 1, |
|||
color: colorArray[params.dataIndex % num].top, |
|||
}, |
|||
{ |
|||
offset: 0, |
|||
color: colorArray[params.dataIndex % num].bottom, |
|||
}, |
|||
{ |
|||
offset: 1, |
|||
color: colorArray[params.dataIndex % num].top, |
|||
}, |
|||
{ |
|||
offset: 0, |
|||
color: colorArray[params.dataIndex % num].bottom, |
|||
}, |
|||
{ |
|||
offset: 1, |
|||
color: colorArray[params.dataIndex % num].top, |
|||
}, |
|||
{ |
|||
offset: 0, |
|||
color: colorArray[params.dataIndex % num].bottom, |
|||
}, |
|||
{ |
|||
offset: 1, |
|||
color: colorArray[params.dataIndex % num].top, |
|||
}, |
|||
{ |
|||
offset: 0, |
|||
color: colorArray[params.dataIndex % num].bottom, |
|||
}, |
|||
{ |
|||
offset: 1, |
|||
color: colorArray[params.dataIndex % num].top, |
|||
}, |
|||
{ |
|||
offset: 0, |
|||
color: colorArray[params.dataIndex % num].bottom, |
|||
}, |
|||
{ |
|||
offset: 1, |
|||
color: colorArray[params.dataIndex % num].top, |
|||
}, |
|||
], |
|||
globalCoord: false, |
|||
}; |
|||
}, |
|||
barBorderRadius: 70, |
|||
borderWidth: 0, |
|||
borderColor: "#333", |
|||
}, |
|||
}, |
|||
}, |
|||
], |
|||
}; |
|||
chartInstance.setOption(option); |
|||
window.onresize = function () { |
|||
chartInstance.resize(); |
|||
} |
|||
}, []); |
|||
|
|||
|
|||
return ( |
|||
<> |
|||
<div ref={chartRef} style={{ |
|||
height: "20vh", width: "100%" |
|||
}}></div> |
|||
</> |
|||
); |
|||
} |
|||
|
|||
export default Leftbottomecharts |
|||
@ -0,0 +1,59 @@ |
|||
import React, { useState, useEffect } from 'react' |
|||
import Lunbotop from "./lunbo" |
|||
|
|||
const Bottomlunbo = () => { |
|||
const [list, setList] = useState([ |
|||
{ name: "南昌宁昌物流运输有限公司" }, |
|||
{ name: "南昌宁昌物流运输有限公司" }, |
|||
{ name: "南昌宁昌物流运输有限公司" }, |
|||
{ name: "南昌宁昌物流运输有限公司" }, |
|||
{ name: "南昌宁昌物流运输有限公司" }, |
|||
{ name: "南昌宁昌物流运输有限公司" }, |
|||
{ name: "南昌宁昌物流运输有限公司" }, |
|||
{ name: "南昌宁昌物流运输有限公司" }, |
|||
{ name: "南昌宁昌物流运输有限公司" }, |
|||
{ name: "南昌宁昌物流运输有限公司" }, |
|||
{ name: "南昌宁昌物流运输有限公司" }, |
|||
{ name: "南昌宁昌物流运输有限公司" }, |
|||
{ name: "南昌宁昌物流运输有限公司" }, |
|||
{ name: "南昌宁昌物流运输有限公司" }, |
|||
{ name: "南昌宁昌物流运输有限公司" }, |
|||
{ name: "南昌宁昌物流运输有限公司" }, |
|||
]) |
|||
const renderBody = () => { |
|||
return ( |
|||
<div style={{ width: "100%", height: "100%" }}> |
|||
{ |
|||
list.map((item, index) => { |
|||
return <div style={{ fontSize: "14px", color: "#FFFFFF" }}>{item.name}</div> |
|||
}) |
|||
} |
|||
</div> |
|||
) |
|||
} |
|||
return ( |
|||
<> |
|||
<div style={{ |
|||
width: "100%", |
|||
height: "50%", |
|||
}}> |
|||
<div style={{ width: "100%", height: "10%", fontSize: "16px", color: "#FFFFFF", marginLeft: "10%", fontFamily: "PingFangSC-Medium, PingFang SC", }}> |
|||
业户信息: |
|||
</div> |
|||
<div style={{ width: "40%", height: "60%", float: "left" }}> |
|||
<div style={{ width: "100%", height: "100%", position: "relative" }}> |
|||
<img src='/assets/images/leadership/di.png' style={{ width: "60%", marginLeft: "20%", marginTop: "15%" }} /> |
|||
<p style={{ fontSize: "16px", color: "#FFFFFF", fontFamily: "PingFangSC-Medium, PingFang SC", position: "absolute", top: "90%", left: "33%" }}>出租车</p> |
|||
</div> |
|||
</div> |
|||
<Lunbotop |
|||
content={renderBody()} |
|||
containerStyle={{ position: "relative", height: "100%", width: "60%", top: "8%", float: "right", marginTop: "7%" }} |
|||
divHeight={"100%"} |
|||
divId={"bottomlunbo"} |
|||
/> |
|||
</div> |
|||
</> |
|||
) |
|||
} |
|||
export default Bottomlunbo |
|||
@ -0,0 +1,180 @@ |
|||
'use strict' |
|||
import React, { Component } from 'react'; |
|||
// import { Col, Row, Tag, Tooltip } from '@douyinfe/semi-ui';
|
|||
import { Col, Row, Tag, Toolip } from 'antd'; |
|||
import './style.less'; |
|||
export default class AutoRollComponent extends Component { |
|||
|
|||
constructor(props) { |
|||
super(props); |
|||
this.scrollElem = null; |
|||
this.stopscroll = false; |
|||
this.preTop = 0; |
|||
this.cloneEle = null; |
|||
this.currentTop = 0; |
|||
this.marqueesHeight = 0; |
|||
this.interval = null; |
|||
} |
|||
|
|||
marque = (height) => { |
|||
try { |
|||
this.scrollElem = document.getElementById(this.props.divId); |
|||
this.marqueesHeight = height; |
|||
if (this.scrollElem) { |
|||
this.scrollElem.style.height = this.marqueesHeight; |
|||
this.scrollElem.style.overflow = 'hidden'; |
|||
} |
|||
|
|||
if (!this.props.closeroll) { |
|||
this.repeat() |
|||
} |
|||
} catch (e) { console.log(e) } |
|||
} |
|||
|
|||
|
|||
repeat = () => { |
|||
this.scrollElem.scrollTop = 0; |
|||
|
|||
this.interval = setInterval(() => { |
|||
if (this.stopscroll) return; |
|||
this.currentTop = this.currentTop + 1; |
|||
this.preTop = this.scrollElem.scrollTop; |
|||
this.scrollElem.scrollTop = this.scrollElem.scrollTop + 1; |
|||
if (this.preTop === this.scrollElem.scrollTop) { |
|||
this.scrollElem.scrollTop = this.marqueesHeight; |
|||
this.scrollElem.scrollTop = this.scrollElem.scrollTop + 1; |
|||
} |
|||
}, 80); |
|||
} |
|||
|
|||
|
|||
componentWillUnmount() { |
|||
clearInterval(this.interval); |
|||
} |
|||
|
|||
componentDidMount() { |
|||
this.marque(10); |
|||
} |
|||
|
|||
onMouseOver = () => { |
|||
this.stopscroll = true; |
|||
} |
|||
|
|||
onMouseOut = () => { |
|||
this.stopscroll = false; |
|||
} |
|||
|
|||
loadDataColumn = (c, index, q) => { |
|||
const { changeStyleCol, heads, spans, data, showWord, color, dataTextAlign, customColorBox, } = this.props; |
|||
if (c === changeStyleCol) { |
|||
if (color) { |
|||
<span style={{ color: q.changeColor }}>{q.data[index]}</span> |
|||
} else { |
|||
if (['时间'].indexOf(c) != -1) { |
|||
return <span style={{ fontFamily: 'liquidCrystal' }}>{q.data[index]}</span> |
|||
} |
|||
// if (c.indexOf("时间") == -1) {
|
|||
// if (customColorBox) {
|
|||
// return <DashBorder boxStyle={{ textAlign: 'center', background: q.boxColor, width: 58, height: 18, display: 'inline-block', fontSize: 12 }} content={q.data[index]} borderStyle={{ borderColor: q.changeColor, width: 4, height: 4 }} />
|
|||
// }
|
|||
// if (q.data[index].length > showWord) {
|
|||
// return <Tooltip key={index} position="top" content={q.data[index]}>{q.data[index].substring(0, showWord) + '...'}</Tooltip>
|
|||
// } else {
|
|||
// return <span className='margin-left-5' style={{ fontFamily: 'liquidCrystal' }}>{q.data[index]}</span>
|
|||
// }
|
|||
// }
|
|||
} |
|||
|
|||
} else { |
|||
if (c.indexOf("时间") == -1) |
|||
if (q.data[index].length > showWord) { |
|||
return <Tooltip key={index} position="top" content={q.data[index]}>{q.data[index].substring(0, showWord) + '...'}</Tooltip> |
|||
} |
|||
return <span className='margin-left-5'>{q.data[index]}</span> |
|||
} |
|||
|
|||
// c === changeStyleCol ?
|
|||
// color ?
|
|||
// <span style={{ color: q.changeColor }}>{q.data[index]}</span>
|
|||
// : q.levelbg ?
|
|||
// q.isSiteAlermListMock ? <span style={extraStyle}>已处理</span> :
|
|||
// <span style={{ color: q.changeColor, background: `url('/assets/images/ui/${q.levelbg}.png') no-repeat`, backgroundSize: '100% 100%', textAlign: 'left', fontFamily: 'liquidCrystal', padding: '3px 10px' }}>{q.data[index]}</span>
|
|||
// : <Tag color={q.changeColor}>{q.data[index]}</Tag>
|
|||
|
|||
|
|||
// : ['时间'].indexOf(c) != -1 ? !customColorBox ? <span style={{ fontFamily: 'liquidCrystal' }}>{q.data[index]}</span> :
|
|||
// <DashBorder boxStyle={{ textAlign: 'center', background: q.boxColor }} content={q.data[index]} borderStyle={{ borderColor: color }} />
|
|||
|
|||
// : c.indexOf("时间") == -1 && q.data[index].length > showWord ?
|
|||
// <Tooltip placement="top" title={q.data[index]} className='margin-left-5'>{q.data[index].substring(0, showWord) + '...'}</Tooltip>
|
|||
// : <span className='margin-left-5' style={{ fontFamily: 'liquidCrystal' }}>{q.data[index]}</span>
|
|||
} |
|||
|
|||
getContent = () => { |
|||
const { changeStyleCol, heads, spans, data, showWord, color, dataTextAlign, customColorBox, } = this.props; |
|||
let result = <div></div>; |
|||
if (data) { |
|||
result = data.map((q, idx) => { |
|||
return ( |
|||
<div key={idx}> |
|||
<Row gutter={16} style={{ |
|||
height: 40, |
|||
//background: idx % 2 == 0 ? 'url(/assets/images/ui/roll1.png) no-repeat' : 'url(/assets/images/ui/roll2.png) no-repeat',
|
|||
background: idx % 2 == 0 ? 'rgba(22,70,116,0.32)' : '', |
|||
backgroundSize: '100% 100%', |
|||
whiteSpace: 'nowrap', |
|||
fontSize: 16 |
|||
}}> |
|||
{q.data[1] == -1 ? null : heads.map((c, index) => { |
|||
let extraStyle = {} |
|||
if (q.isSiteAlermListMock && c == "状态") { |
|||
extraStyle = { color: "green" } |
|||
} |
|||
|
|||
return <Col span={spans[index]} key={index} style={{ |
|||
// padding: `8px 0px 0px ${titleLeft && c != changeStyleCol ? 12 : index == 0 ? 8 : 0}px`,
|
|||
paddingLeft: index == 0 ? 20 : c != changeStyleCol ? 10 : 'auto', paddingTop: 8, paddingRight: 0, |
|||
textAlign: dataTextAlign ? dataTextAlign : 'left', textOverflow: 'ellipsis', overflow: 'hidden', |
|||
color: `${c === changeStyleCol ? q.changeColor : ''}` |
|||
}}> |
|||
{ |
|||
this.loadDataColumn(c, index, q) |
|||
} |
|||
</Col> |
|||
}) |
|||
} |
|||
</Row> |
|||
</div> |
|||
) |
|||
}) |
|||
} else { |
|||
result = <div style={{ textAlign: 'center', padding: 20, color: '#fff', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}> |
|||
<span></span> |
|||
</div> |
|||
} |
|||
return result; |
|||
} |
|||
|
|||
render() { |
|||
|
|||
const { heads, spans, divId, divHeight, content, color, titleLeft, containerStyle = {} } = this.props; |
|||
return ( |
|||
<div style={{ ...containerStyle, textAlign: 'left', }}> |
|||
{heads ? |
|||
<Row className={'bg-row'} style={{ lineHeight: '40px', height: 40, fontSize: 16, wordBreak: 'keep-all', whiteSpace: 'nowrap', textAlign: titleLeft ? 'left' : 'center', paddingLeft: titleLeft ? 5 : 0 }}> |
|||
{heads.map((c, index) => { |
|||
return <Col style={{ color: color ? color : '#fff', paddingLeft: titleLeft ? 10 : 'auto' }} span={spans[index]} key={index}>{c}</Col> |
|||
}) |
|||
} |
|||
</Row> |
|||
: ''} |
|||
<div id={divId} className={'hidden-scroll-bar-y'} style={{ overflow: 'hidden', height: divHeight }} onMouseOver={this.onMouseOver} onMouseOut={this.onMouseOut}> |
|||
<div style={{ height: '100%' }}> |
|||
{content ? content : ''} |
|||
{this.getContent()} |
|||
</div> |
|||
</div> |
|||
</div > |
|||
) |
|||
} |
|||
} |
|||
@ -0,0 +1,6 @@ |
|||
.hidden-scroll-bar-y{ |
|||
overflow-y: scroll !important; |
|||
scrollbar-width: none !important; |
|||
} |
|||
|
|||
.hidden-scroll-bar-y::-webkit-scrollbar { width: 0 !important } |
|||
@ -0,0 +1,57 @@ |
|||
import React, { useState, useEffect } from 'react' |
|||
import Lunbotop from "./lunbo" |
|||
|
|||
const Toplunbo = () => { |
|||
const [list, setList] = useState([ |
|||
{ name: "南昌宁昌物流运输有限公司" }, |
|||
{ name: "南昌宁昌物流运输有限公司" }, |
|||
{ name: "南昌宁昌物流运输有限公司" }, |
|||
{ name: "南昌宁昌物流运输有限公司" }, |
|||
{ name: "南昌宁昌物流运输有限公司" }, |
|||
{ name: "南昌宁昌物流运输有限公司" }, |
|||
{ name: "南昌宁昌物流运输有限公司" }, |
|||
{ name: "南昌宁昌物流运输有限公司" }, |
|||
{ name: "南昌宁昌物流运输有限公司" }, |
|||
{ name: "南昌宁昌物流运输有限公司" }, |
|||
{ name: "南昌宁昌物流运输有限公司" }, |
|||
{ name: "南昌宁昌物流运输有限公司" }, |
|||
{ name: "南昌宁昌物流运输有限公司" }, |
|||
{ name: "南昌宁昌物流运输有限公司" }, |
|||
{ name: "南昌宁昌物流运输有限公司" }, |
|||
{ name: "南昌宁昌物流运输有限公司" }, |
|||
]) |
|||
const renderBody = () => { |
|||
return ( |
|||
<div style={{ width: "100%", height: "100%" }}> |
|||
{ |
|||
list.map((item, index) => { |
|||
return <div style={{ fontSize: "14px", color: "#FFFFFF" }}>{item.name}</div> |
|||
}) |
|||
} |
|||
</div> |
|||
) |
|||
} |
|||
return ( |
|||
<> |
|||
<div style={{ |
|||
width: "100%", |
|||
height: "50%", |
|||
}}> |
|||
<div style={{ width: "40%", height: "60%", float: "left" }}> |
|||
<div style={{ width: "100%", height: "100%", position: "relative", top: "-30%" }}> |
|||
<img src='/assets/images/leadership/di.png' style={{ width: "60%", marginLeft: "20%" }} /> |
|||
<p style={{ fontSize: "16px", color: "#FFFFFF", fontFamily: "PingFangSC-Medium, PingFang SC", position: "absolute", top: "20%", left: "33%" }}>危险货运</p> |
|||
</div> |
|||
</div> |
|||
<Lunbotop |
|||
canScroll={true} |
|||
content={renderBody()} |
|||
containerStyle={{ position: "relative", height: "100%", width: "60%", top: "8%", float: "right" }} |
|||
divHeight={"100%"} |
|||
divId={"toplunbo1"} |
|||
/> |
|||
</div> |
|||
</> |
|||
) |
|||
} |
|||
export default Toplunbo |
|||
@ -1,13 +1,95 @@ |
|||
import React from 'react' |
|||
import React, { useEffect, useState } from 'react' |
|||
import Module from '../../../public/module' |
|||
import Lunbo from "../centerleft/lunbo/lunbo" |
|||
// import "./left.less"
|
|||
|
|||
const Leftcenter = () => { |
|||
const style = { height: "30%", marginTop: "5%" } |
|||
// const hualun = "auto"
|
|||
const [num, setNum] = useState(1); |
|||
const [tu, setTu] = useState(""); |
|||
const [name, setName] = useState(""); |
|||
const [list, setList] = useState([ |
|||
{ name: '静夜思', img: "/assets/images/leadership/shiyantu.png" }, |
|||
{ name: '唐-李白', img: "/assets/images/leadership/shiyantu.png" }, |
|||
{ name: '窗前明月光', img: "/assets/images/leadership/shiyantu.png" }, |
|||
{ name: '疑是地上霜', img: "/assets/images/leadership/shiyantu.png" }, |
|||
{ name: '举头望明月', img: "/assets/images/leadership/shiyantu.png" }, |
|||
{ name: '低头思故乡', img: "/assets/images/leadership/shiyantu.png" }, |
|||
{ name: '静夜思', img: "/assets/images/leadership/shiyantu.png" }, |
|||
{ name: '唐-李白', img: "/assets/images/leadership/shiyantu.png" }, |
|||
{ name: '窗前明月光', img: "/assets/images/leadership/shiyantu.png" }, |
|||
{ name: '疑是地上霜', img: "/assets/images/leadership/shiyantu.png" }, |
|||
{ name: '举头望明月', img: "/assets/images/leadership/shiyantu.png" }, |
|||
{ name: '低头思故乡', img: "/assets/images/leadership/shiyantu.png" }, |
|||
]) |
|||
useEffect(() => { |
|||
const timer = setInterval(() => { |
|||
if (num == 12) { |
|||
setNum(1); |
|||
setTu(list[0].img); |
|||
} else { |
|||
setNum(num + 1); |
|||
setTu(list[num].img); |
|||
} |
|||
}, 6000); |
|||
return () => clearInterval(timer); |
|||
}, [num]); |
|||
const renderBody = () => { |
|||
return ( |
|||
<div style={{ width: "100%", height: "55%" }}>{ |
|||
list.map((item, index) => { |
|||
return ( |
|||
// <div style={{ width: "100%", height: "100%" }} >
|
|||
// {/* <div style={{ width: "100%", height: "100%", }}> */}
|
|||
<li style={{ height: "20px", width: "100%", marginTop: index == 0 ? "4px" : "5px", listStyle: "none", backgroundColor: "pink" }} onMouseEnter={() => { |
|||
setTu(item.img); |
|||
setNum(index + 1); |
|||
setName(item.name) |
|||
// console.log(list);
|
|||
}}>{item.name}</li> |
|||
// {/* </div> */}
|
|||
// </div>
|
|||
) |
|||
|
|||
}) |
|||
} |
|||
</div > |
|||
) |
|||
} |
|||
return ( |
|||
<> |
|||
<Module style={style}> |
|||
<div style={{ width: "100%", height: "40px"/* , backgroundColor: "#fff" */, position: "relative" }}> |
|||
{/* <p>{title || []}</p> */} |
|||
<img src='/assets/images/quanju/icon.png' style={{ width: "24px", position: "absolute", left: "1%", top: "30%" }} /> |
|||
<span style={{ position: "absolute", color: "#FFFFFF", fontSize: "24px", fontFamily: "YouSheBiaoTiHei", left: "10%" }}>主要路段拥堵情况分析</span> |
|||
<img src='/assets/images/leadership/zibiaoti.png' style={{ width: "95%", height: "28px", position: "absolute", top: "12px", left: "6%" }} /> |
|||
</div> |
|||
<div style={{ width: "100%", height: "100%", marginTop: "3%" }}> |
|||
<div style={{ width: "60%", height: "100%", float: "left", marginLeft: "1%" }}> |
|||
{ |
|||
list.map((item, index) => { |
|||
return index + 1 == num ? |
|||
<div style={{ width: "100%", height: "100%", position: "relative" }}> |
|||
<img style={{ width: "100%", position: "absolute", bottom: "5%" }} src={item.img} /> |
|||
<p style={{ |
|||
width: "100%", height: "3vh", position: "absolute", bottom: "3%", |
|||
backgroundColor: "rgba(0,0,0,0.26)", lineHeight: "3vh", textAlign: "" |
|||
}}><span style={{ marginLeft: "13%", color: "#FFFFFF", fontSize: "12px", fontFamily: "PingFangSC-Regular, PingFang SC", fontWeight: 400 }}>{item.name}</span></p> |
|||
</div> : "" |
|||
|
|||
}) |
|||
|
|||
</Module> |
|||
} |
|||
</div> |
|||
<Lunbo |
|||
canScroll={true} |
|||
content={renderBody()} |
|||
containerStyle={{ position: "relative", height: "100%", width: "35%", float: "right", marginRight: "2%", marginTop: "1%" }} |
|||
divHeight={"100%"} |
|||
divId={"screen-slope-midde-top-jiangxi"} |
|||
/> |
|||
</div> |
|||
</> |
|||
) |
|||
} |
|||
|
|||
@ -0,0 +1,3 @@ |
|||
li{ |
|||
list-style-type:none |
|||
} |
|||
@ -0,0 +1,139 @@ |
|||
'use strict' |
|||
import React, { Component } from 'react'; |
|||
import { Row, Col } from 'antd'; |
|||
|
|||
export default class AutoRollComponent extends Component { |
|||
|
|||
constructor(props) { |
|||
super(props); |
|||
this.scrollElem = null; |
|||
this.stopscroll = false; |
|||
this.preTop = 0; |
|||
this.cloneEle = null; |
|||
this.currentTop = 0; |
|||
this.marqueesHeight = 0; |
|||
this.interval = null; |
|||
this.state = { |
|||
enabledScroll: false |
|||
} |
|||
} |
|||
|
|||
get enabledScroll() { |
|||
let scrollElem = document.getElementById(this.props.divId); |
|||
let fatherElem = scrollElem?.parentNode || null; |
|||
if (scrollElem && fatherElem) { |
|||
return scrollElem.scrollHeight > fatherElem.scrollHeight |
|||
} |
|||
|
|||
return false; |
|||
} |
|||
|
|||
|
|||
marque = (height) => { |
|||
try { |
|||
this.scrollElem = document.getElementById(this.props.divId); |
|||
this.marqueesHeight = height; |
|||
if (this.scrollElem) { |
|||
this.scrollElem.style.height = this.marqueesHeight; |
|||
this.scrollElem.style.overflow = 'hidden'; |
|||
} |
|||
this.repeat(); |
|||
} catch (e) { console.log(e) } |
|||
} |
|||
|
|||
|
|||
repeat = () => { |
|||
this.scrollElem.scrollTop = 0; |
|||
let offset = 1.5 |
|||
|
|||
this.interval = setInterval(() => { |
|||
if (this.stopscroll) return; |
|||
this.currentTop = this.currentTop + offset; |
|||
this.preTop = this.scrollElem.scrollTop; |
|||
this.scrollElem.scrollTop = this.scrollElem.scrollTop + offset; |
|||
// console.log(`this.scrollElem.scrollTop:${this.scrollElem.scrollTop} === this.preTop:${this.preTop}`);
|
|||
if (this.preTop === this.scrollElem.scrollTop) { |
|||
this.scrollElem.scrollTop = this.marqueesHeight; |
|||
this.scrollElem.scrollTop = this.scrollElem.scrollTop + offset; |
|||
} |
|||
}, 40); |
|||
} |
|||
|
|||
|
|||
componentWillUnmount() { |
|||
clearInterval(this.interval); |
|||
} |
|||
|
|||
componentWillReceiveProps(nextProps) { |
|||
requestAnimationFrame(() => { |
|||
if (this.enabledScroll) { |
|||
if (!this.state.enabledScroll) { |
|||
this.setState({ enabledScroll: true }, () => { |
|||
this.marque(10) |
|||
}) |
|||
} |
|||
|
|||
} |
|||
}) |
|||
} |
|||
|
|||
componentDidMount() { |
|||
if (this.enabledScroll) { |
|||
this.setState({ enabledScroll: true }, () => { |
|||
this.marque(10) |
|||
}) |
|||
} |
|||
} |
|||
|
|||
onMouseOver = () => { |
|||
this.stopscroll = true; |
|||
} |
|||
|
|||
onMouseOut = () => { |
|||
this.stopscroll = false; |
|||
} |
|||
|
|||
|
|||
render() { |
|||
|
|||
const { changeStyleCol, heads, spans, data, divId, divHeight, content, containerStyle = {} } = this.props; |
|||
|
|||
return ( |
|||
<div style={{ ...containerStyle, textAlign: 'left' }}> |
|||
{ |
|||
heads ? |
|||
<Row style={{ lineHeight: '40px', height: 40 }}> |
|||
{heads.map((c, index) => { |
|||
return <Col span={spans[index]} key={index}>{c}</Col> |
|||
}) |
|||
} |
|||
</Row> : '' |
|||
} |
|||
|
|||
<div id={divId} style={{ overflow: 'hidden', height: divHeight }} onMouseOver={this.onMouseOver} onMouseOut={this.onMouseOut}> |
|||
<div> |
|||
{content ? content : ''} |
|||
{this.state.enabledScroll && content ? content : ''} |
|||
{ |
|||
data ? |
|||
data.map((q, idx) => { |
|||
return ( |
|||
<div key={idx}> |
|||
<Row gutter={16} style={{ borderBottom: '0px solid grey' }}> |
|||
{heads.map((c, index) => { |
|||
return <Col span={spans[index]} key={index} style={{ paddingTop: 8, textAlign: 'left', wordBreak: 'break-word', color: `${c === changeStyleCol ? q.changeColor : ''}` }}> |
|||
{index == 1 ? q.data[index] == -1 ? "-" : q.data[index] : index == 2 ? q.data[1] == -1 ? '-' : q.data[index] : q.data[index]}</Col> |
|||
}) |
|||
} |
|||
</Row> |
|||
</div> |
|||
) |
|||
}) : '' |
|||
} |
|||
<div style={{ margin: 16 }}></div> |
|||
</div> |
|||
</div> |
|||
</div > |
|||
) |
|||
} |
|||
} |
|||
@ -0,0 +1,25 @@ |
|||
#scroll-2::-webkit-scrollbar{ |
|||
width:4px; |
|||
height:4px; |
|||
} |
|||
#scroll-2::-webkit-scrollbar-track{ |
|||
background: #f6f6f6; |
|||
border-radius:2px; |
|||
} |
|||
#scroll-2::-webkit-scrollbar-thumb{ |
|||
background: #aaa; |
|||
border-radius:2px; |
|||
} |
|||
#scroll-2::-webkit-scrollbar-thumb:hover{ |
|||
background: #747474; |
|||
} |
|||
#scroll-2::-webkit-scrollbar-corner{ |
|||
background: #f6f6f6; |
|||
} |
|||
#screen-slope-midde-top-jiangxi{ |
|||
& > div > div{ |
|||
&:first-child{ |
|||
margin-bottom: 1px; |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,139 @@ |
|||
'use strict' |
|||
import React, { Component } from 'react'; |
|||
import { Row, Col } from 'antd'; |
|||
|
|||
export default class AutoRollComponent extends Component { |
|||
|
|||
constructor(props) { |
|||
super(props); |
|||
this.scrollElem = null; |
|||
this.stopscroll = false; |
|||
this.preTop = 0; |
|||
this.cloneEle = null; |
|||
this.currentTop = 0; |
|||
this.marqueesHeight = 0; |
|||
this.interval = null; |
|||
this.state = { |
|||
enabledScroll: false |
|||
} |
|||
} |
|||
|
|||
get enabledScroll() { |
|||
let scrollElem = document.getElementById(this.props.divId); |
|||
let fatherElem = scrollElem?.parentNode || null; |
|||
if (scrollElem && fatherElem) { |
|||
return scrollElem.scrollHeight > fatherElem.scrollHeight |
|||
} |
|||
|
|||
return false; |
|||
} |
|||
|
|||
|
|||
marque = (height) => { |
|||
try { |
|||
this.scrollElem = document.getElementById(this.props.divId); |
|||
this.marqueesHeight = height; |
|||
if (this.scrollElem) { |
|||
this.scrollElem.style.height = this.marqueesHeight; |
|||
this.scrollElem.style.overflow = 'hidden'; |
|||
} |
|||
this.repeat(); |
|||
} catch (e) { console.log(e) } |
|||
} |
|||
|
|||
|
|||
repeat = () => { |
|||
this.scrollElem.scrollTop = 0; |
|||
let offset = 1.5 |
|||
|
|||
this.interval = setInterval(() => { |
|||
if (this.stopscroll) return; |
|||
this.currentTop = this.currentTop + offset; |
|||
this.preTop = this.scrollElem.scrollTop; |
|||
this.scrollElem.scrollTop = this.scrollElem.scrollTop + offset; |
|||
// console.log(`this.scrollElem.scrollTop:${this.scrollElem.scrollTop} === this.preTop:${this.preTop}`);
|
|||
if (this.preTop === this.scrollElem.scrollTop) { |
|||
this.scrollElem.scrollTop = this.marqueesHeight; |
|||
this.scrollElem.scrollTop = this.scrollElem.scrollTop + offset; |
|||
} |
|||
}, 300000); |
|||
} |
|||
|
|||
|
|||
componentWillUnmount() { |
|||
clearInterval(this.interval); |
|||
} |
|||
|
|||
componentWillReceiveProps(nextProps) { |
|||
requestAnimationFrame(() => { |
|||
if (this.enabledScroll) { |
|||
if (!this.state.enabledScroll) { |
|||
this.setState({ enabledScroll: true }, () => { |
|||
this.marque(10) |
|||
}) |
|||
} |
|||
|
|||
} |
|||
}) |
|||
} |
|||
|
|||
componentDidMount() { |
|||
if (this.enabledScroll) { |
|||
this.setState({ enabledScroll: true }, () => { |
|||
this.marque(10) |
|||
}) |
|||
} |
|||
} |
|||
|
|||
onMouseOver = () => { |
|||
this.stopscroll = true; |
|||
} |
|||
|
|||
onMouseOut = () => { |
|||
this.stopscroll = false; |
|||
} |
|||
|
|||
|
|||
render() { |
|||
|
|||
const { changeStyleCol, heads, spans, data, divId, divHeight, content, containerStyle = {} } = this.props; |
|||
|
|||
return ( |
|||
<div style={{ ...containerStyle, textAlign: 'left' }}> |
|||
{ |
|||
heads ? |
|||
<Row style={{ lineHeight: '40px', height: 40 }}> |
|||
{heads.map((c, index) => { |
|||
return <Col span={spans[index]} key={index}>{c}</Col> |
|||
}) |
|||
} |
|||
</Row> : '' |
|||
} |
|||
|
|||
<div id={divId} style={{ overflow: 'hidden', height: divHeight }} onMouseOver={this.onMouseOver} onMouseOut={this.onMouseOut}> |
|||
<div> |
|||
{content ? content : ''} |
|||
{this.state.enabledScroll && content ? content : ''} |
|||
{ |
|||
data ? |
|||
data.map((q, idx) => { |
|||
return ( |
|||
<div key={idx}> |
|||
<Row gutter={16} style={{ borderBottom: '0px solid grey' }}> |
|||
{heads.map((c, index) => { |
|||
return <Col span={spans[index]} key={index} style={{ paddingTop: 8, textAlign: 'left', wordBreak: 'break-word', color: `${c === changeStyleCol ? q.changeColor : ''}` }}> |
|||
{index == 1 ? q.data[index] == -1 ? "-" : q.data[index] : index == 2 ? q.data[1] == -1 ? '-' : q.data[index] : q.data[index]}</Col> |
|||
}) |
|||
} |
|||
</Row> |
|||
</div> |
|||
) |
|||
}) : '' |
|||
} |
|||
<div style={{ margin: 16 }}></div> |
|||
</div> |
|||
</div> |
|||
</div > |
|||
) |
|||
} |
|||
} |
|||
File diff suppressed because one or more lines are too long
Loading…
Reference in new issue