mt-fe-group
/
yudao-init
7
0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

修改滚动条样式及导出

pull/69/head
‘937886381’ 2 months ago
parent
f7b151f9aa
commit
fb74340f0f
5 changed files with 182 additions and 155 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +16
    -8
      src/views/copilot/components/FactoryDataHeader.vue
  2. +28
    -8
      src/views/report/components/produceLineBar.vue
  3. +46
    -46
      src/views/report/components/produceLineBarTarget.vue
  4. +46
    -46
      src/views/report/components/produceLineBarYearTarget.vue
  5. +46
    -47
      src/views/report/components/produceLineYieldBarTarget.vue

+ 16
- 8
src/views/copilot/components/FactoryDataHeader.vue View File

@@ -63,14 +63,22 @@ export default {
computed: {},
methods: {
handleExport() {
exportFactoryDataExcel({
factoryId: this.companyId,
timeSelection: this.period === 1 ? 0 : this.period === 2 ? 1 : this.period === 3 ? 2 : 3,
compare: this.than === '同比' ? 1 : 2
}).then(response => {
this.$download.excel(response, `${this.companyName}生产数据.xls`);
// this.exportLoading = false;
}).catch(() => { });
if (this.period != 1) {
exportFactoryDataExcel({
factoryId: this.companyId,
timeSelection: this.period === 1 ? 0 : this.period === 2 ? 1 : this.period === 3 ? 2 : 3,
compare: this.than === '同比' ? 1 : 2
}).then(response => {
this.$download.excel(response, `${this.companyName}生产数据.xls`);
// this.exportLoading = false;
}).catch(() => { });
} else {
this.$message({
type: 'warning',
message: '为日的情况下没有导出功能',
})
}

},
toggleFullScreen() {
this.isFullscreen = !this.isFullscreen;


+ 28
- 8
src/views/report/components/produceLineBar.vue View File

@@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-06-19 15:28:34
* @LastEditTime: 2024-06-26 10:42:16
* @LastEditTime: 2024-06-27 10:40:57
* @LastEditors: zhp
* @Description:
-->
@@ -87,11 +87,32 @@ export default {
// 设置滚动条类型
type: "slider",
// 设置背景颜色
backgroundColor: "rgb(19, 63, 100)",
backgroundColor: "#F7F7F7",
// handleStyle: {
// color: '#D6D6D6'
// },
handleStyle: {
borderColor: '#EBEBEB',
color: '#EBEBEB'
},
moveHandleStyle: {
borderColor: '#EBEBEB',
color: '#EBEBEB'
},
emphasis: {
handleStyle: {
borderColor: '#D6D6D6',
color: '#D6D6D6'
},
moveHandleStyle: {
borderColor: '#D6D6D6',
color: '#D6D6D6'
}
},
// 设置选中范围的填充颜色
fillerColor: "rgb(16, 171, 198)",
fillerColor: "#F7F7F7",
// 设置边框颜色
borderColor: "rgb(19, 63, 100)",
borderColor: "#F7F7F7",
// 是否显示detail，即拖拽时候显示详细数值信息
showDetail: false,
// 数据窗口范围的起始数值
@@ -102,9 +123,9 @@ export default {
// 即不会影响其他轴的数据范围
filterMode: "empty",
// 设置滚动条宽度，相对于盒子宽度
width: "50%",
width: "100%",
// 设置滚动条高度
height: 8,
height: 3,
// 设置滚动条显示位置
left: "center",
// 是否锁定选择区域（或叫做数据窗口）的大小
@@ -112,7 +133,7 @@ export default {
// 控制手柄的尺寸
handleSize: 0,
// dataZoom-slider组件离容器下侧的距离
bottom: 3,
bottom: 14,
},
{
// 没有下面这块的话，只能拖动滚动条，
@@ -124,7 +145,6 @@ export default {
moveOnMouseMove: true,
moveOnMouseWheel: true,
},

],
yAxis:undefined,
series: [],


+ 46
- 46
src/views/report/components/produceLineBarTarget.vue View File

@@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-06-20 16:13:36
* @LastEditTime: 2024-06-26 16:53:39
* @LastEditTime: 2024-06-27 09:51:43
* @LastEditors: zhp
* @Description:
-->
@@ -80,52 +80,52 @@ export default {
type: "shadow",
},
},
dataZoom: [//滚动条
{
// 设置滚动条的隐藏与显示
show: true,
// 设置滚动条类型
type: "slider",
// 设置背景颜色
backgroundColor: "rgb(19, 63, 100)",
// 设置选中范围的填充颜色
fillerColor: "rgb(16, 171, 198)",
// 设置边框颜色
borderColor: "rgb(19, 63, 100)",
// 是否显示detail，即拖拽时候显示详细数值信息
showDetail: false,
// 数据窗口范围的起始数值
startValue: 0,
// 数据窗口范围的结束数值（一页显示多少条数据）
endValue: 5,
// empty：当前数据窗口外的数据，被设置为空。
// 即不会影响其他轴的数据范围
filterMode: "empty",
// 设置滚动条宽度，相对于盒子宽度
width: "50%",
// 设置滚动条高度
height: 8,
// 设置滚动条显示位置
left: "center",
// 是否锁定选择区域（或叫做数据窗口）的大小
zoomLoxk: true,
// 控制手柄的尺寸
handleSize: 0,
// dataZoom-slider组件离容器下侧的距离
bottom: 3,
},
{
// 没有下面这块的话，只能拖动滚动条，
// 鼠标滚轮在区域内不能控制外部滚动条
type: "inside",
// 滚轮是否触发缩放
zoomOnMouseWheel: false,
// 鼠标滚轮触发滚动
moveOnMouseMove: true,
moveOnMouseWheel: true,
},
// dataZoom: [//滚动条
// {
// // 设置滚动条的隐藏与显示
// show: true,
// // 设置滚动条类型
// type: "slider",
// // 设置背景颜色
// backgroundColor: "rgb(19, 63, 100)",
// // 设置选中范围的填充颜色
// fillerColor: "rgb(16, 171, 198)",
// // 设置边框颜色
// borderColor: "rgb(19, 63, 100)",
// // 是否显示detail，即拖拽时候显示详细数值信息
// showDetail: false,
// // 数据窗口范围的起始数值
// startValue: 0,
// // 数据窗口范围的结束数值（一页显示多少条数据）
// endValue: 5,
// // empty：当前数据窗口外的数据，被设置为空。
// // 即不会影响其他轴的数据范围
// filterMode: "empty",
// // 设置滚动条宽度，相对于盒子宽度
// width: "50%",
// // 设置滚动条高度
// height: 8,
// // 设置滚动条显示位置
// left: "center",
// // 是否锁定选择区域（或叫做数据窗口）的大小
// zoomLoxk: true,
// // 控制手柄的尺寸
// handleSize: 0,
// // dataZoom-slider组件离容器下侧的距离
// bottom: 3,
// },
// {
// // 没有下面这块的话，只能拖动滚动条，
// // 鼠标滚轮在区域内不能控制外部滚动条
// type: "inside",
// // 滚轮是否触发缩放
// zoomOnMouseWheel: false,
// // 鼠标滚轮触发滚动
// moveOnMouseMove: true,
// moveOnMouseWheel: true,
// },

],
// ],
yAxis:undefined,
series: [],
},


+ 46
- 46
src/views/report/components/produceLineBarYearTarget.vue View File

@@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-06-20 16:13:52
* @LastEditTime: 2024-06-25 10:49:34
* @LastEditTime: 2024-06-27 09:55:02
* @LastEditors: zhp
* @Description:
-->
@@ -80,52 +80,52 @@ export default {
type: "shadow",
},
},
dataZoom: [//滚动条
{
// 设置滚动条的隐藏与显示
show: true,
// 设置滚动条类型
type: "slider",
// 设置背景颜色
backgroundColor: "rgb(19, 63, 100)",
// 设置选中范围的填充颜色
fillerColor: "rgb(16, 171, 198)",
// 设置边框颜色
borderColor: "rgb(19, 63, 100)",
// 是否显示detail，即拖拽时候显示详细数值信息
showDetail: false,
// 数据窗口范围的起始数值
startValue: 0,
// 数据窗口范围的结束数值（一页显示多少条数据）
endValue: 5,
// empty：当前数据窗口外的数据，被设置为空。
// 即不会影响其他轴的数据范围
filterMode: "empty",
// 设置滚动条宽度，相对于盒子宽度
width: "50%",
// 设置滚动条高度
height: 8,
// 设置滚动条显示位置
left: "center",
// 是否锁定选择区域（或叫做数据窗口）的大小
zoomLoxk: true,
// 控制手柄的尺寸
handleSize: 0,
// dataZoom-slider组件离容器下侧的距离
bottom: 3,
},
{
// 没有下面这块的话，只能拖动滚动条，
// 鼠标滚轮在区域内不能控制外部滚动条
type: "inside",
// 滚轮是否触发缩放
zoomOnMouseWheel: false,
// 鼠标滚轮触发滚动
moveOnMouseMove: true,
moveOnMouseWheel: true,
},
// dataZoom: [//滚动条
// {
// // 设置滚动条的隐藏与显示
// show: true,
// // 设置滚动条类型
// type: "slider",
// // 设置背景颜色
// backgroundColor: "rgb(19, 63, 100)",
// // 设置选中范围的填充颜色
// fillerColor: "rgb(16, 171, 198)",
// // 设置边框颜色
// borderColor: "rgb(19, 63, 100)",
// // 是否显示detail，即拖拽时候显示详细数值信息
// showDetail: false,
// // 数据窗口范围的起始数值
// startValue: 0,
// // 数据窗口范围的结束数值（一页显示多少条数据）
// endValue: 5,
// // empty：当前数据窗口外的数据，被设置为空。
// // 即不会影响其他轴的数据范围
// filterMode: "empty",
// // 设置滚动条宽度，相对于盒子宽度
// width: "50%",
// // 设置滚动条高度
// height: 8,
// // 设置滚动条显示位置
// left: "center",
// // 是否锁定选择区域（或叫做数据窗口）的大小
// zoomLoxk: true,
// // 控制手柄的尺寸
// handleSize: 0,
// // dataZoom-slider组件离容器下侧的距离
// bottom: 3,
// },
// {
// // 没有下面这块的话，只能拖动滚动条，
// // 鼠标滚轮在区域内不能控制外部滚动条
// type: "inside",
// // 滚轮是否触发缩放
// zoomOnMouseWheel: false,
// // 鼠标滚轮触发滚动
// moveOnMouseMove: true,
// moveOnMouseWheel: true,
// },

],
// ],
yAxis:undefined,
series: [],
},


+ 46
- 47
src/views/report/components/produceLineYieldBarTarget.vue View File

@@ -1,7 +1,7 @@
<!--
* @Author: zhp
* @Date: 2024-06-21 09:05:14
* @LastEditTime: 2024-06-26 14:49:15
* @LastEditTime: 2024-06-27 10:59:40
* @LastEditors: zhp
* @Description:
-->
@@ -98,52 +98,51 @@ export default {
type: "shadow",
},
},
dataZoom: [//滚动条
{
// 设置滚动条的隐藏与显示
show: true,
// 设置滚动条类型
type: "slider",
// 设置背景颜色
backgroundColor: "rgb(19, 63, 100)",
// 设置选中范围的填充颜色
fillerColor: "rgb(16, 171, 198)",
// 设置边框颜色
borderColor: "rgb(19, 63, 100)",
// 是否显示detail，即拖拽时候显示详细数值信息
showDetail: false,
// 数据窗口范围的起始数值
startValue: 0,
// 数据窗口范围的结束数值（一页显示多少条数据）
endValue: 5,
// empty：当前数据窗口外的数据，被设置为空。
// 即不会影响其他轴的数据范围
filterMode: "empty",
// 设置滚动条宽度，相对于盒子宽度
width: "50%",
// 设置滚动条高度
height: 8,
// 设置滚动条显示位置
left: "center",
// 是否锁定选择区域（或叫做数据窗口）的大小
zoomLoxk: true,
// 控制手柄的尺寸
handleSize: 0,
// dataZoom-slider组件离容器下侧的距离
bottom: 3,
},
{
// 没有下面这块的话，只能拖动滚动条，
// 鼠标滚轮在区域内不能控制外部滚动条
type: "inside",
// 滚轮是否触发缩放
zoomOnMouseWheel: false,
// 鼠标滚轮触发滚动
moveOnMouseMove: true,
moveOnMouseWheel: true,
},

],
// dataZoom: [//滚动条
// {
// // 设置滚动条的隐藏与显示
// show: true,
// // 设置滚动条类型
// type: "slider",
// // 设置背景颜色
// backgroundColor: "#F7F7F7",
// // 设置选中范围的填充颜色
// fillerColor: "#EBEBEB",
// // 设置边框颜色
// borderColor: "#F7F7F7",
// // 是否显示detail，即拖拽时候显示详细数值信息
// showDetail: false,
// // 数据窗口范围的起始数值
// startValue: 0,
// // 数据窗口范围的结束数值（一页显示多少条数据）
// endValue: 5,
// // empty：当前数据窗口外的数据，被设置为空。
// // 即不会影响其他轴的数据范围
// filterMode: "empty",
// // 设置滚动条宽度，相对于盒子宽度
// width: "100%",
// // 设置滚动条高度
// height: 8,
// // 设置滚动条显示位置
// left: "center",
// // 是否锁定选择区域（或叫做数据窗口）的大小
// zoomLoxk: true,
// // 控制手柄的尺寸
// handleSize: 0,
// // dataZoom-slider组件离容器下侧的距离
// bottom: 3,
// },
// {
// // 没有下面这块的话，只能拖动滚动条，
// // 鼠标滚轮在区域内不能控制外部滚动条
// type: "inside",
// // 滚轮是否触发缩放
// zoomOnMouseWheel: false,
// // 鼠标滚轮触发滚动
// moveOnMouseMove: true,
// moveOnMouseWheel: true,
// },
// ],
yAxis:undefined,
series: [],
},


Write Preview
Loading…
Cancel
Save