对接口

MrShi

昨天 39fc2d6754953e41a7334a2166347baacfcfb40a

 admin/src/views/index.vue

@@ -109,7 +109,8 @@
                  更多<i class="el-icon-arrow-right"></i>
                </div> -->
              </div>
              <div class="echart" id="echart2"></div>
              <template  v-if="tabPosition==='right'" >  <div class="echart" id="echart2"></div></template>
              <template  v-if="tabPosition==='top'" >  <div class="echart"  id="echart21"></div></template>
            </div>
          </div>
          <div class="df">
@@ -245,6 +246,7 @@
        { name: '访客报备', path: '', url: require('@/assets/icons/home_func1.png'), path: '/business/reportRecord' },
        { name: '隐患随手拍', path: '', url: require('@/assets/icons/home_func2.png'), path: '/operation/danger/record' },
        { name: '预约会议室', path: '', url: require('@/assets/icons/home_func3.png'), path: '/meeting/bookings' },
        { name: '公务车预约', path: '', url: require('@/assets/icons/home_func5.png'), path: '/operation/serviceCar/apprRecord' },
        { name: '考勤工作台', path: '', url: require('@/assets/icons/home_func4.png') },
        { name: '食堂消费', path: '', url: require('@/assets/icons/8.png') }
      ],
@@ -269,11 +271,12 @@
    this.initData()
  },
  methods: {
    changeType(e) {
    changeType (e) {
      console.log(e)
      this.initEchart2()
      this.initEchart21()
    },
    getNoticeList(){
    getNoticeList () {
      syncHkNotice().then(res => {

      })
@@ -393,8 +396,10 @@
    },
    getWorkBody () {
      getWorkbenchData({ queryType: 2 }).then(res => {
        console.log(res)
        this.staticData = res || {}
        this.initEchart2()
        this.initEchart21()
        this.initEchart3()
        this.initEchart4()
      })
@@ -431,7 +436,7 @@
    },
    handleDetail (row) {
      if (row.type === 7) {
       this.handleTest(row);
        this.handleTest(row)
        return
      }
      if (row.objType === 2) {
@@ -510,9 +515,48 @@
    },
    initEchart2 () {
      console.log('initEchart2')
      if (!document.getElementById('echart2')) {
        return
      }
      echarts.dispose(document.getElementById('echart2'))
      const myChart = echarts.init(document.getElementById('echart2'))
      const that = this
      var ydata = that.staticData.internalList.map(i => i.num)
      let maxNum = 1
      ydata.forEach((item, index) => {
        maxNum = item > maxNum ? item : maxNum
      })
      myChart.setOption({
        dataZoom: [
          {
            type: 'slider', // 滑动条类型
            orient: 'vertical',
            left: 'left',
            showDetail: false,
            start: 0, // 起始位置（百分比）
            end: 40, // 结束位置（百分比），控制初始显示范围
            width: 4,
            dataBackground: {
              areaStyle: { opacity: 0 }, // 设置背景透明
              lineStyle: { opacity: 0 } // 设置背景透明
            }
            // moveOnMouseWheel: true,
          },
          {
            type: 'inside', // 用于监听滚轮事件
            orient: 'vertical',
            start: 0,
            end: 40,
            showDetail: false,
            minSpan: 40,
            dataBackground: {
              areaStyle: { opacity: 0 } // 设置背景透明
            },
            maxSpan: 40,
            zoomLock: true // 锁定缩放（仅允许平移）
            // moveOnMouseWheel: true, // 启用滚轮平移
          }
        ],
        grid: {
          top: '4%',
          left: '2%',
@@ -528,22 +572,142 @@
        },
        xAxis: {
          type: 'value',
          position: 'bottom',
          position: 'top',
          splitLine: {
            show: true,
            lineStyle: {
              // 这里输入线条的样式
              color: 'rgba(255,255,255,0.14)'
            }
          }
          },
          axisLabel: {
            formatter: function (value) {
              const intValue = Math.round(value)
              return intValue > 0 ? intValue : ''
            }
          },
          minInterval: 1,
          min: 1
          // max: maxNum
        },
        yAxis: {
          type: 'category',
          data: that.tabPosition === 'top' ? that.staticData.lwList.map(i => i.name) : that.staticData.internalList.map(i => i.name)
          inverse: true,
          data: that.staticData.internalList.map(i => i.name),
          axisLabel: {
            interval: 0
          }
        },
        series: [
          {
            data: that.tabPosition === 'top' ? that.staticData.lwList.map(i => i.num) : that.staticData.internalList.map(i => i.num),
            data: ydata,
            type: 'bar',
            barWidth: 10,
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(
                  1, 0, 0, 0,
                  [
                    { offset: 0, color: '#56abf8' },
                    { offset: 1, color: '#407ff0' }
                  ]
                )
                // barBorderRadius: [0, 10, 10, 0]
              }
            }
          }
        ]
      })
      window.addEventListener('resize', function () { // 执行
        myChart.resize()
      })
    },
    initEchart21 () {
      console.log('initEchart21',this.staticData.lwList)
      if (!document.getElementById('echart21')) {
        return
      }
      echarts.dispose(document.getElementById('echart21'))
      const myChart = echarts.init(document.getElementById('echart21'))
      const that = this
      var le1 = that.staticData.internalList.length
      var le2 = that.staticData.lwList.length
      const end = Math.round(40 * ((le1>0&& le2>0?le1:1) / (le1>0&& le2>0?le2:1)))+10
      myChart.setOption({
        dataZoom: [
          {
            type: 'slider', // 滑动条类型
            orient: 'vertical',
            left: 'left',
            showDetail: false,
            start: 0, // 起始位置（百分比）
            end: end, // 结束位置（百分比），控制初始显示范围
            width: 4,
            dataBackground: {
              areaStyle: { opacity: 0 }, // 设置背景透明
              lineStyle: { opacity: 0 } // 设置背景透明
            },
            zoomLock: true, // 锁定缩放（仅允许平移）
            moveOnMouseWheel: true
          },
          {
            type: 'inside', // 用于监听滚轮事件
            orient: 'vertical',
            start: 0,
            end: end,
            showDetail: false,
            minSpan: end,
            dataBackground: {
              areaStyle: { opacity: 0 } // 设置背景透明
            },
            maxSpan: end,
            zoomLock: true, // 锁定缩放（仅允许平移）
            moveOnMouseWheel: true // 启用滚轮平移
          }
        ],
        grid: {
          top: '4%',
          left: '2%',
          right: '6%',
          bottom: '2%',
          containLabel: true
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'line'
          }
        },
        xAxis: {
          type: 'value',
          position: 'top',
          splitLine: {
            show: true,
            lineStyle: {
              // 这里输入线条的样式
              color: 'rgba(255,255,255,0.14)'
            }
          },
          axisLabel: {
            formatter: function (value) {
              const intValue = Math.round(value)
              return intValue > 0 ? intValue : ''
            }
          },
          minInterval: 1,
          min: 1
        },
        yAxis: {
          type: 'category',
          inverse: true,
          data:  that.staticData.lwList.map(i => i.name),
          axisLabel: {
            interval: 0
          }
        },
        series: [
          {
            data: that.staticData.lwList.map(i => i.num),
            type: 'bar',
            barWidth: 10,
            itemStyle: {
@@ -598,6 +762,14 @@
          nameTextStyle: {
            padding: [0, 0, 4, -30] // 四个数字分别为上右下左与原位置距离
          },
          axisLabel: {
            formatter: function (value) {
              const intValue = Math.round(value)
              return intValue > 0 ? intValue : ''
            }
          },
          minInterval: 1,
          min: 1,
          splitLine: {
            show: true,
            lineStyle: {
@@ -704,7 +876,15 @@
              // 这里输入线条的样式
              color: 'rgba(255,255,255,0.14)'
            }
          }
          },
          axisLabel: {
            formatter: function (value) {
              const intValue = Math.round(value)
              return intValue > 0 ? intValue : ''
            }
          },
          minInterval: 1,
          min: 1
        },
        grid: {
          top: '16%',