dts-city-ui

DTS城市组件

注意事项

• 需要设置root元素的字体大小 例如: 2880分辨率需设置为288px
• 只用于vue框架

安装

npm i dts-city-ui --save

main.js

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
// 导入组件库
import DtsUI from 'dts-city-ui'
// 导入css
import 'dts-city-ui/style.css'

const app = createApp(App)
app.use(DtsUI)
app.mount('#app')

使用

分析运行状况事件

使用

<dts-ahe/>

配置

字段	配置内容	默认值
width	组件宽度	400
height	组件高度	200
legend	标题标签名称	['职业中毒', '传染病疫情', '中大食物中毒']
data	数据	[60, 40, 20]

停车场情况

使用

<dts-clc/>

配置

字段	配置内容	默认值
width	组件宽度	400
height	组件高度	250
yAxis	y轴数据	['停车场1', '停车场2', '停车场3', '停车场4', '停车场5']
data	数据	[ [29, 19, 26, 44, 20], [38, 36, 44, 33, 20], [33, 45, 30, 23, 60], [33, 45, 30, 23, 60] ]

表格

使用

<dts-dt/>

配置

字段	配置内容	默认值
width	组件宽度	400
height	组件高度	250
headerNames	表头	[ { prop: 'time', label: '发生时间' }, { prop: 'name', label: '地点' }, { prop: 'congestionDuration', label: '拥堵时长' }, { prop: 'status', label: '等级' } ]
data	数据	[ { time: '2023-5-22', name: '运城大道', congestionDuration: '60min', status: 2 }, { time: '2023-5-22', name: '长青街', congestionDuration: '60min', status: 0 }, { time: '2023-5-22', name: '新建路', congestionDuration: '60min', status: 1 }, { time: '2023-5-22', name: '世纪大道', congestionDuration: '60min', status: 2 }, { time: '2023-5-22', name: '建设北路', congestionDuration: '60min', status: 1 }, { time: '2023-5-22', name: '运城大道', congestionDuration: '60min', status: 2 }, { time: '2023-5-22', name: '长青街', congestionDuration: '60min', status: 0 }, { time: '2023-5-22', name: '新建路', congestionDuration: '60min', status: 1 }, { time: '2023-5-22', name: '世纪大道', congestionDuration: '60min', status: 2 }, { time: '2023-5-22', name: '建设北路', congestionDuration: '60min', status: 2 } ]

经济增长

使用

<dts-eg/>

配置

字段	配置内容	默认值
width	组件宽度	400
height	组件高度	250
name	x轴数据	['垣曲市', '盐湖区', '永济市', '河津市', '稷山县']
seriesName1	数据1名称	一月
seriesName2	数据2名称	二月
january	一月数据	[120, 84, 81, 54, 47]
february	二月数据	[73, 54, 61, 54, 27]

经济运行

使用

<dts-eo/>

配置

字段	配置内容	默认值
width	组件宽度	400
economicList	数据	[ { title: 'GDP总额', num: 27670, unit: '亿元' }, { title: '居民人均收入', num: 6.48, unit: '万元' }, { title: '固定资产投资', num: 500, unit: '万元' }, { title: '全市税收收入', num: 8596.8, unit: '亿元' } ]

企业发展

使用

<dts-ed/>

配置

字段	配置内容	默认值
width	组件宽度	400
height	组件高度	250
names	名称	['大型企业', '中型企业', '小型企业']
data	数据	[1025, 4221, 4000]

事件报警

使用

<dts-ed/>

配置

字段	配置内容	默认值
width	组件宽度	350
eventNum	办结率	90
yearOnYear	同比	2.3
monthOnMonth	环比	5
echartsWidth	echarts宽度	400
echartsHeight	echarts高度	150
data	数据	[ { name: '街面秩序', value: 100 }, { name: '施工管理', value: 100 }, { name: '突发事件', value: 100 }, { name: '市容环境', value: 100 }, { name: '宣传广告', value: 100 } ]
title	表格标题	占比
num	占比率	55%

意外损失

使用

<dts-lba/>

配置

字段	配置内容	默认值
width	组件宽度	400
height	组件高度	300
xAxisData	x轴数据	['2023-1', '2023-2', '2023-3', '2023-4', '2023-5', '2023-6', '2023-7', '2023-8', '2023-9', '2023-10', '2023-11', '2023-12']
data	数据	[10, 52, 200, 334, 390, 330, 220, 200, 334, 390, 330, 220]

消费品销售

使用

<dts-scg/>

配置

字段	配置内容	默认值
width	组件宽度	400
height	组件高度	250
xAxisData	x轴数据	['1月1日', '1月2日', '1月3日', '1月4日', '1月5日', '1月6日', '1月7日', '1月8日', '1月9日', '1月10日', '1月11日', '1月12日']
data	数据	[220, 215, 210, 220, 225, 210, 226, 235, 212, 225, 220, 236]

滚动列表

使用

<dts-so/>

配置

字段	配置内容	默认值
width	组件宽度	350
height	组件高度	360
overviewInfoList	数据	[ { count: '882.89', info: '建筑用地规模', unit: '公顷' }, { count: '882.89', info: '城市发展目标', unit: '公顷' }, { count: '882.89', info: '城市建设边界', unit: '公顷' }, { count: '4754.98', info: '土地规模', unit: '公顷' }, { count: 12027.5, info: '经济规模', unit: '亿元' }, { count: 933.6, info: '人口规模', unit: '万人' }, { count: 796.93, info: '居住用地', unit: '公顷' }, { count: 647.38, info: '商业服务设施', unit: '公顷' }, { count: 7.73, info: '交通设施', unit: '%' }, { count: '882.89', info: '城市发展目标', unit: '公顷' }, { count: '882.89', info: '城市建设边界', unit: '公顷' }, { count: '4754.98', info: '土地规模', unit: '公顷' }, { count: 12027.5, info: '经济规模', unit: '亿元' }, { count: 933.6, info: '人口规模', unit: '万人' }, { count: 796.93, info: '居住用地', unit: '公顷' }, { count: 647.38, info: '商业服务设施', unit: '公顷' }, { count: 7.73, info: '交通设施', unit: '%' } ]

交通数据感知

使用

<dts-tda/>

配置

字段	配置内容	默认值
width	组件宽度	400
trafficList	数据	[ { title: '交通拥堵指数', num: 3.3, unit: '' }, { title: '拥堵里程', num: 4.5, unit: 'km' }, { title: '拥堵路段总数', num: 32, unit: '个' }, { title: '平均拥堵时长', num: 25, unit: 'min' } ]

对外贸易额

使用

<dts-vft/>

配置

字段	配置内容	默认值
width	组件宽度	400
height	组件高度	250
xAxisData	x轴数据	['01', '02', '03', '04', '05', '06']
exportVolume	出口量	[70, 69, 95, 145, 184, 215]
importVolume	进口量	[39, 42, 57, 85, 119, 152]