---
title: 实时停车资源情况数据指标
order: 27
---

## 停车解决方案-实时停车资源情况数据指标

````jsx
import React, { Component, useState } from 'react';
import ReactDOM from 'react-dom';
import echarts from 'echarts';
import moment from 'moment';
import { Switch } from '@alifd/next';
import { Text, Chart, STYLE_PREFIX } from '@linkdesign/screen';

moment.locale('zh_cn');

const { Title, Indicator, CarouselTable } = Text;
const { BarChart, BarStackChart, GaugeChart, EChart } = Chart;

const CAR_TYPE_MAP = {
  1: '#0091FF',
  2: '#F7B500',
  3: '#ffffff',
  4: '#000000',
  5: '#00D49F',
};

const ACTION_TYPE = {
  1: '进场',
  2: '离场',
};

const columns = [{
  key: 'actionTime',
  alias: '时间/状态',
  widthRate: 37,
  textStyle: {
    paddingLeft: '5px',
  },
  cell: (val, i, record) => (
    <span>
      {moment(val).format('YYYY-MM-DD HH:mm')}
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      {ACTION_TYPE[record.actionType]}
    </span>
  ),
}, {
  key: 'carNo',
  alias: '车牌号',
  widthRate: 18,
  cell: (val = '', i, record) => {
    const res = val.substring(2, 5);

    return (
      <span
        className="car-no"
        style={{
          backgroundColor: CAR_TYPE_MAP[record.carType],
          color: record.carType === 3 ? '#000' : '#fff',
        }}
      >
        {val.replace(res, '***')}
      </span>
    );
  },
}, {
  key: 'parkName',
  alias: '停车场',
  widthRate: 30,
}, {
  key: 'parkDuration',
  alias: '停车时长',
  widthRate: 15,
  cell: (val) => {
    if (val < 60) {
      return '1 分钟';
    }
    return moment.duration(val, 's').humanize();
  },
}].map(item => ({
  ...item,
  align: 'left',
}));

const App = () => {
  const [mode, setMode] = useState('screen');
  const [theme, setTheme] = useState('dark');

  const modeOnChange = (val) => {
    setMode(val ? 'dashboard' : 'screen');
  };

  const themeOnChange = (val) => {
    setTheme(val ? 'light' : 'dark');
  };

  return (
    <div
      data-mode={mode}
      data-theme={theme}
      className={`${STYLE_PREFIX}main-body container`}
    >
      <Switch
        className="large-width"
        checkedChildren="大盘"
        unCheckedChildren="大屏"
        onChange={modeOnChange}
      />

      <Switch
        className="large-width"
        checkedChildren="浅色"
        unCheckedChildren="深色"
        onChange={themeOnChange}
      />

      <section>
        <div className={`title ${STYLE_PREFIX}main-title`}>实时停车数</div>

        <div className="indicator">
          <Indicator
            label="停车位总数"
            value="2,300"
          />
          <Indicator
            label="空闲车位数"
            value="2,300"
          />
        </div>
        <BarStackChart
          title="停车位总数"
          total={100}
          dataSource={[{
            label: '图例标签指标',
            value: '40%',
            rate: 40,
          }, {
            label: '图例标签指标',
            value: '60%',
            rate: 60,
          }]}
          universalStyle={{ width: '450px' }}
          normOptions={{ widthRate: 40 }}
        />
      </section>

      <section>
        <div className={`title ${STYLE_PREFIX}main-title`}>负荷指数</div>

        <GaugeChart
          title="负荷指数"
          universalStyle={{
            width: 450,
            height: 230,
          }}
          config={{
            value: 5.4,
            limit: 6,
            min: 0,
            max: 8,
            tickInterval: 1,
            label: '良好',
          }}
        />
        <GaugeChart
          title="负荷指数"
          universalStyle={{
            width: 450,
            height: 230,
          }}
          config={{
            value: 7,
            limit: 6,
            min: 0,
            max: 8,
            tickInterval: 1,
            label: '超负荷',
            content: (val) => val.toFixed(1),
          }}
        />
      </section>

      <section>
        <div className={`title ${STYLE_PREFIX}main-title`}>余位识别准确率</div>

        <div className="s3-content">
          <Indicator
            label="余位识别准确率"
            value="85%"
            unit={<span className={`with-triangle ${STYLE_PREFIX}data`}>12%</span>}
          />
          <EChart
            universalStyle={{
              width: 176,
              height: 66,
            }}
            options={{
              xAxis: {
                show: false,
                type: 'category',
                boundaryGap: false,
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
              },
              yAxis: {
                show: false,
                type: 'value',
              },
              grid: {
                show: false,
                top: 0,
                bottom: 0,
                left: 0,
                right: 0,
              },
              series: [{
                data: [820, 932, 901, 934, 1290, 1330, 1320],
                type: 'line',
                symbol: 'none',
                lineStyle: {
                  color: '#3B81FF',
                },
                areaStyle: {
                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: 'rgba(0, 106, 204, 0.5)',
                  }, {
                    offset: 1,
                    color: 'rgba(0, 112, 204, 0)',
                  }]),
                },
              }],
            }}
          />
        </div>
      </section>

      <section>
        <div className={`title ${STYLE_PREFIX}main-title`}>驶入驶出情况</div>

        <CarouselTable
          universalStyle={{
            width: 880,
            height: 240,
          }}
          global={{
            textStyle: {
              color: '#D3E2FF',
            },
          }}
          sliderOptions={{
            slidesToShow: 5,
            // autoplay: false,
          }}
          headerOptions={{
            align: 'left',
            universalStyle: { backgroundColor: 'transparent' },
          }}
          serialNumberOptions={{ widthRate: 0 }}
          rowOptions={{
            oddBackgroundColor: '#112854',
            evenBackgroundColor: 'transparent',
          }}
          column={columns}
          dataSource={[
            {
              "actionTime":1587696039000,
              "actionType":1,
              "carNo":"鲁CH873D",
              "carType":1,
              "inTime":1587696039000,
              "parkDuration":-31,
              "parkId":382,
              "parkName":"六和金座停车场",
              "recordId":"12020042410400426385400382",
            },
            {
              "actionTime":1587695976000,
              "actionType":1,
              "carNo":"浙AEJ092",
              "carType":1,
              "inTime":1587695976000,
              "parkDuration":31,
              "parkId":260,
              "parkName":"中大银座停车场",
              "recordId":"12020042410393663629050260",
            },
            {
              "actionTime":1587695975000,
              "actionType":2,
              "carNo":"浙AGF033",
              "carType":1,
              "inTime":1587694344000,
              "outTime":1587695975000,
              "parkDuration":1631,
              "parkId":260,
              "parkName":"中大银座停车场",
              "recordId":"12020042410122501693870260",
            },
            {
              "actionTime":1587695973000,
              "actionType":1,
              "carNo":"浙A2PT66",
              "carType":1,
              "inTime":1587695973000,
              "parkDuration":34,
              "parkId":261,
              "parkName":"鹏辉产业园停车场",
              "recordId":"12020042410393402013680261",
            },
            {
              "actionTime":1587695971000,
              "actionType":2,
              "carNo":"浙AJ885N",
              "carType":1,
              "inTime":1587693297000,
              "outTime":1587695971000,
              "parkDuration":2674,
              "parkId":362,
              "parkName":"澹海金座停车场",
              "recordId":"12020042409545781394750362",
            },
            {
              "actionTime":1587695961000,
              "actionType":1,
              "carNo":"浙FS1G12",
              "carType":1,
              "inTime":1587695961000,
              "parkDuration":46,
              "parkId":358,
              "parkName":"龙轩停车场",
              "recordId":"12020042410392148052130358",
            },
            {
              "actionTime":1587695958000,
              "actionType":2,
              "carNo":"浙ADC9223",
              "carType":5,
              "inTime":1587694482000,
              "outTime":1587695958000,
              "parkDuration":1476,
              "parkId":367,
              "parkName":"之江发展大厦停车场",
              "recordId":"12020042410144185394290367",
            },
            {
              "actionTime":1587695933000,
              "actionType":1,
              "carNo":"浙ABV586",
              "carType":1,
              "inTime":1587695933000,
              "parkDuration":74,
              "parkId":260,
              "parkName":"中大银座停车场",
              "recordId":"12020042410385380139350260",
            },
            {
              "actionTime":1587695914000,
              "actionType":1,
              "carNo":"浙A92008",
              "carType":1,
              "inTime":1587695914000,
              "parkDuration":93,
              "parkId":367,
              "parkName":"之江发展大厦停车场",
              "recordId":"12020042410383472221730367",
            },
            {
              "actionTime":1587695910000,
              "actionType":1,
              "carNo":"浙A8011E",
              "carType":1,
              "inTime":1587695910000,
              "parkDuration":97,
              "parkId":261,
              "parkName":"鹏辉产业园停车场",
              "recordId":"12020042410383014770170261",
            },
          ]}
        />
      </section>

      <section>
        <div className={`title ${STYLE_PREFIX}main-title`}>停车热点排行</div>

        <CarouselTable
          universalStyle={{
            width: 475,
            height: 192,
          }}
          global={{
            textStyle: {
              fontSize: 16,
              color: '#D3E2FF',
            },
          }}
          sliderOptions={{
            slidesToShow: 5,
            autoplay: true,
          }}
          headerOptions={{
            align: 'left',
            textStyle: { color: '#FFFFFF', fontWeight: 600 },
            universalStyle: { backgroundColor: 'transparent' },
          }}
          rowOptions={{
            oddBackgroundColor: 'transparent',
            evenBackgroundColor: 'transparent',
          }}
          serialNumberOptions={{
            widthRate: 10,
            radiusRate: 50,
            textStyle: {
              fontSize: 12,
              color: '#d3e2ff',
            },
          }}
          column={[{
            key: 'area',
            alias: '停车场/路测停车名称',
            widthRate: 70,
            align: 'left',
          }, {
            key: 'pv',
            alias: '负荷指数',
            widthRate: 20,
            align: 'left',
            cell: (val) => <span className={`${STYLE_PREFIX}data`}>{val}</span>,
          }]}
          dataSource={[
            {
              "area": "停车场名称1",
              "pv": 10,
            },
            {
              "area": "停车场名称2",
              "pv": 9,
            },
            {
              "area": "停车场名称3",
              "pv": 8,
            },
            {
              "area": "停车场名称4",
              "pv": 7,
            },
            {
              "area": "停车场名称5",
              "pv": 6,
            },
            {
              "area": "停车场名称6",
              "pv": 5,
            },
            {
              "area": "停车场名称7",
              "pv": 4,
            },
            {
              "area": "停车场名称8",
              "pv": 3,
            },
          ]}
        />
      </section>

      <section>
        <BarChart
          title="停车场饱和度排名"
          universalStyle={{ width: '450px' }}
          direction="ver"
          dataSource={[{
            label: '1.停车场名称1',
            value: '80%',
            rate: 80,
          }, {
            label: '2.停车场名称2',
            value: '70%',
            rate: 70,
          }, {
            label: '3.停车场名称3',
            value: '60%',
            rate: 60,
          }, {
            label: '4.停车场名称4',
            value: '50%',
            rate: 50,
          }, {
            label: '5.停车场名称5',
            value: '40%',
            rate: 40,
          }]}
        />

        <BarChart
          title="停车场泊车活跃度排名"
          universalStyle={{ width: '450px' }}
          direction="ver"
          dataSource={[{
            label: '1.停车场名称1',
            value: '80%',
            rate: 80,
          }, {
            label: '2.停车场名称2',
            value: '70%',
            rate: 70,
          }, {
            label: '3.停车场名称3',
            value: '60%',
            rate: 60,
          }, {
            label: '4.停车场名称4',
            value: '50%',
            rate: 50,
          }, {
            label: '5.停车场名称5',
            value: '40%',
            rate: 40,
          }]}
        />

        <EChart
          title="全域车位利用率"
          universalStyle={{
            width: 450,
            height: 220,
          }}
          options={{
            tooltip: {
              trigger: 'axis',
              formatter: '时间: {b}<br />利用率: {c}%',
              axisPointer: {
                type: 'cross'
              },
            },
            xAxis: {
              type: 'category',
              boundaryGap: false,
              axisLine: {
                color: 'rgba(211, 226, 255, 0.5)',
              },
              axisTick: {
                show: false,
              },
              axisLabel: {
                color: '#D3E2FF',
                fontSize: 9.6,
              },
              data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            },
            yAxis: {
              type: 'value',
              name: '单位： %',
              min: 0,
              max: 100,
              nameTextStyle: {
                color: '#D3E2FF',
              },
              axisLine: {
                show: false,
              },
              axisLabel: {
                color: '#D3E2FF',
                fontSize: 9.6,
              },
              splitLine: {
                lineStyle: {
                  type: 'dashed',
                  color: 'rgba(211, 226, 255, 0.5)',
                },
              },
            },
            axisPointer: {
              lineStyle: {
                type: 'dashed',
              },
            },
            grid: {
              top: 30,
              bottom: 20,
            },
            series: [{
              data: [20, 32, 10, 34, 90, 30, 20],
              type: 'line',
              symbol: 'circle',
              symbolSize: 6,
              lineStyle: {
                color: '#3B81FF',
              },
              areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(0, 106, 204, 0.5)',
                }, {
                  offset: 1,
                  color: 'rgba(0, 112, 204, 0)',
                }]),
              },
            }],
          }}
        />

        <EChart
          title="停车难度预测（时间维度）"
          universalStyle={{
            width: 450,
            height: 220,
          }}
          options={{
            xAxis: {
              type: 'category',
              boundaryGap: false,
              axisLine: {
                color: 'rgba(211, 226, 255, 0.5)',
              },
              axisTick: {
                show: false,
              },
              axisLabel: {
                color: '#D3E2FF',
                fontSize: 9.6,
              },
              data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            },
            yAxis: {
              type: 'value',
              name: '单位： %',
              min: 0,
              max: 100,
              nameTextStyle: {
                color: '#D3E2FF',
              },
              axisLine: {
                show: false,
              },
              axisLabel: {
                color: '#D3E2FF',
                fontSize: 9.6,
              },
              splitLine: {
                lineStyle: {
                  type: 'dashed',
                  color: 'rgba(211, 226, 255, 0.5)',
                },
              },
            },
            axisPointer: {
              lineStyle: {
                type: 'dashed',
              },
            },
            grid: {
              top: 30,
              bottom: 20,
            },
            series: [{
              data: [20, 32, 10, 34],
              type: 'line',
              symbol: 'none',
              lineStyle: {
                color: '#3B81FF',
              },
              markLine: {
                silent: true,
                lineStyle: {
                  type: 'solid',
                  color: '#979797',
                },
                data: [{
                  name: 'X 轴值为 Thu 的水平线',
                  xAxis: 'Thu',
                }],
              },
            }, {
              data: [20, 32, 10, 34, 90, 30, 20],
              type: 'line',
              symbol: 'none',
              lineStyle: {
                color: '#3B81FF',
                type: 'dashed',
              },
            }],
          }}
        />

        <EChart
          title="停车场名称-车流走势变化特征"
          universalStyle={{
            width: 450,
            height: 220,
          }}
          options={{
            xAxis: {
              type: 'category',
              boundaryGap: false,
              axisLine: {
                color: 'rgba(211, 226,255, 0.5)',
              },
              axisTick: {
                show: false,
              },
              axisLabel: {
                color: '#D3E2FF',
                fontSize: 9.6,
              },
              data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            },
            yAxis: {
              type: 'value',
              name: '单位： 辆',
              nameTextStyle: {
                color: '#D3E2FF',
              },
              axisLine: {
                show: false,
              },
              axisLabel: {
                color: '#D3E2FF',
                fontSize: 9.6,
              },
              splitLine: {
                lineStyle: {
                  type: 'dashed',
                  color: 'rgba(211, 226,255, 0.5)',
                },
              },
            },
            axisPointer: {
              lineStyle: {
                type: 'dashed',
              },
            },
            grid: {
              top: 30,
              bottom: 20,
            },
            series: [{
              data: [820, 932, 901, 934, 1290, 1330, 1320],
              type: 'line',
              symbol: 'none',
              lineStyle: {
                color: '#3B81FF',
              },
              areaStyle: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: 'rgba(0, 54, 101, 1)',
                }, {
                  offset: 1,
                  color: 'rgba(0, 54, 102, 0.16)',
                }]),
              },
            }],
          }}
        />
      </section>
    </div>
  );
}

ReactDOM.render((
  <App />
), mountNode);
````

````css
.container[data-theme="light"] {
  background-color: #fff;
}

.container[data-theme="dark"] {
  background-color: #000;
}

.large-width {
  width: 80px;
}

.title {
  margin-bottom: 20px;
}

section {
  padding: 20px;
}

.indicator {
  width: 450px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 50px;
}

.indicator .iotx-city-indicator-wrapper {
  width: 50%;
}

.iotx-city-chart-wrapper {
  display: inline-block;
}

.s3-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 400px;
}

.with-triangle {
  display: inline-flex;
  align-items: end;
  margin-left: 5px;
}

.with-triangle::before {
  content: '';
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-bottom: 18px solid red;
  margin-right: 5px;
}

.iotx-city-carousel-table {
  font-size: 16px;
}

.car-no {
  width: 78px;
  text-align: center;
  line-height: 24px;
  border-radius: 3px;
  font-size: 14px;
}

section:nth-child(8)>div {
  margin-right: 3%;
  margin-bottom: 30px;
  display: inline-block;
  vertical-align: top;
}
````
