feat(屏幕展示): 添加项目名称动态显示和跳转功能

hejianhao

2026-01-19 0cb3fe99c2ff99b924d3b7035c4c69be450b171e

feat(屏幕展示): 添加项目名称动态显示和跳转功能

实现项目名称在项目主页的动态显示，并添加从管理系统跳转到展示屏幕的功能
新增SCREEN_URL常量用于屏幕展示页面跳转
修改路由参数处理逻辑以支持项目名称传递

 estate-frontend-v2024/src/views/common/constants.js

@@ -4,6 +4,7 @@

// export const BASE_URL = 'http://47.93.28.249:8181'
export const BASE_URL = 'http://192.168.110.111:8080';
export const SCREEN_URL = 'http://192.168.110.22:8087/#/';

// export const BASE_URL = 'http://localhost:8080';


 estate-frontend-v2024/src/views/layout/Header/index.jsx

@@ -18,6 +18,7 @@
import Settings from "@/components/Settings";
import Hamburger from "@/components/Hamburger";
import BreadCrumb from "@/components/BreadCrumb";
import { SCREEN_URL } from "../../common/constants";
import "./index.less";
const { Header } = Layout;
const { TabPane } = Tabs;
@@ -102,7 +103,20 @@
    },
  ];

  const toScreen = () => {
    if (tabsType == 1) {
      window.open(`${SCREEN_URL}?type=${tabsType}&token=${1111}`, "_blank");
    } else {
      window.open(`${SCREEN_URL}?type=${tabsType}&token=${1111}&projectId=${111}&projectName=${'项目777'}`, "_blank");
    }
  };

  const changeTabs = (key) => {
    setTabsType(key);
  };

  const [selectedAccount, setSelectedAccount] = useState("");
  const [tabsType, setTabsType] = useState("1");

  return (
    <>
@@ -141,9 +155,9 @@
        visible={visible}
        width={450}
        onCancel={() => setVisible(false)}
        onOk={() => setVisible(false)}
        onOk={toScreen}
      >
        <Tabs defaultActiveKey="1">
        <Tabs defaultActiveKey="1" onChange={changeTabs}>
          <TabPane tab="委托方" key="1">
            <div className="box">
              <Search
@@ -165,7 +179,7 @@
          </TabPane>
          <TabPane tab="项目" key="2">
            <div className="box">
               <Search
              <Search
                placeholder="请输入项目名称"
                enterButton="搜索"
                onSearch={(value) => console.log(value)}

 screen/src/App.vue

@@ -1,38 +1,71 @@
<template>
  <div id='app'>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
import autofit from 'autofit.js';
import autofit from "autofit.js";

export default {
  name: 'app',
  name: "app",
  data() {
    return {

    }
    return {};
  },
  mounted() {
    autofit.init({
      dh: 1080,
      dw: 1920,
      renderDom: '#app',
      renderDom: "#app",
      resize: true,
    })
    });
  },
  created() {
    if (!localStorage.getItem('token')) {
      this.$router.replace('/');
      return
    let token = "";
    let type = "";
    let projectId = "";
    let projectName = "";
    const hash = window.location.hash;
    if (hash && hash.indexOf("?") !== -1) {
      const queryPart = hash.split("?")[1];
      const params = new URLSearchParams(queryPart);
      token = params.get("token");
      type = params.get("type");
      if (type == 2) {
        projectId = params.get("projectId");
        projectName = params.get("projectName");
      }
    }

    if (token) {
      localStorage.setItem("token", token);
      if (type == 1) {
        this.$router.replace({
          path: "/home",
        });
        return;
      }
      if (type == 2) {
        this.$router.replace({
          path: "/projectHome",
          query: {
            projectId,
            projectName,
          },
        });
        return;
      }
    }
    if (!localStorage.getItem("token")) {
      this.$router.replace("/");
      return;
    }
  },
}
};
</script>

<style lang='less'>
@import './assets/font/font.css';
@import "./assets/font/font.css";
@import "./assets/app.css";
@import "./assets/basics.less";


 screen/src/view/projectHome/index.vue

@@ -1,6 +1,6 @@
<template>
  <div class="relative">
    <HeaderBox title="石盘安置C地块项目" />
    <HeaderBox :title="projectName" />
    <!-- 地图 -->
    <div id="container" style="width: 1920px; height: 995px; background-color: #001635"></div>
    <!-- 左边 内容 -->
@@ -341,6 +341,8 @@
      mapPromise: null,
      dateRange: [moment().startOf("month"), moment().endOf("month")], //默认本月
      markers: [],
      projectId: '',
      projectName: '',

      // pie数据
      legendData: [
@@ -425,6 +427,8 @@
      key: "232929db1cb31f26d42b3645a7456154",
      version: "2.0",
    });
    this.projectId = this.$route.query.projectId || ''
    this.projectName = this.$route.query.projectName || ''
  },
  mounted() {
    this.setMapload()

 screen/src/view/projectList/index.vue

@@ -348,7 +348,8 @@
      this.$router.push({
        path: "/projectHome",
        query: {
          projectId: row.projectId,
          projectId: 111,
          projectName: "项目777",
        },
      });
    },
@@ -357,7 +358,7 @@
      this.$router.push({
        path: "/hiddenDanger",
        query: {
          projectId: row.projectId,
          projectId: 111,
          activeTab: type,
        },
      });