Vue 可拖动窗口组件代码分析 - 时间和空间查询功能实现

这段代码是一个 Vue 组件，用于实现一个可拖动的窗口，并包含时间和空间查询功能。

HTML 结构（template 部分）

组件的 HTML 结构定义了一个窗口容器，包含窗口头部和内容部分。其中 v-dragMove 指令用于实现窗口的拖动功能，DragButton 和 DragWindow 属性分别指定了拖动按钮和拖动区域。

<template>
  <div v-dragMove='{DragButton:'.window-header',DragWindow:'.window', custom:true}'>
    <div class='window'>
      <div class='window-header'></div>
      <div class='window-body'>
        <div class='queryByTime-container'>
          <div class='queryByTime-container-title'><span>空间查询</span></div>
          <div>
            <el-button type='primary' @click='drawPolygon'>绘制</el-button>
            <el-button type='primary' @click='queryByPolygon'>查询</el-button>
          </div>
        </div>
        <div class='queryByTime-container'>
          <div class='queryByTime-container-title'><span>时间查询</span></div>
          <el-date-picker
              v-model='timeToTime'
              type='datetimerange'
              range-separator='至'
              start-placeholder='开始日期'
              end-placeholder='结束日期'>
          </el-date-picker>
        </div>
        <div>
          <el-button type='primary' @click='queryByTime'>查询</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

组件逻辑（script 部分）

代码中的 script 部分定义了组件的数据、方法、计算属性和监听器。

• 数据 (data)

  • draw: 布尔值，表示是否正在绘制多边形。
  • timeToTime: 数组，存储时间范围选择器的选中时间段。

• 方法 (methods)

  • formatDate: 将日期格式化成指定格式的字符串。
  • queryByTime: 向后端发送 HTTP 请求，查询指定时间范围内的的数据，并将结果存储到 store 中。
  • queryByPolygon: 向后端发送 HTTP 请求，查询指定多边形范围内的数据，并将结果存储到 store 中。
  • drawPolygon: 设置 store 中的 isDraw 属性为 true，表示正在绘制多边形。

• 计算属性 (computed)

  • queryMethod: 获取 store 中的 queryMethod 属性。

• 监听器 (watch)

  • 监听 timeToTime 的变化，并在变化时打印出选中的时间范围。

组件样式 (style 部分)

代码中的 style 部分定义了组件的样式，包括窗口容器的大小、边框样式、背景颜色，窗口头部的高度、背景颜色等。

总结

这段代码是一个实现了可拖动窗口功能的 Vue 组件，它还包含了时间和空间查询功能，并通过数据绑定、方法调用和后端通信等技术实现数据获取和显示。