asd/shujuwang
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fanzhen0108

Browse Source
This commit is contained in:
fanzhen123
2020-01-08 18:46:59 +08:00
parent 4f6b93bbb5
commit 6928ddbc11
35 changed files with 996 additions and 329 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/assets/js/computeddata.js
View File

@@ -418,6 +418,7 @@ class computedFunc {
label: itemTime
})
})
console.log(this.transBeforeData, 'this.transBeforeData101')
// 总数据处理
this.transBeforeData.timeArr.forEach((itemName, indexName) => {
var tableLine = {}

49
src/components/chartsCont/ChartsCont.vue
View File

@@ -385,16 +385,6 @@ export default {
this.startsyui = false
}
},
// 监听对象
// chartsStatusMegger: {
// handler (newval, oldVal) {
// this.transState = this.chartsStatusMegger.transState
// this.nowDataTJ = this.chartsStatusMegger.computedStatic
// this.showTable()
// },
// immediate: true,
// deep: true
// }
listInputVal: {
handler () {
this.$store.state.listInputVal = this.listInputVal
@@ -683,6 +673,17 @@ export default {
areaTrans() {
console.log(this.transState, 'this.transState')
console.log(this.$store.state.SelecttDimension, '2020')
if (this.$route.query.type === 'area' && this.$store.state.transClickState) {
let transpositionData = JSON.parse(JSON.stringify(this.transBefore.transBeforeAreaData))
this.transBefore.transBeforeAreaData = transpositionData[0].map(function (col, index) {
return transpositionData.map((row, key) => {
return row[index]
})
})
console.log(this.transBefore, 'transpositionData')
// 数据转置完成恢复
this.$store.state.transClickState = false
}
if (this.$store.state.SelecttDimension.row === 'sj' && this.$store.state.SelecttDimension.col === 'dq') {
this.objCompBefore = new ComputedData(this.transBefore)
var objDatasBefore = this.objCompBefore.comTransAreabefore()
@@ -731,7 +732,7 @@ export default {
showTable() {
// 改变转置状态
console.log(121212121)
if (this.areaDataState !== 'area') { // 非地区数据转置
if (this.$route.query.type !== 'area') { // 非地区数据转置
this.wrongAreaTrans()
} else { // 地区数据转置
this.areaTrans()
@@ -1085,6 +1086,7 @@ export default {
this.$store.state.SelecttDimension.row = 'sj'
}
this.leftState = true
this.$store.state.allNochangeInitData = JSON.parse(JSON.stringify(this.transBefore))
}).catch((fail) => {
console.log(fail, 2369)
})
@@ -1137,6 +1139,7 @@ export default {
this.leftState = true
// 告诉父组件我完成任务重置状态
this.$emit('prentsState', false)
this.$store.state.allNochangeInitData = JSON.parse(JSON.stringify(this.transBefore))
}).catch((fail) => {
console.log(fail)
})
@@ -1160,22 +1163,22 @@ export default {
return (ind) => {
let styStatic = false
if (this.transState) {
if (this.transBefore.transBeforeTermsData[0] !== undefined) {
if (ind > (this.transBefore.transBeforeTermsData[0].length)) {
if (this.$route.query.type !== 'area') {
if (ind > (this.$store.state.allNochangeInitData.transBeforeTermsData[0].length)) {
styStatic = true
}
} else {
if (ind > (this.transBefore.transBeforeAreaData[0].length)) {
if (ind > (this.$store.state.allNochangeInitData.transBeforeAreaData[0].length)) {
styStatic = true
}
}
} else {
if (this.transBefore.transBeforeTermsData[0] !== undefined) {
if (ind > (this.transBefore.transBeforeTermsData.length)) {
if (this.$route.query.type !== 'area') {
if (ind > (this.$store.state.allNochangeInitData.transBeforeTermsData.length)) {
styStatic = true
}
} else {
if (ind > (this.transBefore.transBeforeAreaData.length)) {
if (ind > (this.$store.state.allNochangeInitData.transBeforeAreaData.length)) {
styStatic = true
}
}
@@ -1188,22 +1191,22 @@ export default {
return (ind) => {
let styStatic = false
if (this.transState) {
if (this.transBefore.transBeforeTermsData[0] !== undefined) {
if (ind > (this.transBefore.transBeforeTermsData.length - 1)) {
if (this.$route.query.type !== 'area') {
if (ind > (this.$store.state.allNochangeInitData.transBeforeTermsData.length - 1)) {
styStatic = true
}
} else {
if (ind > (this.transBefore.transBeforeAreaData.length - 1)) {
if (ind > (this.$store.state.allNochangeInitData.transBeforeAreaData.length - 1)) {
styStatic = true
}
}
} else {
if (this.transBefore.transBeforeTermsData[0] !== undefined) {
if (ind > (this.transBefore.transBeforeTermsData[0].length - 1)) {
if (this.$route.query.type !== 'area') {
if (ind > (this.$store.state.allNochangeInitData.transBeforeTermsData[0].length - 1)) {
styStatic = true
}
} else {
if (ind > (this.transBefore.transBeforeAreaData[0].length - 1)) {
if (ind > (this.$store.state.allNochangeInitData.transBeforeAreaData[0].length - 1)) {
styStatic = true
}
}

1
src/components/dimension/Dimension.vue
View File

@@ -208,6 +208,7 @@ export default {
this.$store.state.noAreadimensionState = true
this.$store.state.areaDimensionState = false
}
this.$store.state.allNochangeInitData = JSON.parse(JSON.stringify(this.$store.state.transBefore))
}).catch((fail) => {
console.log(fail, 2369)
})

846
src/components/insertLabel/InsertLabel.vue
View File

@@ -59,23 +59,23 @@ export default {
fontComput: '',
insertName: '',
labelData: [
{ text: '健康的说法更健康', state: false },
{ text: '健康的说jksdfhjjk', state: false },
{ text: '健聚划算df覅㐇', state: false },
{ text: '健聚dfgs划算覅㐇', state: false },
{ text: '健聚jdskfasdfhn 划算覅㐇', state: false },
{ text: '健聚sdg划asd算覅㐇', state: false },
{ text: '健聚dsfg划f算覅㐇', state: false },
{ text: '健聚划sdasdffasf算覅㐇', state: false },
{ text: '健聚划sdasdff算覅㐇', state: false },
{ text: '健聚划sdf算覅s㐇', state: false },
{ text: '健聚划sdafsdf算ssd覅㐇', state: false },
{ text: '健聚划sasdfdf算覅㐇', state: false },
{ text: '健聚划ssadfdf算覅㐇', state: false },
{ text: '健聚划sdf算覅㐇', state: false },
{ text: '健聚划ssdafgfdf算s覅㐇', state: false },
{ text: '健聚划sdaasfdf算s覅㐇', state: false },
{ text: '健聚划sdasfdfa算覅㐇', state: false }
// { text: '健康的说法更健康', state: false },
// { text: '健康的说jksdfhjjk', state: false },
// { text: '健聚划算df覅㐇', state: false },
// { text: '健聚dfgs划算覅㐇', state: false },
// { text: '健聚jdskfasdfhn 划算覅㐇', state: false },
// { text: '健聚sdg划asd算覅㐇', state: false },
// { text: '健聚dsfg划f算覅㐇', state: false },
// { text: '健聚划sdasdffasf算覅㐇', state: false },
// { text: '健聚划sdasdff算覅㐇', state: false },
// { text: '健聚划sdf算覅s㐇', state: false },
// { text: '健聚划sdafsdf算ssd覅㐇', state: false },
// { text: '健聚划sasdfdf算覅㐇', state: false },
// { text: '健聚划ssadfdf算覅㐇', state: false },
// { text: '健聚划sdf算覅㐇', state: false },
// { text: '健聚划ssdafgfdf算s覅㐇', state: false },
// { text: '健聚划sdaasfdf算s覅㐇', state: false },
// { text: '健聚划sdasfdfa算覅㐇', state: false }
],
computers: [
{ text: '*', state: false },
@@ -103,6 +103,8 @@ export default {
watch: {
radioValue (newValue, oldValue) {
console.log(newValue)
this.fontComput = ''
this.insertName = ''
if (newValue === 'hang') {
// 行列新增渲染
if (this.$route.query.type === 'area') {
@@ -133,12 +135,21 @@ export default {
break
}
} else {
this.labelData = this.$store.state.transBefore.termsName.map((item, index) => {
return {
text: item,
state: false
}
})
if (this.$store.state.SelecttDimension.row === 'sj' && this.$store.state.SelecttDimension.col === 'zb') {
this.labelData = this.$store.state.transBefore.termsName.map((item, index) => {
return {
text: item,
state: false
}
})
} else if (this.$store.state.SelecttDimension.row === 'zb' && this.$store.state.SelecttDimension.col === 'sj') {
this.labelData = this.$store.state.transBefore.timeArr.map((item, index) => {
return {
text: item,
state: false
}
})
}
}
} else if (newValue === 'lie') {
// 行列新增渲染
@@ -171,12 +182,21 @@ export default {
break
}
} else {
this.labelData = this.$store.state.transBefore.timeArr.map((item, index) => {
return {
text: item,
state: false
}
})
if (this.$store.state.SelecttDimension.row === 'sj' && this.$store.state.SelecttDimension.col === 'zb') {
this.labelData = this.$store.state.transBefore.timeArr.map((item, index) => {
return {
text: item,
state: false
}
})
} else if (this.$store.state.SelecttDimension.row === 'zb' && this.$store.state.SelecttDimension.col === 'sj') {
this.labelData = this.$store.state.transBefore.termsName.map((item, index) => {
return {
text: item,
state: false
}
})
}
}
}
}
@@ -254,248 +274,571 @@ export default {
let newarr = []
if (this.radioValue === 'hang') {
if (this.$route.query.type !== 'area') {
// 循环指标名称 回调一个计算后的数组
let dataStrArr = this.$store.state.transBefore.termsName.map((item, index) => {//外层
// console.log(this.$store.state.transBefore.transBeforeTermsData[index])
// 定义拼接计算的字符串
let comStr = ''
newArrat.forEach((list, key) => {
if (this.$store.state.transBefore.termsName.indexOf(list) !== -1) {
comStr += this.$store.state.transBefore.transBeforeTermsData[index][this.$store.state.transBefore.termsName.indexOf(list)] === '' ? '0' : this.$store.state.transBefore.transBeforeTermsData[index][this.$store.state.transBefore.termsName.indexOf(list)]
} else {
comStr += list
}
if (this.$store.state.SelecttDimension.col === 'zb' && this.$store.state.SelecttDimension.row === 'sj') {
if (this.$store.state.transBefore.termsName.indexOf(this.insertName) !== -1) {
this.$alert('您新增的指标名称已经存在请重新输入！', '温馨提示', {
confirmButtonText: '确定'
})
return
}
console.log(this.$store.state.transBefore, 'this.$store.state.transBefore')
let dataStrArr = this.$store.state.transBefore.timeArr.map((item, index) => {//外层
// 定义拼接计算的字符串
let comStr = ''
newArrat.forEach((list, key) => {
if (this.$store.state.transBefore.termsName.indexOf(list) !== -1) {
comStr += this.$store.state.transBefore.transBeforeTermsData[this.$store.state.transBefore.termsName.indexOf(list)][index] === '' ? '0' : this.$store.state.transBefore.transBeforeTermsData[this.$store.state.transBefore.termsName.indexOf(list)][index]
} else {
comStr += list
}
})
// console.log(comStr, 'comStr')
// console.log(eval(comStr))
return parseFloat(eval(comStr).toString()).toFixed(2).toString()
})
// console.log(comStr)
// console.log(eval(comStr))
return parseFloat(eval(comStr).toString()).toFixed(2).toString()
})
// 将处理完的数据放到全局变量中
this.$store.state.transBefore.termsName.push(this.insertName)
this.$store.state.transBefore.termsExplain.push('')
this.$store.state.transBefore.transBeforeTermsData.push(dataStrArr)
// 循环指标名称 回调一个计算后的数组
// console.log(dataStrArr, 'dataStrArr新增指标')
// 将处理完的数据放到全局变量中
this.$store.state.transBefore.termsName.push(this.insertName)
this.$store.state.transBefore.termsExplain.push('')
this.$store.state.transBefore.transBeforeTermsData.push(dataStrArr)
} else if (this.$store.state.SelecttDimension.col === 'sj' && this.$store.state.SelecttDimension.row === 'zb') {
if (this.$store.state.transBefore.timeArr.indexOf(this.insertName) !== -1) {
this.$alert('您新增的指标名称已经存在请重新输入！', '温馨提示', {
confirmButtonText: '确定'
})
return
}
// 将数据先进行转置
var arrData = this.$store.state.transBefore.transBeforeTermsData
this.$store.state.transBefore.transBeforeTermsData = arrData[0].map(function (col, index) {
return arrData.map((row, key) => {
return row[index]
})
})
console.log(this.$store.state.transBefore, 'this.$store.state.transBefore')
let dataStrArr = this.$store.state.transBefore.termsName.map((item, index) => {//外层
// 定义拼接计算的字符串
let comStr = ''
newArrat.forEach((list, key) => {
if (this.$store.state.transBefore.timeArr.indexOf(list) !== -1) {
comStr += this.$store.state.transBefore.transBeforeTermsData[this.$store.state.transBefore.timeArr.indexOf(list)][index] === '' ? '0' : this.$store.state.transBefore.transBeforeTermsData[this.$store.state.transBefore.timeArr.indexOf(list)][index]
} else {
comStr += list
}
})
// console.log(comStr, 'comStr')
// console.log(eval(comStr))
return parseFloat(eval(comStr).toString()).toFixed(2).toString()
})
// console.log(dataStrArr, 'dataStrArr新增指标')
this.$store.state.transBefore.timeArr.push(this.insertName)
this.$store.state.transBefore.transBeforeTermsData.push(dataStrArr)
// 转置回来
arrData = JSON.parse(JSON.stringify(this.$store.state.transBefore.transBeforeTermsData))
this.$store.state.transBefore.transBeforeTermsData = arrData[0].map(function (col, index) {
return arrData.map((row, key) => {
return row[index]
})
})
// console.log(this.$store.state.transBefore, '转之后')
// 循环指标名称 回调一个计算后的数组
}
this.closeX()
this.$emit('emitState', true)
} else {
let dataStrArr = null
switch (this.$store.state.SelecttDimension.col) {
case 'dq':
// 循环地区名称 回调一个计算后的数组
dataStrArr = this.$store.state.transBefore.areaName.map((item, index) => {//外层
// console.log(this.$store.state.transBefore.transBeforeAreaData[index])
// 定义拼接计算的字符串
let comStr = ''
newArrat.forEach((list, key) => {
console.log(list)
if (this.$store.state.transBefore.areaName.indexOf(list) !== -1) {
comStr += this.$store.state.transBefore.transBeforeAreaData[index][this.$store.state.transBefore.areaName.indexOf(list)] === '' ? '0' : this.$store.state.transBefore.transBeforeAreaData[index][this.$store.state.transBefore.areaName.indexOf(list)]
} else {
comStr += list
}
})
console.log(comStr, 'kkk10')
// console.log(eval(comStr))
return parseFloat(eval(comStr).toString()).toFixed(2).toString()
if (this.$store.state.SelecttDimension.col === 'zb' && this.$store.state.SelecttDimension.row === 'sj') {
if (this.$store.state.transBefore.termsName.indexOf(this.insertName) !== -1) {
this.$alert('您新增的指标名称已经存在请重新输入！', '温馨提示', {
confirmButtonText: '确定'
})
// 将处理完的数据放到全局变量中
this.$store.state.transBefore.areaName.push(this.insertName)
break
case 'sj':
// 循环地区名称 回调一个计算后的数组
dataStrArr = this.$store.state.transBefore.timeArr.map((item, index) => {//外层
// console.log(this.$store.state.transBefore.transBeforeAreaData[index])
// 定义拼接计算的字符串
let comStr = ''
newArrat.forEach((list, key) => {
if (this.$store.state.transBefore.timeArr.indexOf(list) !== -1) {
comStr += this.$store.state.transBefore.transBeforeAreaData[index][this.$store.state.transBefore.timeArr.indexOf(list)] === '' ? '0' : this.$store.state.transBefore.transBeforeAreaData[index][this.$store.state.transBefore.timeArr.indexOf(list)]
} else {
comStr += list
}
})
// console.log(comStr)
// console.log(eval(comStr))
return parseFloat(eval(comStr).toString()).toFixed(2).toString()
return
}
console.log(this.$store.state.transBefore, 'this.$store.state.transBefore')
let dataStrArr = this.$store.state.transBefore.timeArr.map((item, index) => {//外层
// 定义拼接计算的字符串
let comStr = ''
newArrat.forEach((list, key) => {
if (this.$store.state.transBefore.termsName.indexOf(list) !== -1) {
comStr += this.$store.state.transBefore.transBeforeAreaData[this.$store.state.transBefore.termsName.indexOf(list)][index] === '' ? '0' : this.$store.state.transBefore.transBeforeAreaData[this.$store.state.transBefore.termsName.indexOf(list)][index]
} else {
comStr += list
}
})
// 将处理完的数据放到全局变量中
this.$store.state.transBefore.timeArr.push(this.insertName)
break
case 'zb':
// 循环地区名称 回调一个计算后的数组
dataStrArr = this.$store.state.transBefore.termsName.map((item, index) => {//外层
// console.log(this.$store.state.transBefore.transBeforeAreaData[index])
// 定义拼接计算的字符串
let comStr = ''
newArrat.forEach((list, key) => {
if (this.$store.state.transBefore.termsName.indexOf(list) !== -1) {
comStr += this.$store.state.transBefore.transBeforeAreaData[index][this.$store.state.transBefore.termsName.indexOf(list)] == '' ? '0' : this.$store.state.transBefore.transBeforeAreaData[index][this.$store.state.transBefore.termsName.indexOf(list)]
} else {
comStr += list
}
})
// console.log(comStr)
// console.log(eval(comStr))
return parseFloat(eval(comStr).toString()).toFixed(2).toString()
// console.log(comStr, 'comStr')
// console.log(eval(comStr))
return parseFloat(eval(comStr).toString()).toFixed(2).toString()
})
// 循环指标名称 回调一个计算后的数组
// console.log(dataStrArr, 'dataStrArr新增指标')
// 将处理完的数据放到全局变量中
this.$store.state.transBefore.termsName.push(this.insertName)
this.$store.state.transBefore.termsExplain.push('')
this.$store.state.transBefore.transBeforeAreaData.push(dataStrArr)
} else if (this.$store.state.SelecttDimension.col === 'sj' && this.$store.state.SelecttDimension.row === 'zb') {
if (this.$store.state.transBefore.timeArr.indexOf(this.insertName) !== -1) {
this.$alert('您新增的指标名称已经存在请重新输入！', '温馨提示', {
confirmButtonText: '确定'
})
// 将处理完的数据放到全局变量中
this.$store.state.transBefore.termsName.push(this.insertName)
this.$store.state.transBefore.termsExplain.push('')
break
return
}
// 将数据先进行转置
var arrData = this.$store.state.transBefore.transBeforeAreaData
this.$store.state.transBefore.transBeforeAreaData = arrData[0].map(function (col, index) {
return arrData.map((row, key) => {
return row[index]
})
})
console.log(this.$store.state.transBefore, 'this.$store.state.transBefore')
let dataStrArr = this.$store.state.transBefore.termsName.map((item, index) => {//外层
// 定义拼接计算的字符串
let comStr = ''
newArrat.forEach((list, key) => {
if (this.$store.state.transBefore.timeArr.indexOf(list) !== -1) {
comStr += this.$store.state.transBefore.transBeforeAreaData[this.$store.state.transBefore.timeArr.indexOf(list)][index] === '' ? '0' : this.$store.state.transBefore.transBeforeAreaData[this.$store.state.transBefore.timeArr.indexOf(list)][index]
} else {
comStr += list
}
})
// console.log(comStr, 'comStr')
// console.log(eval(comStr))
return parseFloat(eval(comStr).toString()).toFixed(2).toString()
})
// console.log(dataStrArr, 'dataStrArr新增指标')
this.$store.state.transBefore.timeArr.push(this.insertName)
this.$store.state.transBefore.transBeforeAreaData.push(dataStrArr)
// 转置回来
arrData = JSON.parse(JSON.stringify(this.$store.state.transBefore.transBeforeAreaData))
this.$store.state.transBefore.transBeforeAreaData = arrData[0].map(function (col, index) {
return arrData.map((row, key) => {
return row[index]
})
})
// console.log(this.$store.state.transBefore, '转之后')
// 循环指标名称 回调一个计算后的数组
} else if (this.$store.state.SelecttDimension.col === 'dq' && this.$store.state.SelecttDimension.row === 'sj') {
if (this.$store.state.transBefore.areaName.indexOf(this.insertName) !== -1) {
this.$alert('您新增的指标名称已经存在请重新输入！', '温馨提示', {
confirmButtonText: '确定'
})
return
}
console.log(this.$store.state.transBefore, 'this.$store.state.transBefore')
let dataStrArr = this.$store.state.transBefore.timeArr.map((item, index) => {//外层
// 定义拼接计算的字符串
let comStr = ''
newArrat.forEach((list, key) => {
if (this.$store.state.transBefore.areaName.indexOf(list) !== -1) {
comStr += this.$store.state.transBefore.transBeforeAreaData[this.$store.state.transBefore.areaName.indexOf(list)][index] === '' ? '0' : this.$store.state.transBefore.transBeforeAreaData[this.$store.state.transBefore.areaName.indexOf(list)][index]
} else {
comStr += list
}
})
// console.log(comStr, 'comStr')
// console.log(eval(comStr))
return parseFloat(eval(comStr).toString()).toFixed(2).toString()
})
// 循环指标名称 回调一个计算后的数组
// console.log(dataStrArr, 'dataStrArr新增指标')
// 将处理完的数据放到全局变量中
this.$store.state.transBefore.areaName.push(this.insertName)
this.$store.state.transBefore.transBeforeAreaData.push(dataStrArr)
} else if (this.$store.state.SelecttDimension.col === 'sj' && this.$store.state.SelecttDimension.row === 'dq') {
if (this.$store.state.transBefore.timeArr.indexOf(this.insertName) !== -1) {
this.$alert('您新增的指标名称已经存在请重新输入！', '温馨提示', {
confirmButtonText: '确定'
})
return
}
// 将数据先进行转置
var arrData = this.$store.state.transBefore.transBeforeAreaData
this.$store.state.transBefore.transBeforeAreaData = arrData[0].map(function (col, index) {
return arrData.map((row, key) => {
return row[index]
})
})
console.log(this.$store.state.transBefore, 'this.$store.state.transBefore')
let dataStrArr = this.$store.state.transBefore.areaName.map((item, index) => {//外层
// 定义拼接计算的字符串
let comStr = ''
newArrat.forEach((list, key) => {
if (this.$store.state.transBefore.timeArr.indexOf(list) !== -1) {
comStr += this.$store.state.transBefore.transBeforeAreaData[this.$store.state.transBefore.timeArr.indexOf(list)][index] === '' ? '0' : this.$store.state.transBefore.transBeforeAreaData[this.$store.state.transBefore.timeArr.indexOf(list)][index]
} else {
comStr += list
}
})
// console.log(comStr, 'comStr')
// console.log(eval(comStr))
return parseFloat(eval(comStr).toString()).toFixed(2).toString()
})
// console.log(dataStrArr, 'dataStrArr新增指标')
this.$store.state.transBefore.timeArr.push(this.insertName)
this.$store.state.transBefore.transBeforeAreaData.push(dataStrArr)
// 转置回来
arrData = JSON.parse(JSON.stringify(this.$store.state.transBefore.transBeforeAreaData))
this.$store.state.transBefore.transBeforeAreaData = arrData[0].map(function (col, index) {
return arrData.map((row, key) => {
return row[index]
})
})
} else if (this.$store.state.SelecttDimension.col === 'dq' && this.$store.state.SelecttDimension.row === 'zb') {
if (this.$store.state.transBefore.areaName.indexOf(this.insertName) !== -1) {
this.$alert('您新增的指标名称已经存在请重新输入！', '温馨提示', {
confirmButtonText: '确定'
})
return
}
console.log(this.$store.state.transBefore, 'this.$store.state.transBefore')
let dataStrArr = this.$store.state.transBefore.termsName.map((item, index) => {//外层
// 定义拼接计算的字符串
let comStr = ''
newArrat.forEach((list, key) => {
if (this.$store.state.transBefore.areaName.indexOf(list) !== -1) {
comStr += this.$store.state.transBefore.transBeforeAreaData[this.$store.state.transBefore.areaName.indexOf(list)][index] === '' ? '0' : this.$store.state.transBefore.transBeforeAreaData[this.$store.state.transBefore.areaName.indexOf(list)][index]
} else {
comStr += list
}
})
// console.log(comStr, 'comStr')
// console.log(eval(comStr))
return parseFloat(eval(comStr).toString()).toFixed(2).toString()
})
// 循环指标名称 回调一个计算后的数组
// console.log(dataStrArr, 'dataStrArr新增指标')
// 将处理完的数据放到全局变量中
this.$store.state.transBefore.areaName.push(this.insertName)
this.$store.state.transBefore.transBeforeAreaData.push(dataStrArr)
} else if (this.$store.state.SelecttDimension.col === 'zb' && this.$store.state.SelecttDimension.row === 'dq') {
if (this.$store.state.transBefore.termsName.indexOf(this.insertName) !== -1) {
this.$alert('您新增的指标名称已经存在请重新输入！', '温馨提示', {
confirmButtonText: '确定'
})
return
}
// 将数据先进行转置
var arrData = this.$store.state.transBefore.transBeforeAreaData
this.$store.state.transBefore.transBeforeAreaData = arrData[0].map(function (col, index) {
return arrData.map((row, key) => {
return row[index]
})
})
console.log(this.$store.state.transBefore, 'this.$store.state.transBefore')
let dataStrArr = this.$store.state.transBefore.areaName.map((item, index) => {//外层
// 定义拼接计算的字符串
let comStr = ''
newArrat.forEach((list, key) => {
if (this.$store.state.transBefore.termsName.indexOf(list) !== -1) {
comStr += this.$store.state.transBefore.transBeforeAreaData[this.$store.state.transBefore.termsName.indexOf(list)][index] === '' ? '0' : this.$store.state.transBefore.transBeforeAreaData[this.$store.state.transBefore.termsName.indexOf(list)][index]
} else {
comStr += list
}
})
// console.log(comStr, 'comStr')
// console.log(eval(comStr))
return parseFloat(eval(comStr).toString()).toFixed(2).toString()
})
// console.log(dataStrArr, 'dataStrArr新增指标')
this.$store.state.transBefore.termsName.push(this.insertName)
this.$store.state.transBefore.termsExplain.push('')
this.$store.state.transBefore.transBeforeAreaData.push(dataStrArr)
// 转置回来
arrData = JSON.parse(JSON.stringify(this.$store.state.transBefore.transBeforeAreaData))
this.$store.state.transBefore.transBeforeAreaData = arrData[0].map(function (col, index) {
return arrData.map((row, key) => {
return row[index]
})
})
// console.log(this.$store.state.transBefore, '转之后')
// 循环指标名称 回调一个计算后的数组
}
// 将处理完的数据放到全局变量中
this.$store.state.transBefore.transBeforeAreaData.push(dataStrArr)
this.closeX()
this.$emit('emitState', true)
}
} else {
} else if (this.radioValue === 'lie') {
if (this.$route.query.type !== 'area') {
// console.log(this.$store.state.transBefore.transBeforeTermsData)
let bsfyu = this.$store.state.transBefore.transBeforeTermsData
// 将数据进行转置
let datarts = bsfyu[0].map(function (col, index) {
return bsfyu.map((row, key) => {
return row[index]
if (this.$store.state.SelecttDimension.col === 'sj' && this.$store.state.SelecttDimension.row === 'zb') {
if (this.$store.state.transBefore.termsName.indexOf(this.insertName) !== -1) {
this.$alert('您新增的指标名称已经存在请重新输入！', '温馨提示', {
confirmButtonText: '确定'
})
return
}
console.log(this.$store.state.transBefore, 'this.$store.state.transBefore')
let dataStrArr = this.$store.state.transBefore.timeArr.map((item, index) => {//外层
// 定义拼接计算的字符串
let comStr = ''
newArrat.forEach((list, key) => {
if (this.$store.state.transBefore.termsName.indexOf(list) !== -1) {
comStr += this.$store.state.transBefore.transBeforeTermsData[this.$store.state.transBefore.termsName.indexOf(list)][index] === '' ? '0' : this.$store.state.transBefore.transBeforeTermsData[this.$store.state.transBefore.termsName.indexOf(list)][index]
} else {
comStr += list
}
})
// console.log(comStr, 'comStr')
// console.log(eval(comStr))
return parseFloat(eval(comStr).toString()).toFixed(2).toString()
})
})
console.log(datarts)
// 循环年
let dataStrArr = this.$store.state.transBefore.timeArr.map((item, index) => {//外层
// console.log(this.$store.state.transBefore.transBeforeTermsData[index])
// 定义拼接计算的字符串
let comStr = ''
newArrat.forEach((list, key) => {
if (this.$store.state.transBefore.timeArr.indexOf(list) !== -1) {
comStr += datarts[index][this.$store.state.transBefore.timeArr.indexOf(list)]===''?'0':datarts[index][this.$store.state.transBefore.timeArr.indexOf(list)]
} else {
comStr += list
}
// 循环指标名称 回调一个计算后的数组
// console.log(dataStrArr, 'dataStrArr新增指标')
// 将处理完的数据放到全局变量中
this.$store.state.transBefore.termsName.push(this.insertName)
this.$store.state.transBefore.termsExplain.push('')
this.$store.state.transBefore.transBeforeTermsData.push(dataStrArr)
} else if (this.$store.state.SelecttDimension.col === 'zb' && this.$store.state.SelecttDimension.row === 'sj') {
if (this.$store.state.transBefore.timeArr.indexOf(this.insertName) !== -1) {
this.$alert('您新增的指标名称已经存在请重新输入！', '温馨提示', {
confirmButtonText: '确定'
})
return
}
// 将数据先进行转置
var arrData = this.$store.state.transBefore.transBeforeTermsData
this.$store.state.transBefore.transBeforeTermsData = arrData[0].map(function (col, index) {
return arrData.map((row, key) => {
return row[index]
})
})
// console.log(comStr)
// console.log(eval(comStr))
return parseFloat(eval(comStr).toString()).toFixed(2).toString()
})
console.log(dataStrArr, '101025')
datarts.push(dataStrArr)
// 将数据转置回来
let newZz = datarts[0].map(function (col, index) {
return datarts.map((row, key) => {
return row[index]
console.log(this.$store.state.transBefore, 'this.$store.state.transBefore')
let dataStrArr = this.$store.state.transBefore.termsName.map((item, index) => {//外层
// 定义拼接计算的字符串
let comStr = ''
newArrat.forEach((list, key) => {
if (this.$store.state.transBefore.timeArr.indexOf(list) !== -1) {
comStr += this.$store.state.transBefore.transBeforeTermsData[this.$store.state.transBefore.timeArr.indexOf(list)][index] === '' ? '0' : this.$store.state.transBefore.transBeforeTermsData[this.$store.state.transBefore.timeArr.indexOf(list)][index]
} else {
comStr += list
}
})
// console.log(comStr, 'comStr')
// console.log(eval(comStr))
return parseFloat(eval(comStr).toString()).toFixed(2).toString()
})
})
// 将处理完的数据放到全局变量中
this.$store.state.transBefore.timeArr.push(this.insertName)
this.$store.state.transBefore.transBeforeTermsData = newZz
// console.log(dataStrArr, 'dataStrArr新增指标')
this.$store.state.transBefore.timeArr.push(this.insertName)
this.$store.state.transBefore.transBeforeTermsData.push(dataStrArr)
// 转置回来
arrData = JSON.parse(JSON.stringify(this.$store.state.transBefore.transBeforeTermsData))
this.$store.state.transBefore.transBeforeTermsData = arrData[0].map(function (col, index) {
return arrData.map((row, key) => {
return row[index]
})
})
// console.log(this.$store.state.transBefore, '转之后')
// 循环指标名称 回调一个计算后的数组
}
this.closeX()
this.$emit('emitState', true)
} else {
// console.log(this.$store.state.transBefore.transBeforeAreaData)
let bsfyu = this.$store.state.transBefore.transBeforeAreaData
// 将数据进行转置
let datarts = bsfyu[0].map(function (col, index) {
return bsfyu.map((row, key) => {
return row[index]
if (this.$store.state.SelecttDimension.col === 'sj' && this.$store.state.SelecttDimension.row === 'zb') {
if (this.$store.state.transBefore.termsName.indexOf(this.insertName) !== -1) {
this.$alert('您新增的指标名称已经存在请重新输入！', '温馨提示', {
confirmButtonText: '确定'
})
return
}
console.log(this.$store.state.transBefore, 'this.$store.state.transBefore')
let dataStrArr = this.$store.state.transBefore.timeArr.map((item, index) => {//外层
// 定义拼接计算的字符串
let comStr = ''
newArrat.forEach((list, key) => {
if (this.$store.state.transBefore.termsName.indexOf(list) !== -1) {
comStr += this.$store.state.transBefore.transBeforeAreaData[this.$store.state.transBefore.termsName.indexOf(list)][index] === '' ? '0' : this.$store.state.transBefore.transBeforeAreaData[this.$store.state.transBefore.termsName.indexOf(list)][index]
} else {
comStr += list
}
})
// console.log(comStr, 'comStr')
// console.log(eval(comStr))
return parseFloat(eval(comStr).toString()).toFixed(2).toString()
})
})
console.log(datarts)
let dataStrArr = null
let newZz = null
switch (this.$store.state.SelecttDimension.row) {
case 'dq':
// 循环年
dataStrArr = this.$store.state.transBefore.areaName.map((item, index) => {//外层
// console.log(this.$store.state.transBefore.transBeforeAreaData[index])
// 定义拼接计算的字符串
let comStr = ''
newArrat.forEach((list, key) => {
if (this.$store.state.transBefore.areaName.indexOf(list) !== -1) {
comStr += datarts[index][this.$store.state.transBefore.areaName.indexOf(list)]===''?'0':datarts[index][this.$store.state.transBefore.areaName.indexOf(list)]
} else {
comStr += list
}
})
// console.log(comStr)
// console.log(eval(comStr))
return parseFloat(eval(comStr).toString()).toFixed(2).toString()
// 循环指标名称 回调一个计算后的数组
// console.log(dataStrArr, 'dataStrArr新增指标')
// 将处理完的数据放到全局变量中
this.$store.state.transBefore.termsName.push(this.insertName)
this.$store.state.transBefore.termsExplain.push('')
this.$store.state.transBefore.transBeforeAreaData.push(dataStrArr)
} else if (this.$store.state.SelecttDimension.col === 'zb' && this.$store.state.SelecttDimension.row === 'sj') {
if (this.$store.state.transBefore.timeArr.indexOf(this.insertName) !== -1) {
this.$alert('您新增的指标名称已经存在请重新输入！', '温馨提示', {
confirmButtonText: '确定'
})
console.log(dataStrArr, '101025')
datarts.push(dataStrArr)
// 将数据转置回来
newZz = datarts[0].map(function (col, index) {
return datarts.map((row, key) => {
return row[index]
})
return
}
// 将数据先进行转置
var arrData = this.$store.state.transBefore.transBeforeAreaData
this.$store.state.transBefore.transBeforeAreaData = arrData[0].map(function (col, index) {
return arrData.map((row, key) => {
return row[index]
})
// 将处理完的数据放到全局变量中
this.$store.state.transBefore.areaName.push(this.insertName)
break
case 'sj':
// 循环年
dataStrArr = this.$store.state.transBefore.timeArr.map((item, index) => {//外层
// console.log(this.$store.state.transBefore.transBeforeAreaData[index])
// 定义拼接计算的字符串
let comStr = ''
newArrat.forEach((list, key) => {
if (this.$store.state.transBefore.timeArr.indexOf(list) !== -1) {
comStr += datarts[index][this.$store.state.transBefore.timeArr.indexOf(list)]===''?'0':datarts[index][this.$store.state.transBefore.timeArr.indexOf(list)]
} else {
comStr += list
}
})
// console.log(comStr)
// console.log(eval(comStr))
return parseFloat(eval(comStr).toString()).toFixed(2).toString()
})
console.log(this.$store.state.transBefore, 'this.$store.state.transBefore')
let dataStrArr = this.$store.state.transBefore.termsName.map((item, index) => {//外层
// 定义拼接计算的字符串
let comStr = ''
newArrat.forEach((list, key) => {
if (this.$store.state.transBefore.timeArr.indexOf(list) !== -1) {
comStr += this.$store.state.transBefore.transBeforeAreaData[this.$store.state.transBefore.timeArr.indexOf(list)][index] === '' ? '0' : this.$store.state.transBefore.transBeforeAreaData[this.$store.state.transBefore.timeArr.indexOf(list)][index]
} else {
comStr += list
}
})
console.log(dataStrArr, '101025')
datarts.push(dataStrArr)
// 将数据转置回来
newZz = datarts[0].map(function (col, index) {
return datarts.map((row, key) => {
return row[index]
})
// console.log(comStr, 'comStr')
// console.log(eval(comStr))
return parseFloat(eval(comStr).toString()).toFixed(2).toString()
})
// console.log(dataStrArr, 'dataStrArr新增指标')
this.$store.state.transBefore.timeArr.push(this.insertName)
this.$store.state.transBefore.transBeforeAreaData.push(dataStrArr)
// 转置回来
arrData = JSON.parse(JSON.stringify(this.$store.state.transBefore.transBeforeAreaData))
this.$store.state.transBefore.transBeforeAreaData = arrData[0].map(function (col, index) {
return arrData.map((row, key) => {
return row[index]
})
// 将处理完的数据放到全局变量中
this.$store.state.transBefore.timeArr.push(this.insertName)
break
case 'zb':
// 循环年
dataStrArr = this.$store.state.transBefore.termsName.map((item, index) => {//外层
// console.log(this.$store.state.transBefore.transBeforeAreaData[index])
// 定义拼接计算的字符串
let comStr = ''
newArrat.forEach((list, key) => {
if (this.$store.state.transBefore.termsName.indexOf(list) !== -1) {
comStr += datarts[index][this.$store.state.transBefore.termsName.indexOf(list)]===''?'0':datarts[index][this.$store.state.transBefore.termsName.indexOf(list)]
} else {
comStr += list
}
})
// console.log(comStr)
// console.log(eval(comStr))
return parseFloat(eval(comStr).toString()).toFixed(2).toString()
})
// console.log(this.$store.state.transBefore, '转之后')
// 循环指标名称 回调一个计算后的数组
} else if (this.$store.state.SelecttDimension.col === 'sj' && this.$store.state.SelecttDimension.row === 'dq') {
if (this.$store.state.transBefore.areaName.indexOf(this.insertName) !== -1) {
this.$alert('您新增的指标名称已经存在请重新输入！', '温馨提示', {
confirmButtonText: '确定'
})
console.log(dataStrArr, '101025')
datarts.push(dataStrArr)
// 将数据转置回来
newZz = datarts[0].map(function (col, index) {
return datarts.map((row, key) => {
return row[index]
})
return
}
console.log(this.$store.state.transBefore, 'this.$store.state.transBefore')
let dataStrArr = this.$store.state.transBefore.timeArr.map((item, index) => {//外层
// 定义拼接计算的字符串
let comStr = ''
newArrat.forEach((list, key) => {
if (this.$store.state.transBefore.areaName.indexOf(list) !== -1) {
comStr += this.$store.state.transBefore.transBeforeAreaData[this.$store.state.transBefore.areaName.indexOf(list)][index] === '' ? '0' : this.$store.state.transBefore.transBeforeAreaData[this.$store.state.transBefore.areaName.indexOf(list)][index]
} else {
comStr += list
}
})
// 将处理完的数据放到全局变量中
this.$store.state.transBefore.termsName.push(this.insertName)
this.$store.state.transBefore.termsExplain.push('')
break
// console.log(comStr, 'comStr')
// console.log(eval(comStr))
return parseFloat(eval(comStr).toString()).toFixed(2).toString()
})
// 循环指标名称 回调一个计算后的数组
// console.log(dataStrArr, 'dataStrArr新增指标')
// 将处理完的数据放到全局变量中
this.$store.state.transBefore.areaName.push(this.insertName)
this.$store.state.transBefore.transBeforeAreaData.push(dataStrArr)
} else if (this.$store.state.SelecttDimension.col === 'dq' && this.$store.state.SelecttDimension.row === 'sj') {
if (this.$store.state.transBefore.timeArr.indexOf(this.insertName) !== -1) {
this.$alert('您新增的指标名称已经存在请重新输入！', '温馨提示', {
confirmButtonText: '确定'
})
return
}
// 将数据先进行转置
var arrData = this.$store.state.transBefore.transBeforeAreaData
this.$store.state.transBefore.transBeforeAreaData = arrData[0].map(function (col, index) {
return arrData.map((row, key) => {
return row[index]
})
})
console.log(this.$store.state.transBefore, 'this.$store.state.transBefore')
let dataStrArr = this.$store.state.transBefore.areaName.map((item, index) => {//外层
// 定义拼接计算的字符串
let comStr = ''
newArrat.forEach((list, key) => {
if (this.$store.state.transBefore.timeArr.indexOf(list) !== -1) {
comStr += this.$store.state.transBefore.transBeforeAreaData[this.$store.state.transBefore.timeArr.indexOf(list)][index] === '' ? '0' : this.$store.state.transBefore.transBeforeAreaData[this.$store.state.transBefore.timeArr.indexOf(list)][index]
} else {
comStr += list
}
})
// console.log(comStr, 'comStr')
// console.log(eval(comStr))
return parseFloat(eval(comStr).toString()).toFixed(2).toString()
})
// console.log(dataStrArr, 'dataStrArr新增指标')
this.$store.state.transBefore.timeArr.push(this.insertName)
this.$store.state.transBefore.transBeforeAreaData.push(dataStrArr)
// 转置回来
arrData = JSON.parse(JSON.stringify(this.$store.state.transBefore.transBeforeAreaData))
this.$store.state.transBefore.transBeforeAreaData = arrData[0].map(function (col, index) {
return arrData.map((row, key) => {
return row[index]
})
})
} else if (this.$store.state.SelecttDimension.col === 'zb' && this.$store.state.SelecttDimension.row === 'dq') {
if (this.$store.state.transBefore.areaName.indexOf(this.insertName) !== -1) {
this.$alert('您新增的指标名称已经存在请重新输入！', '温馨提示', {
confirmButtonText: '确定'
})
return
}
console.log(this.$store.state.transBefore, 'this.$store.state.transBefore')
let dataStrArr = this.$store.state.transBefore.termsName.map((item, index) => {//外层
// 定义拼接计算的字符串
let comStr = ''
newArrat.forEach((list, key) => {
if (this.$store.state.transBefore.areaName.indexOf(list) !== -1) {
comStr += this.$store.state.transBefore.transBeforeAreaData[this.$store.state.transBefore.areaName.indexOf(list)][index] === '' ? '0' : this.$store.state.transBefore.transBeforeAreaData[this.$store.state.transBefore.areaName.indexOf(list)][index]
} else {
comStr += list
}
})
// console.log(comStr, 'comStr')
// console.log(eval(comStr))
return parseFloat(eval(comStr).toString()).toFixed(2).toString()
})
// 循环指标名称 回调一个计算后的数组
// console.log(dataStrArr, 'dataStrArr新增指标')
// 将处理完的数据放到全局变量中
this.$store.state.transBefore.areaName.push(this.insertName)
this.$store.state.transBefore.transBeforeAreaData.push(dataStrArr)
} else if (this.$store.state.SelecttDimension.col === 'dq' && this.$store.state.SelecttDimension.row === 'zb') {
if (this.$store.state.transBefore.termsName.indexOf(this.insertName) !== -1) {
this.$alert('您新增的指标名称已经存在请重新输入！', '温馨提示', {
confirmButtonText: '确定'
})
return
}
// 将数据先进行转置
var arrData = this.$store.state.transBefore.transBeforeAreaData
this.$store.state.transBefore.transBeforeAreaData = arrData[0].map(function (col, index) {
return arrData.map((row, key) => {
return row[index]
})
})
console.log(this.$store.state.transBefore, 'this.$store.state.transBefore')
let dataStrArr = this.$store.state.transBefore.areaName.map((item, index) => {//外层
// 定义拼接计算的字符串
let comStr = ''
newArrat.forEach((list, key) => {
if (this.$store.state.transBefore.termsName.indexOf(list) !== -1) {
comStr += this.$store.state.transBefore.transBeforeAreaData[this.$store.state.transBefore.termsName.indexOf(list)][index] === '' ? '0' : this.$store.state.transBefore.transBeforeAreaData[this.$store.state.transBefore.termsName.indexOf(list)][index]
} else {
comStr += list
}
})
// console.log(comStr, 'comStr')
// console.log(eval(comStr))
return parseFloat(eval(comStr).toString()).toFixed(2).toString()
})
// console.log(dataStrArr, 'dataStrArr新增指标')
this.$store.state.transBefore.termsName.push(this.insertName)
this.$store.state.transBefore.termsExplain.push('')
this.$store.state.transBefore.transBeforeAreaData.push(dataStrArr)
// 转置回来
arrData = JSON.parse(JSON.stringify(this.$store.state.transBefore.transBeforeAreaData))
this.$store.state.transBefore.transBeforeAreaData = arrData[0].map(function (col, index) {
return arrData.map((row, key) => {
return row[index]
})
})
// console.log(this.$store.state.transBefore, '转之后')
// 循环指标名称 回调一个计算后的数组
}
// 将处理完的数据放到全局变量中
// this.$store.state.transBefore.timeArr.push(this.insertName)
this.$store.state.transBefore.transBeforeAreaData = newZz
this.closeX()
this.$emit('emitState', true)
}
}
} else {
// alert('您输入的表达式正确，请重新输入！')
@@ -552,12 +895,21 @@ export default {
})
}
} else {
this.labelData = this.$store.state.transBefore.termsName.map((item, index) => {
return {
text: item,
state: false
}
})
if (this.$store.state.SelecttDimension.row === 'sj' && this.$store.state.SelecttDimension.col === 'zb') {
this.labelData = this.$store.state.transBefore.termsName.map((item, index) => {
return {
text: item,
state: false
}
})
} else if (this.$store.state.SelecttDimension.row === 'zb' && this.$store.state.SelecttDimension.col === 'sj') {
this.labelData = this.$store.state.transBefore.timeArr.map((item, index) => {
return {
text: item,
state: false
}
})
}
}
}

9
src/components/noAreaDimension/NoAreaDimension.vue
View File

@@ -10,14 +10,15 @@
<div class="row">
<div></div>
<div class="row_main">
<div :class="{active:rowVal==='指标'}" @click="changeTabel('指标','row')">指标</div>
<div :class="{active:rowVal==='时间'}" @click="changeTabel('时间','row')">时间</div>
<div :class="{active:colVal==='指标'}" @click="changeTabel('指标','col')">指标</div>
<div :class="{active:colVal==='时间'}" @click="changeTabel('时间','col')">时间</div>
</div>
</div>
<div class="col">
<div class="row_main">
<div :class="{active:colVal==='指标'}" @click="changeTabel('指标','col')">指标</div>
<div :class="{active:colVal==='时间'}" @click="changeTabel('时间','col')">时间</div>
<div :class="{active:rowVal==='指标'}" @click="changeTabel('指标','row')">指标</div>
<div :class="{active:rowVal==='时间'}" @click="changeTabel('时间','row')">时间</div>
</div>
<div class="tabel">
<div>

7
src/store.js
View File

@@ -105,7 +105,12 @@ export default new Vuex.Store({
// 当前选中需要筛选的是指标还是地区 true指标 false地区
newSelectDaaState: true,
// 高级查询选中的当前分类
advancedSelectClassfiid: null
advancedSelectClassfiid: null,
// 转置被点击了
transClickState: false,
// 初始化请求的所有数据（全局不变）
allNochangeInitData: null
},
mutations: {},
actions: {

11
src/views/datasweb/Datasweb.vue
View File

@@ -847,6 +847,17 @@ export default {
break
case '转置':
if (this.$store.state.transBefore) {
// 当前数据是地区数据时点击转置需要将数据进行转置
if (this.$route.query.type === 'area') {
// let transpositionData = JSON.parse(JSON.stringify(this.$store.state.transBefore.transBeforeAreaData))
// this.$store.state.transBefore.transBeforeAreaData = transpositionData[0].map(function (col, index) {
// return transpositionData.map((row, key) => {
// return row[index]
// })
// })
this.$store.state.transClickState = true
}
console.log(this.$store.state.transBefore, 'this.$store.state.transBefore0022555')
// 改变转置状态
let zhuanChange = {
row: this.$store.state.SelecttDimension.col,

401
src/views/help/Help.vue
View File

@@ -22,47 +22,135 @@
<el-row class="tac">
<el-col :span="24">
<el-menu
default-active="1-1-1"
:default-openeds="defaultNew"
class="el-menu-vertical-demo"
@open="handleOpen"
@close="handleClose"
@select="selectActive"
>
<el-submenu index="1">
<template slot="title">数据查询</template>
<el-submenu index="1-1-1">
<el-submenu
index="1"
:style="{'background-color':defaultNew[defaultNew.length-1]==='1'?'#95CEE4':''}"
>
<template slot="title">前言</template>
<el-submenu
index="1-1"
:style="{'background-color':defaultNew[defaultNew.length-1]==='1-1'?'#95CEE4':''}"
>
<template slot="title">简单查询</template>
<el-menu-item index="1-1-1">数据查询</el-menu-item>
<el-menu-item index="1-1-2">指标查询</el-menu-item>
<!-- <el-menu-item index="1-1-3">快捷按钮</el-menu-item> -->
<el-submenu index="1-1-4">
<el-submenu
index="1-1-1"
:style="{'background-color':defaultNew[defaultNew.length-1]==='1-1-1'?'#95CEE4':''}"
>
<template slot="title">数据查询</template>
</el-submenu>
<el-submenu
index="1-1-2"
:style="{'background-color':defaultNew[defaultNew.length-1]==='1-1-2'?'#95CEE4':''}"
>
<template slot="title">指标解释</template>
</el-submenu>
<el-submenu
index="1-1-3"
:style="{'background-color':defaultNew[defaultNew.length-1]==='1-1-3'?'#95CEE4':''}"
>
<template slot="title">功能操作</template>
<el-menu-item index="1-1-4-1">我的收藏</el-menu-item>
<el-menu-item index="1-1-4-2">添加收藏</el-menu-item>
<el-menu-item index="1-1-4-3">新增指标</el-menu-item>
<el-menu-item index="1-1-4-4">筛选指标</el-menu-item>
<el-menu-item index="1-1-4-5">统计</el-menu-item>
<el-menu-item index="1-1-4-6">恢复</el-menu-item>
<el-menu-item index="1-1-4-7">去除空行空列</el-menu-item>
<el-menu-item index="1-1-4-8">编辑</el-menu-item>
<el-menu-item index="1-1-4-9">维度转换</el-menu-item>
<el-menu-item index="1-1-4-10">行列转置</el-menu-item>
<el-menu-item index="1-1-4-11">保存默认</el-menu-item>
<el-menu-item index="1-1-4-12">恢复默认</el-menu-item>
<el-submenu
index="1-1-3-1"
:style="{'background-color':defaultNew[defaultNew.length-1]==='1-1-3-1'?'#95CEE4':''}"
>
<template slot="title">我的收藏</template>
</el-submenu>
<el-submenu
index="1-1-3-2"
:style="{'background-color':defaultNew[defaultNew.length-1]==='1-1-3-2'?'#95CEE4':''}"
>
<template slot="title">添加收藏</template>
</el-submenu>
<el-submenu
index="1-1-3-3"
:style="{'background-color':defaultNew[defaultNew.length-1]==='1-1-3-3'?'#95CEE4':''}"
>
<template slot="title">新增指标</template>
</el-submenu>
<el-submenu
index="1-1-3-4"
:style="{'background-color':defaultNew[defaultNew.length-1]==='1-1-3-4'?'#95CEE4':''}"
>
<template slot="title">筛选指标</template>
</el-submenu>
<el-submenu
index="1-1-3-5"
:style="{'background-color':defaultNew[defaultNew.length-1]==='1-1-3-5'?'#95CEE4':''}"
>
<template slot="title">统计运算</template>
</el-submenu>
<el-submenu
index="1-1-3-6"
:style="{'background-color':defaultNew[defaultNew.length-1]==='1-1-3-6'?'#95CEE4':''}"
>
<template slot="title">恢复</template>
</el-submenu>
<el-submenu
index="1-1-3-7"
:style="{'background-color':defaultNew[defaultNew.length-1]==='1-1-3-7'?'#95CEE4':''}"
>
<template slot="title">去除空行空列</template>
</el-submenu>
<el-submenu
index="1-1-3-8"
:style="{'background-color':defaultNew[defaultNew.length-1]==='1-1-3-8'?'#95CEE4':''}"
>
<template slot="title">编辑</template>
</el-submenu>
<el-submenu
index="1-1-3-9"
:style="{'background-color':defaultNew[defaultNew.length-1]==='1-1-3-9'?'#95CEE4':''}"
>
<template slot="title">维度转换</template>
</el-submenu>
<el-submenu
index="1-1-3-10"
:style="{'background-color':defaultNew[defaultNew.length-1]==='1-1-3-10'?'#95CEE4':''}"
>
<template slot="title">行列转置</template>
</el-submenu>
<el-submenu
index="1-1-3-11"
:style="{'background-color':defaultNew[defaultNew.length-1]==='1-1-3-11'?'#95CEE4':''}"
>
<template slot="title">保存默认</template>
</el-submenu>
<el-submenu
index="1-1-3-12"
:style="{'background-color':defaultNew[defaultNew.length-1]==='1-1-3-12'?'#95CEE4':''}"
>
<template slot="title">恢复默认</template>
</el-submenu>
</el-submenu>
</el-submenu>
<el-submenu index="1-2">
<el-submenu
index="1-2"
:style="{'background-color':defaultNew[defaultNew.length-1]==='1-2'?'#95CEE4':''}"
>
<template slot="title">高级查询</template>
<el-menu-item index="1-2-1">指标选择</el-menu-item>
<el-menu-item index="1-2-2">地区选择</el-menu-item>
<el-submenu
index="1-2-1"
:style="{'background-color':defaultNew[defaultNew.length-1]==='1-2-1'?'#95CEE4':''}"
>
<template slot="title">指标选择</template>
</el-submenu>
</el-submenu>
<el-submenu index="1-3">
<el-submenu
index="1-3"
:style="{'background-color':defaultNew[defaultNew.length-1]==='1-3'?'#95CEE4':''}"
>
<template slot="title">数据地图</template>
</el-submenu>
<el-submenu index="1-4">
<template slot="title">经济图表</template>
</el-submenu>
<el-submenu index="1-5">
<el-submenu
index="1-4"
:style="{'background-color':defaultNew[defaultNew.length-1]==='1-4'?'#95CEE4':''}"
>
<template slot="title">搜索</template>
</el-submenu>
</el-submenu>
@@ -70,7 +158,7 @@
</el-col>
</el-row>
</div>
<div class="right" :style="{'height':leftHeights+'rem'}" ref="rightHeight">
<div class="right">
<div v-html="htmlStr" class="htmlStrs"></div>
</div>
</section>
@@ -96,8 +184,10 @@ export default {
},
data () {
return {
defaultNew: ['1'],
imgurl: {
pos: require('../../../static/company/posweizhi.png')
pos: require('../../../static/company/posweizhi.png'),
htmlShow1: '1010'
},
// left的高度
leftHeights: null,
@@ -105,17 +195,206 @@ export default {
htmlStr: '',
allHtml: [
{
name: '数据查询',
code: '1-1-1',
name: '前言',
code: '1',
htmls: `
国家统计数据库全新改版, 提供了以下服务：<br />
- 详实的月度、季度、年度数据以及普查、地区、部门、国际数据<br />
- 提供多种文件输出、制表、绘图、指标解释、表格转置、可视化图表、数据地理信息系统等多种功能<br />
<span style="font-size:1rem;font-weight:bold;letter-spacing:0.6rem;">前言</span><br />
知识数据平台网络提供了以下服务：<br />
- 详实的月度、季度、年度数据以及地区数据<br />
- 提供文件导出、制表、指标解释、表格转置、可视化图表、数据地图信息系统等多种功能<br />
其中具有特色的服务为：<br />
- 数据挖掘随心所欲<br />
- 海量数据一键下载<br />
- 精品资源一键分享<br /><br /><br /><br />
所做的一切，只为让数据生活更简单。下面，就让我们一起来阅读国家统计局数据库入门指南，让这篇用户手册来指引你如何使用数据库。跟着导航一起操作，即可进入轻松的查数之旅。`
所做的一切，只为让数据生活更简单。下面，就让我们一起来阅读入门指南，让这篇用户手册来指引你如何查询数据。跟着导航一起操作，即可进入轻松的查询之旅。<br /><br />
`
},
{
name: '数据查询',
code: '1-1-1',
htmls: `
<span style="font-size:1rem;font-weight:bold;letter-spacing:0.6rem;">简单查询 - 数据查询</span><br />
1.在【分类栏】中选择想要查询的指标分类，在右侧【结果栏】中显示出分类下所有指标的数据。用户可以按时间进行筛选。时间基于当前时间。<br />
<img src='${require('../../../static/help/details84.png')}' style='width:100%;height:42rem;'><br />
2.左右拖拽功能<br />
拖拽下图所示蓝色拖拽条，可左右拖拽适当调整宽度。<br />
> 拖拽前：<br />
<img src='${require('../../../static/help/details125.png')}' style='width:100%;height:42rem;'><br />
> 拖拽后：<br />
<img src='${require('../../../static/help/details134.png')}' style='width:100%;height:42rem;'><br /><br />
`
},
{
name: '指标解释',
code: '1-1-2',
htmls: `
<span style="font-size:1rem;font-weight:bold;letter-spacing:0.6rem;">简单查询 - 指标解释</span><br />
<div style="display: flex;flex-direction: row;justify-content:flex-start;align-items: center;">1、点击指标名称或指标名称前的<img src='${require('../../../static/chatCont/zhibiaojieshi.png')}' style='width:1.8rem;height:1.8rem;'></div><br />
<img src='${require('../../../static/help/details162.png')}' style='width:100%;height:42rem;'><br />
弹出【指标解释】界面，用户可以了解到指标的相关解释。<br />
<img src='${require('../../../static/help/details191.png')}' style='width:48rem;height:48rem;margin-left:calc(50% - 24rem);'><br />
2.点击【复制到粘贴板】按钮，复制文字，通过键盘上【CTRL+V】可以根据自身需要将文字粘贴到文档或其它地方。<br /><br /><br />
`
},
{
name: '我的收藏',
code: '1-1-3-1',
htmls: `
<span style="font-size:1rem;font-weight:bold;letter-spacing:0.6rem;">简单查询 - 功能操作 - 我的收藏</span><br />
【我的收藏】页面如下：<br />
<img src='${require('../../../static/help/details275.png')}' style='width:100%;height:32rem;'><br />
可在“搜索框”中输入要搜索的已收藏的文件名。<br />
`
},
{
name: '添加收藏',
code: '1-1-3-2',
htmls: `
<span style="font-size:1rem;font-weight:bold;letter-spacing:0.6rem;">简单查询 - 功能操作 - 添加收藏</span><br />
收藏页面如下图：<br />
<img src='${require('../../../static/help/details319.png')}' style='width:100%;height:32rem;'><br />
直接在输入框中输入用户自定义的收藏名称，点击【保存】保存当前操作，点击【取消】取消当前操作。<br />
`
},
{
name: '新增指标',
code: '1-1-3-3',
htmls: `
<span style="font-size:1rem;font-weight:bold;letter-spacing:0.6rem;">简单查询 - 功能操作 - 新增指标</span><br />
1.选择【数据管理】下的【新增指标】，打开【新增指标】界面：<br />
<img src='${require('../../../static/help/details409.png')}' style='width:100%;height:42rem;'><br />
• 可在输入框中填写新增指标的名称。
<div style="display: flex;flex-direction: row;justify-content:flex-start;align-items: center;">• 在列表中选择一个需要计算的指标，双击指标名称或点击 <img src='${require('../../../static/help/details457.png')}' style='width:1.8rem;height:1.8rem;'> 按钮选中到“新增指标结果框”内。</div>
• 在操作键盘处选择操作的运算符及数字，如果进行多指标计算，可在左侧列表框里多次选择指标。
• 点击【确定】保存新增指标，点击【取消】取消以上操作。
报表新增后的指标数据如下图所示：<br />
<img src='${require('../../../static/help/details567.png')}' style='width:100%;height:42rem;'><br />
`
},
{
name: '筛选指标',
code: '1-1-3-4',
htmls: `
<span style="font-size:1rem;font-weight:bold;letter-spacing:0.6rem;">简单查询 - 功能操作 - 筛选指标</span><br />
选择【数据管理】下的【筛选】，打开【筛选指标】界面。<br />
<img src='${require('../../../static/help/details606.png')}' style='width:100%;height:42rem;'><br />
• 可通过“行、列”按钮选择对行对列操作筛选。
• 在左侧指标列表框中选择要筛选的指标（新增指标和统计指标也会在列表中出现），在【数值】框中填写筛选的值。
<div style="display: flex;flex-direction: row;justify-content:flex-start;align-items: center;">•点击 <img src='${require('../../../static/help/details690.png')}' style='width:1.8rem;height:1.8rem;'> 按钮将选中的指标添加到“右侧筛选条件”框中，也可通过<img src='${require('../../../static/help/details717.png')}' style='width:1.8rem;height:1.8rem;'>按钮将已在右侧列表中的指标移除。</div>
• 点击【确定】按钮对当前报表进行筛选，点击【取消】取消操作。
`
},
{
name: '统计运算',
code: '1-1-3-5',
htmls: `
<span style="font-size:1rem;font-weight:bold;letter-spacing:0.6rem;">简单查询 - 功能操作 - 统计运算</span><br />
选择【数据管理】下的【统计】，展开更多选择条件：【对行运算】、【对列运算】，以下为计算方式：<br />
<img src='${require('../../../static/help/details824.png')}' style='width:100%;height:28rem;'><br />
• 选择【对行运算】下的【SUM求和】的计算方式后，数据报表新增一列，得到每行计算后的结果如下图：
<img src='${require('../../../static/help/details876.png')}' style='width:100%;height:42rem;'><br />
• 选择【对列运算】下的【SUM求和】的计算方式后，数据报表新增一行，得到每列计算后的结果如下图：
<img src='${require('../../../static/help/details928.png')}' style='width:100%;height:42rem;'><br />
`
},
{
name: '恢复',
code: '1-1-3-6',
htmls: `
<span style="font-size:1rem;font-weight:bold;letter-spacing:0.6rem;">简单查询 - 功能操作 - 恢复</span><br />
选择【数据管理】下的【恢复】，数据报表恢复默认初始状态<br />
`
},
{
name: '去除空行空列',
code: '1-1-3-7',
htmls: `
<span style="font-size:1rem;font-weight:bold;letter-spacing:0.6rem;">简单查询 - 功能操作 - 去除空行空列</span><br />
选择【数据管理】下的【去除空行空列】，将报表中的行、列为空的记录去掉。<br />
`
},
{
name: '编辑',
code: '1-1-3-8',
htmls: `
<span style="font-size:1rem;font-weight:bold;letter-spacing:0.6rem;">简单查询 - 功能操作 - 编辑</span><br />
选择【报表管理】下的【编辑】，弹出编辑窗口，如下图：<br />
<img src='${require('../../../static/help/details1054.png')}' style='width:100%;height:42rem;'><br />
• 可对行、列进行编辑。
<div style="display: flex;flex-direction: row;justify-content:flex-start;align-items: center;">• 可通过<img src='${require('../../../static/help/details1074.png')}' style='width:1.2rem;height:1.2rem;'>复选框，勾选指标，也可通过右侧“全选”“反选”按钮快速操作。</div>
• 点击确定，查看编辑后的报表。
`
},
{
name: '维度转换',
code: '1-1-3-9',
htmls: `
<span style="font-size:1rem;font-weight:bold;letter-spacing:0.6rem;">简单查询 - 功能操作 - 维度转换</span><br />
选择【报表管理】下的【维度转换】， 弹出【维度转换】窗口。<br />
<img src='${require('../../../static/help/details1163.png')}' style='width:100%;height:32rem;'><br />
<div style="display: flex;flex-direction: row;justify-content:flex-start;align-items: center;">• 通过点击行、列上<img src='${require('../../../static/help/details1175.png')}' style='width:12rem;height:2.4rem;'>按钮，设置行、列上显示指标或时间。</div>
• 点击【确认】按钮，查看数报表的维度变化。
`
},
{
name: '行列转置',
code: '1-1-3-10',
htmls: `
<span style="font-size:1rem;font-weight:bold;letter-spacing:0.6rem;">简单查询 - 功能操作 - 行列转置</span><br />
选择【报表管理】下的【转置】，报表中的行和列互换。<br />
• 转置前：<br />
<img src='${require('../../../static/help/details1260.png')}' style='width:100%;height:42rem;'><br />
• 转置后：
<img src='${require('../../../static/help/details1269.png')}' style='width:100%;height:42rem;'><br />
`
},
{
name: '保存默认',
code: '1-1-3-11',
htmls: `
<span style="font-size:1rem;font-weight:bold;letter-spacing:0.6rem;">简单查询 - 功能操作 - 保存默认</span><br />
选择【报表管理】下的【保存默认】，将修改后的报表条件及数据保存为该报表的默认显示。<br />
`
},
{
name: '指标选择',
code: '1-2-1',
htmls: `
<span style="font-size:1rem;font-weight:bold;letter-spacing:0.6rem;">高级查询 - 指标选择</span><br />
高级查询首先要选择指标，分为简单查询和模糊查找。<br />
• 简单查询<br />
1. 在【指标】中选择想要查询的指标分类，该分类下的指标将显示在“指标列表”中。<br />
2. 选择“指标列表”中的指标项，选中的指标显示在右侧的“已选择的指标”中。<br />
• 模糊查找<br />
在“指标列表”的搜索框中输入要查找的指标名称，点击【查询】按钮，在所有的指标范围内查找符合条件的指标名称，显示在“指标列表”中。<br />
如果想在当前查找结果中进行二次查找，勾选【结果中筛选】前的复选框。<br />
<img src='${require('../../../static/help/details1599.png')}' style='width:100%;height:42rem;'><br />
选好指标后，点击【查询数据】按钮，查看已选指标结果页面。<br />
`
},
{
name: '数据地图',
code: '1-3',
htmls: `
<span style="font-size:1rem;font-weight:bold;letter-spacing:0.6rem;"> 数据地图 </span><br />
当鼠标滑过地图上的地区时，会根据鼠标所指的地区，显示对应的数据信息框。<br />
如需查看其他时间的数据，在【时间】下拉框中选择时间<br />
通过左侧指标列表选择指标进行查看，指标数据会以不同的色阶在地图中显示<br />
<img src='${require('../../../static/help/details1738.png')}' style='width:100%;height:42rem;'><br />
`
},
{
name: '搜索',
code: '1-4',
htmls: `
<span style="font-size:1rem;font-weight:bold;letter-spacing:0.6rem;"> 搜索 </span><br />
1.在搜索框中填入要搜索的关键字：指标名称，<br />
示例：用户需查找指标名为游客的数据，在搜索框中输入“游客”<br />
2. 点击【搜索】按钮，进入搜索页面，页面上显示出符合条件的所有指标，如下图：<br />
<img src='${require('../../../static/help/details1835.png')}' style='width:100%;height:16rem;'><br />
用户可以通过【筛选栏目】下拉框来进行筛选，如下图。<br />
<img src='${require('../../../static/help/details1863.png')}' style='width:100%;height:16rem;'><br />
`
}
]
}
@@ -123,13 +402,14 @@ export default {
methods: {
handleOpen (key, keyPath) {
console.log(key, keyPath)
this.defaultNew = keyPath
this.showColoect(key)
},
handleClose (key, keyPath) {
console.log(key, keyPath)
},
selectActive (key, keyPath) {
console.log(key, keyPath)
this.showColoect(key)
console.log(key, keyPath, '00')
},
// 渲染我的收藏
showColoect (key) {
@@ -142,20 +422,31 @@ export default {
}
},
mounted () {
this.showColoect('1-1-1')
this.$detector().listenTo(this.$refs.leftHeight, (element) => {
var width = element.offsetWidth
var height = element.offsetHeight
this.$nextTick(() => {
console.log('Size: ' + width + 'x' + height)
// 使echarts尺寸重置
this.leftHeights = height / (160 / ((1920 - 17) / document.body.clientWidth) / 10)
})
})
this.showColoect('1')
}
}
</script>
<style lang="scss" scoped>
/deep/.el-submenu__title {
height: 3rem;
line-height: 3rem;
}
/deep/ .el-submenu__title {
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
flex-flow: row-reverse;
// border: 1px solid red;
padding: 0;
}
/deep/ .el-submenu__icon-arrow {
position: static;
margin-top: 0.25rem;
margin-right: 0.42rem;
// left: 0;
// right: auto;
}
.help_cont {
width: 100%;
display: flex;
@@ -208,25 +499,27 @@ export default {
justify-content: space-between;
align-items: center;
& > .left {
padding: 1rem 0;
width: 25.5rem;
min-height: 43.5rem;
height: 120vh;
background-color: #ffffff;
box-shadow: 0rem 0.1875rem 1rem 0rem rgba(172, 172, 172, 0.38);
overflow-y: auto;
}
& > .right {
// height: 100%;
width: 57.625rem;
min-height: 43.5rem;
height: 100%;
height: calc(120vh + 2rem);
background-color: #ffffff;
box-shadow: 0rem 0.1875rem 1rem 0rem rgba(172, 172, 172, 0.38);
display: flex;
flex-direction: row;
justify-content: center;
align-items: flex-start;
overflow-y: auto;
& > .htmlStrs {
margin-top:1.75rem;
margin-top: 1.75rem;
width: 55rem;
line-height: 2.5rem;
}
}
}

BIN
static/help/details1054.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 887 KiB

BIN
static/help/details1074.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 693 B

BIN
static/help/details1163.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 614 KiB

BIN
static/help/details1175.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
static/help/details125.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 954 KiB

BIN
static/help/details1260.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 970 KiB

BIN
static/help/details1269.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 967 KiB

BIN
static/help/details134.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 959 KiB

BIN
static/help/details159.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
static/help/details1599.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 950 KiB

BIN
static/help/details162.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 978 KiB

BIN
static/help/details1738.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 903 KiB

BIN
static/help/details1835.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 319 KiB

BIN
static/help/details1863.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 314 KiB

BIN
static/help/details191.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 896 KiB

BIN
static/help/details275.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 590 KiB

BIN
static/help/details319.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 429 KiB

BIN
static/help/details409.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 MiB

BIN
static/help/details457.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.0 KiB

BIN
static/help/details567.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 976 KiB

BIN
static/help/details606.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 779 KiB

BIN
static/help/details690.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.8 KiB

BIN
static/help/details717.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 2.6 KiB

BIN
static/help/details824.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 280 KiB

BIN
static/help/details84.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 974 KiB

BIN
static/help/details876.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 954 KiB

BIN
static/help/details928.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 974 KiB