Browse Source

多站点水质修改,图表增加表内滚动,表格页数增加

xieqy 1 year ago
parent
commit
9522fb03fc

+ 1 - 1
src/utils/constant.ts

@@ -6,7 +6,7 @@ import moment from 'moment'
 
 export const gisNames = ['spectrum', 'pipelineDefect', 'OnlineImport']
 
-export const pageSizes = [10, 20, 30, 50, 100, 1000]
+export const pageSizes = [10, 20, 30, 50, 100, 1000, 5000]
 
 export const getDefaultPagination = () => ({ current: 1, size: 30 })
 

+ 127 - 84
src/views/currentSystem/authorityManagement/projectManage/index.vue

@@ -8,7 +8,7 @@
             <span>项目名称:</span>
             <el-input placeholder="请输入项目名称" size="mini" v-model="boGroup" style="width: 204px" clearable>
             </el-input>
-            <el-button style="margin-left:10px" type="primary" size="mini" @click="getlistdata()">查询</el-button>
+            <el-button style="margin-left: 10px" type="primary" size="mini" @click="getlistdata()">查询</el-button>
             <!-- <el-button type="primary" size="mini" @click="newopen()">新建项目</el-button>
             <el-button type="primary" size="mini" @click="deleteProject()">删除项目</el-button> -->
             <!-- <el-button type="primary" size="mini" @click="syncProject()">项目同步</el-button>
@@ -22,11 +22,17 @@
     </div>
     <!-- 项目详情 -->
     <div class="projectBox">
-      <el-row :gutter="20" style=" height:100%;margin:0px">
-        <el-col :span="12" style=" height:100%;">
+      <el-row :gutter="20" style="height: 100%; margin: 0px">
+        <el-col :span="12" style="height: 100%">
           <!-- 主项目 -->
           <div class="grid-content bg-purple">
-            <tf-table ref="prjTb" highlight-current-row :data="tableData" @selection-change="handleSelectionChange" @row-click="details">
+            <tf-table
+              ref="prjTb"
+              highlight-current-row
+              :data="tableData"
+              @selection-change="handleSelectionChange"
+              @row-click="details"
+            >
               <el-table-column type="selection" width="55"> </el-table-column>
               <el-table-column prop="name" label="项目名称(项目编号)" style="width: 100%">
                 <template slot-scope="scope">{{ scope.row.name }}({{ scope.row.code }})</template>
@@ -51,13 +57,32 @@
         </el-col>
         <el-col :span="12" style="height: 100%">
           <!-- 项目详情 -->
-          <div class="grid-content test-5" style="height: calc(100% - 98px);">
-            <span style="display:block;margin-bottom:10px;">资源配置:</span>
-            <el-tree style="height:calc(100% - 30px);border:1px solid #dbe4ff;overflow:auto;" v-if="data" :data="data" show-checkbox default-expand-all node-key="id" ref="tree" highlight-current :props="defaultProps" :default-checked-keys="treeSelectKeys" @node-contextmenu="setServeIndex">
+          <div class="grid-content test-5" style="height: calc(100% - 98px)">
+            <span style="display: block; margin-bottom: 10px">资源配置:</span>
+            <el-tree
+              style="height: calc(100% - 30px); border: 1px solid #dbe4ff; overflow: auto"
+              v-if="data"
+              :data="data"
+              show-checkbox
+              default-expand-all
+              node-key="id"
+              ref="tree"
+              highlight-current
+              :props="defaultProps"
+              :default-checked-keys="treeSelectKeys"
+              @node-contextmenu="setServeIndex"
+            >
             </el-tree>
           </div>
           <div class="buttons">
-            <el-checkbox v-model="isShowServeIndex" label="显示服务序号" border size="mini" :disabled="data.length==0" @change="showServeIndex()"></el-checkbox>
+            <el-checkbox
+              v-model="isShowServeIndex"
+              label="显示服务序号"
+              border
+              size="mini"
+              :disabled="data.length == 0"
+              @change="showServeIndex()"
+            ></el-checkbox>
             <el-button type="primary" @click="getCheckedKeys" size="mini">资源配置保存</el-button>
             <!-- <el-button @click="setCheckedKeys">通过 key 设置</el-button> -->
           </div>
@@ -66,14 +91,18 @@
     </div>
     <el-dialog title="新增项目" :visible.sync="dialogFormVisible">
       <el-form :model="form">
-        <el-form-item label="项目编码" :label-width="formLabelWidth" :rules="[
-     { required: true, message: '请输入项目编码', trigger: 'blur' },
-    ]">
+        <el-form-item
+          label="项目编码"
+          :label-width="formLabelWidth"
+          :rules="[{ required: true, message: '请输入项目编码', trigger: 'blur' }]"
+        >
           <el-input v-model="form.code" placeholder="请输入项目编码" autocomplete="off"></el-input>
         </el-form-item>
-        <el-form-item label="项目全称" :label-width="formLabelWidth" :rules="[
-     { required: true, message: '请输入项目全称', trigger: 'blur' },
-    ]">
+        <el-form-item
+          label="项目全称"
+          :label-width="formLabelWidth"
+          :rules="[{ required: true, message: '请输入项目全称', trigger: 'blur' }]"
+        >
           <el-input v-model="form.name" autocomplete="off" placeholder="请输入项目全称"></el-input>
         </el-form-item>
 
@@ -90,30 +119,42 @@
           <el-input v-model="form.xmzq" autocomplete="off" placeholder="请输入项目工期"></el-input>
         </el-form-item>
         <el-form-item label="项目介绍" :label-width="formLabelWidth">
-          <el-input type="textarea" v-model="form.xmjs" autocomplete="off" placeholder="请输入项目介绍" :autosize="{ minRows: 5}"></el-input>
+          <el-input
+            type="textarea"
+            v-model="form.xmjs"
+            autocomplete="off"
+            placeholder="请输入项目介绍"
+            :autosize="{ minRows: 5 }"
+          ></el-input>
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button @click="dialogFormVisible = false">取 消</el-button>
-        <el-button type="primary" @click="addProject() ">确 定</el-button>
+        <el-button type="primary" @click="addProject()">确 定</el-button>
       </div>
     </el-dialog>
     <el-dialog title="初始位置" :visible.sync="dialogFormVisible2">
       <el-form :model="form2">
-        <el-form-item label="经度" :label-width="formLabelWidth" :rules="[
-     { required: true, message: '请输入经度', trigger: 'blur' },
-    ]">
+        <el-form-item
+          label="经度"
+          :label-width="formLabelWidth"
+          :rules="[{ required: true, message: '请输入经度', trigger: 'blur' }]"
+        >
           <el-input v-model="form2.lon" placeholder="请输入经度" autocomplete="off"></el-input>
         </el-form-item>
 
-        <el-form-item label="纬度" :label-width="formLabelWidth" :rules="[
-     { required: true, message: '请输入纬度', trigger: 'blur' },
-    ]">
+        <el-form-item
+          label="纬度"
+          :label-width="formLabelWidth"
+          :rules="[{ required: true, message: '请输入纬度', trigger: 'blur' }]"
+        >
           <el-input v-model="form2.lat" autocomplete="off" placeholder="请输入项目全称"></el-input>
         </el-form-item>
-        <el-form-item label="相机高度" :label-width="formLabelWidth" :rules="[
-     { required: true, message: '请输入相机高度', trigger: 'blur' },
-    ]">
+        <el-form-item
+          label="相机高度"
+          :label-width="formLabelWidth"
+          :rules="[{ required: true, message: '请输入相机高度', trigger: 'blur' }]"
+        >
           <el-input v-model="form2.height" autocomplete="off" placeholder="请输入相机高度"></el-input>
         </el-form-item>
         <el-form-item label="空间数据库" :label-width="formLabelWidth">
@@ -128,7 +169,7 @@
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button @click="dialogFormVisible2 = false">取 消</el-button>
-        <el-button type="primary" @click="putInitial() ">确 定</el-button>
+        <el-button type="primary" @click="putInitial()">确 定</el-button>
       </div>
     </el-dialog>
     <el-dialog title="工艺配置" :visible.sync="dialogFormVisible3" width="25%">
@@ -137,17 +178,15 @@
           <el-input v-model="form3.name" placeholder="请输入项目全称" autocomplete="off"></el-input>
         </el-form-item>
         <el-form-item label="工艺分组:" :label-width="formLabelWidth">
-          <el-select v-model="processValue" placeholder="请选择" style="width:100%" @change="processChange($event)">
-            <el-option v-for="item in processOptions" :key="item.id" :label="item.value" :value="item.id">
-            </el-option>
+          <el-select v-model="processValue" placeholder="请选择" style="width: 100%" @change="processChange($event)">
+            <el-option v-for="item in processOptions" :key="item.id" :label="item.value" :value="item.id"> </el-option>
           </el-select>
         </el-form-item>
-        <el-form-item label="选择工艺:" :label-width="formLabelWidth" v-show="checkItems.length!=0">
+        <el-form-item label="选择工艺:" :label-width="formLabelWidth" v-show="checkItems.length != 0">
           <el-checkbox-group v-model="checkedConfig">
-            <el-checkbox v-for="item in checkItems" :key="item.id" :label="item.id">{{item.name}}</el-checkbox>
+            <el-checkbox v-for="item in checkItems" :key="item.id" :label="item.id">{{ item.name }}</el-checkbox>
           </el-checkbox-group>
         </el-form-item>
-
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button @click="closeProcessConfig()">取 消</el-button>
@@ -159,17 +198,20 @@
         <el-form-item label="服务名称:" :label-width="formLabelWidth">
           <el-input v-model="form4.name" placeholder="请输入项目全称" autocomplete="off" disabled></el-input>
         </el-form-item>
-        <el-form-item label="服务序号:" :label-width="formLabelWidth" :rules="[
-     { required: true, message: '请输入服务序号', trigger: 'blur' },
-    ]">
+        <el-form-item
+          label="服务序号:"
+          :label-width="formLabelWidth"
+          :rules="[{ required: true, message: '请输入服务序号', trigger: 'blur' }]"
+        >
           <el-input v-model="form4.sort" placeholder="请输入序号" autocomplete="off"></el-input>
         </el-form-item>
-        <el-form-item label="分组名称:" :label-width="formLabelWidth" :rules="[
-     { required: true, message: '请输入分组名称', trigger: 'blur' },
-    ]">
+        <el-form-item
+          label="分组名称:"
+          :label-width="formLabelWidth"
+          :rules="[{ required: true, message: '请输入分组名称', trigger: 'blur' }]"
+        >
           <el-input v-model.trim="form4.groupname" placeholder="请输入分组名称" autocomplete="off"></el-input>
         </el-form-item>
-
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button @click="dialogFormVisible4 = false">取 消</el-button>
@@ -179,9 +221,8 @@
     <el-dialog title="区域绑定" :visible.sync="dialogOrgFormVisible" width="25%">
       <el-form :model="formOrg">
         <el-form-item label="区域总部:" :label-width="formLabelWidth">
-          <el-select v-model="formOrg.orgId" placeholder="请选择" style="width:100%">
-            <el-option v-for="item in orgOptions" :key="item.id" :label="item.orgName" :value="item.id">
-            </el-option>
+          <el-select v-model="formOrg.orgId" placeholder="请选择" style="width: 100%">
+            <el-option v-for="item in orgOptions" :key="item.id" :label="item.orgName" :value="item.id"> </el-option>
           </el-select>
         </el-form-item>
       </el-form>
@@ -194,7 +235,7 @@
 </template>
 
 <script lang="ts">
-import axios from 'axios'
+import request from '@/utils/request'
 import {
   postPrjSubList_api,
   syncProject_api,
@@ -248,13 +289,13 @@ export default {
         id: '',
         lat: '',
         height: '',
-        dataUser:'',
-        wkid:'',
-        pbsModel:null
+        dataUser: '',
+        wkid: '',
+        pbsModel: null
       },
       formLabelWidth: '120px',
       dialogFormVisible3: false,
-      dialogOrgFormVisible:false,
+      dialogOrgFormVisible: false,
       form3: {
         name: ''
       },
@@ -271,10 +312,10 @@ export default {
         groupname: '',
         id: ''
       },
-      formOrg:{
-        orgId:''
+      formOrg: {
+        orgId: ''
       },
-      orgOptions:[]
+      orgOptions: []
     }
   },
 
@@ -293,13 +334,13 @@ export default {
       let { code, result } = res
       if (code === 1) {
         this.tableData = result.records
-        this.$nextTick(()=>{
-          if(this.tableData.length>0){//默认选择第一行
-            this.details(this.tableData[0]);
-            console.log(this.$refs.prjTb);
-            this.$refs.prjTb.$refs.table.setCurrentRow(this.tableData[0]);
+        this.$nextTick(() => {
+          if (this.tableData.length > 0) {
+            //默认选择第一行
+            this.details(this.tableData[0])
+            console.log(this.$refs.prjTb)
+            this.$refs.prjTb.$refs.table.setCurrentRow(this.tableData[0])
           }
-          
         })
       }
     },
@@ -410,7 +451,7 @@ export default {
     },
     //  勾选框
     handleSelectionChange(val) {
-      debugger;
+      debugger
       if (val.length != 0) {
         this.form2.id = val[0].id
         this.multipleSelection = val
@@ -427,7 +468,7 @@ export default {
           lat: 40.960521,
           height: 10000000.0
         }
-        const project=this.multipleSelection[0];
+        const project = this.multipleSelection[0]
         const position = project['geo_info']
         if (!position) {
           this.form2.lon = china.lon
@@ -444,9 +485,9 @@ export default {
             this.form2.lat = china.lat
             this.form2.height = china.height
           }
-          this.form2.dataUser=project.dataUser;
-          this.form2.wkid=project.wkid;
-          this.form2.pbsModel=project.pbsModel;
+          this.form2.dataUser = project.dataUser
+          this.form2.wkid = project.wkid
+          this.form2.pbsModel = project.pbsModel
         }
       } else {
         this.$message('请勾选一个项目!')
@@ -468,9 +509,9 @@ export default {
           lat: lat,
           height: height
         }),
-        dataUser:this.form2.dataUser,
-        wkid:this.form2.wkid,
-        pbsModel:this.form2.pbsModel
+        dataUser: this.form2.dataUser,
+        wkid: this.form2.wkid,
+        pbsModel: this.form2.pbsModel
       }
       putPrjList_api(data)
         .then((res) => {
@@ -579,7 +620,7 @@ export default {
     /**
      * 项目绑定区域
      */
-    orgprj(){
+    orgprj() {
       if (this.multipleSelection.length == 0) {
         this.$message('请选择一行数据进行区域绑定')
         return
@@ -591,7 +632,7 @@ export default {
       this.processOptions = []
       this.checkedConfig = []
       let datas = this.multipleSelection[0]
-     
+
       getOrglist_api({})
         .then((res) => {
           const results = res
@@ -602,22 +643,24 @@ export default {
           console.log(err)
         })
     },
-    setOrgPrj(){
-      const prjid=this.form2.id;
-      const orgid=this.formOrg.orgId;
-      const data={
+    setOrgPrj() {
+      const prjid = this.form2.id
+      const orgid = this.formOrg.orgId
+      const data = {
         prjId: prjid,
         orgId: orgid
       }
-      getOrgPrj_api(data).then(result=>{
-        if(result.code===1){
-          this.$message.success('区域绑定成功');
-          this.dialogOrgFormVisible=false;
-        }
-      }).catch((err) => {
-        this.$message.error('区域绑定失败');
-        console.log(err)
-      })
+      getOrgPrj_api(data)
+        .then((result) => {
+          if (result.code === 1) {
+            this.$message.success('区域绑定成功')
+            this.dialogOrgFormVisible = false
+          }
+        })
+        .catch((err) => {
+          this.$message.error('区域绑定失败')
+          console.log(err)
+        })
     },
     submitConfig() {
       let checkString = []
@@ -705,11 +748,11 @@ export default {
           sourceId: sourceId
         }
       ]
-      axios.defaults.baseURL = '/api'
-      axios({
-        headers: {
-          'Content-Type': 'application/json;charset=UTF-8'
-        },
+      // axios.defaults.baseURL = '/api'
+      request({
+        // headers: {
+        //   'Content-Type': 'application/json;charset=UTF-8'
+        // },
         method: 'post',
         url: '/tofly-base/prjsource/updateSort',
         data: JSON.stringify(data)

+ 2 - 1
src/views/spectrum/configuration/api/common.ts

@@ -141,7 +141,8 @@ export interface ITeam extends ICreator, IUpdater {
   projectName: number
   remarks: string
   siteCount: number
-  siteIds: number[]
+  siteIds: number[],
+  groupBySiteInfoDtos: any[]
 }
 
 export interface INeighbor extends ICreator, IUpdater {

+ 35 - 32
src/views/spectrum/configuration/team/TeamForm.vue

@@ -40,42 +40,45 @@
 </template>
 
 <script lang="ts">
-  import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
-  import { ElForm } from 'element-ui/types/form'
-  import { IPoint, ITeam } from '../api/common'
+import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
+import { ElForm } from 'element-ui/types/form'
+import { IPoint, ITeam } from '../api/common'
 
-  @Component({ name: 'TeamForm', components: {} })
-  export default class TeamForm extends Vue {
-    @Prop({ type: Object, default: () => ({}) }) data!: ITeam
-    @Prop({ type: Array, default: () => [] }) points!: IPoint[]
-    @Prop({ type: Boolean, default: false }) loading!: boolean
-    $refs!: { form: ElForm }
+@Component({ name: 'TeamForm', components: {} })
+export default class TeamForm extends Vue {
+  @Prop({ type: Object, default: () => ({}) }) data!: ITeam
+  @Prop({ type: Array, default: () => [] }) points!: IPoint[]
+  @Prop({ type: Boolean, default: false }) loading!: boolean
+  $refs!: { form: ElForm }
 
-    formData: Partial<ITeam> = {}
+  formData: Partial<ITeam> = {}
 
-    get listeners() {
-      const { submit, ...rest } = this.$listeners
-      return rest
-    }
+  get listeners() {
+    const { submit, ...rest } = this.$listeners
+    return rest
+  }
 
-    rules = {
-      groupByName: [
-        { required: true, message: '分组名称不能为空!', trigger: 'blur' },
-        { max: 50, message: '分组名称不超过50个字符', trigger: 'blur' }
-      ],
-      remarks: [{ required: false, message: '请输入备注', max: 255, trigger: 'blur' }]
-    }
+  rules = {
+    groupByName: [
+      { required: true, message: '分组名称不能为空!', trigger: 'blur' },
+      { max: 50, message: '分组名称不超过50个字符', trigger: 'blur' }
+    ],
+    remarks: [{ required: false, message: '请输入备注', max: 255, trigger: 'blur' }]
+  }
 
-    onSubmit() {
-      this.$refs.form.validate((valid) => {
-        if (valid) {
-          this.$emit('submit', this.formData)
-        }
-      })
-    }
-    @Watch('data', { immediate: true })
-    setDefaultData(val) {
-      this.formData = val.id ? { ...val } : {}
-    }
+  onSubmit() {
+    this.$refs.form.validate((valid) => {
+      if (valid) {
+        this.formData.groupBySiteInfoDtos = this.formData.siteIds.map((i) => {
+          return { siteId: i, sort: null }
+        })
+        this.$emit('submit', this.formData)
+      }
+    })
+  }
+  @Watch('data', { immediate: true })
+  setDefaultData(val) {
+    this.formData = val.id ? { ...val, siteIds: val.groupBySiteInfoDtos.map((i) => i.siteId) } : {}
   }
+}
 </script>

+ 60 - 60
src/views/spectrum/report/rainfall/widget.vue

@@ -25,82 +25,82 @@
 </template>
 
 <script lang="ts">
-  import { Vue, Component, Prop } from 'vue-property-decorator'
-  import QueryForm from './QueryForm.vue'
-  import ImportForm from './ImportForm.vue'
-  import { getDefaultPagination } from '@/utils/constant'
-  import { rainfallCols } from '../utils'
-  import { IPagination } from '@/api/common'
-  import { importRainfall, rainFallPage } from '../api/rainfall'
-  import { IRainfall } from '../api/common'
-  import { ElUploadInternalRawFile } from 'element-ui/types/upload'
+import { Vue, Component, Prop } from 'vue-property-decorator'
+import QueryForm from './QueryForm.vue'
+import ImportForm from './ImportForm.vue'
+import { getDefaultPagination } from '@/utils/constant'
+import { rainfallCols } from '../utils'
+import { IPagination } from '@/api/common'
+import { importRainfall, rainFallPage } from '../api/rainfall'
+import { IRainfall } from '../api/common'
+import { ElUploadInternalRawFile } from 'element-ui/types/upload'
 
-  @Component({ name: 'Rainfall', components: { QueryForm, ImportForm } })
-  export default class Rainfall extends Vue {
-    @Prop({ type: Boolean, default: false }) isActive!: boolean
-    teamCols = rainfallCols
+@Component({ name: 'Rainfall', components: { QueryForm, ImportForm } })
+export default class Rainfall extends Vue {
+  @Prop({ type: Boolean, default: false }) isActive!: boolean
+  teamCols = rainfallCols
 
-    visible = false
+  visible = false
 
-    current: Partial<IRainfall> = {}
+  current: Partial<IRainfall> = {}
 
-    selected: IRainfall[] = []
+  selected: IRainfall[] = []
 
-    rainfallHistories: IRainfall[] = []
+  rainfallHistories: IRainfall[] = []
 
-    loading = { query: false, upload: false }
+  loading = { query: false, upload: false }
 
-    pagination: IPagination = getDefaultPagination()
+  pagination: IPagination = getDefaultPagination()
 
-    query = {}
+  query = {}
 
-    onQuery(query) {
-      this.query = { ...query }
-      this.doQuery({ current: 1 })
-    }
-
-    onUpload() {
-      this.visible = true
-    }
+  onQuery(query) {
+    this.query = { ...query }
+    this.doQuery({ current: 1 })
+  }
 
-    async doQuery(query = {}) {
-      this.loading.query = true
-      try {
-        const {
-          result: { records, size, total, current }
-        } = await rainFallPage({ ...this.pagination, ...this.query, ...query })
-        this.pagination = { current, size, total }
-        this.rainfallHistories = records || []
-      } catch (error) {
-        console.log(error)
-      }
-      this.loading.query = false
-    }
+  onUpload() {
+    this.visible = true
+  }
 
-    onPageChange(pagination) {
-      this.pagination = { ...this.pagination, ...pagination }
-      this.doQuery()
+  async doQuery(query = {}) {
+    this.loading.query = true
+    try {
+      const {
+        result: { records, size, total, current }
+      } = await rainFallPage({ ...this.pagination, ...this.query, ...query })
+      this.pagination = { current, size, total }
+      this.rainfallHistories = records || []
+    } catch (error) {
+      console.log(error)
     }
+    this.loading.query = false
+  }
 
-    async onSubmit(file: ElUploadInternalRawFile) {
-      this.loading.upload = true
-      try {
-        const { result } = await importRainfall({ file })
-        this.$message[result ? 'success' : 'error'](`导入${result ? '成功!' : '失败!'}`)
-        this.visible = false
-        this.doQuery()
-      } catch (error) {
-        console.log(error)
-      }
-      this.loading.upload = false
-    }
+  onPageChange(pagination) {
+    this.pagination = { ...this.pagination, ...pagination }
+    this.doQuery()
+  }
 
-    preparing() {
+  async onSubmit(file: ElUploadInternalRawFile) {
+    this.loading.upload = true
+    try {
+      const { result } = await importRainfall({ file })
+      this.$message[result ? 'success' : 'error'](`导入${result ? '成功!' : '失败!'}`)
+      this.visible = false
       this.doQuery()
+    } catch (error) {
+      console.log(error)
     }
+    this.loading.upload = false
+  }
 
-    mounted() {
-      this.preparing()
-    }
+  preparing() {
+    this.doQuery()
+  }
+
+  mounted() {
+    this.preparing()
   }
+}
 </script>

+ 17 - 9
src/views/spectrum/statisticalAnalysis/wqMultipleSites/sitesanalysisResult/widget.vue

@@ -1,12 +1,21 @@
 <template>
   <div class="page-panel">
-    <div class="head-title">{{title}}</div>
+    <div class="head-title">{{ title }}</div>
     <div>
-      <span style="margin-left:10px;color:#606266">时间轴:</span>
-      <el-slider v-model="value1" class="time-slider" :show-tooltip="false" :step="1" :min="0" :max="sliderMax" :disabled="sliderMax==0||!checked" @change="sliderChange"></el-slider>
-      <el-checkbox v-model="checked" style="margin-left:20px">实时监测信息地图标注</el-checkbox>
+      <span style="margin-left: 10px; color: #606266">时间轴:</span>
+      <el-slider
+        v-model="value1"
+        class="time-slider"
+        :show-tooltip="false"
+        :step="1"
+        :min="0"
+        :max="sliderMax"
+        :disabled="sliderMax == 0 || !checked"
+        @change="sliderChange"
+      ></el-slider>
+      <el-checkbox v-model="checked" style="margin-left: 20px">实时监测信息地图标注</el-checkbox>
       <div class="an-type">
-        <span style="margin-left:100px;color:#606266">统计方式:</span>
+        <span style="margin-left: 100px; color: #606266">统计方式:</span>
         <el-radio-group v-model="radio" @change="radioChange">
           <el-radio label="1">每日平均</el-radio>
           <el-radio label="2">每小时平均</el-radio>
@@ -157,7 +166,7 @@ export default {
      * 加载图表
      */
     loadChart(chartData, domId) {
-      console.log('69--->>',chartData);
+      console.log('69--->>', chartData)
       let chartDom = this.$refs[domId]
       let myChart = echarts.init(chartDom)
       let colorAry = ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
@@ -166,9 +175,8 @@ export default {
           trigger: 'axis'
         },
         color: colorAry,
-        legend:{
-
-        },
+        legend: {},
+        dataZoom: [{ type: 'inside' }],
         grid: {
           top: 30,
           bottom: 30,

+ 61 - 27
src/views/spectrum/statisticalAnalysis/wqMultipleSites/widget.vue

@@ -5,58 +5,86 @@
       <el-form :model="form" size="small" label-width="auto">
         <div class="head-title">参数设置</div>
         <el-form-item label="监测站点:" label-width="90px">
-          <el-select placeholder="选择监测站点" v-model="form.targetSite" @change="targetSiteChange" style="width:100%">
-            <el-option v-for="(item,index) in siteOption" :key="index" :label="item.siteName" :value="item.id"></el-option>
+          <el-select
+            placeholder="选择监测站点"
+            v-model="form.targetSite"
+            @change="targetSiteChange"
+            style="width: 100%"
+          >
+            <el-option
+              v-for="(item, index) in siteOption"
+              :key="index"
+              :label="item.siteName"
+              :value="item.id"
+            ></el-option>
           </el-select>
         </el-form-item>
         <el-form-item label="日期范围:" label-width="90px">
-          <el-date-picker v-model="form.date" type="daterange" align="right" unlink-panels range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions" value-format="yyyy/MM/dd" format="yyyy/MM/dd" style="width:100%" clearable></el-date-picker>
+          <el-date-picker
+            v-model="form.date"
+            type="daterange"
+            align="right"
+            unlink-panels
+            range-separator="-"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            :picker-options="pickerOptions"
+            value-format="yyyy/MM/dd"
+            format="yyyy/MM/dd"
+            style="width: 100%"
+            clearable
+          ></el-date-picker>
         </el-form-item>
         <div class="head-title">监测站点设置</div>
         <el-form-item label="参数设置:" label-width="90px">
-          <el-select placeholder="选择参数" v-model="form.targetName" filterable style="width:100%">
-            <el-option v-for="(item,index) in paramsOPtion" :key="index" :label="item.targetName+' ['+item.targetCode+']'" :value="item.targetCode"></el-option>
+          <el-select placeholder="选择参数" v-model="form.targetName" filterable style="width: 100%">
+            <el-option
+              v-for="(item, index) in paramsOPtion"
+              :key="index"
+              :label="item.targetName + ' [' + item.targetCode + ']'"
+              :value="item.targetCode"
+            ></el-option>
           </el-select>
         </el-form-item>
-        <el-form-item :label="'上游站点:('+upper.length+'/'+checkedUppers.length+')'" class="block-item">
+        <el-form-item :label="'下游站点:(' + upper.length + '/' + checkedUppers.length + ')'" class="block-item">
           <div class="data-container">
-            <div v-if="upper.length==0" class="empty"></div>
+            <div v-if="upper.length == 0" class="empty"></div>
             <el-checkbox-group v-model="checkedUppers" @change="getSelectedSite()">
               <ul>
-                <li v-for="(item,index) in upper" :key="index">
+                <li v-for="(item, index) in upper" :key="index">
                   <el-checkbox :label="item.id" :key="item.id">
-                    <span :title="item.siteName">{{item.siteName}}</span>
-                    <span>距离:{{item.distance}}km</span>
+                    <span :title="item.siteName">{{ item.siteName }}</span>
+                    <span>距离:{{ item.distance }}km</span>
                   </el-checkbox>
                 </li>
               </ul>
             </el-checkbox-group>
           </div>
         </el-form-item>
-        <el-form-item :label="'下游站点:('+lower.length+'/'+checkedLowers.length+')'" class="block-item">
+        <el-form-item :label="'上游站点:(' + lower.length + '/' + checkedLowers.length + ')'" class="block-item">
           <div class="data-container">
-            <div v-if="lower.length==0" class="empty"></div>
+            <div v-if="lower.length == 0" class="empty"></div>
             <el-checkbox-group v-model="checkedLowers" @change="getSelectedSite()">
               <ul>
-                <li v-for="(item,index) in lower" :key="index">
+                <li v-for="(item, index) in lower" :key="index">
                   <el-checkbox :label="item.id" :key="item.id">
-                    <span :title="item.siteName">{{item.siteName}}</span>
-                    <span>距离:{{item.distance}}km</span>
+                    <span :title="item.siteName">{{ item.siteName }}</span>
+                    <span>距离:{{ item.distance }}km</span>
                   </el-checkbox>
                 </li>
               </ul>
             </el-checkbox-group>
           </div>
         </el-form-item>
-        <el-form-item :label="'其他站点:('+other.length+'/'+checkedOthers.length+')'" class="block-item">
-          <div class="data-container" style="height:100px">
-            <div v-if="other.length==0" class="empty"></div>
+        <el-form-item :label="'其他站点:(' + other.length + '/' + checkedOthers.length + ')'" class="block-item">
+          <div class="data-container" style="height: 100px">
+            <div v-if="other.length == 0" class="empty"></div>
             <el-checkbox-group v-model="checkedOthers" @change="getSelectedSite()">
               <ul>
-                <li v-for="(item,index) in other" :key="index">
+                <li v-for="(item, index) in other" :key="index">
                   <el-checkbox :label="item.id" :key="item.id">
-                    <span :title="item.siteName">{{item.siteName}}</span>
-                    <span>{{item.distance}}km</span>
+                    <span :title="item.siteName">{{ item.siteName }}</span>
+                    <span>{{ item.distance }}km</span>
                   </el-checkbox>
                 </li>
               </ul>
@@ -64,24 +92,30 @@
           </div>
         </el-form-item>
       </el-form>
-      <el-table :data="tableData" border style="width: 100%" :header-cell-style="{backgroundColor:'#eaf1fd',height:'39px',textAlign:'center',fontWeight:600}" max-height="300px">
+      <el-table
+        :data="tableData"
+        border
+        style="width: 100%"
+        :header-cell-style="{ backgroundColor: '#eaf1fd', height: '39px', textAlign: 'center', fontWeight: 600 }"
+        max-height="300px"
+      >
         <el-table-column label="顺序" align="center" width="50">
-          <template slot-scope="scope">{{scope.$index+1}}</template>
+          <template slot-scope="scope">{{ scope.$index + 1 }}</template>
         </el-table-column>
         <el-table-column prop="siteName" label="站点名称" align="center" show-overflow-tooltip></el-table-column>
         <!-- <el-table-column prop="drainageType" label="类型" align="center" show-overflow-tooltip></el-table-column> -->
         <el-table-column label="操作" width="70" align="center">
           <template slot-scope="scope">
-            <el-button type="text" style="padding:0" @click="moveUp(scope)"  icon='el-icon-top'></el-button>
-            <el-button type="text" style="padding:0" @click="moveDown(scope)" icon='el-icon-bottom'></el-button>
+            <el-button type="text" style="padding: 0" @click="moveUp(scope)" icon="el-icon-top"></el-button>
+            <el-button type="text" style="padding: 0" @click="moveDown(scope)" icon="el-icon-bottom"></el-button>
           </template>
         </el-table-column>
       </el-table>
     </div>
     <!-- 按钮 -->
     <div class="btn-div">
-      <el-button type="primary" style="width:80px" size="small" @click="getManySiteCurv()">分析</el-button>
-      <el-button type="primary" style="width:80px" size="small">清空</el-button>
+      <el-button type="primary" style="width: 80px" size="small" @click="getManySiteCurv()">分析</el-button>
+      <el-button type="primary" style="width: 80px" size="small">清空</el-button>
     </div>
   </div>
 </template>