|
|
@@ -0,0 +1,547 @@
|
|
|
+<template>
|
|
|
+ <div class="ztfx" >
|
|
|
+ <div class="action-bar">
|
|
|
+ <div class="query mg-b-16">
|
|
|
+ <div class="query-items">
|
|
|
+ <div class="query-item">
|
|
|
+ <div class="lable">日期：</div>
|
|
|
+ <div class="search-input">
|
|
|
+ <el-date-picker
|
|
|
+ v-model="monthValue"
|
|
|
+ type="year"
|
|
|
+ placeholder="选择年份"
|
|
|
+ popper-class="date-select"
|
|
|
+ :clearable="false"
|
|
|
+ >
|
|
|
+ </el-date-picker>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="query-item">
|
|
|
+ <div class="search-input select-btn">
|
|
|
+ <button class="btn green" @click="onClickSearch">搜索</button>
|
|
|
+ </div>
|
|
|
+ <div class="search-input select-btn">
|
|
|
+ <button class="btn green" @click="exportPDF">导出</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-row :gutter="20" class="table-panel pdfDom">
|
|
|
+ <el-col :span="24">
|
|
|
+ <!-- <panel :title="'月度'" :showLine="false"> -->
|
|
|
+ <div class="table">
|
|
|
+ <table style="width:100%;" border="0" cellspacing="0">
|
|
|
+ <thead>
|
|
|
+ <tr>
|
|
|
+ <th rowspan="2" class="type1" style="width:4vh;"></th>
|
|
|
+ <template v-for="m of monthData" :key="m">
|
|
|
+ <th style="width:6vh;" class="type1" rowspan="2">{{m}}</th>
|
|
|
+ </template>
|
|
|
+ </tr>
|
|
|
+
|
|
|
+ </thead>
|
|
|
+ </table>
|
|
|
+ <div style=" ">
|
|
|
+ <table
|
|
|
+ style="width:100%;text-align:center;"
|
|
|
+ border="0"
|
|
|
+ cellspacing="0"
|
|
|
+ >
|
|
|
+ <tbody>
|
|
|
+ <tr>
|
|
|
+ <td style="width:4vh;"></td>
|
|
|
+ <template v-for="(x ,i) of MhsLists" :key="i">
|
|
|
+ <td style="width:3vh;">本期</td>
|
|
|
+ <td style="width:3vh;">同期</td>
|
|
|
+ </template>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td class="td-item" style="width:4vh;">麻黄山</td>
|
|
|
+ <template v-for="(item, index) of MhsLists" :key="index">
|
|
|
+ <td style="width:3vh;">
|
|
|
+ {{ item.current }}
|
|
|
+ <template v-if="item.compare === -1">
|
|
|
+ <span class="svg-icon svg-icon-yellow">
|
|
|
+ <svg-icon svgid="svg-arrow-dpwn-1" />
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ <template v-if="item.compare === 1">
|
|
|
+ <span class="svg-icon svg-icon-green">
|
|
|
+ <svg-icon svgid="svg-arrow-up-1" />
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </td>
|
|
|
+ <td style="width:3vh;">
|
|
|
+ {{ item.sameperiod }}
|
|
|
+ </td>
|
|
|
+ </template>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td class="td-item" style="width:4vh;">牛首山</td>
|
|
|
+ <template v-for="(item, index) of NshList" :key="index">
|
|
|
+ <td style="width:3vh;">
|
|
|
+ {{ item.current }}
|
|
|
+ <template v-if="item.compare === -1">
|
|
|
+ <span class="svg-icon svg-icon-yellow">
|
|
|
+ <svg-icon svgid="svg-arrow-dpwn-1" />
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ <template v-if="item.compare === 1">
|
|
|
+ <span class="svg-icon svg-icon-green">
|
|
|
+ <svg-icon svgid="svg-arrow-up-1" />
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </td>
|
|
|
+ <td style="width:3vh;">
|
|
|
+ {{ item.sameperiod }}
|
|
|
+ </td>
|
|
|
+ </template>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td class="td-item" style="width:4vh;">青山</td>
|
|
|
+ <template v-for="(item, index) of QshList" :key="index">
|
|
|
+ <td style="width:3vh;">
|
|
|
+ {{ item.current }}
|
|
|
+ <template v-if="item.compare === -1">
|
|
|
+ <span class="svg-icon svg-icon-yellow">
|
|
|
+ <svg-icon svgid="svg-arrow-dpwn-1" />
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ <template v-if="item.compare === 1">
|
|
|
+ <span class="svg-icon svg-icon-green">
|
|
|
+ <svg-icon svgid="svg-arrow-up-1" />
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </td>
|
|
|
+ <td style="width:3vh;">
|
|
|
+ {{ item.sameperiod }}
|
|
|
+ </td>
|
|
|
+ </template>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td class="td-item" style="width:4vh;">石板泉</td>
|
|
|
+ <template v-for="(item, index) of SbaqList" :key="index">
|
|
|
+ <td style="width:3vh;">
|
|
|
+ {{ item.current }}
|
|
|
+ <template v-if="item.compare === -1">
|
|
|
+ <span class="svg-icon svg-icon-yellow">
|
|
|
+ <svg-icon svgid="svg-arrow-dpwn-1" />
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ <template v-if="item.compare === 1">
|
|
|
+ <span class="svg-icon svg-icon-green">
|
|
|
+ <svg-icon svgid="svg-arrow-up-1" />
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </td>
|
|
|
+ <td style="width:3vh;">
|
|
|
+ {{ item.sameperiod }}
|
|
|
+ </td>
|
|
|
+ </template>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td class="td-item" style="width:4vh;">香山</td>
|
|
|
+ <template v-for="(item, index) of XshList" :key="index">
|
|
|
+ <td style="width:3vh;">
|
|
|
+ {{ item.current }}
|
|
|
+ <template v-if="item.compare === -1">
|
|
|
+ <span class="svg-icon svg-icon-yellow">
|
|
|
+ <svg-icon svgid="svg-arrow-dpwn-1" />
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ <template v-if="item.compare === 1">
|
|
|
+ <span class="svg-icon svg-icon-green">
|
|
|
+ <svg-icon svgid="svg-arrow-up-1" />
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </td>
|
|
|
+ <td style="width:3vh;">
|
|
|
+ {{ item.sameperiod }}
|
|
|
+ </td>
|
|
|
+ </template>
|
|
|
+ </tr>
|
|
|
+ <tr>
|
|
|
+ <td class="td-item" style="width:4vh;">公司</td>
|
|
|
+ <template v-for="(item, index) of GsList" :key="index">
|
|
|
+ <td style="width:3vh;">
|
|
|
+ {{ item.current }}
|
|
|
+ <template v-if="item.compare === -1">
|
|
|
+ <span class="svg-icon svg-icon-yellow">
|
|
|
+ <svg-icon svgid="svg-arrow-dpwn-1" />
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ <template v-if="item.compare === 1">
|
|
|
+ <span class="svg-icon svg-icon-green">
|
|
|
+ <svg-icon svgid="svg-arrow-up-1" />
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ </td>
|
|
|
+ <td style="width:3vh;">
|
|
|
+ {{ item.sameperiod }}
|
|
|
+ </td>
|
|
|
+ </template>
|
|
|
+ </tr>
|
|
|
+ </tbody>
|
|
|
+ </table>
|
|
|
+ </div>
|
|
|
+ <!-- </el-scrollbar> -->
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="20" class="table-panel">
|
|
|
+ <el-col :span="24">
|
|
|
+ <panel title="公司可利用率分析" :showLine="false">
|
|
|
+ <!-- <vertival-bar-line-chart
|
|
|
+ :height="'360px'"
|
|
|
+ :units="units"
|
|
|
+ :bardata="bardata"
|
|
|
+ :lineData="lineData"
|
|
|
+ /> -->
|
|
|
+
|
|
|
+ <MultipleLineChart
|
|
|
+ :list="DayPower.value"
|
|
|
+ :units="DayPower.units"
|
|
|
+ height="40vh" :showLegend="true"
|
|
|
+ />
|
|
|
+ <!-- :units="units"
|
|
|
+ :bardata="bardata"
|
|
|
+ :lineData="lineData" -->
|
|
|
+ </panel>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+// import VertivalBarLineChart from "../../components/chart/combination/vertival-bar-line-chart.vue";
|
|
|
+// import VertivalBarLineChart from "../../components/chart/bar/list-bar-chart.vue";
|
|
|
+import MultipleLineChart from "../../components/chart/bar/multiple-bar-chart.vue";
|
|
|
+import Panel from "../../components/coms/panel/panel.vue";
|
|
|
+import DualPieChart from "../../components/chart/pie/dual-pie-chart.vue";
|
|
|
+import SvgIcon from "../../components/coms/icon/svg-icon.vue";
|
|
|
+import Get_PDF from "@tools/htmlToPdf";
|
|
|
+export default {
|
|
|
+ setup() {},
|
|
|
+ components: {
|
|
|
+ Panel,
|
|
|
+ DualPieChart,
|
|
|
+ SvgIcon,
|
|
|
+ // VertivalBarLineChart,
|
|
|
+ MultipleLineChart
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ monthData: [],
|
|
|
+ MhsLists: [],
|
|
|
+ NshList: [],
|
|
|
+ QshList: [],
|
|
|
+ SbaqList: [],
|
|
|
+ XshList: [],
|
|
|
+ GsList: [],
|
|
|
+ units: [],
|
|
|
+ nowCurrent: 1,
|
|
|
+ months: new Date().getMonth() + 1,
|
|
|
+ pickerOptions: {},
|
|
|
+ bardata: { area: [], legend: [], data: [] }, // 损失电量分析echart数值
|
|
|
+ lineData: [],
|
|
|
+ timmer: null,
|
|
|
+ monthValue: this.getmonthValue(),
|
|
|
+ list: [],
|
|
|
+ DayPower: {
|
|
|
+ // 图表所用单位
|
|
|
+ units: [""],
|
|
|
+ value: [
|
|
|
+ {
|
|
|
+ title: "",
|
|
|
+ yAxisIndex: 0, // 使用单位
|
|
|
+ value: [],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ let _this = this
|
|
|
+ // _this.$nextTick(() => {
|
|
|
+ _this.getLists(false);
|
|
|
+ // _this.timmer = setInterval(() => {
|
|
|
+ // _this.getLists(false)
|
|
|
+ // }, _this.$store.state.websocketTimeSec);
|
|
|
+ // });
|
|
|
+ },
|
|
|
+ unmounted() {
|
|
|
+ clearInterval(this.timmer);
|
|
|
+ this.timmer = null;
|
|
|
+ },
|
|
|
+ mounted() {},
|
|
|
+ methods: {
|
|
|
+ exportPDF (name) {
|
|
|
+ this.BASE.showMsg({
|
|
|
+ type: "success",
|
|
|
+ msg: "正在导出...请稍后..."
|
|
|
+ });
|
|
|
+ Get_PDF.downloadPDF(document.querySelector('.pdfDom'), "风能利用率");
|
|
|
+ },
|
|
|
+ getmonthValue(){
|
|
|
+ let year = new Date().getFullYear().toString()
|
|
|
+ return year
|
|
|
+ },
|
|
|
+ onClickSearch() {
|
|
|
+ this.getLists(false)
|
|
|
+ },
|
|
|
+ monthChange(data){
|
|
|
+ let year = data.getFullYear().toString();
|
|
|
+ return year
|
|
|
+ },
|
|
|
+
|
|
|
+ isNumber(val) {
|
|
|
+ return typeof val === 'number' && !isNaN(val)
|
|
|
+ },
|
|
|
+ getLists(showLoading) {
|
|
|
+ let MhsLists = []
|
|
|
+ let NshList= []
|
|
|
+ let QshList= []
|
|
|
+ let SbaqList= []
|
|
|
+ let XshList= []
|
|
|
+ let GsList= []
|
|
|
+ let _this = this
|
|
|
+ let year = ''
|
|
|
+ if (typeof(this.monthValue) === 'string') {
|
|
|
+ year = this.monthValue
|
|
|
+ } else {
|
|
|
+ year = this.monthChange(this.monthValue)
|
|
|
+ }
|
|
|
+ const site = ['compare', 'year', 'month']
|
|
|
+ _this.API.requestData({
|
|
|
+ showLoading,
|
|
|
+ method: "GET",
|
|
|
+ baseURL: 'http://10.155.32.4:8034',
|
|
|
+ subUrl: "/specific/fnlylList",
|
|
|
+ data:{
|
|
|
+ year: year
|
|
|
+ },
|
|
|
+ success(res) {
|
|
|
+ _this.list = res.data.map(item => {
|
|
|
+ for (let key in item) {
|
|
|
+ if (!site.includes(key)) {
|
|
|
+ if(_this.isNumber(item[key])) {
|
|
|
+ item[key] = item[key].toFixed(2)
|
|
|
+ } else if (!item[key]){
|
|
|
+ item[key] = 0
|
|
|
+ item[key] = item[key].toFixed(2)
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ if (item.wpid === 'MHS_FDC') {
|
|
|
+ MhsLists.push(item)
|
|
|
+ } else if (item.wpid === 'NSS_FDC') {
|
|
|
+ NshList.push(item)
|
|
|
+ } else if (item.wpid === 'QS_FDC') {
|
|
|
+ QshList.push(item)
|
|
|
+ } else if (item.wpid === 'NSS_FDC') {
|
|
|
+ NshList.push(item)
|
|
|
+ } else if (item.wpid === 'SBQ_FDC') {
|
|
|
+ SbaqList.push(item)
|
|
|
+ } else if (item.wpid === 'XS_FDC') {
|
|
|
+ XshList.push(item)
|
|
|
+ } else {
|
|
|
+ GsList.push(item)
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ _this.MhsLists = MhsLists.sort(_this.compare('month'))
|
|
|
+ _this.NshList= NshList.sort(_this.compare('month'))
|
|
|
+ _this.QshList= QshList.sort(_this.compare('month'))
|
|
|
+ _this.SbaqList= SbaqList.sort(_this.compare('month'))
|
|
|
+ _this.XshList= XshList.sort(_this.compare('month'))
|
|
|
+ _this.GsList= GsList.sort(_this.compare('month'))
|
|
|
+
|
|
|
+ let nowCureent = []
|
|
|
+ let sameCureent = []
|
|
|
+ let monthData = []
|
|
|
+ let monthsAll = []
|
|
|
+ _this.GsList.map(item => {
|
|
|
+ let objs = {}
|
|
|
+ monthsAll.push(item.month)
|
|
|
+ if (item.month > 10) {
|
|
|
+ objs.text = item.month.toString()
|
|
|
+ } else {
|
|
|
+ item.text = '0'+ item.month
|
|
|
+ objs.text = item.text
|
|
|
+ }
|
|
|
+ for (let key in item) {
|
|
|
+ if (key === 'current') {
|
|
|
+ objs.value = item.current
|
|
|
+ nowCureent.push(objs)
|
|
|
+ } else if (key === 'sameperiod'){
|
|
|
+ objs.value = item.sameperiod
|
|
|
+ sameCureent.push(objs)
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ })
|
|
|
+ console.log(nowCureent)
|
|
|
+ _this.monthData = monthsAll
|
|
|
+ _this.DayPower = {
|
|
|
+ // 图表所用单位
|
|
|
+ units: [""],
|
|
|
+ value: [
|
|
|
+ {
|
|
|
+ title: "本期",
|
|
|
+ yAxisIndex: 0, // 使用单位
|
|
|
+ value: nowCureent,
|
|
|
+ // nowCureent
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: "同期",
|
|
|
+ yAxisIndex: 0, // 使用单位
|
|
|
+ value: sameCureent,
|
|
|
+ // sameCureent
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ }
|
|
|
+
|
|
|
+ console.log(111,_this.DayPower)
|
|
|
+ // _this.DayPower = {
|
|
|
+ // // 图表所用单位
|
|
|
+ // units: [""],
|
|
|
+ // value: [
|
|
|
+ // {
|
|
|
+ // title: "本期",
|
|
|
+ // yAxisIndex: 0, // 使用单位
|
|
|
+ // value: [],
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // title: "同期",
|
|
|
+ // yAxisIndex: 0, // 使用单位
|
|
|
+ // value: [],
|
|
|
+ // },
|
|
|
+ // ],
|
|
|
+ // },
|
|
|
+ // _this.bardata.legend = ["本期", "同期"]
|
|
|
+ // _this.lineData = [];
|
|
|
+ // _this.bardata.area = monthData;
|
|
|
+ // _this.bardata.data[0] = sameCureent;
|
|
|
+ // _this.bardata.data[1] = nowCureent;
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ compare(property) {
|
|
|
+ return (a, b) => {
|
|
|
+ let val1 = a[property]
|
|
|
+ let val2 = b[property]
|
|
|
+ return val1 - val2
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less">
|
|
|
+.ztfx {
|
|
|
+ font-size: 12px;
|
|
|
+ .select-btn {
|
|
|
+ width: 92px;
|
|
|
+ }
|
|
|
+ .com-panel {
|
|
|
+ border: 1px solid #6067697d;
|
|
|
+ }
|
|
|
+ .table-complex {
|
|
|
+ margin-top: 10px;
|
|
|
+ .table {
|
|
|
+ border: 1px solid #6067697d;
|
|
|
+ tbody {
|
|
|
+ tr:nth-child(2n) td {
|
|
|
+ background-color: fade(@gray, 20%);
|
|
|
+
|
|
|
+ &.item {
|
|
|
+ background-color: transparent;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ th {
|
|
|
+ background: fade(@gray, 40);
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 24px;
|
|
|
+ color: @gray-l;
|
|
|
+
|
|
|
+ &.type1 {
|
|
|
+ border-left: 0;
|
|
|
+ border-right: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ td {
|
|
|
+ color: @gray-l;
|
|
|
+ text-align: center;
|
|
|
+ height: 26px;
|
|
|
+ line-height: 26px;
|
|
|
+
|
|
|
+ // &.item {
|
|
|
+ // width: 100px;
|
|
|
+ // }
|
|
|
+ }
|
|
|
+ svg {
|
|
|
+ height: 1.222vh;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .table-panel {
|
|
|
+ margin-top: 10px;
|
|
|
+ .panel-header {
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .table {
|
|
|
+ border: 1px solid #6067697d;
|
|
|
+ tbody {
|
|
|
+ tr:nth-child(2n) td {
|
|
|
+ background-color: fade(@gray, 20%);
|
|
|
+
|
|
|
+ &.item {
|
|
|
+ background-color: transparent;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .td-item {
|
|
|
+ width: 6vh;
|
|
|
+ }
|
|
|
+ th {
|
|
|
+ background: fade(@gray, 40);
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 24px;
|
|
|
+ color: @gray-l;
|
|
|
+
|
|
|
+ &.type1 {
|
|
|
+ border-left: 0;
|
|
|
+ border-right: 0;
|
|
|
+ height: 4vh;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ td {
|
|
|
+ color: @gray-l;
|
|
|
+ text-align: center;
|
|
|
+ height: 46px;
|
|
|
+ line-height: 46px;
|
|
|
+
|
|
|
+ &.item {
|
|
|
+ width: 100px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ svg {
|
|
|
+ height: 1.222vh;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .pie-chart-panel {
|
|
|
+ margin-top: 10px;
|
|
|
+ .line{
|
|
|
+ border:none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
wangjunjun