Skip to content

E
ec-report-refactor
Commit f72527c8 authored by lxm's avatar lxm
Browse files
Options

Merge branch 'develop' of http://106.15.103.105/lihuizhen/ec-report-refactor into develop 

# Conflicts:
#	pages/index/index.vue
parents c34d1b2d 42386398
Hide whitespace changes
Inline Side-by-side
Showing with 390 additions and 92 deletions
App.vue
View file @ f72527c8
......@@ -15,5 +15,18 @@
<style lang="scss">
@import "uview-ui/index.scss";
/*每个页面公共css */
// 轮播指示点样式
wx-swiper.tab-swiper {
.wx-swiper-dots{
bottom: 0rpx;
}
.wx-swiper-dot {
width: 8rpx;
height: 4rpx;
border-radius: 2rpx;
}
.wx-swiper-dot-active {
width: 16rpx;
}
}
</style>
components/DashboardProgress/DashboardProgress.vue
View file @ f72527c8
......@@ -47,7 +47,7 @@
canvas.setChart(chart)
let { endVal } = this.elementData.dataList
endVal = endVal || 0
const { width: pCanvasWidth, strokeColor, trailColor, titleColor, strokeWidth, gapPosition, gapDegree, strokeLinecap} = this.elementInfo.option.progress
const { width: pCanvasWidth, strokeColor, trailColor, titleColor,fontSize, strokeWidth, gapPosition, gapDegree, strokeLinecap} = this.elementInfo.option.progress
const color = [
[endVal / 100, strokeColor],
[1, trailColor]
......@@ -98,8 +98,9 @@
x: 'center',
top: 'middle',
textStyle: {
fontSize: Math.max(14 * pCanvasWidth / 132, 14),
color: titleColor,
fontSize: fontSize,
color: titleColor,
fontWeight:'normal',
},
}],
series: [{
......
components/HorizontalBar/HorizontalBar.vue
View file @ f72527c8
......@@ -39,22 +39,22 @@
categories,
series,
}
} = this.elementData
this.ec.option= {
...this.elementInfo.option,
} = this.elementData
const that = this
that.ec.option= {
...that.elementInfo.option,
yAxis: {
...this.elementInfo.option.yAxis,
...that.elementInfo.option.yAxis,
data: categories
},
tooltip: {
...this.elementInfo.option.tooltip,
...that.elementInfo.option.tooltip,
trigger: "axis"
},
dataZoom: this.elementInfo.dataZoom && this.elementInfo.dataZoom.show ? [{...this.elementInfo.dataZoom,...DATAZOOM_DEFAULT}] : [{show: false}],
series: this.dealSeriesData(series)
dataZoom: that.elementInfo.dataZoom && that.elementInfo.dataZoom.show ? [{...that.elementInfo.dataZoom,...DATAZOOM_DEFAULT}] : [{show: false}],
series: that.dealSeriesData(series)
}
chart.setOption(this.ec.option)
const that = this
chart.setOption(that.ec.option)
chart.on('click', event => {
const { preview, images } = that.elementData.dataList
var urls = []
......
components/LineMixBar/LineMixBar.vue
View file @ f72527c8
......@@ -12,6 +12,7 @@
import uniEcCanvas from '@/uni-ec-canvas/uni-ec-canvas'
import echartElementData from '@/mixins/echartElementData.js'
import { DATAZOOM_DEFAULT } from '@/mixins/zoomConfig.js'
import { svg } from '@/mixins/svg.js'
let chart = null
export default {
......@@ -39,32 +40,49 @@
devicePixelRatio: canvasDpr
})
canvas.setChart(chart)
const {categories, series} = this.elementData.dataList
this.ec.option = {
...this.elementInfo.option,
const {categories, series} = this.elementData.dataList
const that = this
that.ec.option = {
...that.elementInfo.option,
xAxis: {
...this.elementInfo.option.xAxis,
...that.elementInfo.option.xAxis,
data: categories
},
yAxis: [{
...this.elementInfo.option.yAxis,
...that.elementInfo.option.yAxis,
type: 'value'
},
{
...this.elementInfo.option.yAxis,
...that.elementInfo.option.yAxis,
type: 'value'
}
],
tooltip: {
...this.elementInfo.option.tooltip,
...that.elementInfo.option.tooltip,
trigger: "axis"
},
dataZoom: this.elementInfo.dataZoom && this.elementInfo.dataZoom.show ? [{...this.elementInfo.dataZoom,...DATAZOOM_DEFAULT}] : [{show: false}],
series: this.dealSeriesData(series)
toolbox: {
...that.elementInfo.option.toolbox,
feature: {
myFull: {
show: true,
icon: svg.enterFull,
onclick() {
const element = {...that.elementInfo}
const url = "/pages/fullscreen/fullscreen?element=" + encodeURIComponent(JSON.stringify(element))
uni.navigateTo({
url: url
})
}
}
}
},
dataZoom: that.elementInfo.dataZoom && that.elementInfo.dataZoom.show ? [{...that.elementInfo.dataZoom,...DATAZOOM_DEFAULT}] : [{show: false}],
series: that.dealSeriesData(series)
}
chart.setOption(this.ec.option)
chart.setOption(that.ec.option)
chart.on('click', event => {
this.handleEchartsClick(event)
that.handleEchartsClick(event)
})
return chart
},
......
components/NormalBar/NormalBar.vue
View file @ f72527c8
......@@ -7,6 +7,7 @@
import uniEcCanvas from '@/uni-ec-canvas/uni-ec-canvas'
import echartElementData from '@/mixins/echartElementData.js'
import { DATAZOOM_DEFAULT } from '@/mixins/zoomConfig.js'
import { svg } from '@/mixins/svg.js'
let chart = null
export default {
......@@ -34,23 +35,40 @@
devicePixelRatio: canvasDpr
})
canvas.setChart(chart)
const { categories, series } = this.elementData.dataList
this.ec.option = {
...this.elementInfo.option,
const { categories, series } = this.elementData.dataList
const that = this
that.ec.option = {
...that.elementInfo.option,
xAxis: {
...this.elementInfo.option.xAxis,
...that.elementInfo.option.xAxis,
data: categories
},
tooltip: {
...this.elementInfo.option.tooltip,
...that.elementInfo.option.tooltip,
trigger: "axis"
},
dataZoom: this.elementInfo.dataZoom && this.elementInfo.dataZoom.show ? [{...this.elementInfo.dataZoom,...DATAZOOM_DEFAULT}] : [{show: false}],
series: this.dealSeriesData(series)
toolbox: {
...that.elementInfo.option.toolbox,
feature: {
myFull: {
show: true,
icon: svg.enterFull,
onclick() {
const element = {...that.elementInfo}
const url = "/pages/fullscreen/fullscreen?element=" + encodeURIComponent(JSON.stringify(element))
uni.navigateTo({
url: url
})
}
}
}
},
dataZoom: that.elementInfo.dataZoom && that.elementInfo.dataZoom.show ? [{...that.elementInfo.dataZoom,...DATAZOOM_DEFAULT}] : [{show: false}],
series: that.dealSeriesData(series)
}
chart.setOption(this.ec.option)
chart.setOption(that.ec.option)
chart.on('click', event => {
this.handleEchartsClick(event)
that.handleEchartsClick(event)
})
return chart
},
......
components/NormalLine/NormalLine.vue
View file @ f72527c8
......@@ -7,6 +7,7 @@
import uniEcCanvas from '@/uni-ec-canvas/uni-ec-canvas'
import echartElementData from '@/mixins/echartElementData.js'
import { DATAZOOM_DEFAULT } from '@/mixins/zoomConfig.js'
import { svg } from '@/mixins/svg.js'
let chart = null
export default {
......@@ -33,26 +34,43 @@
devicePixelRatio: canvasDpr
})
canvas.setChart(chart)
const { categories = [], series = [] } = this.elementData.dataList
this.ec.option = {
...this.elementInfo.option,
const { categories = [], series = [] } = this.elementData.dataList
const that = this
that.ec.option = {
...that.elementInfo.option,
color: ['#00f2f1', '#ed3f35', '#1089E7', "#F8B448", "#8B78F6", '#8cd8ff',
'#f0ad54', '#ffffff', '#000000'
],
xAxis: {
...this.elementInfo.option.xAxis,
...that.elementInfo.option.xAxis,
data: categories
},
tooltip: {
...this.elementInfo.option.tooltip,
...that.elementInfo.option.tooltip,
trigger: "axis"
},
dataZoom: this.elementInfo.dataZoom && this.elementInfo.dataZoom.show ? [{...this.elementInfo.dataZoom,...DATAZOOM_DEFAULT}] : [{show: false}],
series: this.dealSeriesData(series)
toolbox: {
...that.elementInfo.option.toolbox,
feature: {
myFull: {
show: true,
icon: svg.enterFull,
onclick() {
const element = {...that.elementInfo}
const url = "/pages/fullscreen/fullscreen?element=" + encodeURIComponent(JSON.stringify(element))
uni.navigateTo({
url: url
})
}
}
}
},
dataZoom: that.elementInfo.dataZoom && that.elementInfo.dataZoom.show ? [{...that.elementInfo.dataZoom,...DATAZOOM_DEFAULT}] : [{show: false}],
series: that.dealSeriesData(series)
}
chart.setOption(this.ec.option)
chart.setOption(that.ec.option)
chart.on('click', event => {
this.handleEchartsClick(event)
that.handleEchartsClick(event)
})
return chart
},
......
components/NormalTabs/NormalTabs.vue
View file @ f72527c8
......@@ -10,20 +10,40 @@
:bg-color="elementInfo.option.tabs.backgroundColor"
@change="handleTabsChange"
></u-tabs>
<u-input
v-if="elementInfo.option.tabs.type === 'select'"
v-model="tabsValue"
type="select"
border="true"
@click="show = true"
/>
<u-select
v-model="show"
:list="elementData.dataList.series"
:safe-area-inset-bottom="true"
label-name="name"
@confirm="handleSelectChange"
></u-select>
<template v-if="elementInfo.option.tabs.type === 'select'">
<u-input
v-model="tabsValue"
type="select"
border="true"
@click="show = true"
/>
<u-select
v-model="show"
:list="elementData.dataList.series"
:safe-area-inset-bottom="true"
label-name="name"
@confirm="handleSelectChange"
></u-select>
</template>
<swiper
v-if="elementInfo.option.tabs.type === 'group'"
class="tab-swiper"
:indicator-dots="tabsGroup.length > 1"
:style="[tabsStyle]"
:indicator-color="'#ccc'"
:indicator-active-color="elementInfo.option.tabs.backgroundColor"
>
<swiper-item class="tab-group" v-for="(item, index) in tabsGroup" :key="index">
<view
class="tab-item"
:class="[tabsValue == tab.value ? 'active': '']"
v-for="tab in item"
:key="tab.value"
@click="handleChangeTabValue(tab.value)"
>{{tab.name}}</view>
</swiper-item>
</swiper>
</view>
</template>
......@@ -39,6 +59,29 @@
tabsValue: ''
};
},
computed: {
tabsGroup() {
const { type, count} = this.elementInfo.option.tabs
if (type === 'group') {
return this.$u.common.chunk(this.elementData.dataList.series, Number(count) * 2)
}
return []
},
tabsStyle() {
const { fontSize, color, activeColor, backgroundColor, count, frameWidth, frameColor, frameStyle, itemBackgroundColor } = this.elementInfo.option.tabs
return {
height: `${this.elementInfo.height}px`,
'--width': `${(100 / Number(count)) - 2}%`,
'--font-size': `${fontSize}px`,
'--color': color,
'--active-color': activeColor,
'--background-color': backgroundColor,
'--border-style': `${frameWidth}px ${frameStyle} ${frameColor}`,
'--item-background-color': itemBackgroundColor
}
}
},
methods: {
initChart() {
this.tabsValue = this.elementData.dataList.series[this.currentTabs].value
......@@ -52,6 +95,10 @@
this.tabsValue = e[0].value
this.tabsValueChange()
},
handleChangeTabValue(value) {
this.tabsValue = value
this.tabsValueChange()
},
/**
* 改变选项卡的值
*/
......@@ -80,6 +127,31 @@
}
</script>
<style>
<style scoped lang="scss">
.tab-group {
display: flex !important;
align-items: flex-start;
flex-wrap: wrap;
width: 100%;
}
.tab-item {
width: var(--width);
margin: 1%;
font-size: var(--font-size);
color: var(--color);
border: var(--border-style);
background: var(--item-background-color);
border-radius: 5px;
padding: 5px 8px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: center;
cursor: pointer;
&.active {
color: var(--active-color);
background: var(--background-color);
border-color: var(--background-color);
}
}
</style>
components/Table/Table.vue
View file @ f72527c8
<template>
<view class="normal-table" :style="{ transform: `scale(${scale}) translate(${elementInfo.width * (scale - 1) /2}px, ${elementInfo.height * (scale - 1) /2}px)`}">
<view class="normal-table" :style="{ transform: `scaleY(${scale}) translate(0px, ${elementInfo.height * (scale - 1) /2}px)`}">
<NormalTitle :elementInfo="elementInfo"></NormalTitle>
<scroll-view scroll-x="true" class="scroll-view_H" >
<view
......@@ -188,13 +190,12 @@
flex: 0 0 110rpx;
font-size: 28rpx;
color: $u-main-color;
font-weight: bold;
padding: 10px 0px;
background-color: rgb(245, 246, 248);
}
.th-large {
flex: 0 0 240rpx;
flex: 0 0 220rpx;
font-size: 28rpx;
color: $u-main-color;
font-weight: bold;
......@@ -213,7 +214,7 @@
}
.td-large{
flex: 0 0 240rpx;
flex: 0 0 220rpx;
align-self: stretch;
padding: 10px 0px ;
font-size: 28rpx;
......
mixins/echartElementData.js
View file @ f72527c8
......@@ -82,6 +82,7 @@ export default {
const { Status, Msg, Result } = res.data
if (Status === 'true') {
that.elementData.dataList = Result
this.initChart()
}else {
message.warning(Msg)
}
......
mixins/svg.js 0 → 100644
View file @ f72527c8
export const svg = {
enterFull: "M285.866667 810.666667H384v42.666666H213.333333v-170.666666h42.666667v98.133333l128-128 29.866667 29.866667-128 128z m494.933333 0l-128-128 29.866667-29.866667 128 128V682.666667h42.666666v170.666666h-170.666666v-42.666666h98.133333zM285.866667 256l128 128-29.866667 29.866667-128-128V384H213.333333V213.333333h170.666667v42.666667H285.866667z m494.933333 0H682.666667V213.333333h170.666666v170.666667h-42.666666V285.866667l-128 128-29.866667-29.866667 128-128z",
exitFull: "M354.133333 682.666667H256v-42.666667h170.666667v170.666667H384v-98.133334L243.2 853.333333l-29.866667-29.866666L354.133333 682.666667z m358.4 0l140.8 140.8-29.866666 29.866666-140.8-140.8V810.666667h-42.666667v-170.666667h170.666667v42.666667h-98.133334zM354.133333 384L213.333333 243.2l29.866667-29.866667L384 354.133333V256h42.666667v170.666667H256V384h98.133333z m358.4 0H810.666667v42.666667h-170.666667V256h42.666667v98.133333L823.466667 213.333333l29.866666 29.866667L712.533333 384z"
}
\ No newline at end of file
pages.json
View file @ f72527c8
......@@ -63,6 +63,16 @@
"enablePullDownRefresh": true
}
}
,{
"path" : "pages/fullscreen/fullscreen",
"style" :
{
"navigationBarTitleText": "",
"enablePullDownRefresh": false,
"pageOrientation": "landscape"
}
}
],
"subpackages": [
......@@ -71,7 +81,8 @@
"navigationBarTextStyle": "black",
"navigationBarTitleText": "uView",
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
"backgroundColor": "#F8F8F8",
"pageOrientation": "portrait"
},
"tabBar": {
"color": "#333333",
......
pages/details/details.vue
View file @ f72527c8
......@@ -106,7 +106,10 @@
uni.$on('handleLinkComp', ({ showData, hideData }) => {
that.reportInfo.list = that.reportInfo.list.map(item => {
if(showData.includes(item.id)) item.hide = false
if(hideData.includes(item.id)) item.hide = true
if(hideData.includes(item.id)) {
item.hide = true
that.childrenDataHide(item)
}
return item
})
})
......@@ -137,6 +140,25 @@
clearInterval(this.timename)
},
methods: {
/**
* 递归 - 隐藏子项为NormalTabs的所有关联组件
*/
childrenDataHide(item) {
if(item.type === 'NormalTabs') {
if(!item.child.data.length) {
return
}
item.child.data.forEach(data => {
this.reportInfo.list.map(item => {
if(data.comp === item.id) {
item.hide = true
this.childrenDataHide(item)
}
return item
})
})
}
},
/**
* 获取页面报表配置
*/
......
pages/fullscreen/fullscreen.vue 0 → 100644
View file @ f72527c8
<template>
<view class="wrapper" :style="[theStyle]">
<template>
<!-- 普通柱状图 -->
<NormalBar v-if="element.type == 'NormalBar'" :elementInfo="element"></NormalBar>
<!-- 普通折线图 -->
<NormalLine v-if="element.type == 'NormalLine'" :elementInfo="element"></NormalLine>
<!-- 横向柱状图 -->
<HorizontalBar v-if="element.type == 'HorizontalBar'" :elementInfo="element"></HorizontalBar>
<!-- 折柱图 -->
<LineMixBar v-if="element.type == 'LineMixBar'" :elementInfo="element"></LineMixBar>
</template>
</view>
</template>
<script>
export default {
data() {
return {
element: {}
}
},
computed: {
theStyle() {
const { windowWidth, windowHeight } = uni.getSystemInfoSync()
return {
'height': `${windowHeight}px`,
'width': `${windowWidth}px`,
}
},
},
onLoad(option) {
this.element = JSON.parse(decodeURIComponent(option.element))
// 去掉全屏的定制按钮
const toolbox = {show: false}
this.element.option.toolbox = toolbox
},
}
</script>
<style>
.wrapper {
position: relative;
width: 100%;
user-select: none;
// overflow: auto;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
</style>
pages/index/index.vue
View file @ f72527c8
......@@ -109,24 +109,25 @@
uni.$on('handleLinkComp', ({ showData, hideData }) => {
that.reportInfo.list = that.reportInfo.list.map(item => {
if(showData.includes(item.id)) item.hide = false
if(hideData.includes(item.id)) item.hide = true
if(hideData.includes(item.id)) {
item.hide = true
that.childrenDataHide(item)
}
return item
})
})
/**
* datazoom交互
*/
uni.$on('handleDataZoomParams', ({index, paramName, value}) => {
if(index.length && paramName && value) {
that.reportInfo.list = that.reportInfo.list.map(item => {
console.log('begin item', item)
const flag = index.includes(item.id)
if(flag && item.dataZoom) {
console.log('set item', item)
that.$set(item.dataZoom, 'start', value.start)
that.$set(item.dataZoom, 'end', value.end)
}
console.log('after item', item)
return item
})
}
......@@ -153,6 +154,25 @@
// 拼接
return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
},
/**
* 递归 - 隐藏子项为NormalTabs的所有关联组件
*/
childrenDataHide(item) {
if(item.type === 'NormalTabs') {
if(!item.child.data.length) {
return
}
item.child.data.forEach(data => {
this.reportInfo.list.map(item => {
if(data.comp === item.id) {
item.hide = true
this.childrenDataHide(item)
}
return item
})
})
}
},
//检查是否登录
userAuthCheck() {
var userId = uni.getStorageSync('userId')
......@@ -190,7 +210,7 @@
async getReportCharts() {
clearInterval(this.timename)
const that = this
let res = await that.$u.api.getReportCharts({id: '6274e2f24606335014054b2c'})
let res = await that.$u.api.getReportCharts({id: '6274f095460633568801a709'})
uni.stopPullDownRefresh()
const { Status, Result: { info, list } } = res.data
if (Status === 'true') {
......
uni-ec-canvas/echarts.js
View file @ f72527c8
This source diff could not be displayed because it is too large. You can view the blob instead.
utils/common.js
View file @ f72527c8
......@@ -54,13 +54,59 @@ const install = (Vue, vm) => {
return value / 750 * uni.getSystemInfoSync().windowWidth
}
const slice = (array, start, end) => {
let length = array == null ? 0 : array.length
if (!length) {
return []
}
start = start == null ? 0 : start
end = end === undefined ? length : end
if (start < 0) {
start = -start > length ? 0 : (length + start)
}
end = end > length ? length : end
if (end < 0) {
end += length
}
length = start > end ? 0 : ((end - start) >>> 0)
start >>>= 0
let index = -1
const result = new Array(length)
while (++index < length) {
result[index] = array[index + start]
}
return result
}
/**
* 将数组（array）拆分成多个 size 长度的区块，并将这些区块组成一个新数组。
* 如果array无法被分割成全部等长的区块，那么最后剩余的元素将组成一个区块。
*/
const chunk = (array, size = 1) => {
const length = array == null ? 0 : array.length
if (!length || size < 1) {
return []
}
let index = 0
let resIndex = 0
const result = new Array(Math.ceil(length / size))
while (index < length) {
result[resIndex++] = slice(array, index, (index += size))
}
return result
}
vm.$u.common = {
converFunction,
fillDigit,
toThousands,
dateFormat,
pxToRpx,
rpxToPx
rpxToPx,
chunk
}
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment