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] |