123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317 |
- <template>
- <el-row type="flex">
- <div class="query mg-b-8">
- <div class="query-items">
- <div class="query-item">
- <div class="lable">时间:</div>
- <div class="search-input">
- <el-date-picker v-model="time" type="datetimerange" range-separator="至" start-placeholder="开始日期"
- end-placeholder="结束日期">
- </el-date-picker>
- </div>
- </div>
- <div class="query-item">
- <div class="lable">等间隔:</div>
- <div class="search-input">
- <el-select v-if="!chooseStatus" @change="switchChange(selectValue)" class="inputs"
- v-model="selectValue" placeholder="请选择">
- <el-option v-for="item in timeoptions" :key="item.value" :label="item.label"
- :value="item.value">
- </el-option>
- </el-select>
- </div>
- </div>
- <div class="query-actions">
- <!-- <button class="btn" @click="clearDb">重置对标选项</button> -->
- <button class="btn" @click="dbfx">原数据对标</button>
- </div>
- </div>
- </div>
- </el-row>
- <el-row :type="'flex'" class="content mg-b-8">
- <ComTable :data="tableData" :height="'30vh'" v-loading="tableLoading" ref="curRef" element-loading-text="拼命加载中"
- element-loading-background="rgba(0, 0, 0, 0.8)"></ComTable>
- </el-row>
- <el-row :type="'flex'" class="content" :style="{height:'44vh'}">
- <el-col :span="24">
- <multiple-y-line-chart-normal height="45vh" :list="Powertrend" :yAxises="PowertrendYAxises"
- :showLegend="true" />
- </el-col>
- </el-row>
- </template>
- <script>
- import ComTable from "@/components/coms/table/table.vue";
- import MultipleYLineChartNormal from "../../NewPages/multiple-y-line-chart-normal.vue";
- export default {
- components: {
- ComTable,
- MultipleYLineChartNormal
- },
- data() {
- const that = this;
- return {
- Powertrend: [{
- title: "",
- yAxisIndex: 0, // 使用单位
- value: [],
- }, ],
- PowertrendYAxises: [{
- name: "",
- min: 0,
- max: null,
- unit: "",
- position: "left",
- },
- {
- name: "",
- min: 0,
- max: 25,
- unit: "",
- position: "right",
- },
- ],
- selectValue: "60",
- timeoptions: [
- {
- value: "60",
- label: "一分钟",
- },
- {
- value: "300",
- label: "五分钟",
- },
- {
- value: "600",
- label: "十分钟",
- },
- {
- value: "1800",
- label: "三十分钟",
- },
- {
- value: "3600",
- label: "一小时",
- },
- {
- value: "86400",
- label: "一天",
- },
- ],
- time: [that.st - (3600 * 1000*24), that.st + (1000*10*60)],
- point: [],
- pointdes: [],
- pageSize: 20,
- model: [],
- station: '',
- windturbinename: "",
- isvisiable: false,
- checkLength: 0, //对标分析只能选择5个
- tableData: {
- column: [
- {
- name: "",
- field: "check",
- is_light: false,
- width: '50px',
- template: function() {
- return "<input class='check curCheckBox' type='CheckBox'/>";
- },
- click: function(event, data) {
- let point = data.point,
- pointdes = data.pointdes;
- if (event.target.checked == false && that.checkLength <= 5) {
- that.point.forEach((item, i) => {
- if (item == point) {
- that.point.splice(i, 1);
- that.pointdes.splice(i, 1);
- }
- });
- that.checkLength--;
- } else if (event.target.checked && that.checkLength < 5) {
- that.point.push(point);
- that.pointdes.push(pointdes);
- that.checkLength++;
- } else if (that.checkLength == 5) {
- event.target.checked = false;
- }
- },
- },
- {
- name: "序号",
- field: "index",
- is_light: false,
- width: '30px',
- },
- {
- name: "测点名称",
- field: "point",
- is_light: false,
- width: '400px',
- },
- {
- name: "测点描述",
- field: "pointdes",
- is_light: false,
- width: '350px',
- },
- {
- name: "操作",
- is_light: false,
- width: '250px',
- template: () => {
- return (
- "<el-button type='text' style='cursor: pointer;' value='config'>查看原数据</el-button> "
- );
- },
- click(e, row) {
- that.onClickOption(e, row);
- },
- },
- ],
- data: [],
- }
- };
- },
- props: {
- data: {
- type: Array
- },
- st: {
- type: String
- },
- },
- methods: {
- onClickOption(e, row) { // 操作按钮
- let that = this;
- if ("config" == e.target.getAttribute("value")) { //原始数据
- that.requestDetailData([row.point], [row.pointdes], [Date.parse(new Date(that.time[0])), Date.parse(
- new Date(that.time[1]))], that.selectValue);
- that.clearDb();
- }
- },
- list(data) {
- var that = this;
- that.tableData.data = [];
- if (data.length) {
- for (var i = 0; i < data.length; i++) {
- let obj = {
- index: i + 1,
- windturbineid: data[i].windturbineid,
- widget: data[i].widget,
- point: data[i].point,
- pointdes: data[i].pointdes,
- model: data[i].model,
- stationcn: data[i].stationcn,
- };
- that.tableData.data.push(obj);
- }
- that.requestDetailData([data[0].point], [data[0].pointdes], [Date.parse(new Date(that.time[0])), Date.parse(
- new Date(that.time[1]))], that.selectValue);
- }
- },
- switchChange(interval, status) {
- if (status === 'interval') {
- this.chooseStatus = false
- this.selectValue = '60'
- } else if (status === 'original') {
- this.chooseStatus = true
- }
- },
- requestDetailData(point, pointdes, time, interval) {
- let that = this;
- let Powertrend = [];
- let dataPoint = '';
- pointdes.forEach((ele, index) => {
- Powertrend.push({
- title: ele,
- smooth: true,
- value: [],
- })
- })
- point.forEach((ele, index) => {
- dataPoint += ele + ','
- })
- dataPoint = dataPoint.slice(0, dataPoint.length - 1)
- that.API.requestData({
- showLoading: true,
- method: "GET",
- baseURL: "http://192.168.1.18:9002/",
- subUrl: "point/item",
- data: {
- point: dataPoint,
- startTs: time[0],
- endTs: time[1],
- interval: interval
- },
- success(res) {
- if (res.data) {
- res.data.forEach((ele, index) => {
- ele.list.forEach(cEle => {
- Powertrend[index].value.push({
- text: new Date(cEle.ts).formatDate("hh:mm"),
- value: cEle.doubleValue,
- });
- })
- });
- that.Powertrend = Powertrend;
- }
- },
- });
- },
- dbfx() {
- var that = this;
- if (that.point.length <= 5 && that.point.length != 0) {
- that.Powertrend = [];
- that.requestDetailData(that.point, that.pointdes, [Date.parse(new Date(that.time[0])), Date.parse(
- new Date(that.time[1]))], that.selectValue);
- }else{
- this.BASE.showMsg({
- type: "warning",
- msg: "请选择测点后再对标",
- });
- return
- }
- },
- clearDb() { //清空对标状态
- this.$refs.curRef.clearCheckBox();
- this.point = [];
- this.pointdes = [];
- this.checkLength = 0;
- },
- },
- created() {
- this.list(this.data);
- },
- watch: {
- selectValue() {
- this.requestDetailData(this.point, this.pointdes, [Date.parse(new Date(this.time[0])), Date.parse(new Date(
- this.time[1]))], this.selectValue);
- },
- time(e) {
- let st = Date.parse(new Date(e[0])),
- et = Date.parse(new Date(e[1]));
- if((et - st) > (86400000 * 7)){//判断选择日期区间大于一周则重新选择
- this.BASE.showMsg({
- type: "warning",
- msg: "请选择小于7天的日期区间",
- });
- return
- }
- this.requestDetailData(this.point, this.pointdes, [Date.parse(new Date(this.time[0])), Date.parse(new Date(
- this.time[1]))], this.selectValue);
- },
- },
- };
- </script>
- <style lang="less" scoped>
- .mb10 {
- margin-bottom: 10px;
- }
- .el-select.w {
- width: 100%;
- }
- </style>
|