|
@@ -0,0 +1,341 @@
|
|
|
+<template>
|
|
|
+ <el-scrollbar :height="height" v-if="gzCgd == 1">
|
|
|
+ <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" clearable placeholder="请选择" popper-class="select" multiple>
|
|
|
+ <el-option v-for="item in BuJian" :key="item.value" :value="item.value" :label="item.label">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="query-item">
|
|
|
+ <div class="lable">停机类型:</div>
|
|
|
+ <div class="search-input">
|
|
|
+ <el-select v-model="value2" multiple placeholder="请选择" popper-class="select">
|
|
|
+ <el-option v-for="item in TingJiLeiXing" :key="item.value" :value="item.value"
|
|
|
+ :label="item.label">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="query-item">
|
|
|
+ <div class="lable">时间:</div>
|
|
|
+ <div class="search-input">
|
|
|
+ <el-date-picker v-model="value3" type="datetimerange" range-separator="至"
|
|
|
+ start-placeholder="开始日期" end-placeholder="结束日期">
|
|
|
+ </el-date-picker>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="query-actions">
|
|
|
+ <button class="btn" @click="query()">查询</button>
|
|
|
+ <button class="btn" @click="addEdit()">新增</button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <el-row :type="'flex'" class="content">
|
|
|
+ <el-col :span="24">
|
|
|
+ <ComTable :data="tableData" :pageSize="pageSize" @onPagging="onChangePage" height="84vh" v-loading="tableLoading"
|
|
|
+ element-loading-text="拼命加载中" element-loading-background="rgba(0, 0, 0, 0.8)"></ComTable>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-dialog :title="isvisiableType==1?'新增':'编辑'" v-model="isvisiable" width="45%" top="15vh" custom-class="modal"
|
|
|
+ :close-on-click-modal="false" :before-close="onClickDialogClose">
|
|
|
+ <!-- 这里是新增或编辑 -->
|
|
|
+ <el-row type="flex">
|
|
|
+ <el-col :span="12">
|
|
|
+ 字段1:
|
|
|
+ <el-input placeholder="请选择日期" v-model="myInput1" :value="myInput1">
|
|
|
+ </el-input>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ 字段2:
|
|
|
+ <el-input placeholder="请选择日期" v-model="myInput2" :value="myInput2">
|
|
|
+ </el-input>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row type="flex">
|
|
|
+ <el-col :span="12">
|
|
|
+ 字段3:
|
|
|
+ <el-input placeholder="请选择日期" v-model="myInput3" :value="myInput3">
|
|
|
+ </el-input>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="12">
|
|
|
+ 字段4:
|
|
|
+ <el-input placeholder="请选择日期" v-model="myInput4" :value="myInput4">
|
|
|
+ </el-input>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row type="flex" justify="end">
|
|
|
+ <div class="query-actions" style="margin-top: 15px;">
|
|
|
+ <button class="btn" @click="onClickDialogClose">取消</button>
|
|
|
+ <button class="btn" @click="dialogSave()">保存</button>
|
|
|
+ </div>
|
|
|
+ </el-row>
|
|
|
+ </el-dialog>
|
|
|
+ </el-scrollbar>
|
|
|
+ <el-scrollbar :height="height" v-else>
|
|
|
+ <Cgd :data='gzCgdData' @gzCgdClick='gzCgdClick'/>
|
|
|
+ </el-scrollbar>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ import ComTable from "@/components/coms/table/table.vue";
|
|
|
+ import Cgd from "./gzCgd.vue";
|
|
|
+ export default {
|
|
|
+ components: {
|
|
|
+ ComTable,
|
|
|
+ Cgd
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ const that = this;
|
|
|
+ return {
|
|
|
+ pageIndex: 1,
|
|
|
+ pageSize: 20,
|
|
|
+ gzCgd:1,//传感点组件隐藏或显示
|
|
|
+ gzCgdData:'',//传感点参数
|
|
|
+ BuJian: [{
|
|
|
+ label: '部件1',
|
|
|
+ value: '1'
|
|
|
+ }, {
|
|
|
+ label: '部件2',
|
|
|
+ value: '2'
|
|
|
+ }],
|
|
|
+ TingJiLeiXing: [{
|
|
|
+ label: '类型1',
|
|
|
+ value: '1'
|
|
|
+ }, {
|
|
|
+ label: '类型2',
|
|
|
+ value: '2'
|
|
|
+ }],
|
|
|
+ value1: '',
|
|
|
+ value2: '',
|
|
|
+ value3: [],
|
|
|
+ myInput1: "",
|
|
|
+ myInput2: "",
|
|
|
+ myInput3: "",
|
|
|
+ myInput4: "",
|
|
|
+ isvisiable: false,
|
|
|
+ isvisiableType: 1, //新增为1,编辑为2
|
|
|
+ tableData: {
|
|
|
+ column: [{
|
|
|
+ name: "序号",
|
|
|
+ field: "index",
|
|
|
+ is_light: false,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "字段1",
|
|
|
+ field: "myInput1",
|
|
|
+ is_light: false,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "字段2",
|
|
|
+ field: "myInput2",
|
|
|
+ is_light: false,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "字段3",
|
|
|
+ field: "myInput3",
|
|
|
+ is_light: false,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "字段4",
|
|
|
+ field: "myInput4",
|
|
|
+ is_light: false,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "操作",
|
|
|
+ is_light: false,
|
|
|
+ width: 100,
|
|
|
+ template: () => {
|
|
|
+ return (
|
|
|
+ "<el-button type='text' style='cursor: pointer;' value='edit'>编辑</el-button> " +
|
|
|
+ "<el-button type='text' style='cursor: pointer;' value='delete'>删除</el-button> " +
|
|
|
+ "<el-button type='text' style='cursor: pointer;' value='config'>传感点</el-button> "
|
|
|
+ );
|
|
|
+ },
|
|
|
+ click(e, row) {
|
|
|
+ that.onClickOption(e, row);
|
|
|
+ },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ data: [{
|
|
|
+ index: 1,
|
|
|
+ myInput1: "MG01-01",
|
|
|
+ myInput2: "0.1000",
|
|
|
+ myInput3: "0.1000",
|
|
|
+ myInput4: "0.1000",
|
|
|
+ value: '这里放隐藏值1',
|
|
|
+ is_light: false,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ index: 2,
|
|
|
+ myInput1: "MG01-02",
|
|
|
+ myInput2: "2",
|
|
|
+ myInput3: "23",
|
|
|
+ myInput4: "24",
|
|
|
+ value: '这里放隐藏值2',
|
|
|
+ is_light: false,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ }
|
|
|
+ };
|
|
|
+ },
|
|
|
+ props: {
|
|
|
+ height: {
|
|
|
+ type: String
|
|
|
+ },
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getTable() {
|
|
|
+ let that = this;
|
|
|
+ this.tableLoading = true;
|
|
|
+ that.API.requestData({
|
|
|
+ method: "GET",
|
|
|
+ baseURL: "http://10.155.32.4:9001/",
|
|
|
+ subUrl: "benchmarking/wplist",
|
|
|
+ data: {
|
|
|
+ wpId: that.stationId,
|
|
|
+ startTs: that.startDate,
|
|
|
+ endTs: that.endDate,
|
|
|
+ pageNum: that.pageIndex,
|
|
|
+ pageSize: that.pageSize,
|
|
|
+ },
|
|
|
+ success(res) {
|
|
|
+ var dataTab = [];
|
|
|
+ if (res.data) {
|
|
|
+ res.data.list.forEach(item => {
|
|
|
+ dataTab.push({ //表格
|
|
|
+ recodedata: that.formatTime(item.recodedata),
|
|
|
+ region: item.region,
|
|
|
+ weather: item.weather,
|
|
|
+ maximumtem: item.maximumtem,
|
|
|
+ minimumtem: item.minimumtem,
|
|
|
+ sunrise: item.sunrise,
|
|
|
+ sunset: item.sunset,
|
|
|
+ weather1: item.weather1,
|
|
|
+ weather2: item.weather2,
|
|
|
+ temperature1: item.temperature1,
|
|
|
+ temperature2: item.temperature2,
|
|
|
+ realfeel1: item.realfeel1,
|
|
|
+ realfeel2: item.realfeel2,
|
|
|
+ precipitation1: item.precipitation1,
|
|
|
+ precipitation2: item.precipitation2,
|
|
|
+ winddirection1: item.winddirection1,
|
|
|
+ winddirection2: item.winddirection2,
|
|
|
+ speed1: item.speed1,
|
|
|
+ speed2: item.speed2
|
|
|
+ })
|
|
|
+ })
|
|
|
+ that.tableData.data = dataTab;
|
|
|
+ that.tableData.total = res.data.total;
|
|
|
+ } else {
|
|
|
+ that.tableData.data = [];
|
|
|
+ that.tableData.total = 0;
|
|
|
+ }
|
|
|
+ that.tableLoading = false;
|
|
|
+ },
|
|
|
+ });
|
|
|
+ },
|
|
|
+ onChangePage(params) {
|
|
|
+ this.pageIndex = params.pageIndex;
|
|
|
+ this.pageSize = params.pageSize;
|
|
|
+ this.getTable();
|
|
|
+ },
|
|
|
+ startAjax() {
|
|
|
+ // BuJian
|
|
|
+ // TingJiLeiXing
|
|
|
+ var that = this;
|
|
|
+ that.API.requestData({
|
|
|
+ method: "GET",
|
|
|
+ baseURL: "http://10.155.32.4:9001/",
|
|
|
+ subUrl: "benchmarking/wplist",
|
|
|
+ success(res) {
|
|
|
+ that.ChangZhan = res.data;
|
|
|
+ },
|
|
|
+ });
|
|
|
+ },
|
|
|
+ query() {
|
|
|
+ var that = this;
|
|
|
+ console.log(that.value1)
|
|
|
+ console.log(that.value2)
|
|
|
+ console.log(that.value3)
|
|
|
+ if(that.value3){
|
|
|
+ that.value3[0].valueOf()//开始时间
|
|
|
+ that.value3[1].valueOf()//结束时间
|
|
|
+ }
|
|
|
+
|
|
|
+ // that.API.requestData({
|
|
|
+ // method: "GET",
|
|
|
+ // baseURL: "http://10.155.32.4:9001/",
|
|
|
+ // subUrl: "benchmarking/wplist",
|
|
|
+ // success(res) {
|
|
|
+ // that.ChangZhan = res.data;
|
|
|
+ // },
|
|
|
+ // });
|
|
|
+ },
|
|
|
+ addEdit() {
|
|
|
+ this.isvisiableType = 1;
|
|
|
+ this.myInput1 = '';
|
|
|
+ this.myInput2 = '';
|
|
|
+ this.myInput3 = '';
|
|
|
+ this.myInput4 = '';
|
|
|
+ this.isvisiable = true;
|
|
|
+ },
|
|
|
+ onClickOption(e, row) { // 操作按钮
|
|
|
+ let that = this;
|
|
|
+ console.log(row.value) //通过这个value去执行相关操作
|
|
|
+ if ("delete" == e.target.getAttribute("value")) {
|
|
|
+ that
|
|
|
+ .$confirm("确认删除此条样本数据?", "提示", {
|
|
|
+ confirmButtonText: "删除",
|
|
|
+ cancelButtonText: "取消"
|
|
|
+ })
|
|
|
+ .then((_) => {
|
|
|
+ console.log('ok')
|
|
|
+ // that.requestDelete(row);
|
|
|
+ })
|
|
|
+ .catch((_) => {});
|
|
|
+ }
|
|
|
+ if ("edit" == e.target.getAttribute("value")) {
|
|
|
+ that.isvisiableType = 2;
|
|
|
+ that.$nextTick(()=>{
|
|
|
+ that.myInput1 = row.myInput1;
|
|
|
+ that.myInput2 = row.myInput2;
|
|
|
+ that.myInput3 = row.myInput3;
|
|
|
+ that.myInput4 = row.myInput4;
|
|
|
+ });
|
|
|
+ that.isvisiable = true;
|
|
|
+ }
|
|
|
+ if ("config" == e.target.getAttribute("value")) {//传感点
|
|
|
+ that.gzCgdData = row.value;
|
|
|
+ that.gzCgd = 2;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onClickDialogClose() { // 弹窗右上角关闭按钮
|
|
|
+ this.isvisiable = false;
|
|
|
+ this.isvisiableType = 1;
|
|
|
+ },
|
|
|
+ dialogSave() {
|
|
|
+ console.log(this.myInput1)
|
|
|
+ // myInput1: "",
|
|
|
+ // myInput2: "",
|
|
|
+ // myInput3: "",
|
|
|
+ // myInput4: "",
|
|
|
+ },
|
|
|
+ gzCgdClick(data){
|
|
|
+ this.gzCgd = data;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ // this.startAjax();
|
|
|
+ },
|
|
|
+ mounted() {},
|
|
|
+ };
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+
|
|
|
+</style>
|