diff --git a/src/assets/images/新闻_o.png b/src/assets/images/News.png similarity index 100% rename from src/assets/images/新闻_o.png rename to src/assets/images/News.png diff --git a/src/assets/images/质量管理新.png b/src/assets/images/Quality.png similarity index 100% rename from src/assets/images/质量管理新.png rename to src/assets/images/Quality.png diff --git a/src/assets/images/安全管理.png b/src/assets/images/Safety.png similarity index 100% rename from src/assets/images/安全管理.png rename to src/assets/images/Safety.png diff --git a/src/assets/images/画板 11.png b/src/assets/images/danggerNum.png similarity index 100% rename from src/assets/images/画板 11.png rename to src/assets/images/danggerNum.png diff --git a/src/assets/images/分组 28.png b/src/assets/images/li.png similarity index 100% rename from src/assets/images/分组 28.png rename to src/assets/images/li.png diff --git a/src/assets/images/画板 14.png b/src/assets/images/qualityLogo.png similarity index 100% rename from src/assets/images/画板 14.png rename to src/assets/images/qualityLogo.png diff --git a/src/assets/images/画板 12.png b/src/assets/images/record.png similarity index 100% rename from src/assets/images/画板 12.png rename to src/assets/images/record.png diff --git a/src/assets/images/画板 13.png b/src/assets/images/situation.png similarity index 100% rename from src/assets/images/画板 13.png rename to src/assets/images/situation.png diff --git a/src/assets/images/时间.png b/src/assets/images/timeIcon.png similarity index 100% rename from src/assets/images/时间.png rename to src/assets/images/timeIcon.png diff --git a/src/assets/images/分组 25.png b/src/assets/images/分组 25.png deleted file mode 100644 index 05d06f3..0000000 Binary files a/src/assets/images/分组 25.png and /dev/null differ diff --git a/src/assets/images/分组 55.png b/src/assets/images/分组 55.png deleted file mode 100644 index 7331a4f..0000000 Binary files a/src/assets/images/分组 55.png and /dev/null differ diff --git a/src/assets/images/分组 86.png b/src/assets/images/分组 86.png deleted file mode 100644 index 32c3246..0000000 Binary files a/src/assets/images/分组 86.png and /dev/null differ diff --git a/src/views/gisHome/component/leftMain.vue b/src/views/gisHome/component/leftMain.vue index c94d6b2..17608de 100644 --- a/src/views/gisHome/component/leftMain.vue +++ b/src/views/gisHome/component/leftMain.vue @@ -18,7 +18,7 @@
- +

总人数

259人
@@ -67,6 +67,7 @@
+
@@ -79,9 +80,9 @@ import * as echarts from 'echarts'; type EChartsOption = echarts.EChartsOption; const initMachinerycharts = () => { - var chartDom = document.getElementById('machineryMain'); - var myMachineryChart = echarts.init(chartDom); - var option: EChartsOption; + let chartDom = document.getElementById('machineryMain'); + let myMachineryChart = echarts.init(chartDom); + let option: EChartsOption; // prettier-ignore let dataAxis = ['水泥机', '搅拌机', '拖拉机', '推土机', '推土机', '推土机','推土机', ]; @@ -140,7 +141,7 @@ const initMachinerycharts = () => { type: 'slider', xAxisIndex: 0, // 滚动条背景颜色 - backgroundColor: 'rgba(8, 14, 15, 1)', + backgroundColor: 'rgba(8, 14, 15, .3)', // 选中区域的背景颜色 fillerColor: { type: 'linear', @@ -160,16 +161,33 @@ const initMachinerycharts = () => { ], global: false // 缺省为 false }, - + showDataShadow: false, // 手柄大小 handleSize: 0, showDetail: false, //即拖拽时候是否显示详细数值信息 默认true moveHandleSize: 0, //移动手柄的大小 // 滚动条高度 - height: 10, + height: 12, borderRadius: 8, + borderColor: 'rgba(8, 14, 15, .3)', // 滚动条与图表的距离 - bottom: 10, + bottom: 5, + handleSize: 5, + // dataZoom-slider组件离容器下侧的距离 + // bottom: 0, + // 两侧缩放手柄的 icon 形状 + handleIcon: + 'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5M36.9,35.8h-1.3z M27.8,35.8 h-1.3H27L27.8,35.8L27.8,35.8z', // 画一个圆形 + handleStyle: { + borderWidth: 5, + borderCap: 'round', + borderRadius: 20, // 设置滑块的圆角大小 + color: 'rgba(27,90,169,1)', // 设置滑块的颜色 + shadowBlur: 3, // 设置滑块阴影的模糊大小 + shadowColor: 'rgba(0, 0, 0, 0.6)', // 设置滑块阴影的颜色 + shadowOffsetX: 1, // 设置滑块阴影的水平偏移 + shadowOffsetY: 2 // 设置滑块阴影的垂直偏移 + }, start: 0, // 计算初始结束百分比 end: (6 / data.length) * 100 @@ -196,7 +214,14 @@ const initMachinerycharts = () => { }; const initOrderChart = () => { - const option = { + let chartDom = document.getElementById('orderMain'); + let myMachineryChart = echarts.init(chartDom); + let option: EChartsOption; + + // prettier-ignore + let data = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']; + + option = { tooltip: { trigger: 'axis', axisPointer: { @@ -204,25 +229,174 @@ const initOrderChart = () => { type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow' } }, - legend: {}, + legend: { + left: 'right', //位置 + icon: 'roundRect', //形状 类型包括 circle，rect,line，roundRect，triangle，diamond，pin，arrow，none + itemWidth: 15, // 设置宽度 + itemHeight: 4, // 设置高度 + itemGap: 27, // 设置间距 + top: 10, // 设置圆角 + data: ['入库量', '领用量'], + textStyle: { + //文字样式 + color: '#B4CEFF', + fontSize: '12' + } + }, grid: { left: '3%', right: '4%', - bottom: '3%', - containLabel: true + bottom: '0', + containLabel: true, + width: '90%' }, xAxis: { - type: 'value' + type: 'value', + show: false }, yAxis: { type: 'category', - data: ['Mon', 'Tue', 'Wed', 'Thu'], + data, + offset: 60, + axisLine: { + show: false + }, + axisTick: { + show: false + }, + inverse: true, axisLabel: { formatter: function (value, index) { - return '' + value; // 不进行任何格式化 + return `{${data[index]}|No.${index + 1}} {value|${value}}`; + }, + align: 'left', + color: 'rgba(230, 247, 255, 1)', + rich: { + Mon: { + color: 'rgba(230, 247, 255, 1)', + fontSize: 12, + align: 'center', + width: 31, + height: 23, + backgroundColor: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ + { offset: 0, color: 'rgba(255, 208, 59, 1)' }, + { offset: 1, color: 'rgba(255, 208, 59, 0)' } + ]) + }, + Tue: { + color: 'rgba(230, 247, 255, 1)', + fontSize: 12, + align: 'left', + width: 31, + height: 23, + backgroundColor: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ + { offset: 0, color: 'rgba(31, 189, 237, 1)' }, + { offset: 1, color: 'rgba(31, 189, 237, 0)' } + ]) + }, + Wed: { + color: 'rgba(230, 247, 255, 1)', + fontSize: 12, + align: 'left', + width: 31, + height: 23, + backgroundColor: new echarts.graphic.LinearGradient(0, 0, 1, 0, [ + { offset: 0, color: 'rgba(67, 226, 203, 1)' }, + { offset: 1, color: 'rgba(67, 226, 203, 0)' } + ]) + } } } }, + dataZoom: [ + { + // 设置滚动条的隐藏或显示 + show: true, + // 设置类型 + type: 'slider', + // 设置背景颜色 + backgroundColor: 'rgba(8, 14, 15, .3)', + + // 设置选中范围的填充颜色 + fillerColor: { + type: 'linear', + x: 0, + y: 0, + x2: 0, + y2: 1, + colorStops: [ + { + offset: 0, + color: 'rgba(67, 226, 203, .5)' // 0% 处的颜色 + }, + { + offset: 1, + color: 'rgba(21, 181, 230, .5)' // 100% 处的颜色 + } + ], + global: false // 缺省为 false + }, + borderColor: 'rgba(8, 14, 15, .3)', + borderCap: 'round', + // 是否显示detail，即拖拽时候显示详细数值信息 + showDetail: false, + // handleSize: 0, + moveHandleSize: 0, //移动手柄的大小 + borderRadius: 20, //滚动条圆角 + // 数据窗口范围的起始数值 + startValue: 0, + // 数据窗口范围的结束数值（一页显示多少条数据） + endValue: 4, + handleSize: 5, + // dataZoom-slider组件离容器下侧的距离 + // bottom: 0, + // 两侧缩放手柄的 icon 形状 + handleIcon: + 'path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5M36.9,35.8h-1.3z M27.8,35.8 h-1.3H27L27.8,35.8L27.8,35.8z', // 画一个圆形 + handleStyle: { + borderWidth: 5, + borderCap: 'round', + borderRadius: 20, // 设置滑块的圆角大小 + color: 'rgba(27,90,169,1)', // 设置滑块的颜色 + shadowBlur: 3, // 设置滑块阴影的模糊大小 + shadowColor: 'rgba(0, 0, 0, 0.6)', // 设置滑块阴影的颜色 + shadowOffsetX: 1, // 设置滑块阴影的水平偏移 + shadowOffsetY: 2 // 设置滑块阴影的垂直偏移 + }, + // 控制哪个轴，如果是number表示控制一个轴， + // 如果是Array表示控制多个轴。此处控制第二根轴 + yAxisIndex: [0, 1], + // empty：当前数据窗口外的数据，被设置为空。 + // 即不会影响其他轴的数据范围 + filterMode: 'empty', + // 滚动条高度 + width: 12, + // 滚动条显示位置 + height: '70%', + // 距离右边 + right: 5, + showDataShadow: false, //是否显示数据阴影 默认auto + // 组件离容器上侧的距离 + // 如果top的值为'top', 'middle', 'bottom'，组件会根据相应的位置自动对齐 + top: 'middle' + }, + { + // 没有下面这块的话，只能拖动滚动条， + // 鼠标滚轮在区域内不能控制外部滚动条 + type: 'inside', + // 控制哪个轴，如果是number表示控制一个轴， + // 如果是Array表示控制多个轴。此处控制第二根轴 + yAxisIndex: [0, 1], + width: 20, + // 滚轮是否触发缩放 + zoomOnMouseWheel: false, + // 鼠标移动能否触发平移 + moveOnMouseMove: true, + // 鼠标滚轮能否触发平移 + moveOnMouseWheel: true + } + ], + series: [ { name: '入库量', @@ -234,16 +408,8 @@ const initOrderChart = () => { emphasis: { focus: 'series' }, - data: [320, 302, 301, 334], - label: { - show: true, - position: 'insideBottomRight', - distance: 52, - align: 'left', - verticalAlign: 'middle', - rotate: 0, - fontSize: 16 - } + data: [320, 302, 301, 334, 345, 356, 367], + barWidth: '3px' }, { name: '领用量', @@ -255,15 +421,21 @@ const initOrderChart = () => { emphasis: { focus: 'series' }, - data: [120, 132, 101, 134], - barWidth: '3px' + data: [120, 132, 101, 134, 152, 103, 150], + showBackground: true, + barWidth: '3px', + backgroundStyle: { + color: 'rgba(217, 231, 255, 0.1)' + } } ] }; + option && myMachineryChart.setOption(option); }; onMounted(() => { initMachinerycharts(); + initOrderChart(); }); @@ -276,6 +448,12 @@ onMounted(() => { margin-left: 14px; margin-bottom: vh(30); } + +#orderMain { + width: 100%; + padding-right: 14px; + height: vh(300); +} .title { > img { width: 14px; diff --git a/src/views/gisHome/component/rightMain.vue b/src/views/gisHome/component/rightMain.vue index 48e5d9e..9a00e91 100644 --- a/src/views/gisHome/component/rightMain.vue +++ b/src/views/gisHome/component/rightMain.vue @@ -1,7 +1,740 @@ - + + +