blame | history | patch | commit | commitdiff | show whitespace
quanyawei
2024-01-25 d53995cad3a6351250333115a15c506e5926d8f5 
 src/views/list/devicesMonitorPoint.vue


@@ -5,11 +5,18 @@


                <div class="tableListForm">



                    <a-form @submit="handleSearch" layout="horizontal" :form="searchForm">



                        <a-row :gutter="{ md: 8, lg: 24, xl: 48 }">



                            <a-button icon="plus" type="primary" @click="() => this.handleModalVisible(true)" style="margin-left: 25px;">



              <a-button



                icon="plus"



                type="primary"



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



                style="margin-left: 25px;"



              >



                                新建



                            </a-button>



                            <div style="float:right;display:flex">



                                <span style="margin-top:10px;margin-right:10px;font-size:14px">组织: </span>



                <span style="margin-top:10px;margin-right:10px;font-size:14px"



                  >组织:



                </span>



                                <a-select



                                    placeholder="选择组织(输入名称搜索)"



                                    :value="selectedItems"



@@ -19,24 +26,34 @@


                                    allow-clear



                                    show-search



                                >



                                    <a-select-option v-for="(item,index) in orgData" :key="index" :value="item.id">



                  <a-select-option



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



                    :key="index"



                    :value="item.id"



                  >



                                    {{ item.name }}



                                    </a-select-option>



                                </a-select>



                                <a-form-item  v-bind="searchFormLayout" style="width: 240px">



                                    <a-input v-model="serch.name"  placeholder="请输入站点名称" allow-clear />



                  <a-input



                    v-model="serch.name"



                    placeholder="请输入站点名称"



                    allow-clear



                  />



                                </a-form-item>



                            </div>



                        </a-row>



                    </a-form>



                </div>



            <av-standard-table :dataSource="dataSource"



        <av-standard-table



          :dataSource="dataSource"



                     :selectedRows="selectedRows"



                     :columns="columns"



                     :loading="tableLoading"



                     :paginationProps="pagination"



                     @tableChange="handlerTableChange"



                     @selectChange="handlerSelectChange">



          @selectChange="handlerSelectChange"



        >



                <!-- <template slot="organizationId" >



                    <div v-for="(item,index) in orgData" :key="index">{{item.name}}</div>



                </template> -->



@@ -49,101 +66,168 @@


        </div>



    </a-card>







    <a-modal title="添加-站点" destroyOnClose :visible="visibleCreateModal" @ok="handleCreateModalOk" @cancel="handleCreateModalCancel">



    <a-modal



      title="添加-站点"



      destroyOnClose



      :visible="visibleCreateModal"



      @ok="handleCreateModalOk"



      @cancel="handleCreateModalCancel"



    >



        <a-form style="margin-top: 8px" :form="createForm">



            <a-form-item :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="名称" has-feedback>



                <a-input placeholder="请输入" v-decorator="['name', { rules: [{ required: true, message: '请输入名称！', min: 1 }] }]"/>



        <a-form-item



          :labelCol="{ span: 5 }"



          :wrapperCol="{ span: 15 }"



          label="名称"



          has-feedback



        >



          <a-input



            placeholder="请输入"



            v-decorator="[



              'name',



              { rules: [{ required: true, message: '请输入名称！', min: 1 }] },



            ]"



          />



            </a-form-item>



            <a-form-item :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="组织" has-feedback >



        <a-form-item



          :labelCol="{ span: 5 }"



          :wrapperCol="{ span: 15 }"



          label="组织"



          has-feedback



        >



                <a-select



                    v-decorator="['organizationId', { rules: [{ required: true, message: '请选择组织！' }] }]"



            v-decorator="[



              'organizationId',



              { rules: [{ required: true, message: '请选择组织！' }] },



            ]"



                    placeholder="选择组织(输入名称搜索)"



                    style="width: 240px;margin-top:4px"



                    :filter-option="filteredOptions"



                    allow-clear



                    show-search



                >



                    <a-select-option v-for="(item,index) in orgData" :key="index" :value="item.id">



            <a-select-option



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



              :key="index"



              :value="item.id"



            >



                    {{ item.name }}



                    </a-select-option>



                </a-select>



            </a-form-item>



            <a-form-item :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="省/市/区" has-feedback >



                <a-cascader v-decorator="['provinceCode', { rules: [{ required: true, message: '请选择地区！'}] }]" :options="region" placeholder="选择地区"  @change="onChangeReginon" />



        <a-form-item



          :labelCol="{ span: 5 }"



          :wrapperCol="{ span: 15 }"



          label="省/市/区"



          has-feedback



        >



          <a-cascader



            v-decorator="[



              'provinceCode',



              { rules: [{ required: true, message: '请选择地区！' }] },



            ]"



            :options="region"



            placeholder="选择地区"



            @change="onChangeReginon"



          />



            </a-form-item>



            <a-form-item :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="详细地址">



        <a-form-item



          :labelCol="{ span: 5 }"



          :wrapperCol="{ span: 15 }"



          label="详细地址"



        >



                <a-input v-decorator="['address']" placeholder="请输入" />



            </a-form-item>



            <a-form-item :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="经度">



        <a-form-item



          :labelCol="{ span: 5 }"



          :wrapperCol="{ span: 15 }"



          label="经度"



        >



                <a-input v-decorator="['longitude']" placeholder="请输入" />



            </a-form-item>



            <a-form-item :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="纬度">



        <a-form-item



          :labelCol="{ span: 5 }"



          :wrapperCol="{ span: 15 }"



          label="纬度"



        >



                <a-input v-decorator="['latitude']" placeholder="请输入" />



            </a-form-item>



            <a-form-item :labelCol="{ span: 5 }" :wrapperCol="{ span: 15 }" label="备注">



        <a-form-item



          :labelCol="{ span: 5 }"



          :wrapperCol="{ span: 15 }"



          label="备注"



        >



                <a-input v-decorator="['desc']" placeholder="请输入" />



            </a-form-item>



        </a-form>



    </a-modal>







    <update-task-form :visible.sync="updateTaskFormVisible" :record="updateRecord" @ok="handleUpdateOk"></update-task-form>



    <update-task-form



      :visible.sync="updateTaskFormVisible"



      :record="updateRecord"



      @ok="handleUpdateOk"



    ></update-task-form>







    <distribution-monitor  :width="modelSize.width" :height="modelSize.height"  :visible.sync="distributionMenuVisible" :record="updateRecord1" @ok="handleUpdateOk"></distribution-monitor>



    <distribution-monitor



      :width="modelSize.width"



      :height="modelSize.height"



      :visible.sync="distributionMenuVisible"



      :record="updateRecord1"



      @ok="handleUpdateOk"



    ></distribution-monitor>







    <pick-coordinate :mapUrl="mapUrl" :mapRecord="mapRecord"  v-if="!mapFlag" @mapFlag="receiveFlag"/>







    <pick-coordinate



      :mapUrl="mapUrl"



      :mapRecord="mapRecord"



      v-if="!mapFlag"



      @mapFlag="receiveFlag"



    />



</div>



</template>







<script lang="tsx">



import {



    Component,



    Prop,



    Vue,



    Model,



    Watch



} from 'vue-property-decorator';



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











import moment from 'moment';



import moment from "moment";



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



import org from '@/util/org'



import org from "@/util/org";







import { Observable, Subscription, BehaviorSubject } from 'rxjs';



import { Observable, Subscription, BehaviorSubject } from "rxjs";







import UpdateTaskForm from './components/UpdateTaskFormMonitor.vue';



import DistributionMonitor from './components/DistributionMonitor.vue'



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



import DistributionMonitor from "./components/DistributionMonitor.vue";







import TestModal from './components/TestModal.vue';



import TestModal from "./components/TestModal.vue";



import PickCoordinate from "@/components/map/pickCoordinate.vue";







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



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



const OPTIONS = ['Apples', 'Nails', 'Bananas', 'Helicopters'];



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



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



const OPTIONS = ["Apples", "Nails", "Bananas", "Helicopters"];



@Component({



    components: {



        UpdateTaskForm,



        DistributionMonitor,



        PickCoordinate



    PickCoordinate,



    },



})



export default class QueryList extends Vue {



    private region:any



  private region: any;







    private searchForm: any;







  private pagination: any = {



    total: 0,



    current: 1,



    pageSize: 8,



    showSizeChanger: false,



    showQuickJumper: false



    pageSize: 10,



    showSizeChanger: true,



    showQuickJumper: true,



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



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



  };



    private serch:any = {



        name:''



    }



    name: "",



  };



    // 省市区地区码



    private regionCode:number[] = []



  private regionCode: number[] = [];



    private searchFormLayout: any = {



        labelCol: {



            span: 5,



@@ -156,68 +240,73 @@






    private modelSize:any={



        width:500,



        height:500



    }



    height: 500,



  };







    private saveData:any={



        name:'',



        organizationId:'',



        provinceCode:'',



        cityCode:'',



        areaCode:'',



        longitude:'',



        latitude:'',



        address:'',



        desc: '',



    }



    name: "",



    organizationId: "",



    provinceCode: "",



    cityCode: "",



    areaCode: "",



    longitude: "",



    latitude: "",



    address: "",



    desc: "",



  };







    private mapRecord: any = {}



  private mapRecord: any = {};







    private mapUrl:string = 'monitorPoint/updateMonitorPoint'



  private mapUrl: string = "monitorPoint/updateMonitorPoint";







    // 储存选择城市的值



    private onChangeReginon(value: any){



      this.regionCode = value



    this.regionCode = value;



    }







    // 下拉查询框变量



    private selectedItems:any[]=[]



  private selectedItems: any[] = [];







    // 下拉查询框



    private filteredOptions(input:any,option:any) {



      return (



        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0



      option.componentOptions.children[0].text



        .toLowerCase()



        .indexOf(input.toLowerCase()) >= 0



        );



    }







    //下拉查询框方法



    private handleChange(selectedItems:any) {



      this.selectedItems = selectedItems;



      this.handleSearch()



    this.handleSearch();



    }







    // 组件数据



    private orgData:any = {}



  private orgData: any = {};







    // 获得所有组织



    private getAllOrg(){



        get("organization/queryNames", {}



        ).then(res => {



          this.orgData = res.data.data.organizationVOs.reverse()



        })



    get("organization/queryNames", {}).then((res) => {



      this.orgData = res.data.data.organizationVOs.reverse();



    });



    }







    @Watch('serch.name')



  @Watch("serch.name")



    private watchsearchInform(newVal:string,oldval:string){



      this.pagination.current = 1



            this.handleSearch()



    this.pagination.current = 1;



    this.handleSearch();



    }







    private created() {



        this.createForm = this.$form.createForm(this, {name: "devicesMonitorPoint"});



        this.searchForm = this.$form.createForm(this, {name: "devicesMonitorPoint"});



        this.getAllOrg()



        this.region = org



    this.createForm = this.$form.createForm(this, {



      name: "devicesMonitorPoint",



    });



    this.searchForm = this.$form.createForm(this, {



      name: "devicesMonitorPoint",



    });



    this.getAllOrg();



    this.region = org;



    }



    private expandForm: boolean = false;







@@ -231,7 +320,7 @@






    private dataSource: any[] = [];







    private regionData:number[]=[]



  private regionData: number[] = [];







    private visibleCreateModal: boolean = false;







@@ -245,41 +334,50 @@






    private updateRecord1: any = {};



    // 初始化站点信息



    private monitorPoints:any = {}



  private monitorPoints: any = {};







    private columns: any[] = [{



            title: '名称',



            dataIndex: 'name',



  private columns: any[] = [



    {



      title: "序号",



      dataIndex: "key",



      key: "key",



      align: "center",



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



      width: 60,



        },



        {



            title: '组织',



            dataIndex: 'organizationName',



            width: '10%',



      title: "名称",



      dataIndex: "name",



    },



    {



      title: "组织",



      dataIndex: "organizationName",



      width: "10%",



            // scopedSlots: { customRender: 'organizationId' },



        },



        {



            title: '省市区',



            dataIndex: 'tempRegionData',



      title: "省市区",



      dataIndex: "tempRegionData",



            // scopedSlots: { customRender: 'region' },



        },



        {



            title: '地址',



            dataIndex: 'address',



      title: "地址",



      dataIndex: "address",



        },



        {



            title: '经度',



            dataIndex: 'longitude',



      title: "经度",



      dataIndex: "longitude",



        },



        {



            title: '纬度',



            dataIndex: 'latitude',



      title: "纬度",



      dataIndex: "latitude",



        },



        {



            title: '备注',



            dataIndex: 'desc',



      title: "备注",



      dataIndex: "desc",



        },



        {



            title: '操作',



      title: "操作",



            customRender: this.opRender,



        },



    ];



@@ -297,7 +395,8 @@


    }







    get statuFilters() {



        return [{



    return [



      {



                text: status[0],



                value: 0,



            },



@@ -316,11 +415,9 @@


        ];



    }















    private regionFilters(value:any) {



      if (!value) return ''



      return org[value]



    if (!value) return "";



    return org[value];



    }







    private handleModalVisible(isVisible: boolean): void {



@@ -333,31 +430,35 @@


            organization_id:this.selectedItems,



            current: this.pagination.current,



            size: this.pagination.pageSize,



            orderType:1



      orderType: 1,



        })



        .then(res=>{



      .then((res) => {



            this.dataSource = res.data.data.monitorPoints;



          let tempMonitor = res.data.data.monitorPoints



          this.pagination.total = res.data.data.totalNumber



        let tempMonitor = res.data.data.monitorPoints;



        this.pagination.total = res.data.data.totalNumber;



          this.pagination.current = res.data.data.current;



            for (let i = 0; i < tempMonitor.length; i++) {



                tempMonitor[i].tempRegionData = tempMonitor[i].provinceCode[1] + tempMonitor[i].cityCode[1] + tempMonitor[i].areaCode[1]



                tempMonitor[i].organizationName = tempMonitor[i].organizationId[1]



                tempMonitor[i].organizationId = tempMonitor[i].organizationId[0]



          tempMonitor[i].tempRegionData =



            tempMonitor[i].provinceCode[1] +



            tempMonitor[i].cityCode[1] +



            tempMonitor[i].areaCode[1];



          tempMonitor[i].organizationName = tempMonitor[i].organizationId[1];



          tempMonitor[i].organizationId = tempMonitor[i].organizationId[0];



            }



        })



        .catch(err=>{



      .catch((err) => {



            console.log(err);



        })



      });



    }







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



      this.pagination.current = pagination.current



      this.loadRuleData()



    this.pagination.current = pagination.current;



    this.pagination.pageSize = pagination.pageSize;



    this.pagination.total = pagination.total;



    this.loadRuleData();



    }







    private testCallback(param: any) {



    }



  private testCallback(param: any) {}







    private handleUpdateModalVisible(visible: boolean, record: any): void {



        this.updateTaskFormVisible = true;



@@ -368,7 +469,7 @@


        this.updateRecord1 = record;



        setTimeout(()=>{



            this.distributionMenuVisible = true;



        },500)



    }, 500);



    }







    private handleCreateModalOk() {



@@ -376,17 +477,17 @@


            if (err) {



                return;



            }



            const name = this.createForm.getFieldValue('name');



      const name = this.createForm.getFieldValue("name");



            // const organizationId = this.selectedItems[0].id



            const organizationId = this.createForm.getFieldValue('organizationId')



            const provinceCode = this.regionCode[0]?this.regionCode[0]:''



            const cityCode = this.regionCode[1]?this.regionCode[1]:''



            const areaCode = this.regionCode[2]?this.regionCode[2]:''



            const longitude = this.createForm.getFieldValue('longitude');



            const latitude = this.createForm.getFieldValue('latitude');



            const address = this.createForm.getFieldValue('address');



            const desc = this.createForm.getFieldValue('desc');



            post('monitorPoint/insertOneMonitorPoint', {



      const organizationId = this.createForm.getFieldValue("organizationId");



      const provinceCode = this.regionCode[0] ? this.regionCode[0] : "";



      const cityCode = this.regionCode[1] ? this.regionCode[1] : "";



      const areaCode = this.regionCode[2] ? this.regionCode[2] : "";



      const longitude = this.createForm.getFieldValue("longitude");



      const latitude = this.createForm.getFieldValue("latitude");



      const address = this.createForm.getFieldValue("address");



      const desc = this.createForm.getFieldValue("desc");



      post("monitorPoint/insertOneMonitorPoint", {



                name:name,



                organizationId:organizationId,



                provinceCode:provinceCode,



@@ -396,18 +497,20 @@


                latitude:latitude,



                address:address,



                desc: desc,



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



      })



        .then((res: any) => {



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



                    this.$message.warning(res.data.message,2)



                  return;;



            this.$message.warning(res.data.message, 2);



            return;



                }



                this.createForm.resetFields();



                this.visibleCreateModal = false;



                this.$message.success(res.data.message, 2);



                this.loadRuleData();



            }).catch((err)=>{



                console.log(err);



            })



        .catch((err) => {



          console.log(err);



        });



        });



    }







@@ -423,8 +526,7 @@


        this.selectedRows = arr2;



    }







    private handleMenuClick(e: any) {



    }



  private handleMenuClick(e: any) {}







    private mounted() {



        this.loadRuleData();



@@ -433,98 +535,97 @@






    // 地图组件



    private showMap(flag: boolean, record: any) {



        this.mapFlag = flag



        this.mapRecord = record



    this.mapFlag = flag;



    this.mapRecord = record;



    }











    private mapFlag: boolean = true



  private mapFlag: boolean = true;







    private receiveFlag(flag: boolean) {



    this.mapFlag = true



    this.mapFlag = true;



    }







    @Watch('mapFlag')



  @Watch("mapFlag")



    private monitorMapFlag(newVal: boolean, oldVal: boolean) {



        this.mapFlag = newVal



    this.mapFlag = newVal;



    }







    private loadRuleData() {



        this.tableLoading = true;



        get('monitorPoint/getAllMonitorPoint',{



    get("monitorPoint/getAllMonitorPoint", {



                current: this.pagination.current,



                size: this.pagination.pageSize,



                orderType:1



      orderType: 1,



        })



        .then((res) => {



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



            this.dataSource = res.data.data.monitorPoints;



            let tempMonitor = res.data.data.monitorPoints



            this.pagination.total = res.data.data.totalNumber



          let tempMonitor = res.data.data.monitorPoints;



          this.pagination.total = res.data.data.totalNumber;



            this.pagination.current = res.data.data.current;



            let tempRegionData



          let tempRegionData;



            for (let i = 0; i < tempMonitor.length; i++) {



              tempMonitor[i].tempRegionData = tempMonitor[i].provinceCode[1] + tempMonitor[i].cityCode[1] + tempMonitor[i].areaCode[1]



              tempMonitor[i].organizationName = tempMonitor[i].organizationId[1]



              tempMonitor[i].organizationId = tempMonitor[i].organizationId[0]



            tempMonitor[i].tempRegionData =



              tempMonitor[i].provinceCode[1] +



              tempMonitor[i].cityCode[1] +



              tempMonitor[i].areaCode[1];



            tempMonitor[i].organizationName = tempMonitor[i].organizationId[1];



            tempMonitor[i].organizationId = tempMonitor[i].organizationId[0];



            }



          }







        })



        .finally(() => {



            this.tableLoading = false;



        });



    }















    private rightRender(text: string) {



        return `${text} 万`;



    }







    private statusRender(text: any, record: any, index: number) {



        return <a-badge status = {



          statusMap[text]



        }



        text = {



            status[text]



        }



        />;



    return <a-badge status={statusMap[text]} text={status[text]} />;



    }







    private updatedAtRender(text: string) {



        return <span> {



            moment(text).format('YYYY-MM-DD HH:mm:ss')



        } </span>;



    return <span> {moment(text).format("YYYY-MM-DD HH:mm:ss")} </span>;



    }







    private deleteManageRole(record: any){



        post('monitorPoint/deleteMonitorPoint',{id:record.id}



        ).then((res)=>{



    post("monitorPoint/deleteMonitorPoint", { id: record.id })



      .then((res) => {



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



            this.$message.success('删除成功')



            this.loadRuleData()



          this.$message.success("删除成功");



          this.loadRuleData();



          } else {



            this.$message.warning(res.data.message)



          this.$message.warning(res.data.message);



          }



        })



        .catch((error)=> {



            this.$message.warning(error)



        })



        this.$message.warning(error);



      });



    }







    private opRender(text: string, record: any, index: number) {



        return <div>



            <a onClick = {



                () => this.handleUpdateModalVisible(true, record)



            } > 编辑 </a>



            <a-divider type = 'vertical' />



            <a-popconfirm title="确认删除吗？" ok-text="确定" cancel-text="取消" onConfirm={()=>this.deleteManageRole(record)}>



    return (



      <div>



        <a onClick={() => this.handleUpdateModalVisible(true, record)}>



          {" "}



          编辑{" "}



        </a>



        <a-divider type="vertical" />



        <a-popconfirm



          title="确认删除吗？"



          ok-text="确定"



          cancel-text="取消"



          onConfirm={() => this.deleteManageRole(record)}



        >



                <a href="#">删除</a>



            </a-popconfirm>



            <a-divider type = 'vertical' />



        <a-divider type="vertical" />



            <a onClick={() => this.showMap(false, record)}>配置坐标</a>



            </div>;



      </div>



    );



    }



}



</script>