You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
169 lines
6.4 KiB
169 lines
6.4 KiB
import React from 'react'
|
|
import { Box, AutoRollComponent, NoData } from '$components';
|
|
// import ReactEcharts from 'echarts-for-react';
|
|
import { Progress } from 'antd';
|
|
|
|
function PopulationDynamics(props) {
|
|
const { fireDevice } = props;
|
|
const total = fireDevice.reduce((p, n) => p + n.device_count, 0);
|
|
|
|
// let Ydata = fireDevice.map(d => d.type_name);
|
|
// let Xdata = fireDevice.map(d => d.device_count);
|
|
// const options = {
|
|
// xAxis: {
|
|
// type: 'value',
|
|
// show: false,
|
|
// },
|
|
// grid: {
|
|
// left: -10,
|
|
// top: 20,
|
|
// bottom: 0,
|
|
// right: 20,
|
|
// containLabel: true,
|
|
// },
|
|
// yAxis: [
|
|
// {
|
|
// type: 'category',
|
|
// inverse: true,
|
|
// axisLabel: {
|
|
// show: true,
|
|
// margin: 25,
|
|
// // textStyle: {
|
|
// color: '#ECF7FF',
|
|
// fontSize: 12,
|
|
// // },
|
|
// // 调整左侧文字的3个属性，缺一不可
|
|
// verticalAlign: 'center',
|
|
// align: 'left',
|
|
// //调整文字上右下左
|
|
// padding: [0, 0, 0, -30],
|
|
// },
|
|
// splitLine: {
|
|
// show: false,
|
|
// },
|
|
// axisTick: {
|
|
// show: false,
|
|
// },
|
|
// axisLine: {
|
|
// show: false,
|
|
// },
|
|
// data: Ydata
|
|
// },
|
|
// {
|
|
// inverse: true,
|
|
// // y轴最右侧的文字
|
|
// axisTick: "none",
|
|
// axisLine: "none",
|
|
// type: "category",
|
|
// axisLabel: {
|
|
// // margin: 10,
|
|
// // textStyle: {
|
|
// color: "#24DCF7",
|
|
// fontSize: "12",
|
|
// // },
|
|
// rich: {
|
|
|
|
// a1: {
|
|
// color: '#24DCF7',
|
|
// width: 5,
|
|
// height: 5,
|
|
// fontSize: 16,
|
|
// },
|
|
// a2: {
|
|
// color: '#5999C8',
|
|
// width: 5,
|
|
// height: 5,
|
|
// fontSize: 12,
|
|
// },
|
|
// },
|
|
// formatter: function (value) {
|
|
// return [`{a1|${value}} {a2|个}`];
|
|
// },
|
|
// },
|
|
// data: Xdata,
|
|
// },
|
|
// ],
|
|
// series: [
|
|
// {
|
|
// type: 'bar',
|
|
// barWidth: 12,
|
|
// zlevel: 2,
|
|
// z: 2,
|
|
// showBackground: true,
|
|
// backgroundStyle: {
|
|
// color: '#2B375C'
|
|
// },
|
|
// color: '#005AC6',
|
|
|
|
// label: {
|
|
// show: false,
|
|
|
|
// },
|
|
// data: Xdata,
|
|
// },
|
|
// {
|
|
// type: "pictorialBar",
|
|
// // symbol: 'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADoAAAA6CAMAAADWZboaAAAAZlBMVEUAAABe3uVe3+Vf3uVf3+Zf3uVg3+Zg3+Zf3+Vi4OZh4OZg3+Z86/Bh3+Zi4Odj4Odi4OZ86/B76/B86/Bj4ed56+9x5+xn4umB7/N87PB36e+A7/N+7fF/7vJ/7vJ+7fGA7/OB7/PReX+lAAAAIXRSTlMABQkVDREmIhk3MR10LEFFPHh7cUprXE35h2XnqMLAp+mHAG9cAAAB5ElEQVRIx83WjU7CMBQFYIoiKMqU/XUboHv/l/Tce7t2XamDNSacETEmX86tlK2rx4py150o+MstMBLwWRfHKo6JCVxLnvmFGBjFQ58oF1//sUZhGy/ClSTWObgnL4O+bkeN4nY2okfNMbkRt9/vtxz8InoTsWplJSCzFxPmO8+GpSIByX3YQAuGDWtRKhKjCnxDXhF6Z4yxnZ20Wgko7BMRDmxtSGVaI4kdTIgb+zTYoJQlIMlDlmUFgrcDWWC201qSayqlTkiCddWWeV62VU0YlnpRi9VOKaSUsiyq/N0krwq2Ugt7lVpZl5BfHNiytjagMi+XYp0kCR45hMlivVQrE/uU5pXSrCB5bM6d1t2lOZItMqmliT3q5uVxqxzyW/ccfYLNKx7ZTeykMvNyac2yt2Fbc61MHLSC0rwoxbiNdlQ3GBm1NLHQsHUrtEXppR/ljNpW6DbSCoqlFiVoN6YdaFlgsSFVPs1BdT8OaB5QyQzVcaqWDows/zepxR8ObLglTrdtCRVuRNj4Rrxh+//0ke2f8KVL+Kon3GCSbmsJN9OUW3j6g0Ns+LgCij2u0h+Sghc8mlMPBMgdx5DFh59VmOVHrvmDnoNxCz3J7MFWsMuaLyR089xz/xhlfijvwutR8gv3zk6BLUUeCgAAAABJRU5ErkJggg==',
|
|
// symbolSize: [15, 15],
|
|
// symbolOffset: [0, 0],
|
|
// symbolPosition: "right",
|
|
// z: 20,
|
|
// zlevel: 20,
|
|
// itemStyle: {
|
|
// // normal: {
|
|
// color: "#fff"
|
|
// // }
|
|
// },
|
|
// data: (function () {
|
|
// var list = [];
|
|
// for (var i = 0; i < Xdata.length; i++) {
|
|
// list.push(2.02 * Xdata[i]);
|
|
// }
|
|
// console.log(list)
|
|
// return list;
|
|
// })()
|
|
// },
|
|
// ],
|
|
// };
|
|
|
|
const getContent = () => {
|
|
return <div className='fire-device'>{
|
|
fireDevice.map(d => <div className='fire-device-item'>
|
|
<div className='_name'>{d.type_name}</div>
|
|
<div className='_progress'>
|
|
<Progress
|
|
percent={(d.device_count / total) * 100}
|
|
showInfo={false}
|
|
strokeWidth={12}
|
|
strokeColor='#005AC6'
|
|
trailColor='#2B375C'
|
|
strokeLinecap="butt"
|
|
/>
|
|
<div className='_round' style={{
|
|
position: 'absolute',
|
|
left: `calc(${(d.device_count / total) * 100}% - 6px)`,
|
|
}}></div>
|
|
</div>
|
|
<div className='_count'>{d.device_count}<span className='_unit'>个</span></div>
|
|
</div>)
|
|
}</div>
|
|
// <ReactEcharts
|
|
// option={options}
|
|
// notMerge
|
|
// lazyUpdate
|
|
// style={{ height: 250, width: 423 }}
|
|
// />
|
|
}
|
|
|
|
return <Box title={"接入消防设备"} >
|
|
{
|
|
fireDevice.length
|
|
? <AutoRollComponent canScroll={true} content={getContent()} divHeight={250} divId={`fire-left-middle`} />
|
|
: <NoData height={250} />
|
|
}
|
|
</Box>
|
|
}
|
|
|
|
export default PopulationDynamics;
|
|
|
|
|
|
|