123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869 |
- <template>
- <div class="decision-page-2">
- <div class="query mg-b-8">
- <div class="query-items">
- <div class="query-item">
- <div class="lable">场站:</div>
- <div class="search-input">
- <el-select v-model="value1" @change="ChangZhanChange(value1)" clearable placeholder="请选择"
- popper-class="select">
- <el-option v-for="item in ChangZhan" :key="item.id" :value="item.id" :label="item.name">
- </el-option>
- </el-select>
- </div>
- </div>
- <div class="query-item">
- <div class="lable">开始日期:</div>
- <div class="search-input">
- <el-date-picker v-model="value4" @change="BeginChange(value4)" type="date"
- value-format="YYYY-MM-DD" placeholder="选择日期" popper-class="date-select">
- </el-date-picker>
- </div>
- </div>
- <div class="query-item">
- <div class="lable">结束日期:</div>
- <div class="search-input">
- <el-date-picker v-model="value5" @change="EndChange(value5)" type="date"
- value-format="YYYY-MM-DD" placeholder="选择日期" popper-class="date-select">
- </el-date-picker>
- <div class="unit svg-icon svg-icon-gray">
- <svg-icon :svgid="''" />
- </div>
- </div>
- </div>
- </div>
- <div class="query-actions">
- <button class="btn green">搜索</button>
- <button class="btn" @click="dbfx">对标分析</button>
- <button class="btn">导出</button>
- </div>
- </div>
- <div v-show="detailShow==1">
- <div class="mg-b-16">
- <div class="project-table">
- <Table :data="tableData" :canScroll="false"></Table>
- </div>
- </div>
- <el-row :type="'flex'" class="content">
- <el-col :span="24" class="pd-l-8">
- <panel title="损失电量分析">
- <multiple-bar-chart height="400px" :list="analyis" :customerTooltip="true" @tooltip="tooltip"
- :units='["(万KWh)"]' />
- </panel>
- </el-col>
- </el-row>
- <el-dialog title="对标排名分析" v-model="dialogVisible" width="70%" top="10vh" custom-class="modal"
- :close-on-click-modal="false">
- <dayinfo :radarValue="radarValue" :windNum="windNum" :windNum2="windNum2" :tabs="tabs"
- :analyisDialog="analyisDialog" />
- </el-dialog>
- </div>
- <el-row :type="'flex'" class="content" v-show="detailShow==2">
- <el-col :span="24" class="pd-l-8">
- <panel :title="'风机对标列表明细'" :showLine="false">
- <div class="project-table">
- <Table :data="tableDataDetail"></Table>
- </div>
- </panel>
- </el-col>
- </el-row>
- </div>
- </template>
- <script>
- import MultipleBarChart from "../../components/chart/bar/multiple-bar-chart.vue";
- import DualPieChart from "../../components/chart/pie/dual-pie-chart.vue";
- import SvgIcon from "../../components/coms/icon/svg-icon.vue";
- import Panel from "../../components/coms/panel/panel.vue";
- import Table from "../../components/coms/table/table.vue";
- import Dayinfo from "./dayinfo.vue";
- export default {
- components: {
- Panel,
- Table,
- SvgIcon,
- DualPieChart,
- MultipleBarChart,
- Dayinfo
- },
- data() {
- let that = this;
- return {
- tableIdArr: [], //放checkbox的id数组
- tableDateArr: [],
- tableDate: [],
- checkLength: 0, //对标分析只能选择2个
- tableData: {
- column: [{
- name: "",
- field: "index",
- is_num: false,
- is_light: false,
- },
- {
- name: "",
- field: "check",
- is_num: false,
- is_light: false,
- template: function() {
- return "<input class='check' type='CheckBox'/>";
- },
- click: function(event, data) {
- var dataDate = that.tableDateArr[data.index - 1];
- if (event.target.checked == false && that.checkLength <= 2) {
- that.tableDate.forEach((item, i) => {
- if (item == dataDate) {
- that.tableDate.splice(i, 1)
- }
- })
- that.checkLength--;
- } else if (event.target.checked && that.checkLength < 2) {
- that.tableDate.push(dataDate)
- that.checkLength++;
- } else if (that.checkLength == 2) {
- event.target.checked = false;
- }
- },
- },
- {
- name: "综合排名",
- field: "zhpm",
- is_num: false,
- is_light: false,
- sortable: true,
- },
- {
- name: "日期",
- field: "date",
- is_num: false,
- is_light: false,
- },
- {
- name: "发电量排名",
- field: "fdlpm",
- is_num: false,
- is_light: false,
- sortable: true,
- },
- {
- name: "发电量",
- field: "fdl",
- is_num: false,
- is_light: false,
- sortable: true,
- },
- {
- name: "故障损失电量排名",
- field: "gzssdlpm",
- is_num: false,
- is_light: false,
- sortable: true,
- },
- {
- name: "故障损失电量",
- field: "gzssdl",
- is_num: false,
- is_light: false,
- sortable: true,
- },
- {
- name: "检修损失电量排名",
- field: "jxssdlpm",
- is_num: false,
- is_light: false,
- sortable: true,
- },
- {
- name: "检修损失电量",
- field: "jxssdl",
- is_num: false,
- is_light: false,
- sortable: true,
- },
- {
- name: "性能损失电量排名",
- field: "xnssdlpm",
- is_num: false,
- is_light: true,
- sortable: true,
- },
- {
- name: "性能损失电量",
- field: "xnssdl",
- is_num: false,
- is_light: false,
- sortable: true,
- },
- {
- name: "限电损失电量排名",
- field: "xdssdlpm",
- is_num: false,
- is_light: false,
- sortable: true,
- },
- {
- name: "限电损失电量",
- field: "xdssdl",
- is_num: false,
- is_light: false,
- sortable: true,
- }, {
- name: "受累损失电量排名",
- field: "slssdlpm",
- is_num: false,
- is_light: false,
- sortable: true,
- }, {
- name: "受累损失电量",
- field: "slssdl",
- is_num: false,
- is_light: false,
- sortable: true,
- }, {
- name: "风能利用率排名",
- field: "fnlylpm",
- is_num: false,
- is_light: false,
- sortable: true,
- }, {
- name: "风能利用率(%)",
- field: "fnlyl",
- is_num: false,
- is_light: false,
- sortable: true,
- }, {
- name: "故障损失率排名",
- field: "gzsslpm",
- is_num: false,
- is_light: false,
- sortable: true,
- }, {
- name: "故障损失率(%)",
- field: "gzssl",
- is_num: false,
- is_light: false,
- sortable: true,
- }, {
- name: "检修损失率排名",
- field: "jxsslpm",
- is_num: false,
- is_light: false,
- sortable: true,
- }, {
- name: "检修损失率(%)",
- field: "jxssl",
- is_num: false,
- is_light: false,
- sortable: true,
- }, {
- name: "弃风率排名",
- field: "qflpm",
- is_num: false,
- is_light: false,
- sortable: true,
- }, {
- name: "弃风率(%)",
- field: "qfl",
- is_num: false,
- is_light: false,
- sortable: true,
- }, {
- name: "性能损失率排名",
- field: "xnsslpm",
- is_num: false,
- is_light: false,
- sortable: true,
- }, {
- name: "性能损失率(%)",
- field: "xnssl",
- is_num: false,
- is_light: false,
- sortable: true,
- }, {
- name: "受累损失率排名",
- field: "slsslpm",
- is_num: false,
- is_light: false,
- sortable: true,
- }, {
- name: "受累损失率(%)",
- field: "slssl",
- is_num: false,
- is_light: false,
- sortable: true,
- }, {
- name: "操作",
- field: "cz",
- is_num: false,
- is_light: false,
- template: function() {
- return "<a class='action'>详情</a>";
- },
- click: function(event, data) {
- var dataId = that.tableIdArr[data.index - 1];
- console.log(dataId)
- that.detailShow = 2;
- // var that = this;
- that.API.requestData({
- method: "GET",
- subUrl: "benchmarking/details",
- data: {
- id: dataId,
- beginDate: that.value4,
- endDate: that.value5,
- target: '',
- sort: ''
- },
- success(res) {
- var dataTab = [];
- res.data.forEach((item, index) => {
- that.tableIdArr.push(item.id);
- dataTab.push({ //表格
- index: index + 1,
- name: item.name,
- zhpm: item.zhpm,
- gzssdl: item.gzssdl,
- jxssdlpm: item.jxssdlpm,
- jxssdl: item.jxssdl,
- xnssdlpm: item.xnssdlpm,
- xnssdl: item.xnssdl,
- xdssdlpm: item.xdssdlpm,
- xdssdl: item.xdssdl,
- slssdlpm: item.slssdlpm,
- slssdl: item.slssdl,
- gzsslpm: item.gzsslpm,
- gzssl: item.gzssl,
- jxsslpm: item.jxsslpm,
- jxssl: item.jxssl,
- qflpm: item.qflpm,
- qfl: item.qfl,
- xnsslpm: item.xnsslpm,
- xnssl: item.xnssl,
- slsslpm: item.slsslpm,
- slssl: item.slssl,
- is_light: false
- })
- })
- that.tableDataDetail.data = dataTab;
- }
- });
- }
- }
- ],
- data: [],
- },
- tableDataDetail: {
- column: [{
- name: "",
- field: "index",
- is_num: false,
- is_light: false,
- },
- {
- name: "",
- field: "check",
- is_num: false,
- is_light: false,
- template: function() {
- return "<input class='check' type='CheckBox'/>";
- },
- click: function(event, data) {
- var dataId = that.tableIdArr[data.index - 1];
- if (event.target.checked == false && that.checkLength <= 2) {
- that.tableId.forEach((item, i) => {
- if (item == dataId) {
- that.tableId.splice(i, 1)
- }
- })
- that.checkLength--;
- } else if (event.target.checked && that.checkLength < 2) {
- that.tableId.push(dataId)
- that.checkLength++;
- } else if (that.checkLength == 2) {
- event.target.checked = false;
- }
- },
- },
- {
- name: "风机名称",
- field: "name",
- is_num: false,
- is_light: false,
- },
- {
- name: "综合排名",
- field: "zhpm",
- is_num: false,
- is_light: false,
- sortable: true,
- },
- {
- name: "故障损失电量",
- field: "gzssdl",
- is_num: false,
- is_light: false,
- sortable: true,
- },
- {
- name: "检修损失电量排名",
- field: "jxssdlpm",
- is_num: false,
- is_light: false,
- sortable: true,
- },
- {
- name: "检修损失电量",
- field: "jxssdl",
- is_num: false,
- is_light: false,
- sortable: true,
- },
- {
- name: "性能损失电量排名",
- field: "xnssdlpm",
- is_num: false,
- is_light: true,
- sortable: true,
- },
- {
- name: "性能损失电量",
- field: "xnssdl",
- is_num: false,
- is_light: false,
- sortable: true,
- },
- {
- name: "限电损失电量排名",
- field: "xdssdlpm",
- is_num: false,
- is_light: false,
- sortable: true,
- },
- {
- name: "限电损失电量",
- field: "xdssdl",
- is_num: false,
- is_light: false,
- sortable: true,
- }, {
- name: "受累损失电量排名",
- field: "slssdlpm",
- is_num: false,
- is_light: false,
- sortable: true,
- }, {
- name: "受累损失电量",
- field: "slssdl",
- is_num: false,
- is_light: false,
- sortable: true,
- }, {
- name: "故障损失率排名",
- field: "gzsslpm",
- is_num: false,
- is_light: false,
- sortable: true,
- }, {
- name: "故障损失率(%)",
- field: "gzssl",
- is_num: false,
- is_light: false,
- sortable: true,
- }, {
- name: "检修损失率排名",
- field: "jxsslpm",
- is_num: false,
- is_light: false,
- sortable: true,
- }, {
- name: "检修损失率(%)",
- field: "jxssl",
- is_num: false,
- is_light: false,
- sortable: true,
- }, {
- name: "弃风率排名",
- field: "qflpm",
- is_num: false,
- is_light: false,
- sortable: true,
- }, {
- name: "弃风率(%)",
- field: "qfl",
- is_num: false,
- is_light: false,
- sortable: true,
- }, {
- name: "性能损失率排名",
- field: "xnsslpm",
- is_num: false,
- is_light: false,
- sortable: true,
- }, {
- name: "性能损失率(%)",
- field: "xnssl",
- is_num: false,
- is_light: false,
- sortable: true,
- }, {
- name: "受累损失率排名",
- field: "slsslpm",
- is_num: false,
- is_light: false,
- sortable: true,
- }, {
- name: "受累损失率(%)",
- field: "slssl",
- is_num: false,
- is_light: false,
- sortable: true,
- }
- ],
- data: [],
- },
- options: [],
- ChangZhan: [], //场站
- XiangMu: [], //项目
- XianLu: [], //线路
- value1: [],
- value4: "",
- value5: "",
- analyis: [], //损失电量分析
- dialogVisible: false,
- radarValue: [],
- windNum: 'dd',
- windNum2: 'dd',
- tabs: [],
- analyisDialog: [],
- detailShow: 1,
- ajaxData:[]
- };
- },
- created() {
- this.ChangZhanVal();
- this.value4 = this.getTime(1);
- this.value5 = this.getTime(2);
- this.AjaxCommon();
- },
- methods: {
- ChangZhanVal() {
- var that = this;
- that.API.requestData({
- method: "GET",
- subUrl: "benchmarking/wplist",
- success(res) {
- that.ChangZhan = res.data;
- that.value1 = res.data[0].id;
- }
- });
- },
- ChangZhanChange(val) {
- this.value1 = val;
- this.AjaxCommon();
- },
- BeginChange(val) {
- this.value4 = val;
- this.AjaxCommon();
- },
- EndChange(val) {
- this.value5 = val;
- this.AjaxCommon();
- },
- getTime(val) { //时间戳处理,val=1是默认开始时间(当前月第一天),val=2是默认结束时间(今天)
- var date = new Date();
- var year = date.getFullYear(),
- month = date.getMonth() + 1,
- day = date.getDate();
- month >= 1 && month <= 9 ? (month = '0' + month) : '';
- day >= 0 && day <= 9 ? (day = '0' + day) : '';
- var begin = year + '-' + month + '-01';
- var end = year + '-' + month + '-' + day;
- if (val == 1) {
- return begin;
- } else if (val == 2) {
- return end;
- }
- },
- AjaxCommon() {
- var that = this;
- that.API.requestData({
- method: "GET",
- subUrl: "benchmarking/cndb",
- data: {
- wpid: that.value1,
- beginDate: that.value4,
- endDate: that.value5,
- target: '',
- sort: ''
- },
- success(res) {
- console.log(JSON.stringify(res))
- that.ajaxData = res.data;
- var dataTab = [], //表格
- analyis = [],
- gzssdl = [],
- jxssdl = [],
- xnssdl = [],
- xdssdl = [],
- slssdl = [];
- res.data.forEach((item, index) => {
- that.tableDateArr.push(item.date);
- that.tableIdArr.push(item.id);
- dataTab.push({ //表格
- index: index + 1,
- zhpm: item.zhpm,
- date: item.date.substr(0, 10),
- fdlpm: item.fdlpm,
- fdl: item.fdl,
- gzssdlpm: item.gzssdlpm,
- gzssdl: item.gzssdl,
- jxssdlpm: item.jxssdlpm,
- jxssdl: item.jxssdl,
- xnssdlpm: item.xnssdlpm,
- xnssdl: item.xnssdl,
- xdssdlpm: item.xdssdlpm,
- xdssdl: item.xdssdl,
- slssdlpm: item.slssdlpm,
- slssdl: item.slssdl,
- fnlylpm: item.fnlylpm,
- fnlyl: item.fnlyl,
- gzsslpm: item.gzsslpm,
- gzssl: item.gzssl,
- jxsslpm: item.jxsslpm,
- jxssl: item.jxssl,
- qflpm: item.qflpm,
- qfl: item.qfl,
- xnsslpm: item.xnsslpm,
- xnssl: item.xnssl,
- slsslpm: item.slsslpm,
- slssl: item.slssl,
- is_light: false
- })
- if (index < 7) {
- gzssdl.push({
- text: item.date.substr(0, 10),
- value: item.gzssdl
- });
- jxssdl.push({
- text: item.date.substr(0, 10),
- value: item.jxssdl
- });
- xnssdl.push({
- text: item.date.substr(0, 10),
- value: item.xnssdl
- });
- xdssdl.push({
- text: item.date.substr(0, 10),
- value: item.xdssdl
- });
- slssdl.push({
- text: item.date.substr(0, 10),
- value: item.slssdl
- });
- }
- })
- analyis.push({
- title: "故障损失电量",
- yAxisIndex: 0,
- value: gzssdl
- }, {
- title: "检修损失电量",
- yAxisIndex: 0,
- value: jxssdl
- }, {
- title: "性能损失电量",
- yAxisIndex: 0,
- value: xnssdl
- }, {
- title: "限电损失电量",
- yAxisIndex: 0,
- value: xdssdl
- }, {
- title: "受累损失电量",
- yAxisIndex: 0,
- value: slssdl
- })
- that.tableData.data = dataTab;
- that.analyis = analyis;
- }
- });
- },
- AjaxDbfx() {
- var that = this;
- var data = that.ajaxData;
- that.windNum = data[0].date.substr(0, 10);
- that.windNum2 = data[1].date.substr(0, 10);
- that.tabs = [{
- name: "发电量",
- windData1: data[0].fdl,
- windData2: data[1].fdl
- }, {
- name: "故障损失电量",
- windData1: data[0].gzssdl,
- windData2: data[1].gzssdl
- }, {
- name: "检修损失电量",
- windData1: data[0].jxssdl,
- windData2: data[1].jxssdl
- }, {
- name: "性能未达标损失电量",
- windData1: data[0].xnssdl,
- windData2: data[1].xnssdl
- }, {
- name: "受累损失电量",
- windData1: data[0].slssdl,
- windData2: data[1].slssdl
- }, {
- name: "风能利用率",
- windData1: data[0].fnlyl,
- windData2: data[1].fnlyl
- }, {
- name: "故障损失率",
- windData1: data[0].gzssl,
- windData2: data[1].gzssl
- }, {
- name: "检修损失率",
- windData1: data[0].jxssl,
- windData2: data[1].jxssl
- }, {
- name: "弃风率",
- windData1: data[0].qfl,
- windData2: data[1].qfl
- }, {
- name: "性能损失率",
- windData1: data[0].xnssl,
- windData2: data[1].xnssl
- }, {
- name: "受累损失率",
- windData1: data[0].slssl,
- windData2: data[1].slssl
- }];
- that.radarValue = [{
- indicator: ["风能利用率", "故障损失率", "检修损失率", "弃风率", "性能损失率", "受累损失率"],
- data: [{
- value: [data[0].fnlylpm, data[0].gzsslpm, data[0].jxsslpm, data[0].qflpm,
- data[0].xnsslpm, data[0].slsslpm
- ]
- }, {
- value: [data[1].fnlylpm, data[1].gzsslpm, data[1].jxsslpm, data[1].qflpm,
- data[1].xnsslpm, data[1].slsslpm
- ]
- }]
- }];
- var analyis = [],
- gzssdl = [],
- jxssdl = [],
- xnssdl = [],
- xdssdl = [],
- slssdl = [];
- data.forEach((item, index) => {
- gzssdl.push({
- text: item.date.substr(0, 10),
- value: item.gzssdl
- });
- jxssdl.push({
- text: item.date.substr(0, 10),
- value: item.jxssdl
- });
- xnssdl.push({
- text: item.date.substr(0, 10),
- value: item.xnssdl
- });
- xdssdl.push({
- text: item.date.substr(0, 10),
- value: item.xdssdl
- });
- slssdl.push({
- text: item.date.substr(0, 10),
- value: item.slssdl
- });
- })
- analyis.push({
- title: "故障损失电量",
- yAxisIndex: 0,
- value: gzssdl
- }, {
- title: "检修损失电量",
- yAxisIndex: 0,
- value: jxssdl
- }, {
- title: "性能损失电量",
- yAxisIndex: 0,
- value: xnssdl
- }, {
- title: "限电损失电量",
- yAxisIndex: 0,
- value: xdssdl
- }, {
- title: "受累损失电量",
- yAxisIndex: 0,
- value: slssdl
- })
- that.analyisDialog = analyis;
- },
- tooltip(param, callback) {
- var color = ["#05bb4c", "#4b55ae", "#fa8c16", "#f8de5b"];
- var result = param[0].axisValue;
- param.forEach((value, index) => {
- result += "<br />" +
- `<span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${color[index]};"></span>` +
- value.seriesName + ":" + value.value;
- });
- callback(result);
- return true;
- },
- dbfx() {
- var that = this;
- if (that.tableDate.length == 2) {
- that.dialogVisible = true;
- this.AjaxDbfx();
- }
- }
- }
- };
- </script>
- <style lang="less">
- .decision-page-2 {
- .content .project-table {
- tbody {
- height: calc(100vh - 24.5vh);
- }
- }
- .project-table {
- overflow: auto;
- tbody {
- height: calc(100vh - 65vh);
- }
- th,
- td {
- color: #b2bdc0;
- &:nth-child(1) {
- width: 50px;
- }
- &:nth-child(2) {
- width: 50px;
- }
- }
- }
- .action {
- text-decoration: underline;
- color: @green;
- cursor: pointer;
- }
- }
- </style>
|