zjl #35

Merged
juzi merged 2 commits from zjl into test 2023-09-27 09:38:02 +08:00
15 changed files with 302 additions and 53 deletions

View File

@ -0,0 +1,13 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>收起箭头小备份 3</title>
<g id="能源管理" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="能源监控-同比分析" transform="translate(-848.000000, -392.000000)" fill-rule="nonzero">
<g id="收起箭头小备份-3" transform="translate(855.000000, 399.000000) scale(1, -1) translate(-855.000000, -399.000000) translate(848.000000, 392.000000)">
<rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="14" height="14"></rect>
<path d="M6.60391666,1.57197282 L7.01633334,1.15897282 L12.70325,6.8441395 C12.9278333,7.06872283 12.93075,7.4408895 12.70325,7.6683895 C12.5941655,7.77825546 12.4457769,7.84009206 12.2909546,7.84020155 C12.1361323,7.84031104 11.9876564,7.77868438 11.8784167,7.66897282 L7.0175,2.8103895 L2.16066666,7.66955616 C2.05160439,7.77930978 1.90326864,7.84102718 1.74854166,7.84102718 C1.59381468,7.84102718 1.44547894,7.77930978 1.33641666,7.66955616 C1.10964988,7.4415567 1.1091291,7.07336285 1.33525,6.84472282 L6.58116666,1.59647282 L6.6045,1.57255616 L6.60391666,1.57197282 Z" id="路径" fill="#FFBD02"></path>
<path d="M6.60391666,6.57197282 L7.01633334,6.15897282 L12.70325,11.8441395 C12.9278333,12.0687228 12.93075,12.4408895 12.70325,12.6683895 C12.5941655,12.7782555 12.4457769,12.8400921 12.2909546,12.8402015 C12.1361323,12.840311 11.9876564,12.7786844 11.8784167,12.6689728 L7.0175,7.8103895 L2.16066666,12.6695562 C2.05160439,12.7793098 1.90326864,12.8410272 1.74854166,12.8410272 C1.59381468,12.8410272 1.44547894,12.7793098 1.33641666,12.6695562 C1.10964988,12.4415567 1.1091291,12.0733628 1.33525,11.8447228 L6.58116666,6.59647282 L6.6045,6.57255616 L6.60391666,6.57197282 Z" id="路径备份-2" fill="#FFBD02"></path>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 2.0 KiB

View File

@ -0,0 +1,13 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>收起箭头小备份 11</title>
<g id="能源管理" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="能源监控-同比分析" transform="translate(-848.000000, -269.000000)" fill-rule="nonzero">
<g id="收起箭头小备份-11" transform="translate(848.000000, 269.000000)">
<rect id="矩形" fill="#000000" opacity="0" x="0" y="0" width="14" height="14"></rect>
<path d="M6.60391666,1.57197282 L7.01633334,1.15897282 L12.70325,6.8441395 C12.9278333,7.06872283 12.93075,7.4408895 12.70325,7.6683895 C12.5941655,7.77825546 12.4457769,7.84009206 12.2909546,7.84020155 C12.1361323,7.84031104 11.9876564,7.77868438 11.8784167,7.66897282 L7.0175,2.8103895 L2.16066666,7.66955616 C2.05160439,7.77930978 1.90326864,7.84102718 1.74854166,7.84102718 C1.59381468,7.84102718 1.44547894,7.77930978 1.33641666,7.66955616 C1.10964988,7.4415567 1.1091291,7.07336285 1.33525,6.84472282 L6.58116666,1.59647282 L6.6045,1.57255616 L6.60391666,1.57197282 Z" id="路径" fill="#37D97F"></path>
<path d="M6.60391666,6.57197282 L7.01633334,6.15897282 L12.70325,11.8441395 C12.9278333,12.0687228 12.93075,12.4408895 12.70325,12.6683895 C12.5941655,12.7782555 12.4457769,12.8400921 12.2909546,12.8402015 C12.1361323,12.840311 11.9876564,12.7786844 11.8784167,12.6689728 L7.0175,7.8103895 L2.16066666,12.6695562 C2.05160439,12.7793098 1.90326864,12.8410272 1.74854166,12.8410272 C1.59381468,12.8410272 1.44547894,12.7793098 1.33641666,12.6695562 C1.10964988,12.4415567 1.1091291,12.0733628 1.33525,11.8447228 L6.58116666,6.59647282 L6.6045,6.57255616 L6.60391666,6.57197282 Z" id="路径备份-2" fill="#37D97F"></path>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.9 KiB

View File

@ -25,6 +25,10 @@ export default {
default: () => { default: () => {
return [] return []
} }
},
timeDim: {
type: String,
default: ''
} }
}, },
watch: { watch: {
@ -58,32 +62,58 @@ export default {
tempArr = this.chartData[0].trendRespVOList tempArr = this.chartData[0].trendRespVOList
} }
for (let k = 0; k < tempArr.length; k++) { for (let k = 0; k < tempArr.length; k++) {
xData.push(tempArr[k].time) let time = ''
if (this.timeDim === '3') {
let year = tempArr[k].time.slice(0,4)
let weak = tempArr[k].time.slice(4,6)
time = year+' 第 '+weak+' 周'
} else {
time = tempArr[k].time
}
xData.push(time)
} }
for (let i = 0; i < this.chartData.length; i++) { for (let i = 0; i < this.chartData.length; i++) {
let obj = { let obj = {
name: this.chartData[i].objName + this.chartData[i].objCode, name: this.chartData[i].objName + this.chartData[i].objCode,
type: 'bar', type: 'bar',
barMaxWidth: 20,
label: {
show: true,
position: 'top'
},
data: [] data: []
} }
legendData.push(this.chartData[i].objName + this.chartData[i].objCode) legendData.push(this.chartData[i].objName + this.chartData[i].objCode)
let temp = this.chartData[i].trendRespVOList let temp = this.chartData[i].trendRespVOList
for (let j = 0; j < temp.length; j++) { for (let j = 0; j < temp.length; j++) {
let num = temp[j].useNum ? temp[j].useNum : 0 let num = temp[j].useNum ? temp[j].useNum : ''
obj.data.push(num) obj.data.push(num)
} }
yData.push(obj) yData.push(obj)
} }
var option = { var option = {
color:['#FFDC94','#8EF0AB','#63BDFF','#288AFF','#7164FF'],
tooltip: { tooltip: {
trigger: 'axis' trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
left: '4%',
right: '1%',
bottom: '1%',
containLabel: true
}, },
legend: { legend: {
data: legendData data: legendData
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',
data: xData data: xData,
axisLabel: {
rotate: "45"
}
}, },
yAxis: { yAxis: {
type: 'value' type: 'value'

View File

@ -25,6 +25,10 @@ export default {
default: () => { default: () => {
return [] return []
} }
},
timeDim: {
type: String,
default: ''
} }
}, },
watch: { watch: {
@ -58,7 +62,15 @@ export default {
tempArr = this.chartData[0].trendRespVOList tempArr = this.chartData[0].trendRespVOList
} }
for (let k = 0; k < tempArr.length; k++) { for (let k = 0; k < tempArr.length; k++) {
xData.push(tempArr[k].time) let time = ''
if (this.timeDim === '3') {
let year = tempArr[k].time.slice(0,4)
let weak = tempArr[k].time.slice(4,6)
time = year+' 第 '+weak+' 周'
} else {
time = tempArr[k].time
}
xData.push(time)
} }
for (let i = 0; i < this.chartData.length; i++) { for (let i = 0; i < this.chartData.length; i++) {
let obj = { let obj = {
@ -70,22 +82,35 @@ export default {
legendData.push(this.chartData[i].objName + this.chartData[i].objCode) legendData.push(this.chartData[i].objName + this.chartData[i].objCode)
let temp = this.chartData[i].trendRespVOList let temp = this.chartData[i].trendRespVOList
for (let j = 0; j < temp.length; j++) { for (let j = 0; j < temp.length; j++) {
let num = temp[j].useNum ? temp[j].useNum : 0 let num = temp[j].useNum ? temp[j].useNum : ''
obj.data.push(num) obj.data.push(num)
} }
yData.push(obj) yData.push(obj)
} }
var option = { var option = {
color:['#FFDC94','#8EF0AB','#63BDFF','#288AFF','#7164FF'],
tooltip: { tooltip: {
trigger: 'axis' trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
grid: {
left: '4%',
right: '1%',
bottom: '1%',
containLabel: true
}, },
legend: { legend: {
data: legendData data: legendData
}, },
xAxis: { xAxis: {
type: 'category', type: 'category',
data: xData data: xData,
axisLabel: {
rotate: "45"
}
}, },
yAxis: { yAxis: {
type: 'value' type: 'value'

View File

@ -135,7 +135,7 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="对象选择"> <el-form-item label="对象选择">
<el-select v-model="queryParams.objIds" placeholder="请选择" multiple collapse-tags style="width: 200px;" size="small"> <el-select v-model="queryParams.objIds" placeholder="请选择" multiple :multiple-limit='5' collapse-tags style="width: 200px;" size="small">
<el-option <el-option
v-for="item in objectList" v-for="item in objectList"
:key="item.id" :key="item.id"

View File

@ -1,15 +1,17 @@
<template> <template>
<div class="app-container" id="contrastAnalysisBox"> <div class="app-container contrastAnalysisBox" id="contrastAnalysisBox">
<!-- 搜索工作栏 --> <!-- 搜索工作栏 -->
<search-area :isFold="isFold" @submit="getList"/> <search-area :isFold="isFold" @submit="getList"/>
<el-tabs v-model="activeName" @tab-click="switchChart"> <el-tabs v-model="activeName" @tab-click="switchChart" v-show='chartData.length'>
<el-tab-pane label="柱状图" name="bar"> <el-tab-pane label="柱状图" name="bar">
<bar-chart ref="analysisBarChart" :chartData="chartData" /> <bar-chart ref="analysisBarChart" :chartData="chartData" :timeDim="timeDim" />
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="折线图" name="line"> <el-tab-pane label="折线图" name="line">
<line-chart ref="analysisLineChart" :chartData="chartData"/> <line-chart ref="analysisLineChart" :chartData="chartData" :timeDim="timeDim"/>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
<!-- 没有数据 -->
<div class="no-data-bg" v-show='!chartData.length'></div>
</div> </div>
</template> </template>
<script> <script>
@ -25,7 +27,8 @@ export default {
return { return {
isFold: false, isFold: false,
activeName: 'bar', activeName: 'bar',
chartData: [] chartData: [],
timeDim: ''
} }
}, },
mounted() { mounted() {
@ -38,6 +41,7 @@ export default {
}, },
methods: { methods: {
getList(params) { getList(params) {
this.timeDim = params.timeDim
getCompare({ ...params }).then((res) => { getCompare({ ...params }).then((res) => {
console.log(res) console.log(res)
if (res.code === 0) { if (res.code === 0) {
@ -60,4 +64,33 @@ export default {
} }
} }
} }
</script> </script>
<style lang='scss'>
.contrastAnalysisBox {
.el-tabs__nav::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 2px;
background-color: #e4e7ed;
/* z-index: 1; */
}
.el-tabs__nav-wrap::after {
width: 0;
}
.el-tabs__item {
padding: 0 10px;
}
.el-tabs__item:hover {
color: rgba(0, 0, 0, 0.85);
}
.el-tabs__item.is-active {
color: rgba(0, 0, 0, 0.85);
}
.el-tabs__item {
color: rgba(0, 0, 0, 0.45);
}
}
</style>

View File

@ -57,12 +57,22 @@ export default {
{ {
name: '本期', name: '本期',
type: 'bar', type: 'bar',
data: [] data: [],
barWidth: 20,
label: {
show: true,
position: 'top'
}
}, },
{ {
name: '上期', name: '上期',
type: 'bar', type: 'bar',
data: [] data: [],
barWidth: 20,
label: {
show: true,
position: 'top'
}
} }
] ]
for (let j = 0; j < arr.length; j++) { for (let j = 0; j < arr.length; j++) {
@ -79,6 +89,7 @@ export default {
// title: { // title: {
// text: 'World Population' // text: 'World Population'
// }, // },
color:['#288AFF','#8EF0AB'],
tooltip: { tooltip: {
trigger: 'axis', trigger: 'axis',
axisPointer: { axisPointer: {
@ -87,8 +98,8 @@ export default {
}, },
legend: {}, legend: {},
grid: { grid: {
left: '3%', left: '1%',
right: '4%', right: '1%',
bottom: '3%', bottom: '3%',
containLabel: true containLabel: true
}, },

View File

@ -3,14 +3,18 @@
<!-- 搜索工作栏 --> <!-- 搜索工作栏 -->
<search-area @submit="getList" @exportD="exportData"/> <search-area @submit="getList" @exportD="exportData"/>
<!-- 表格 --> <!-- 表格 -->
<base-table <div v-show="chartData.length">
:table-props="tableProps" <base-table
:table-data="list" :table-props="tableProps"
class="qoq-out-table" :table-data="list"
/> class="qoq-out-table"
<div style='width: 100%;height: 300px;padding-top: 30px;'> />
<line-chart ref="analysisLineChart" :chartData="chartData"/> <div style='width: 100%;height: 300px;padding-top: 30px;'>
<line-chart ref="analysisLineChart" :chartData="chartData"/>
</div>
</div> </div>
<!-- 没有数据 -->
<div class="no-data-bg" v-show='!chartData.length'></div>
</div> </div>
</template> </template>
<script> <script>

View File

@ -25,6 +25,10 @@ export default {
default: () => { default: () => {
return [] return []
} }
},
timeDim: {
type: String,
default: ''
} }
}, },
watch: { watch: {
@ -51,13 +55,37 @@ export default {
let xData = [] let xData = []
let yData = [] let yData = []
for (let i = 0; i < this.chartData.length; i++) { for (let i = 0; i < this.chartData.length; i++) {
xData.push(this.chartData[i].time) let time = ""
if (this.timeDim === '3') {
let year = this.chartData[i].time.slice(0,4)
let weak = this.chartData[i].time.slice(4,6)
time = year+' 第 '+weak+' 周'
} else {
time = this.chartData[i].time
}
xData.push(time)
yData.push(this.chartData[i].useNum) yData.push(this.chartData[i].useNum)
} }
var option = { var option = {
color:['#288AFF'],
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
grid: {
left: '4%',
right: '1%',
bottom: '1%',
containLabel: true
},
xAxis: { xAxis: {
type: 'category', type: 'category',
data: xData data: xData,
axisLabel: {
rotate: "45"
}
}, },
yAxis: { yAxis: {
type: 'value' type: 'value'
@ -65,7 +93,12 @@ export default {
series: [ series: [
{ {
data: yData, data: yData,
type: 'bar' type: 'bar',
barMaxWidth: 20,
label: {
show: true,
position: 'top'
}
} }
] ]
}; };

View File

@ -8,6 +8,7 @@
<script> <script>
import * as echarts from 'echarts' import * as echarts from 'echarts'
import resize from '@/utils/chartMixins/resize' import resize from '@/utils/chartMixins/resize'
import moment from 'moment'
export default { export default {
name: "LineChart", name: "LineChart",
mixins: [resize], mixins: [resize],
@ -25,6 +26,10 @@ export default {
default: () => { default: () => {
return [] return []
} }
},
timeDim: {
type: String,
default: ''
} }
}, },
watch: { watch: {
@ -51,14 +56,35 @@ export default {
let xData = [] let xData = []
let yData = [] let yData = []
for (let i = 0; i < this.chartData.length; i++) { for (let i = 0; i < this.chartData.length; i++) {
xData.push(this.chartData[i].time) let time = ""
if (this.timeDim === '3') {
let year = this.chartData[i].time.slice(0,4)
let weak = this.chartData[i].time.slice(4,6)
time = year+' 第 '+weak+' 周'
} else {
time = this.chartData[i].time
}
xData.push(time)
yData.push(this.chartData[i].useNum) yData.push(this.chartData[i].useNum)
} }
var option = { var option = {
color:['#288AFF'],
tooltip: {
trigger: 'axis'
},
grid: {
left: '4%',
right: '1%',
bottom: '1%',
containLabel: true
},
xAxis: { xAxis: {
type: 'category', type: 'category',
data: xData data: xData,
axisLabel: {
rotate: "45"
}
}, },
yAxis: { yAxis: {
type: 'value' type: 'value'

View File

@ -1,15 +1,17 @@
<template> <template>
<div class="app-container" id="trendAnalysisBox"> <div class="app-container trendAnalysisBox" id="trendAnalysisBox">
<!-- 搜索工作栏 --> <!-- 搜索工作栏 -->
<search-area :isFold="isFold" @submit="getList"/> <search-area :isFold="isFold" @submit="getList"/>
<el-tabs v-model="activeName" @tab-click="switchChart"> <el-tabs v-model="activeName" @tab-click="switchChart" v-show='chartData.length'>
<el-tab-pane label="柱状图" name="bar"> <el-tab-pane label="柱状图" name="bar">
<bar-chart ref="analysisBarChart" :chartData="chartData" /> <bar-chart ref="analysisBarChart" :chartData="chartData" :timeDim="timeDim"/>
</el-tab-pane> </el-tab-pane>
<el-tab-pane label="折线图" name="line"> <el-tab-pane label="折线图" name="line">
<line-chart ref="analysisLineChart" :chartData="chartData"/> <line-chart ref="analysisLineChart" :chartData="chartData" :timeDim="timeDim"/>
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
<!-- 没有数据 -->
<div class="no-data-bg" v-show='!chartData.length'></div>
</div> </div>
</template> </template>
<script> <script>
@ -25,7 +27,8 @@ export default {
return { return {
isFold: false, isFold: false,
activeName: 'bar', activeName: 'bar',
chartData: [] chartData: [],
timeDim: ''
} }
}, },
mounted() { mounted() {
@ -37,6 +40,7 @@ export default {
}, },
methods: { methods: {
getList(params) { getList(params) {
this.timeDim = params.timeDim
getEnergyTrend({ ...params }).then((res) => { getEnergyTrend({ ...params }).then((res) => {
if (res.code === 0) { if (res.code === 0) {
this.chartData = res.data this.chartData = res.data
@ -58,4 +62,33 @@ export default {
} }
} }
} }
</script> </script>
<style lang='scss'>
.trendAnalysisBox {
.el-tabs__nav::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 2px;
background-color: #e4e7ed;
/* z-index: 1; */
}
.el-tabs__nav-wrap::after {
width: 0;
}
.el-tabs__item {
padding: 0 10px;
}
.el-tabs__item:hover {
color: rgba(0, 0, 0, 0.85);
}
.el-tabs__item.is-active {
color: rgba(0, 0, 0, 0.85);
}
.el-tabs__item {
color: rgba(0, 0, 0, 0.45);
}
}
</style>

View File

@ -75,6 +75,7 @@ export default {
} }
} }
var option = { var option = {
color:['#FFDC94','#8EF0AB','#63BDFF','#288AFF','#7164FF','#FF6860','#FF9747','#B0EB42','#D680FF','#0043D2'],
legend: { legend: {
data: keys data: keys
}, },
@ -82,8 +83,8 @@ export default {
trigger: 'axis' trigger: 'axis'
}, },
grid: { grid: {
left: '3%', left: '1%',
right: '4%', right: '1%',
bottom: '3%', bottom: '3%',
containLabel: true containLabel: true
}, },

View File

@ -0,0 +1,18 @@
<template>
<div>
<svg-icon icon-class="upArrow" v-show='injectData[injectData.prop] > 0'/>
<svg-icon icon-class="downArrow" v-show='injectData[injectData.prop] < 0'/>
<span style="margin-left: 5px;">{{ injectData[injectData.prop] }}</span>
</div>
</template>
<script>
export default {
name: 'subRate',
props: {
injectData: {
type: Object,
default: () => ({})
}
}
}
</script>

View File

@ -2,20 +2,25 @@
<div class="app-container"> <div class="app-container">
<!-- 搜索工作栏 --> <!-- 搜索工作栏 -->
<search-area @submit="getList" @exportD="exportData"/> <search-area @submit="getList" @exportD="exportData"/>
<div style='width: 100%;height: 300px;'> <div v-show='chartData.length'>
<line-chart ref="analysisLineChart" :chartData="chartData"/> <div style='width: 100%;height: 400px;'>
<line-chart ref="analysisLineChart" :chartData="chartData"/>
</div>
<!-- 表格 -->
<base-table
:table-props="tableProps"
:table-data="list"
:max-height="tableH"
class="yoy-out-table"
/>
</div> </div>
<!-- 表格 --> <!-- 没有数据 -->
<base-table <div class="no-data-bg" v-show='!chartData.length'></div>
:table-props="tableProps"
:table-data="list"
:max-height="tableH"
class="yoy-out-table"
/>
</div> </div>
</template> </template>
<script> <script>
import { getYoy } from "@/api/analysis/energyAnalysis" import { getYoy } from "@/api/analysis/energyAnalysis"
import subRate from "./components/subRate.vue"
import SearchArea from "./components/searchArea" import SearchArea from "./components/searchArea"
import LineChart from "./components/lineChart" import LineChart from "./components/lineChart"
import FileSaver from "file-saver" import FileSaver from "file-saver"
@ -28,12 +33,12 @@ export default {
chartData: [], chartData: [],
tableProps: [], tableProps: [],
list: [], list: [],
tableH: this.tableHeight(500) tableH: this.tableHeight(600)
} }
}, },
mounted() { mounted() {
window.addEventListener('resize', () => { window.addEventListener('resize', () => {
this.tableH = this.tableHeight(500) this.tableH = this.tableHeight(600)
}) })
}, },
methods: { methods: {
@ -65,11 +70,15 @@ export default {
let obj = {} let obj = {}
obj.prop = tempX[j].prop + '_' + nameData[i].name obj.prop = tempX[j].prop + '_' + nameData[i].name
obj.label = nameData[i].name obj.label = nameData[i].name
if (obj.label.indexOf('同比')!= -1) {
obj.subcomponent = subRate
}
tempX[j].children.push(obj) tempX[j].children.push(obj)
} }
} }
} }
this.tableProps = [{prop: 'time',label: '时间'}].concat(tempX) this.tableProps = [{prop: 'time',label: '时间'}].concat(tempX)
console.log(this.tableProps)
// //
this.list = [] this.list = []
for (let k = 0; k < data.length; k++) { for (let k = 0; k < data.length; k++) {

View File

@ -38,15 +38,15 @@ const tableProps = [
label: '能源类型' label: '能源类型'
}, },
{ {
prop: 'startNum', prop: 'startValue',
label: '抄表数(起始)' label: '抄表数(起始)'
}, },
{ {
prop: 'endNum', prop: 'endValue',
label: '抄表数(结束)' label: '抄表数(结束)'
}, },
{ {
prop: 'useNum', prop: 'diffValue',
label: '消耗量' label: '消耗量'
} }
] ]