|
@@ -1,341 +0,0 @@
|
|
-<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: '单位 (m/s)',
|
|
|
|
- type: "value",
|
|
|
|
- position: 'left'
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- name: '单位 (kw/h)',
|
|
|
|
- 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>
|
|
|