分页修改

quanyawei

2024-01-25 a4831debee63c7071a261c5f6ecfa62fd535b2ab

 src/views/list/devicesBasic.vue

@@ -13,6 +13,13 @@
                  style="margin-left: 25px"

                  >新建

                </a-button>

                <a-button

                  icon="plus"

                  type="primary"

                  @click="() => this.handleModalVisible1(true)"

                  style="margin-left: 25px"

                  >批量修改准校值

                </a-button>

              </a-col>

              <a-col :span="4">

                <a-form-model-item

@@ -86,6 +93,127 @@
        ></av-standard-table>

      </div>

    </a-card>



    <a-modal

      title="批量修改校准值"

      :visible="visibleCreateModal1"

      @cancel="handleCreateModalCancel1"

      destroyOnClose

      class="modalStylezhi"

      okText="保存"

    >

      <template #footer>

        <a-button key="back" @click="handleCreateModalCancel1">关闭</a-button>

        <a-button

          key="submit"

          type="primary"

          :loading="loading"

          @click="handleOk"

          >提交</a-button

        >

      </template>

      <div class="modalone">

        <div class="theone">

          <a-select

            ref="select"

            v-model="selectvalue1"

            allowClear

            placeholder="请选择因子"

            :options="selectoptions"

            @change="handleChangevalue1"

            style="margin-top: 40px; margin-left: 10px; width: 130px"

          ></a-select>

        </div>

        <div class="thetwo">

          <div style="height: 50px">

            <div style="margin-top: 15px; margin-left: 20px">

              <span style="font-size: 17.5px; color: black">AQI值 :</span

              ><a-select

                ref="select"

                v-model="AQIvalue1"

                style="width: 100px; margin-left: 16px"

                allowClear

                :options="AQIoptions"

                @change="AQIhandleChange"

              ></a-select>

              <a-input

                v-model="AQIvalue"

                style="width: 100px; margin-left: 15px"

                @blur="ceAQIhandleChange"

              />

            </div>

          </div>

          <div style="height: 50px">

            <div style="margin-left: 20px">

              <span style="font-size: 17.5px; color: black">测量值 :</span

              ><a-select

                ref="select"

                v-model="ceAQIvalue"

                style="width: 100px; margin-left: 10px"

                allowClear

                :options="ceAQIoptions"

                @change="AQIhandleChange"

              ></a-select>

              <a-input

                v-model="ceAQIvaluein"

                style="width: 100px; margin-left: 15px"

                @blur="ceAQIhandleChange"

              />

            </div>

          </div>

        </div>

        <div class="thethree">

          <div style="margin-left: 20px; margin-top: 40px">

            <span style="font-size: 16px; color: black">最终公式:</span>

            <span style="font-size: 17.5px; color: black">

              (原AQI系数 {{ AQIvalue1 }}

              <span style="color: #cbcb28">{{ AQIvalue }} </span>) + (原测量系数

              {{ ceAQIvalue

              }}<span style="color: #cbcb28"> {{ ceAQIvaluein }}</span

              >)</span

            >

          </div>

        </div>

      </div>

      <div class="modaltwo">

        <a-select

          placeholder="选择站点(输入名称搜索)"

          allow-clear

          show-search

          style="width: 200px"

        >

          <a-select-option

            v-for="(item, index) in MonitorPoints"

            :key="index"

            :value="item.id"

            @click="handleChange2"

            >{{ item.name }}

          </a-select-option>

        </a-select>

      </div>

      <div>

        <a-table

          :row-selection="{

            getCheckboxProps: this.rowSelection.getCheckboxProps,

            onChange: this.rowSelectionChange,

          }"

          :columns="tablecolumns"

          :data-source="datatable"

          style="margin-top: 20px"

          bordered

          row-key="name"

          :scroll="{ x: 900, y: 300 }"

          :pagination="false"

        >

          <template #bodyCell="{ column, text }">

            <template v-if="column.dataIndex === 'name'">

              <a>{{ text }}</a>

            </template>

          </template>

        </a-table>

      </div>

    </a-modal>



    <a-modal

      title="添加-设备"

      destroyOnClose

@@ -948,6 +1076,7 @@


<script lang="tsx">

import {Component, Prop, Vue, Model, Watch} from "vue-property-decorator";

import type { TableProps, TableColumnType } from 'ant-design-vue';

import moment from "moment";

import { get, post } from "@/util/request";

import UpdateTaskForm from "./components/UpdateTaskFormRole.vue";

@@ -959,7 +1088,6 @@
import axios from "axios";

import { jsonp }  from 'vue-jsonp'

import any = jasmine.any;





const statusMap = ["default", "processing", "success", "error"];

const status = ["关闭", "运行中", "已上线", "异常"];

@@ -1068,6 +1196,8 @@


  private visibleCreateModal: boolean = false;



  private visibleCreateModal1: boolean = false;



  private editTaskFormVisible: boolean = false;



  private distributionMenuVisible: boolean = false;

@@ -1075,17 +1205,192 @@
  private createForm: any = null;



  private editRecord: any = {};



  private pagination: any = {

    total: 0,

    current: 1,

    pageSize: 5,

    showSizeChanger: false,

    showQuickJumper: false

    pageSize: 10,

    showSizeChanger: true,

    showQuickJumper: true,

    pageSizeOptions: ["10", "30", "60", "100"],

    showTotal: (total: number) => `共有 ${this.pagination.total} 条数据`, //分页中显示总的数据

  };



  private updateRecord1: any = {};

  private selectvalue1:any = '请选择因子';

  private selectoptions:any[]=[

    {

    value: 'a34004',

    label: 'PM2.5',

    },

    {

      value: 'a34002',

      label: 'PM10',

    },

    {

      value: 'a05024',

      label: '臭氧',

    },

     {

      value: 'a21004',

      label: '二氧化氮',

    },

     {

      value: 'a21026',

      label: '二氧化硫',

    },

     {

      value: 'a21005',

      label: '一氧化碳',

    },

     {

      value: 'a99054',

      label: 'TVOC',

    },

  ]

  private AQIvalue1:any = '+';

  private ceAQIvalue:any = '+';

  private  ceAQIvaluein:number = 0.01;

  private AQIvalue:number = 0.01;

  private AQIoptions:any[]=[

    {

    value: '+',

    label: '+',

    },

    {

      value: '-',

      label: '-',

    },

    {

      value: '*',

      label: '*',

    },

    {

      value: '/',

      label: '/',

    },

  ]

  private ceAQIoptions:any[]=[

    {

    value: '+',

    label: '+',

    },

    {

      value: '-',

      label: '-',

    },

    {

      value: '*',

      label: '*',

    },

    {

      value: '/',

      label: '/',

    },

  ]

  private changesen:number=0

  private handleChangevalue1(value: string){

    console.log(this.changesen);

    if(this.changesen===1){

      this.handleChange2(this.reskey);

    }

  }

  private AQIhandleChange(value: string){

    console.log(this.changesen);

       if(this.changesen===1){

      this.handleChange2(this.reskey);

    }

  }

  private ceAQIhandleChange(value: string){

    console.log(this.changesen);

    if(this.changesen===1){

      this.handleChange2(this.reskey);

    }

  }

  private tablecolumns:TableColumnType<datatable>=[

    {

      title: "名称",

      dataIndex: "name"

    },

    {

      title: '修改前',

      dataIndex: 'value',

    },

    {

      title: '修改后',

      dataIndex: 'agehou',

    },

  ]

  private datatable:any[]=[

    // {

    //   key: '1',

    //   name: 'John Brown',

    //   age: 'aqi*0.93+cel*0.07',

    //   age1:0.93,

    //   age2:0.07,

    //   address: 'New York No. 1 Lake Park',

    //   agehou:''

    // },

    // {

    //   key: '2',

    //   name: 'Jim Green',

    //   age: 'aqi*0.93+cel*0.07',

    //   age1:0.93,

    //   age2:0.07,

    //   address: 'London No. 1 Lake Park',

    //   agehou:''

    // },

    // {

    //   key: '3',

    //   name: 'Joe Black',

    //   age: 'aqi*0.93+cel*0.07',

    //   age1:0.93,

    //   age2:0.07,

    //   address: 'Sidney No. 1 Lake Park',

    //   agehou:''

    // }

  ]



  private rowSelectionChange(selectedRowKeys: string[], selectedRows: DataType[]){

    //  console.log(selectedRows);

     this.selectedtable=selectedRows

  }

  private selectedtable:any[]=[]

  private rowSelection:TableProps['rowSelection']={

    onChange: (selectedRowKeys: string[], selectedRows: DataType[]) => {

      this.selectedtable=selectedRows

      // console.log(this.selectedtable);

    },

    getCheckboxProps: (record: DataType) => ({

      name: record.name,

    }),

  }

  private handleOk(){

    // console.log(this.selectedtable);

    post('deviceAdjustValue/updateAllAdjust',{

        AdjustForm:this.selectedtable

    }).then((res:any)=>{

      console.log(res);

      if(res.data.code == 0){

        this.$message.success('操作成功')

        this.handleCreateModalCancel1()

      }

    })

    // this.loading = true;

  //   setTimeout(() => {

  //   this.loading = false;

  // }, 2000);

  }



  private columns: any[] = [

    {

      title: "序号",

      dataIndex: "key",

      key: "key",

      align: "center",

      customRender: (text:any, record:any, index:any) => `${index + 1}`,

      width: 60,

    },

    {

      title: "名称",

      dataIndex: "name"

@@ -1217,6 +1522,7 @@
    this.addMapFlag = true

  }

  private showMap2() {

    this.typeOperation = 'upa'

    this.editMapFlag = true

  }

  // 定位级别数据

@@ -1325,6 +1631,9 @@
    this.getGovPointByArea('')

    this.techFlag = false

  }

    private handleModalVisible1(isVisible: boolean): void {

      this.visibleCreateModal1=isVisible

  }



  private toggleForm(): void {

    this.expandForm = !this.expandForm;

@@ -1343,6 +1652,9 @@
  private current: number = 1

  private handlerTableChange(pagination: any, filter: any, sorter: any): void {

    this.current = pagination.current

    this.pagination.current = pagination.current;

    this.pagination.pageSize = pagination.pageSize;

    this.pagination.total = pagination.total;

    this.loadRuleData(pagination.current)

  }



@@ -1368,6 +1680,64 @@
      this.selectMt = selectedItems;

    }

    this.loadRuleData(1)

  }

  private reskey:any=0

  private handleChange2(res:any){

    console.log(res.key);

    this.reskey=res

    console.log(this.reskey);

    if(this.selectvalue1==='请选择因子'){

      this.$message.warning('请先选择因子')

      return

    }

    post('deviceAdjustValue/getAllAdjust',{

      code:this.selectvalue1,

      id:res.key,

    }).then((res:any)=>{

      this.datatable=[]

      this.datatable=res.data.data

      if(this.selectvalue1==='a99054'){

        console.log(21323);

         for(var i=0;i<this.datatable.length;i++){

          if(this.ceAQIvalue==='+'){

             this.datatable[i].cel=((this.datatable[i].cel-0) + (this.ceAQIvaluein-0)).toFixed(2)

          }else if(this.ceAQIvalue==='-'){

            this.datatable[i].cel=Number((this.datatable[i].cel - this.ceAQIvaluein).toFixed(2))

          }else if(this.ceAQIvalue==='*'){

            this.datatable[i].cel=Number((this.datatable[i].cel * this.ceAQIvaluein).toFixed(2))

          }else if(this.ceAQIvalue==='/'){

             this.datatable[i].cel=Number((this.datatable[i].cel / this.ceAQIvaluein).toFixed(3))

          }

           this.datatable[i].agehou='ce1*'+this.datatable[i].cel

         }

      }else{

        for(var i=0;i<this.datatable.length;i++){

        //   this.datatable[i].aqi=parseFloat(this.datatable[i].aqi+this.AQIvalue).toFixed(2)

        //   this.datatable[i].cel=parseFloat(this.datatable[i].cel+this.ceAQIvaluein).toFixed(2)

        //   this.datatable[i].agehou='aqi*'+this.datatable[i].aqi+'+'+'ce1*'+this.datatable[i].cel

            if(this.AQIvalue1==='+'){

              this.datatable[i].aqi=((this.datatable[i].aqi-0) + (this.AQIvalue-0)).toFixed(2)

            }else if(this.AQIvalue1==='-'){

              this.datatable[i].aqi=Number((this.datatable[i].aqi - this.AQIvalue)).toFixed(2)

            } else if(this.AQIvalue1==='*'){

              this.datatable[i].aqi=Number((this.datatable[i].aqi * this.AQIvalue)).toFixed(2)

            }else if(this.AQIvalue1==='/'){

              this.datatable[i].aqi=Number((this.datatable[i].aqi / this.AQIvalue).toFixed(3))

            }

            if(this.ceAQIvalue==='+'){

             this.datatable[i].cel=((this.datatable[i].cel-0) + (this.ceAQIvaluein-0)).toFixed(2)

            }else if(this.ceAQIvalue==='-'){

              this.datatable[i].cel=Number((this.datatable[i].cel - this.ceAQIvaluein)).toFixed(2)

            }else if(this.ceAQIvalue==='*'){

              this.datatable[i].cel=Number((this.datatable[i].cel * this.ceAQIvaluein)).toFixed(2)

            }else if(this.ceAQIvalue==='/'){

              this.datatable[i].cel=Number((this.datatable[i].cel / this.ceAQIvaluein).toFixed(3))

            }

            this.datatable[i].agehou='aqi*'+this.datatable[i].aqi+'+'+'ce1*'+this.datatable[i].cel

        }

      }

      this.changesen=1;

    })

  }





@@ -1596,6 +1966,11 @@
  // 存放查询的组织id

  private selectMt: any = null



  private loading: boolean=false



  private handleCancel(){



  }

  //新建保存

  private handleCreateModalOk() {

    this.form.validateFields((err: any, values: any) => {

@@ -1689,6 +2064,13 @@
    this.visibleCreateModal = false;

  }



  private handleCreateModalCancel1():any{

    this.datatable=[];

    this.selectvalue1='请选择因子';

    this.changesen=0;

    this.visibleCreateModal1=false;

  }



  private handlerSelectChange(arr1: any, arr2: any) {

    this.selectedRows = arr2;

  }

@@ -1729,7 +2111,7 @@
            name: this.serch.name,

            mac: this.serch.name,

            page: pageSize,

            size: 8

            size: this.pagination.pageSize,

        })

        .then(res => {

          if(res.data.code === 0) {

@@ -1827,48 +2209,95 @@
  }



  private receiveFlag2(flag: boolean){

    console.log('receiveFlag2');

    this.editMapFlag = flag

  }

  // 接收新增经纬度点

  private receiveLomLat(lonLat: any) {



    this.addLL = lonLat

    this.getTownData(lonLat)

  }



  private getTownData(lonLat: any) {

    // jsonp('/proxy/reverse_geocoding/v3/', {

    jsonp('https://api.map.baidu.com/reverse_geocoding/v3/', {

        ak: 'e5ig9Z7AKFjv8wbkqDbuLkUMzBev0tgT',

        output: 'json',

        coordtype: 'wgs8411',

        extensions_town: true,

        location: lonLat.lat+ ',' + lonLat.lng

    }).then((res: any) => {

      if(this.typeOperation === 'add') {

        this.town_code = res.result.addressComponent.town_code

        this.form.setFieldsValue({

          jingdu: this.addLL.lng,

          weidu: this.addLL.lat,

          town: res.result.addressComponent.town

        })

      } else {

        console.log(res);

        if (!(res.result.addressComponent.town === '' && res.result.addressComponent.town_code === '')){

          this.editBeforeData.town.townName = res.result.addressComponent.town

          this.editBeforeData.town.townCode = res.result.addressComponent.town_code

        } else {

          this.editBeforeData.town.townName = res.result.addressComponent.town

          this.editBeforeData.town.townCode = res.result.addressComponent.town_code

          this.$message.warning('选择位置信息异常')

        }

    console.log(lonLat,'dsasa');

         let self=this

               var geocoder = new AMap.Geocoder({

                  // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode

                  city: '010'

               })

               geocoder.getAddress(lonLat, function(status, result) {

            console.log(result,'result');

                  if (status === 'complete' && result.info === 'OK') {

                     // self.formattedAddress=result.regeocode.formattedAddress

              // console.log(result,'321312');

              if(self.typeOperation === 'add') {

                if(result.regeocode.addressComponent.towncode.length>9){

                  self.town_code=result.regeocode.addressComponent.towncode.slice(0,9)

                }else{

                  self.town_code = result.regeocode.addressComponent.towncode

                }

                self.form.setFieldsValue({

                  jingdu: self.addLL[0],

                  weidu: self.addLL[1],

                  town: result.regeocode.addressComponent.township

                })

                console.log(self.town_code);

              } else {

                if (!(result.regeocode.addressComponent.township === '' && result.regeocode.addressComponent.towncode === '')){

                  self.editBeforeData.town.townName = result.regeocode.addressComponent.township

                  if(result.regeocode.addressComponent.towncode.length>9){

                    self.editBeforeData.town.townCode = result.regeocode.addressComponent.towncode.slice(0,9)

                  }else{

                    self.editBeforeData.town.townCode = result.regeocode.addressComponent.towncode

                  }

                  // console.log(self.editBeforeData.town.townName,self.editBeforeData.town.townCode,'222');

                } else {

                  self.editBeforeData.town.townName = result.regeocode.addressComponent.town

                  self.editBeforeData.town.townCode = result.regeocode.addressComponent.towncode

                  self.$message.warning('选择位置信息异常')

                }



      }

    })

              }

                     // result为对应的地理位置详细信息

                  }

               })



    // jsonp('/proxy/reverse_geocoding/v3/', {

    // jsonp('https://api.map.baidu.com/reverse_geocoding/v3/', {

    //     ak: 'e5ig9Z7AKFjv8wbkqDbuLkUMzBev0tgT',

    //     output: 'json',

    //     coordtype: 'wgs8411',

    //     extensions_town: true,

    //     location: lonLat.lat+ ',' + lonLat.lng

    // }).then((res: any) => {

    //   console.log(res,'res');

    //   if(this.typeOperation === 'add') {

    //     this.town_code = res.result.addressComponent.town_code

    //     this.form.setFieldsValue({

    //       jingdu: this.addLL.lng,

    //       weidu: this.addLL.lat,

    //       town: res.result.addressComponent.town

    //     })

    //   } else {

    //     console.log(res,'555');

    //     if (!(res.result.addressComponent.town === '' && res.result.addressComponent.town_code === '')){

    //       this.editBeforeData.town.townName = res.result.addressComponent.town

    //       this.editBeforeData.town.townCode = res.result.addressComponent.town_code

    //     } else {

    //       this.editBeforeData.town.townName = res.result.addressComponent.town

    //       this.editBeforeData.town.townCode = res.result.addressComponent.town_code

    //       this.$message.warning('选择位置信息异常')

    //     }



    //   }

    // })

  }

  // 接收修改经纬度点

  private receiveLomLat1(lonLat: any) {

    this.editBeforeData.longitude = lonLat.lng

    this.editBeforeData.latitude = lonLat.lat

    console.log(lonLat,'lonLat');

    this.editBeforeData.longitude = lonLat[0]

    this.editBeforeData.latitude = lonLat[1]

    this.getTownData(lonLat)

  }



@@ -1957,4 +2386,49 @@
    min-height: 0;

  }

}

.modalStylezhi {

  .ant-modal-content {

    width: 1000px;

    margin-left: -250px;

  }

  .ant-modal-title {

    font-size: 20px;

    margin-left: -25px;

  }

  .ant-form-item {

    margin-bottom: 0px;

  }



  .ant-form-explain {

    display: none;

    min-height: 0;

  }

  .ant-modal-header {

    width: 95%;

    margin-left: 25px;

  }

}

.modalone {

  height: 120px;

  border-bottom: 1px solid #e8e8e8;

  display: flex;

  .theone {

    width: 20%;

    border-right: 1px #e8e8e8 dashed;

    height: 100px;

  }

  .thetwo {

    width: 35%;

    border-right: 1px #e8e8e8 dashed;

    height: 100px;

  }

  .thethree {

    width: 45%;

    height: 100px;

  }

}

.modaltwo {

  margin-top: 20px;

  margin-left: 10px;

}

</style>