HalfPanel and chore

src/layout/components/HalfPanels.vue

@@ -1,9 +1,15 @@
 <template>
   <!-- 全屏 -->
   <div v-if="panelVisible" ref="halfpanel" class="halfpanels">
-    <span class="close" @click="handelClose">
-      <i class="el-icon-close" />
-    </span>
+    <el-button
+      class="full"
+      type="text"
+      size="large"
+      :icon="`el-icon-${footerHeight === '100%' ? 'download' : 'upload2'}`"
+      @click="handelFull"
+    />
+    <el-button class="close" type="text" size="large" icon="el-icon-close" @click="handelClose" />
+
     <el-tabs
       class="custom-half-panels-tabs"
       :value="editableTabsValue"
@@ -27,182 +33,197 @@
   </div>
 </template>
 
-<script lang='ts'>
-import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
-import Comps from './loadComps'
-import $ from 'jquery'
-@Component({
-  name: 'HalfPanels'
-})
-export default class HalfPanels extends Vue {
-  @Prop({ default: [] }) panels: any[]
-  @Prop({ default: null }) data: any
-  @Prop() panelVisible: boolean
-  @Prop() fullpanelVisible: boolean
-  @Prop() footerHeight: string
-  @Prop() defaultHeight: string
+<script lang="ts">
+  import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
+  import Comps from './loadComps'
+  import $ from 'jquery'
+  @Component({
+    name: 'HalfPanels'
+  })
+  export default class HalfPanels extends Vue {
+    @Prop({ default: [] }) panels: any[]
+    @Prop({ default: null }) data: any
+    @Prop() panelVisible: boolean
+    @Prop() fullpanelVisible: boolean
+    @Prop() footerHeight: string
+    @Prop() defaultHeight: string
 
-  Comps = Comps
-  nowHeight = null
+    Comps = Comps
+    nowHeight = null
 
-  get editableTabsValue() {
-    return this.$store.state.map.halfP_editableTabsValue
-  }
-  @Watch('panels', { immediate: true })
-  panelsChange() {
-    if (this.panels.length > 0) {
-      this.$emit('update:panelVisible', true)
-      this.$emit('update:footerHeight', this.defaultHeight || '400px')
-    } else {
-      if (!this.panelVisible) return
-      this.$emit('update:panelVisible', false)
-      if (this.fullpanelVisible == false) {
-        this.$emit('update:footerHeight', '0%')
+    get editableTabsValue() {
+      return this.$store.state.map.halfP_editableTabsValue
+    }
+    @Watch('panels', { immediate: true })
+    panelsChange() {
+      if (this.panels.length > 0) {
+        this.$emit('update:panelVisible', true)
+        this.$emit('update:footerHeight', this.defaultHeight || '400px')
+      } else {
+        if (!this.panelVisible) return
+        this.$emit('update:panelVisible', false)
+        if (this.fullpanelVisible == false) {
+          this.$emit('update:footerHeight', '0%')
+        }
       }
     }
-  }
-  @Watch('panelVisible')
-  panelVisibleChange() {
-    if (this.panelVisible == true) {
-      this.$store.dispatch('map/delAllFull')
+    @Watch('panelVisible')
+    panelVisibleChange() {
+      if (this.panelVisible == true) {
+        this.$store.dispatch('map/delAllFull')
+      }
     }
-  }
-  updated() {
-    this.$nextTick(() => {
-      this.initEvent()
-    })
-  }
-  /**
-   * 初始化事件函数
-   */
-  initEvent() {
-    var domObj = $(this.$el)
-    var that = this
-    domObj
-      .find('.dragline')
-      .off('mousedown')
-      .on('mousedown', function (e) {
-        var oldy = e.screenY
-        $(document)
-          .off('mousemove')
-          .on('mousemove', function (e) {
-            var newy = e.screenY
-            var nowheight = domObj.height()
-            var newheight = nowheight + (oldy - newy)
-            that.$emit('update:footerHeight', newheight + 'px')
-            that.nowHeight = newheight + 'px'
-            oldy = newy
-          })
+    updated() {
+      this.$nextTick(() => {
+        this.initEvent()
       })
+    }
+    /**
+     * 初始化事件函数
+     */
+    initEvent() {
+      var domObj = $(this.$el)
+      var that = this
+      domObj
+        .find('.dragline')
+        .off('mousedown')
+        .on('mousedown', function (e) {
+          var oldy = e.screenY
+          $(document)
+            .off('mousemove')
+            .on('mousemove', function (e) {
+              var newy = e.screenY
+              var nowheight = domObj.height()
+              var newheight = nowheight + (oldy - newy)
+              that.$emit('update:footerHeight', newheight + 'px')
+              that.nowHeight = newheight + 'px'
+              oldy = newy
+            })
+        })
 
-    $(document)
-      .off('mouseup')
-      .on('mouseup', function () {
-        $(document).off('mousemove')
-        that.$emit('update:defaultHeight', that.nowHeight)
-      })
-  }
-  handelClose() {
-    // this.$store.dispatch('map/handelClose', data)
-    this.$store.dispatch('map/delAllHalf')
-    this.$emit('handelClose')
-  }
-  removeTab(targetName) {
-    // console.log('333', targetName)
-    this.$store.dispatch('map/delHalfPanels', targetName)
-  }
-  clickTab(targetName) {
-    this.data.activeModel = targetName.name
-    const sendData = {
-      widgetid: 'HalfPanel',
-      id: this.data.activeModel
+      $(document)
+        .off('mouseup')
+        .on('mouseup', function () {
+          $(document).off('mousemove')
+          that.$emit('update:defaultHeight', that.nowHeight)
+        })
+    }
+    handelClose() {
+      // this.$store.dispatch('map/handelClose', data)
+      this.$store.dispatch('map/delAllHalf')
+      this.$emit('handelClose')
+    }
+
+    handelFull() {
+      this.$emit(
+        'update:footerHeight',
+        this.footerHeight === '100%' ? this.nowHeight || this.defaultHeight || '400px' : '100%'
+      )
+    }
+
+    removeTab(targetName) {
+      // console.log('333', targetName)
+      this.$store.dispatch('map/delHalfPanels', targetName)
+    }
+    clickTab(targetName) {
+      this.data.activeModel = targetName.name
+      const sendData = {
+        widgetid: 'HalfPanel',
+        id: this.data.activeModel
+      }
+      this.$store.dispatch('map/changeMethod', sendData)
     }
-    this.$store.dispatch('map/changeMethod', sendData)
   }
-}
 </script>
 
-<style lang='scss' scoped>
-.el-tabs {
-  height: 100%;
-}
+<style lang="scss" scoped>
+  .el-tabs {
+    height: 100%;
+  }
 
-.el-tabs >>> .el-tabs__header {
-  background: #eff0f5;
-  color: black;
-  margin-bottom: 0px;
-  border-top: 1px solid rgb(218, 218, 218);
-  .el-tabs__nav-wrap {
-    width: calc(100% - 25px);
-    .el-tabs__nav-prev {
-      color: white;
-    }
-    .el-tabs__nav-next {
-      color: white;
+  .el-tabs >>> .el-tabs__header {
+    background: #eff0f5;
+    color: black;
+    margin-bottom: 0px;
+    border-top: 1px solid rgb(218, 218, 218);
+    .el-tabs__nav-wrap {
+      width: calc(100% - 25px);
+      .el-tabs__nav-prev {
+        color: white;
+      }
+      .el-tabs__nav-next {
+        color: white;
+      }
     }
   }
-}
 
-.el-tabs >>> .el-tabs__item.is-active {
-  // color: #fff;
-  background: #fff;
-}
-.el-tabs >>> .el-tabs__item:hover {
-  color: black;
-}
-.el-tabs >>> .el-tabs__content {
-  height: calc(100% - 42px);
-  padding: 0 4px 0px 4px;
-}
-.el-tabs >>> .el-tab-pane {
-  height: 100%;
-  width: 100%;
-}
-
-.halfpanels {
-  z-index: 99;
-  position: relative;
-  top: 0;
-  height: 100%;
-  width: 100%;
-  user-select: none;
-  .close {
-    position: absolute;
-    top: 10px;
-    right: 11px;
-    color: rgb(115, 131, 158);
-    z-index: 10;
-    cursor: pointer;
+  .el-tabs >>> .el-tabs__item.is-active {
+    // color: #fff;
+    background: #fff;
+  }
+  .el-tabs >>> .el-tabs__item:hover {
+    color: black;
+  }
+  .el-tabs >>> .el-tabs__content {
+    height: calc(100% - 42px);
+    padding: 0 4px 0px 4px;
   }
-  .halfitems {
-    background-color: white;
+  .el-tabs >>> .el-tab-pane {
     height: 100%;
     width: 100%;
   }
-  .dragline {
-    position: absolute;
+
+  .halfpanels {
+    z-index: 99;
+    position: relative;
+    top: 0;
+    height: 100%;
     width: 100%;
-    height: 3px;
-    top: 0px;
-  }
-  .dragline:hover {
-    cursor: s-resize;
-  }
-  .custom-half-panels-tabs {
-    /deep/ .el-tabs__nav {
-      height: 43px;
-      .el-tabs__item {
-        height: 32px;
-        line-height: 32px;
-        margin: 11px 0 0 5px;
-        padding: 0 8px;
-        background: #e3e6f2;
-        cursor: pointer;
-        &.is-active {
-          background: #ffffff;
+    user-select: none;
+    .close,
+    .full {
+      position: absolute;
+      top: 8px;
+      right: 10px;
+      color: rgb(115, 131, 158);
+      z-index: 10;
+      cursor: pointer;
+      font-size: 16px;
+    }
+
+    .full {
+      right: 35px;
+    }
+
+    .halfitems {
+      background-color: white;
+      height: 100%;
+      width: 100%;
+    }
+    .dragline {
+      position: absolute;
+      width: 100%;
+      height: 3px;
+      top: 0px;
+    }
+    .dragline:hover {
+      cursor: s-resize;
+    }
+    .custom-half-panels-tabs {
+      /deep/ .el-tabs__nav {
+        height: 43px;
+        .el-tabs__item {
+          height: 32px;
+          line-height: 32px;
+          margin: 11px 0 0 5px;
+          padding: 0 8px;
+          background: #e3e6f2;
+          cursor: pointer;
+          &.is-active {
+            background: #ffffff;
+          }
         }
       }
     }
   }
-}
 </style>

src/utils/request.ts

@@ -53,8 +53,8 @@ declare module 'axios' {
 // export const IP = 'https://tgdcepc.ctg.com.cn:8443/yclw-api' // 开发2
 
 // export const IP = 'http://192.168.2.238:3081' // 开发2
-// export const IP = 'http://221.182.8.141:3081' // 开发2
-export const IP = 'https://tgdcepc.ctg.com.cn:8443/yclw-api' // 正式
+export const IP = 'http://221.182.8.141:3081' // 开发2
+// export const IP = 'https://tgdcepc.ctg.com.cn:8443/yclw-api' // 正式
 
 // 暴露IP地址
 export const baseAddress = IP

src/views/spectrum/reform/statistics/ChartItem.vue

@@ -20,6 +20,7 @@
     @Prop({ type: String }) itemKey!: keyof IStatisticsData['siteAndIndicateVo']
     @Prop({ type: Array, default: () => [] }) data!: IStatisticsData[]
     @Prop({ type: Array, default: () => [] }) standards!: IPointTarget['showVos']
+    @Prop({ type: Array, default: () => [] }) valueTypes!: string[]
     // @Watch('data', { immediate: true })
     // log(val) {
     //   this.count++
@@ -43,16 +44,18 @@
             { name: 'maxValue', displayName: '最大值' },
             { name: 'avgValue', displayName: '平均值' },
             { name: 'minValue', displayName: '最小值' }
-          ].map((item, typeIndex) => {
-            return {
-              name: `${this.getCodeName(checkCode)}-${item.displayName}`,
-              type: 'line',
-              symbol: { '0': 'emptyCircle', '1': 'rect', '2': 'triangle' }[String(typeIndex)],
-              smooth: true,
-              dimensions: ['xposition', item],
-              datasetIndex: index
-            }
-          })
+          ]
+            .filter((item) => this.valueTypes.includes(item.displayName))
+            .map((item, typeIndex) => {
+              return {
+                name: `${this.getCodeName(checkCode)}-${item.displayName}`,
+                type: 'line',
+                symbol: { '0': 'emptyCircle', '1': 'rect', '2': 'triangle' }[String(typeIndex)],
+                smooth: true,
+                dimensions: ['xposition', item],
+                datasetIndex: index
+              }
+            })
         })
         .flat()
       return {

src/views/spectrum/reform/statistics/DayAndHourChart.vue

@@ -29,6 +29,7 @@
     @Prop({ type: Object, default: () => ({}) }) data!: IStatisticsDayNHour
     @Prop({ type: Array, default: () => [] }) standards!: IPointTarget['showVos']
     @Prop({ type: String, default: 'rfallTotal' }) rainfallKey!: keyof IStatisticsDayNHour['rainFallVos'][0]
+    @Prop({ type: Array, default: () => [] }) valueTypes!: string[]
     emptyImg = emptyImg
 
     getCodeName(code) {
@@ -80,17 +81,19 @@
                 { name: 'maxValue', displayName: '最大值' },
                 { name: 'avgValue', displayName: '平均值' },
                 { name: 'minValue', displayName: '最小值' }
-              ].map((item, typeIndex) => {
-                return {
-                  name: `${this.getCodeName(id)}-${item.displayName}`,
-                  dimensions: ['xposition', item],
-                  datasetIndex: index,
-                  type: 'line',
-                  symbol: { '0': 'emptyCircle', '1': 'rect', '2': 'triangle' }[String(typeIndex)],
-                  smooth: true,
-                  yAxisIndex: 0
-                }
-              })
+              ]
+                .filter((item) => this.valueTypes.includes(item.displayName))
+                .map((item, typeIndex) => {
+                  return {
+                    name: `${this.getCodeName(id)}-${item.displayName}`,
+                    dimensions: ['xposition', item],
+                    datasetIndex: index,
+                    type: 'line',
+                    symbol: { '0': 'emptyCircle', '1': 'rect', '2': 'triangle' }[String(typeIndex)],
+                    smooth: true,
+                    yAxisIndex: 0
+                  }
+                })
         })
         .flat()
 

src/views/spectrum/reform/statistics/QueryForm.vue

@@ -18,7 +18,11 @@
     </el-form-item>
 
     <el-form-item>
+      <el-checkbox-group v-model="syncedValueTypes">
+        <el-checkbox :label="key" :key="key" v-for="key of checkList" />
+      </el-checkbox-group>
       <el-button
+        style="margin-left: 2em"
         type="primary"
         size="small"
         :loading="loading.query"
@@ -43,7 +47,7 @@
 </template>
 
 <script lang="ts">
-  import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
+  import { Vue, Component, Prop, Watch, PropSync } from 'vue-property-decorator'
   import { IPoint, IPointTarget } from '../../configuration/api/common'
   import { getTargets } from '../../configuration/api/point'
 
@@ -55,7 +59,12 @@
   @Component({ name: 'QueryForm' })
   export default class QueryForm extends Vue {
     @Prop({ type: Object, default: () => ({}) }) loading!: ILoading
-    formData: { siteId: number; checkCode: string[] } = { siteId: undefined, checkCode: [] }
+    @PropSync('valueTypes', { type: Array }) syncedValueTypes!: string[]
+    formData: { siteId: number; checkCode: string[]; valueTypes: string[] } = {
+      siteId: undefined,
+      checkCode: [],
+      valueTypes: []
+    }
     @Prop({ type: Array, default: () => [] }) points!: IPoint[]
     @Prop({ type: Boolean, default: false }) fetchingPoint!: ILoading
     standards: IPointTarget['showVos'] = []
@@ -65,6 +74,8 @@
       this.$emit('standard-change', this.standards)
     }
 
+    checkList = ['最小值', '平均值', '最大值']
+
     async onPintChange(id) {
       const point = this.points.find((item) => item.id === id)
       const { sectionId } = point || {}

src/views/spectrum/reform/statistics/widget.vue

@@ -8,6 +8,7 @@
         @point-change="onPointChange"
         @standard-change="standards = $event"
         :fetching-point="dataLoading.base"
+        :value-types.sync="valueTypes"
       />
     </template>
     <div class="content">
@@ -31,6 +32,7 @@
                 item-key="yearData"
                 v-loading="dataLoading.base"
                 :standards="standards"
+                :value-types="valueTypes"
               >
                 <tf-title slot="title">按年度统计</tf-title>
               </ChartItem>
@@ -42,6 +44,7 @@
                 item-key="quarterData"
                 v-loading="dataLoading.base"
                 :standards="standards"
+                :value-types="valueTypes"
               >
                 <tf-title slot="title">按季度统计</tf-title>
               </ChartItem>
@@ -56,6 +59,7 @@
         item-key="monthData"
         v-loading="dataLoading.base"
         :standards="standards"
+        :value-types="valueTypes"
       >
         <tf-title slot="title">按月统计</tf-title>
       </ChartItem>
@@ -66,6 +70,7 @@
         v-loading="dataLoading.day"
         :standards="standards"
         rainfallKey="rfallTotal"
+        :value-types="valueTypes"
       >
         <tf-title slot="title">
           <el-row type="flex" align="middle">
@@ -98,6 +103,7 @@
         v-loading="dataLoading.hour"
         :standards="standards"
         rainfallKey="maxFall"
+        :value-types="valueTypes"
       >
         <tf-title slot="title">
           <el-row type="flex" align="middle">
@@ -154,7 +160,7 @@
     standards: IPointTarget['showVos'] = []
 
     visible = false
-
+    valueTypes: string[] = ['最小值', '平均值', '最大值']
     loading = { query: false, export: false }
     dataLoading = { base: false, data: false, day: false, hour: false }
 

src/views/spectrum/report/utils.ts

@@ -1,6 +1,7 @@
 import { ColItem } from '@/api/common'
 import { elTableAlignLeft } from '@/utils/constant'
 import { IRainfall } from './api/common'
+import moment from 'moment'
 
 export const rainfallCols: ColItem[] = [
   { type: 'selection', width: '50px' },
@@ -12,8 +13,13 @@ export const rainfallCols: ColItem[] = [
     minWidth: '170px',
     ...elTableAlignLeft(),
     formatter: ({ day, hour }: IRainfall) =>
-      `${String(day || '').replace(' 00:00:00', '')}  ${String(hour || '')}${hour ? ':00' : '-'}`
+      day
+        ? moment(day)
+            .startOf('day')
+            .add(Number(hour || 0), 'hours')
+            .format('YYYY-MM-DD HH:mm')
+        : ''
   },
   // { prop: 'hour', label: '小时', width: '120px' },
-  { prop: 'rfall', label: '降雨量(mm)', minWidth: '120px',sortable:true }
+  { prop: 'rfall', label: '降雨量(mm)', minWidth: '120px', sortable: true }
 ]