websocket

xiangpei

2024-04-23 c19a9466b3221f9a8eb28e84a09b1406949497dd

websocket

 .env.development

@@ -1,5 +1,5 @@
# 页面标题
VUE_APP_TITLE = 自贡公安天网运维平台
VUE_APP_TITLE = 运维考核平台

# 开发环境配置
ENV = 'development'
@@ -9,3 +9,6 @@

# 路由懒加载
VUE_CLI_BABEL_TRANSPILE_MODULES = true

# websocket地址
VUE_APP_WEB_SOCKET_URL = 'ws://127.0.0.1:8044/ws'

 .env.production

@@ -1,8 +1,11 @@
# 页面标题
VUE_APP_TITLE = 自贡公安天网运维平台
VUE_APP_TITLE = 运维考核平台

# 生产环境配置
ENV = 'production'

# 若依管理系统/生产环境
VUE_APP_BASE_API = '/prod-api'

# websocket地址
VUE_APP_WEB_SOCKET_URL = 'ws://127.0.0.1:8044/ws'

 src/api/platform/calculate-record.js

@@ -1,44 +1,61 @@
import request from '@/utils/request'
import axios from '@/utils/request';

// 查询核算记录列表
export function listRecord(query) {
  return request({
    url: '/calculate/record/list',
    method: 'get',
    params: query
// 获取核算记录分页
export const getCalculateRecords = (params) => {
  return axios({
    url: "/calculate-record/page",
    method: "GET",
    params: params
  })
}

// 查询核算记录详细
export function getRecord(id) {
  return request({
    url: '/calculate/record/' + id,
    method: 'get'
// 获取核算记录列表
export const getCalculateRecordList = () => {
  return axios({
    url: "/calculate-record/list",
    method: "GET"
  })
}

// 新增核算记录
export function addRecord(data) {
  return request({
    url: '/calculate/record',
    method: 'post',
    data: data
// 通过id获取核算记录
export const getCalculateRecordById = (params) => {
  return axios({
    url: "/calculate-record/" + params,
    method: "GET"
  })
}

// 通过id删除核算记录
export const deleteCalculateRecordById = (params) => {
  return axios({
    url: "/calculate-record/" + params,
    method: "DELETE"
  })
}

// 批量删除核算记录
export const deleteCalculateRecordByIds = (params) => {
  return axios({
    url: "/calculate-record/batch",
    method: "DELETE",
    data: params
  })
}

// 修改核算记录
export function updateRecord(data) {
  return request({
    url: '/calculate/record',
    method: 'put',
    data: data
export const editCalculateRecord = (params) => {
  return axios({
    url: "/calculate-record/",
    method: "PUT",
    data: params
  })
}

// 删除核算记录
export function delRecord(id) {
  return request({
    url: '/calculate/record/' + id,
    method: 'delete'
// 添加核算记录
export const addCalculateRecord = (params) => {
  return axios({
    url: "/calculate-record/",
    method: "POST",
    data: params
  })
}

 src/api/platform/calculate-report.js

New file
@@ -0,0 +1,61 @@
import axios from '@/utils/request';

// 获取核算报告分页
export const getCalculateReports = (params) => {
    return axios({
        url: "/calculate-report/page",
        method: "GET",
        params: params
    })
}

// 获取核算报告列表
export const getCalculateReportList = () => {
    return axios({
        url: "/calculate-report/list",
        method: "GET"
    })
}

// 通过id获取核算报告
export const getCalculateReportById = (params) => {
    return axios({
        url: "/calculate-report/" + params,
        method: "GET"
    })
}

// 通过id删除核算报告
export const deleteCalculateReportById = (params) => {
    return axios({
        url: "/calculate-report/" + params,
        method: "DELETE"
    })
}

// 批量删除核算报告
export const deleteCalculateReportByIds = (params) => {
    return axios({
        url: "/calculate-report/batch",
        method: "DELETE",
        data: params
    })
}

// 修改核算报告
export const editCalculateReport = (params) => {
    return axios({
        url: "/calculate-report/",
        method: "PUT",
        data: params
    })
}

// 添加核算报告
export const addCalculateReport = (params) => {
    return axios({
        url: "/calculate-report/",
        method: "POST",
        data: params
    })
}

 src/main.js

@@ -76,6 +76,9 @@
Vue.use(dataV)
DictData.install()

// websocket
Vue.prototype.$websocket = null;

/**
 * If you don't want to use mock-server
 * you want to use MockJs for mock api

 src/views/index.vue

@@ -8,6 +8,7 @@
<script>
import DataView from './home/data-view/index.vue';
import DataWrapper from './home/data-wrapper/index.vue';
import { getToken } from '@/utils/auth'

export default {
  name: "Index",
@@ -20,6 +21,59 @@

    };
  },
  methods: {
    senMsg(msg) {
      // 发送文本消息
      this.$websocket.send(msg);
    },
    // 发送心跳消息
    sendHeartbeat() {
      if (this.$websocket.readyState === WebSocket.OPEN) {
        // 发送心跳消息，可以是任意格式的字符串，用于表示心跳
        this.senMsg('ping');
      }
    },
    // 开始心跳定时器
    startHeartbeat() {
      this.heartbeatInterval = setInterval(() => {
        this.sendHeartbeat();
      }, 10000); // 每 10 秒发送一次心跳
    },
    // 停止心跳定时器
    stopHeartbeat() {
      clearInterval(this.heartbeatInterval);
    },
    initWebsocket() {
      this.$websocket = new WebSocket(process.env.VUE_APP_WEB_SOCKET_URL)
      // 监听 WebSocket 连接成功事件
      this.$websocket.onopen = event => {
        console.log('WebSocket 连接成功', event);
        let msg = {
          "token": getToken()
        }
        // 发送身份认证
        this.senMsg(JSON.stringify(msg))
        // 设置心跳定时器，定期发送心跳消息
        this.startHeartbeat();
      };

      // 监听 WebSocket 接收消息事件
      this.$websocket.onmessage = event => {
        const message = event.data;
        console.log('接收到消息:', message);
      };

      // 监听 WebSocket 连接关闭事件
      this.$websocket.onclose = event => {
        console.log('WebSocket 连接关闭', event);
        // 清除心跳定时器
        this.stopHeartbeat();
      };
    },
  },
  mounted() {
    this.initWebsocket();
  }
};
</script>


 src/views/index_v1.vue

File was deleted

 src/views/login copy.vue

File was deleted

 src/views/system/calculate/record/index.vue

@@ -159,7 +159,7 @@
</template>

<script>
import { listRecord, getRecord, delRecord, addRecord, updateRecord } from "@/api/platform/calculate-record";
import { getCalculateRecords, getCalculateRecordById,deleteCalculateRecordByIds, addCalculateRecord, editCalculateRecord } from "@/api/platform/calculate-record";
import {unitSelect} from "@/api/platform/unit";
export default {
  name: "Record",
@@ -218,7 +218,7 @@
    /** 查询核算记录列表 */
    getList() {
      this.loading = true;
      listRecord(this.queryParams).then(response => {
      getCalculateRecords(this.queryParams).then(response => {
        this.recordList = response.rows;
        this.total = response.total;
        this.loading = false;
@@ -268,7 +268,7 @@
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      getRecord(id).then(response => {
      getCalculateRecordById(id).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改核算记录";
@@ -279,13 +279,13 @@
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateRecord(this.form).then(response => {
            editCalculateRecord(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addRecord(this.form).then(response => {
            addCalculateRecord(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
@@ -298,7 +298,7 @@
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除核算记录编号为"' + ids + '"的数据项？').then(function() {
        return delRecord(ids);
        return deleteCalculateRecordByIds(ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");

 src/views/system/calculate/report/index.vue

@@ -171,7 +171,7 @@
</template>

<script>
import { listCheckResult, getCheckResult, delCheckResult, addCheckResult, updateCheckResult,manualScore, publishCheckResult } from "@/api/platform/check-result";
import { getCalculateReports, getCalculateReportById, deleteCalculateReportByIds, addCalculateReport, editCalculateReport } from "@/api/platform/calculate-report";

export default {
  name: "CheckResult",
@@ -262,7 +262,7 @@
        this.queryParams["start"] = this.daterangeCheckTime[0];
        this.queryParams["end"] = this.daterangeCheckTime[1];
      }
      listCheckResult(this.queryParams).then(response => {
      getCalculateReports(this.queryParams).then(response => {
        this.checkResultList = response.rows;
        this.total = response.total;
        this.loading = false;
@@ -299,11 +299,11 @@
        this.$modal.msgWarning("请填写分数");
        return
      }
      manualScore(this.manualScoreForm).then(res => {
        this.$modal.msgSuccess("操作成功");
        this.cancelManualScore();
        this.getList();
      })
      // manualScore(this.manualScoreForm).then(res => {
      //   this.$modal.msgSuccess("操作成功");
      //   this.cancelManualScore();
      //   this.getList();
      // })
    },
    handleDetail(row) {
      console.log("row", row)
@@ -317,7 +317,7 @@
      let text = row.publish == 1 ? '取消发布' : '发布';
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认' + text + '考核结果编号为"' + ids + '"的数据项？').then(function() {
        return publishCheckResult(ids);
        // return publishCheckResult(ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess(text + "成功");
@@ -351,7 +351,7 @@
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      getCheckResult(id).then(response => {
      getCalculateReportById(id).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改考核结果";
@@ -363,13 +363,13 @@
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateCheckResult(this.form).then(response => {
            editCalculateReport(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addCheckResult(this.form).then(response => {
            addCalculateReport(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
@@ -382,7 +382,7 @@
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除考核结果编号为"' + ids + '"的数据项？').then(function() {
        return delCheckResult(ids);
        return deleteCalculateReportByIds(ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");