feat(*):流程图开发

e9634973 · liqiuyu · 1b212de5 · e9634973 · e9634973 · e9634973
Commit e9634973 authored Jul 07, 2025 by liqiuyu
32 changed files
--- a/.env.development
+++ b/.env.development
+# .env.development  开发环境配置文件
+ 
+# 开发环境
+VITE_ENV = development
+ 
+ 
+ 
+# 开发环境下，后端接口的基础URL
+
+# base api
+VITE_APP_BASE_API5 = '/pc'
+VITE_APP_BASE_MONITOR = '/monitor'
--- a/.env.production
+++ b/.env.production
+# .env.development  开发环境配置文件
+ 
+# 开发环境
+VITE_ENV = production
+ 
+ 
+ 
+# 开发环境下，后端接口的基础URL
+
+# base api
+VITE_APP_BASE_API5 = '/pc'
+VITE_APP_BASE_MONITOR = '/monitor'
--- a/.gitignore
+++ b/.gitignore
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist.*
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/index.html
+++ b/index.html
+<!doctype html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8" />
+    <script type="text/javascript" src="./static/js/jQuery.js"></script>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>涟钢炼钢除尘生产管网图</title>
+</head>
+
+<body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+
+</body>
+<style>
+
+</style>
+<script>
+
+</script>
+
+</html>
\ No newline at end of file
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
+{
+  "name": "steelmakingscreen",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "axios": "^1.7.2",
+    "crypto-js": "^4.2.0",
+    "dayjs": "^1.11.13",
+    "echarts": "^5.6.0",
+    "gsap": "^3.13.0",
+    "mitt": "^3.0.1",
+    "sass": "^1.77.8",
+    "vue": "^3.3.4",
+    "vue-router": "^4.4.0",
+    "vuex": "^4.1.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^4.2.3",
+    "vite": "^4.4.5"
+  }
+}
--- a/public/static/js/jQuery.js
+++ b/public/static/js/jQuery.js
--- a/src/App.vue
+++ b/src/App.vue
+<template>
+ <div class="container" id="componentsContainer" ref="componentsContainer">
+   <scaleBox>
+     <template #zoom>
+         <router-view></router-view>
+     </template>
+   </scaleBox>
+ </div>
+</template>
+
+<script setup>
+import scaleBox from "./components/scaleBox/index.vue";
+</script>
+
+<style lang="scss" scoped>
+.container {
+  width: 100vw;
+  height: 100vh;
+  background: #000;
+  pointer-events: auto;
+  position: relative;
+  .pageView {
+    overflow: hidden;
+    position: relative;
+    width: 100%;
+    height: calc(100% - 80px);
+    background-size: cover;
+    pointer-events: all;
+  }
+}
+</style>
\ No newline at end of file
--- a/src/api/axios.js
+++ b/src/api/axios.js
+import service from "./request";
+
+export function getData(url, params) {
+  return service({
+    url,
+    params,
+    method: "get",
+  });
+}
+
+export function getDataWithPrefix(url, params) {
+  return service({
+    url,
+    params,
+    method: "get",
+    hasPCPrefix: true,
+  });
+}
+
+export function exportFile(url, params) {
+  return service({
+    url,
+    params,
+    hasPCPrefix: true,
+    responseType: "blob",
+  });
+}
+
+export function postDataWithPrefix(url, data) {
+  return service({
+    url,
+    data,
+    method: "post",
+    hasPCPrefix: true,
+    headers: {
+      "Content-Type": "application/json",
+    },
+  });
+}
+/*export function downloadFile(url, params, name) {
+    return service({
+        url,
+        params,
+        responseType: "blob",
+        responseType: "arraybuffer",
+    }).then((res) => {
+        var blob = new Blob([res], {
+            type: "application/x-msdownload;charset=UTF-8",
+        });
+        const url = window.URL.createObjectURL(blob);
+        const link = document.createElement("a");
+        link.href = url;
+        link.setAttribute("download", name + ".xls");
+        document.body.appendChild(link);
+        link.click();
+    });
+}*/
+
+export function postData(url, data) {
+  return service({
+    url,
+    data,
+    method: "post",
+  });
+}
--- a/src/api/request.js
+++ b/src/api/request.js
+import axios from "axios";
+
+// vite环境变量
+const ENV = import.meta.env;
+
+const BASE_URL = "/";
+const config = {
+  timeout: 60000,
+  baseURL: BASE_URL,
+  headers: {
+    get: {
+      "Content-Type": "application/x-www-form-urlencoded;charset=utf-8",
+    },
+    post: {
+      "Content-Type": "application/json;charset=utf-8",
+    },
+  },
+};
+
+const service = axios.create(config);
+
+// 请求拦截器
+service.interceptors.request.use(
+  (config) => {
+    if (config.hasPCPrefix) {
+      // 是否有PC前缀
+      config.url = ENV.VITE_APP_BASE_API5 + config.url;
+    }
+    if (localStorage.getItem("token"))
+      config.headers["TOKEN"] = localStorage.getItem("token");
+    return config;
+  },
+
+  (error) => {
+    return Promise.reject(error);
+  }
+);
+// 响应拦截器
+service.interceptors.response.use(
+  (response) => {
+    const res = response.data;
+    if (res.code !== 1) {
+
+      if (!res.success) {
+
+      }
+      if (!res.data) {
+        return res;
+      } else {
+        return res.data;
+      }
+    } else {
+      return res.data;
+    }
+  },
+  (error) => {
+    if (error && error.response) {
+      switch (error.response.code) {
+        case 400:
+          error.message = "请求错误(400)";
+          break;
+        case 401:
+          error.message = "未授权,请登录(401)";
+          break;
+        case 403:
+          error.message = "拒绝访问(403)";
+          break;
+        case 404:
+          error.message = `请求地址出错: ${error.response.config.url}`;
+          break;
+        case 405:
+          error.message = "请求方法未允许(405)";
+          break;
+        case 408:
+          error.message = "请求超时(408)";
+          break;
+        case 500:
+          error.message = "服务器内部错误(500)";
+          break;
+        case 501:
+          error.message = "服务未实现(501)";
+          break;
+        case 502:
+          error.message = "网络错误(502)";
+          break;
+        case 503:
+          error.message = "服务不可用(503)";
+          break;
+        case 504:
+          error.message = "网络超时(504)";
+          break;
+        case 505:
+          error.message = "HTTP版本不受支持(505)";
+          break;
+        default:
+          error.message = `连接错误: ${error.message}`;
+      }
+    } else {
+      error.message = `连接到服务器失败，请联系管理员,'请求的URL:', ${error}`;
+    }
+    return Promise.reject(error);
+  }
+);
+
+export default service;
--- a/src/assets/img/Duster.png
+++ b/src/assets/img/Duster.png
--- a/src/assets/img/big-ad-bg.png
+++ b/src/assets/img/big-ad-bg.png
--- a/src/assets/img/boiler.svg
+++ b/src/assets/img/boiler.svg
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1751867471437" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4697" data-darkreader-inline-fill="" width="256" height="256" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M825.4 700.1V53.5c-0.2-3-1.6-5.9-4-8.1-2.4-2.2-5.5-3.5-8.8-3.7-6.9 0.4-12.3 5.5-12.8 11.8v152.9C753.4 133.3 668.1 88.4 576 88.8h-12.8v-47h-95.9v47h-12.8c-140.8 0-255.9 105.8-255.9 229.2v382c0.7 33.5 9 66.5 24.4 96.9 15.4 30.4 37.6 57.5 65.2 79.5v64.7H237v41.1h95.9v-76.4c35.6 16.7 75.2 24.8 115.2 23.5h12.8v29.4h-57.5v23.5h211.1v-23.5h-57.6v-29.4h12.8c39.7-0.9 78.8-8.9 115.2-23.5v76.4h95.9v-41.1h-51.2v-64.7c59.7-42.1 95-107.1 95.8-176.3z m-204.7-70.6c-12.8 29.4-44.8 41.1-70.4 47 12.8-5.9 12.8-11.8 19.2-23.5-1.3-12.5-5.7-24.6-12.8-35.3-6.4-5.9-6.4-23.5-6.4-29.4-19.2 11.8-12.8 41.1-12.8 41.1-7.8-8-10.2-19.3-6.4-29.4 9.6-23.1 1.8-49.2-19.2-64.7 19.2 41.2-25.6 70.5-25.6 70.5 3.8-12.5-4.1-25.5-17.7-29-0.5-0.1-1-0.3-1.5-0.3 3.5 15.9 1.2 32.4-6.4 47-10.2 18.3-2.3 40.7 17.6 50.1 2.6 1.2 5.2 2.1 8 2.8-12.8 0-19.2-5.9-25.6-5.9-38.4-11.8-57.6-29.4-64-52.9-2.7-13.7-1.8-27.8 2.7-41.1s12.3-25.4 22.9-35.3c19.2-23.5 6.4-64.7 6.4-64.7 17.9 14 31.2 32.3 38.4 52.9 1.7 10.2-0.6 20.6-6.4 29.4 6.2-7.4 10.5-16 12.7-25.2 2.2-9.1 2.2-18.6 0.1-27.7-19.2-52.9-6.4-88.2 12.8-105.8l38.4-47v17.6c-38.4 70.5 25.6 135.2 38.4 146.9-6.4-47 44.8-64.7 44.8-64.7s-25.6 23.5 12.8 99.9c6.4 25.4 6.4 51.6 0 76.7z" fill="#1296db" p-id="4698" data-darkreader-inline-fill="" style="--darkreader-inline-fill: var(--darkreader-background-1296db, #0f84c1);"></path></svg>
\ No newline at end of file
--- a/src/assets/img/chimney.png
+++ b/src/assets/img/chimney.png
--- a/src/assets/img/ddfgreen.png
+++ b/src/assets/img/ddfgreen.png
--- a/src/assets/img/ddfgreenNew.png
+++ b/src/assets/img/ddfgreenNew.png
--- a/src/assets/img/ddfhui.png
+++ b/src/assets/img/ddfhui.png
--- a/src/assets/img/ddfhuiNew.png
+++ b/src/assets/img/ddfhuiNew.png
--- a/src/assets/img/ddfred.png
+++ b/src/assets/img/ddfred.png
--- a/src/assets/img/ddfredNew.png
+++ b/src/assets/img/ddfredNew.png
--- a/src/assets/img/fan-1.png
+++ b/src/assets/img/fan-1.png
--- a/src/assets/img/fan.png
+++ b/src/assets/img/fan.png
--- a/src/assets/img/funnel.png
+++ b/src/assets/img/funnel.png
--- a/src/assets/img/gaolu.png
+++ b/src/assets/img/gaolu.png
--- a/src/assets/img/liaoDou.png
+++ b/src/assets/img/liaoDou.png
--- a/src/base.scss
+++ b/src/base.scss
+.baseBox {
+  padding: 8px 12px;
+  color: #cccccc;
+  background: rgba(25, 28, 33, 0.89);
+  // border-radius: 10px;
+}
+.el-loading-text {
+  color: white !important;
+}
+.el-loading-spinner .path {
+  stroke: #cccccc !important;
+}
\ No newline at end of file
--- a/src/components/scaleBox/index.vue
+++ b/src/components/scaleBox/index.vue
+<template>
+  <div class="box" ref="zoom">
+    <slot name="zoom"></slot>
+  </div>
+</template>
+
+<script>
+const throttle = (fn, delay, ctx) => {
+  let begin = 0;
+  return function () {
+    let curTime = new Date().getTime();
+    if (curTime - begin > delay) {
+      fn.apply(ctx, arguments);
+      begin = curTime;
+    }
+  };
+};
+
+const scale = {
+  width: "1",
+  height: "1",
+};
+const baseWidth = 1920;
+const baseHeight = 1080;
+const baseRate = parseFloat((baseWidth / baseHeight).toFixed(5));
+
+export default {
+  data() {
+    return {
+      drawTimer: null,
+    };
+  },
+  methods: {
+    calcRate() {
+      const zoomRef = this.$refs.zoom;
+      if (!zoomRef) return;
+      const currentRate = parseFloat(
+        (window.innerWidth / window.innerHeight).toFixed(5)
+      );
+      if (zoomRef) {
+        if (currentRate > baseRate) {
+          // 宽度大于高度
+          scale.width = ((window.innerHeight * baseRate) / baseWidth).toFixed(
+            5
+          );
+          scale.height = (window.innerHeight / baseHeight).toFixed(5);
+          zoomRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`;
+        } else {
+          // 高度大于宽度
+          scale.height = (window.innerWidth / baseRate / baseHeight).toFixed(5);
+          scale.width = (window.innerWidth / baseWidth).toFixed(5);
+          zoomRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)`;
+        }
+      }
+    },
+    resize() {
+      if (this.drawTimer) {
+        clearTimeout(this.drawTimer);
+        this.drawTimer = null;
+      }
+      this.drawTimer = setTimeout(() => this.calcRate(), 200);
+    },
+  },
+  mounted() {
+    this.calcRate();
+    let _this = this;
+    window.addEventListener("resize", throttle(this.calcRate, 200, _this));
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.box {
+  width: 1920px;
+  height: 1080px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  transform-origin: 0 0;
+  overflow: hidden;
+}
+</style>
\ No newline at end of file
--- a/src/main.js
+++ b/src/main.js
+import { createApp } from "vue";
+import "./style.css";
+import "./base.scss";
+import App from "./App.vue";
+import router from "./router/index.js";
+
+import * as echarts from "echarts";
+
+function setupApp() {
+  const app = createApp(App);
+  app.config.globalProperties.$echarts = echarts;
+  Object.assign(window, { globalApp: app });
+  app.use(router).mount("#app");
+}
+
+setupApp();
--- a/src/router/index.js
+++ b/src/router/index.js
+import { createRouter, createWebHashHistory } from "vue-router";
+import home from '@/view/home/home.vue';
+const routes = [
+    {
+        path: "/",
+        component: home,
+        meta: {
+            title: "",
+            mainTitle: "首页",
+        },
+    },
+]
+
+const router = createRouter({
+    history: createWebHashHistory(),
+    routes,
+});
+
+export default router;
\ No newline at end of file
--- a/src/style.css
+++ b/src/style.css
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  --bg-primary: #101418;
+  --bg-secondary: #181d21;
+  --text-primary: #ffffff;
+  --text-secondary: #8a9199;
+  --accent: #36f1cd;
+  --success: #36f1cd;
+  --warning: #f5b83d;
+  --danger: #ff4d4d;
+  --chart-blue: #4e7bfa;
+  --chart-teal: #36f1cd;
+  --chart-green: #36f1cd;
+  --chart-yellow: #f5b83d;
+  --border-color: #131619;
+  --panel-bg: #181d21;
+  --header-bg: #131619;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+
+a:hover {
+  color: #535bf2;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  overflow-x: hidden;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+
+button:hover {
+  border-color: #646cff;
+}
+
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+
+  a:hover {
+    color: #747bff;
+  }
+
+  button {
+    background-color: #f9f9f9;
+  }
+}
+
+div {
+  box-sizing: border-box;
+}
+
+/* 
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+  background-color: rgb(0, 0, 0);
+} */
+
+/* #app {
+  position: absolute;
+  top: 0px;
+  left: 0px;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background: rgba(0, 0, 0, 0);
+} */
+
+
+/* latin */
+@font-face {
+  font-family: 'Orbitron';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/orbitron/v34/yMJRMIlzdpvBhQQL_Qq7dy1biN15.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin */
+@font-face {
+  font-family: 'Orbitron';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/orbitron/v34/yMJRMIlzdpvBhQQL_Qq7dy1biN15.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin */
+@font-face {
+  font-family: 'Orbitron';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/orbitron/v34/yMJRMIlzdpvBhQQL_Qq7dy1biN15.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin */
+@font-face {
+  font-family: 'Orbitron';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url(https://fonts.gstatic.com/s/orbitron/v34/yMJRMIlzdpvBhQQL_Qq7dy1biN15.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+@font-face {
+ font-family: "boldNumber";
+ src: url("/public/static/style/fonts/countFont.ttf") format("truetype"); 
+ font-weight: normal;
+ font-style: normal;
+}
\ No newline at end of file
--- a/src/view/home/home.vue
+++ b/src/view/home/home.vue
--- a/vite.config.js
+++ b/vite.config.js
+import vue from "@vitejs/plugin-vue";
+import path from "path";
+import { defineConfig } from "vite";
+
+// https://vitejs.dev/config/
+
+export default defineConfig({
+  plugins: [vue()],
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "src"),
+      "@tools": path.resolve(__dirname, "./src/tools"),
+    },
+  },
+  base: process.env.NODE_ENV === "production" ? "./" : "./",
+  server: {
+    open: true, // 在服务器启动时自动在浏览器中打开应用程序
+    host: "localhost", // 指定服务器主机名
+    port: 3000, // 指定服务器端口
+    proxy: {
+      // 为开发服务器配置自定义代理规则
+      "/vis": {
+        target: "https://vis.bmetech.com", // 实际请求地址
+        changeOrigin: true,
+        rewrite: (path) => path.replace("/vis", "/vis"),
+      },
+      "/screen": {
+        target: "https://screen.bmetech.com", // 实际请求地址
+        changeOrigin: true,
+        rewrite: (path) => path.replace("/screen", ""),
+      },
+      "/steelScreen": {
+        target: "https://screen.bmetech.com", // 实际请求地址
+        changeOrigin: true,
+        rewrite: (path) => path.replace("/steelScreen", "/steelScreen"),
+      },
+      "/m1/4886078-0-default": {
+        target: "http://127.0.0.1:4523/", //实际请求地址
+        changeOrigin: true,
+        rewrite: (path) => path.replace("", ""),
+      },
+      "/pc": {
+        target: "https://screen.bmetech.com", // 实际请求地址
+        changeOrigin: true,
+        rewrite: (path) => path.replace("", ""), // 添加路径重写规则
+      },
+      "/qiniuyun/": {
+        // https://172.16.20.233:50445/纵横 https://192.168.1.181:50445/公司
+        target: "https://192.168.1.181:50445/", // 实际请求地址
+        changeOrigin: true,
+        rewrite: (path) => path.replace("/qiniuyun", ""),
+        secure: false,
+      },
+      "/sdkStream": {
+        target: "http://172.16.20.235:9094/",
+        changeOrigin: true,
+        rewrite: (path) => path.replace("/sdkStream", ""),
+      },
+    }, 
+  },
+  build: {
+    sourcemap: false,
+    outDir: "./dist", // 指定输出路径
+    assetsDir: "assets/", // 指定生成静态资源的存放路径
+    emptyOutDir: true,
+    brotliSize: true, // 不统计
+    chunkSizeWarningLimit: 1000,
+    commonjsOptions: {
+      requireReturnsDefault: "namespace",
+    },
+  },
+});