|
|
@@ -0,0 +1,341 @@
|
|
|
+<template>
|
|
|
+ <div class="table-container">
|
|
|
+ <vab-query-form>
|
|
|
+ <div class="title">
|
|
|
+ <div class="left">
|
|
|
+ <!-- <div class="left-item">
|
|
|
+ <div style="width: 70px;">名称：</div>
|
|
|
+ <el-input v-model="fuzzyQuery_name" placeholder="请输入" clearable />
|
|
|
+ </div>
|
|
|
+ <el-button icon="el-icon-search" type="primary" native-type="submit" @click="fetchData">
|
|
|
+ 查询
|
|
|
+ </el-button> -->
|
|
|
+ </div>
|
|
|
+ <div class="right">
|
|
|
+ <!-- <el-button icon="el-icon-plus" type="primary" @click="handleAdd">
|
|
|
+ 添加
|
|
|
+ </el-button>
|
|
|
+ <el-button icon="el-icon-delete" type="danger" @click="handleDelete">
|
|
|
+ 删除
|
|
|
+ </el-button> -->
|
|
|
+ <!-- <UploadExcel style="margin-left: 10px;" @getResult="getMyExcelData"></UploadExcel> -->
|
|
|
+ <!-- <ExportExcel :exportList="exportExcel" :useType="'export'" partsName="装机量"></ExportExcel> -->
|
|
|
+ <!-- <ExportExcel :exportList="templateExcel" :useType="'template'" partsName="设备类型模板"></ExportExcel> -->
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <!-- <el-table ref="tableSort" v-loading="listLoading" :data="list" :element-loading-text="elementLoadingText"
|
|
|
+ :height="height" @selection-change="setSelectRows">
|
|
|
+ <el-table-column show-overflow-tooltip type="selection" width="40"></el-table-column>
|
|
|
+ <el-table-column show-overflow-tooltip label="id" prop="id" align="center" sortable></el-table-column>
|
|
|
+ <el-table-column show-overflow-tooltip label="编号" prop="code" align="center" sortable></el-table-column>
|
|
|
+ <el-table-column show-overflow-tooltip label="名称" prop="name" align="center" sortable></el-table-column>
|
|
|
+ <el-table-column show-overflow-tooltip label="装机容量" prop="capacity" align="center" sortable>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column show-overflow-tooltip label="装机容量单位" prop="capacityunit" align="center" sortable>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column show-overflow-tooltip label="装机台数" prop="quantity" align="center" sortable>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column show-overflow-tooltip label="机型" prop="model" align="center" sortable>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column show-overflow-tooltip label="厂家" prop="systemmanufact" align="center" sortable>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column show-overflow-tooltip label="地址" prop="address" align="center" sortable>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column show-overflow-tooltip label="操作" width="100px" fixed="right">
|
|
|
+ <template #default="{ row }">
|
|
|
+ <el-button type="text" @click="handleEdit(row)">编辑</el-button>
|
|
|
+ <el-button type="text" @click="handleDelete(row)">删除</el-button>
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ </el-table> -->
|
|
|
+ <div :style="{ 'height': height + 'px', width: '100%' }">
|
|
|
+ <v-chart :options="option" style="width: 100%;"></v-chart>
|
|
|
+ </div>
|
|
|
+ </vab-query-form>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+import UploadExcel from '@/components/UploadExcel/index'
|
|
|
+import ExportExcel from '@/components/ExportExcel/index'
|
|
|
+import api from '@/api/realtimeDatabaseConfiguration'
|
|
|
+import stationApi from '@/api/station'
|
|
|
+import VChart from 'vue-echarts'
|
|
|
+import { use } from 'echarts/core';
|
|
|
+import { CanvasRenderer } from 'echarts/renderers';
|
|
|
+import { LineChart } from 'echarts/charts';
|
|
|
+import {
|
|
|
+ TitleComponent,
|
|
|
+ TooltipComponent,
|
|
|
+ LegendComponent,
|
|
|
+ DataZoomComponent,
|
|
|
+ GridComponent,
|
|
|
+ AxisPointerComponent
|
|
|
+} from 'echarts/components';
|
|
|
+import dayjs from 'dayjs'
|
|
|
+
|
|
|
+use([
|
|
|
+ CanvasRenderer,
|
|
|
+ LineChart,
|
|
|
+ TitleComponent,
|
|
|
+ TooltipComponent,
|
|
|
+ LegendComponent,
|
|
|
+ DataZoomComponent,
|
|
|
+ GridComponent,
|
|
|
+ AxisPointerComponent
|
|
|
+]);
|
|
|
+
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ UploadExcel,
|
|
|
+ ExportExcel,
|
|
|
+ VChart,
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ fuzzyQuery_name: '',
|
|
|
+ listLoading: true,
|
|
|
+ list: [],
|
|
|
+ options: [],
|
|
|
+ exportExcel: [],
|
|
|
+ templateExcel: [],
|
|
|
+ elementLoadingText: '正在加载...',
|
|
|
+ selectRows: '',
|
|
|
+ layout: 'total, sizes, prev, pager, next, jumper',
|
|
|
+ total: 0,
|
|
|
+ background: true,
|
|
|
+ exportList: [],
|
|
|
+ queryForm: {
|
|
|
+ pageNo: 1,
|
|
|
+ pageSize: 20,
|
|
|
+ },
|
|
|
+ stationList: [],
|
|
|
+ selectValue: '',
|
|
|
+ option: {
|
|
|
+ title: {
|
|
|
+ showTitle: true,
|
|
|
+ subtext: "可滚轮缩放、左右拖动查看",
|
|
|
+ x: "center",
|
|
|
+ y: "20",
|
|
|
+ },
|
|
|
+ xAxis: {
|
|
|
+ type: "category",
|
|
|
+ data: [],
|
|
|
+ },
|
|
|
+ yAxis: [
|
|
|
+ {
|
|
|
+ name: '单位 （kw）',
|
|
|
+ type: "value",
|
|
|
+ position: 'left'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '单位 （kw）',
|
|
|
+ type: "value",
|
|
|
+ position: 'right'
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ legend: {
|
|
|
+ show: true,
|
|
|
+ x: "center",
|
|
|
+ y: "top",
|
|
|
+ itemWidth: 10,
|
|
|
+ itemHeight: 10,
|
|
|
+ data: ["理论功率", "实际功率"],
|
|
|
+ textStyle: {
|
|
|
+ fontSize: 10, //字体大小
|
|
|
+ color: "#000", //字体颜色
|
|
|
+ },
|
|
|
+ },
|
|
|
+ tooltip: {
|
|
|
+ show: true,
|
|
|
+ trigger: "axis",
|
|
|
+ // formatter(data) {
|
|
|
+ // let str = `${data[0].name}: <br />`;
|
|
|
+ // data.forEach((ele) => {
|
|
|
+ // let circle = `<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color:${ele.color}"></span>`;
|
|
|
+ // str += circle + `${ele.seriesName}: ${ele.value}% <br />`;
|
|
|
+ // });
|
|
|
+ // return str;
|
|
|
+ // },
|
|
|
+ },
|
|
|
+ grid: {
|
|
|
+ show: true,
|
|
|
+ left: "35",
|
|
|
+ // top: "23",
|
|
|
+ right: "30",
|
|
|
+ bottom: "23",
|
|
|
+ },
|
|
|
+ dataZoom: [
|
|
|
+ {
|
|
|
+ id: "dataZoomX",
|
|
|
+ type: "inside",
|
|
|
+ xAxisIndex: [0],
|
|
|
+ filterMode: "none",
|
|
|
+ start: 0,
|
|
|
+ end: 50,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ series: [
|
|
|
+ // {
|
|
|
+ // name: "部门培训率",
|
|
|
+ // data: seriesData[0],
|
|
|
+ // type: "bar",
|
|
|
+ // itemStyle: {
|
|
|
+ // color: "rgb(86,114,196)",
|
|
|
+ // },
|
|
|
+ // barMaxWidth: "25",
|
|
|
+ // },
|
|
|
+ // {
|
|
|
+ // name: "部门考试合格率",
|
|
|
+ // data: seriesData[1],
|
|
|
+ // type: "bar",
|
|
|
+ // itemStyle: {
|
|
|
+ // color: "rgb(149,204,122)",
|
|
|
+ // },
|
|
|
+ // barMaxWidth: "25",
|
|
|
+ // },
|
|
|
+ ],
|
|
|
+ }
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ height() {
|
|
|
+ return this.$baseTableHeight() + 50
|
|
|
+ },
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ // this.getStation()
|
|
|
+ this.fetchData()
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ '$route'() {
|
|
|
+ // this.fetchData()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getMyExcelData(val) {
|
|
|
+ val.forEach(item => {
|
|
|
+ api.addModelpower(item).then(res => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.$message({
|
|
|
+ type: 'success',
|
|
|
+ message: '添加成功!'
|
|
|
+ });
|
|
|
+ this.fetchData()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getStation() {
|
|
|
+ stationApi.windpowerstationList({
|
|
|
+ id: '',
|
|
|
+ name: '',
|
|
|
+ companyid: '',
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 1000,
|
|
|
+ }).then(res => {
|
|
|
+ if (res.data) {
|
|
|
+ this.listLoading = false
|
|
|
+ this.stationList = res.data.records
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ fetchData() {
|
|
|
+ const date = new Date()
|
|
|
+ // const pastDate = date.getTime() - 2592000000
|
|
|
+ const pastDate = date.getTime() - 43200000
|
|
|
+ stationApi.getStationPersis({
|
|
|
+ station: this.$route.query.station || '',
|
|
|
+ startdate: dayjs(pastDate).format('YYYY-M-D HH:mm:ss'),
|
|
|
+ enddate: dayjs().format('YYYY-M-D HH:mm:ss')
|
|
|
+ }).then(res => {
|
|
|
+ if (res.data) {
|
|
|
+ this.listLoading = false
|
|
|
+ if (res.data && res.data.length) {
|
|
|
+ this.option.xAxis.data = res.data.map(o => dayjs(o.datatime).format('YYYY-M-D HH:mm:ss'))
|
|
|
+ this.option.series = [
|
|
|
+ {
|
|
|
+ name: '理论功率',
|
|
|
+ data: res.data.map(o => o.rpjfs),
|
|
|
+ type: 'line',
|
|
|
+ itemStyle: {
|
|
|
+ color: "rgb(86,114,196)",
|
|
|
+ },
|
|
|
+ yAxisIndex: 0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: '实际功率',
|
|
|
+ data: res.data.map(o => o.sszgl),
|
|
|
+ type: 'line',
|
|
|
+ itemStyle: {
|
|
|
+ color: "rgb(149,204,122)",
|
|
|
+ },
|
|
|
+ yAxisIndex: 1
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleSizeChange(val) {
|
|
|
+ this.queryForm.pageSize = val
|
|
|
+ this.fetchData()
|
|
|
+ },
|
|
|
+ handleCurrentChange(val) {
|
|
|
+ this.queryForm.pageNo = val
|
|
|
+ this.fetchData()
|
|
|
+ },
|
|
|
+ handleAdd() {
|
|
|
+ this.$refs['edit'].showEdit()
|
|
|
+ },
|
|
|
+ handleEdit(row) {
|
|
|
+ this.$refs['edit'].showEdit(row)
|
|
|
+ },
|
|
|
+ handleDelete(row) {
|
|
|
+ if (row.id || this.selectRows.length > 0) {
|
|
|
+ this.$baseConfirm('你确定要删除吗', null, async () => {
|
|
|
+ let ids = ''
|
|
|
+ if (this.selectRows.length > 0) {
|
|
|
+ ids = this.selectRows.map((item) => item.id).join()
|
|
|
+ }
|
|
|
+ api.deleteModelpower({
|
|
|
+ id: row.id || ids
|
|
|
+ }).then(res => {
|
|
|
+ if (res.data) {
|
|
|
+ this.$baseMessage('删除成功', 'success')
|
|
|
+ this.fetchData()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.$baseMessage('未选中任何行', 'error')
|
|
|
+ return false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ setSelectRows(val) {
|
|
|
+ this.selectRows = val
|
|
|
+ },
|
|
|
+ },
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style lang="less" scoped>
|
|
|
+.title {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-bottom: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.left {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .left-item {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
moccus