Dts-city-ui NPM

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