add home-map

2024-04-08 16:55:11 +08:00 · 2024-04-08 16:55:11 +08:00 · 1e734579df
commit 1e734579df
parent 15b6281347
6 changed files with 310 additions and 57 deletions
--- a/src/assets/YouSheBiaoTiHei-2.ttf
+++ b/src/assets/YouSheBiaoTiHei-2.ttf
--- a/src/assets/bgearth.png
+++ b/src/assets/bgearth.png
--- a/src/assets/pinicon.png
+++ b/src/assets/pinicon.png
--- a/src/main.js
+++ b/src/main.js
@ -1,68 +1,79 @@
-import Vue from 'vue'
-import Element from 'element-ui'
+import Vue from "vue";
+import Element from "element-ui";

 // 修改如下样式文件，覆盖样式，或者新增样式文件
-import './assets/styles/element-variables.scss'
-import '@/assets/styles/index.scss' // global css
-import '@/assets/styles/ruoyi.scss' // ruoyi css
+import "./assets/styles/element-variables.scss";
+import "@/assets/styles/index.scss"; // global css
+import "@/assets/styles/ruoyi.scss"; // ruoyi css

-import App from './App'
-import store from './store'
-import router from './router'
-import directive from './directive' // directive
-import plugins from './plugins' // plugins
+import App from "./App";
+import store from "./store";
+import router from "./router";
+import directive from "./directive"; // directive
+import plugins from "./plugins"; // plugins

-import './assets/icons' // icon
-import './permission' // permission control
+import "./assets/icons"; // icon
+import "./permission"; // permission control
 import { getDicts } from "@/api/system/dict/data";
-import { parseTime, resetForm, handleTree, addBeginAndEndTime, divide } from "@/utils/ruoyi";
+import {
+  parseTime,
+  resetForm,
+  handleTree,
+  addBeginAndEndTime,
+  divide,
+} from "@/utils/ruoyi";
 import Pagination from "@/components/Pagination";
 // 自定义表格工具扩展
-import RightToolbar from "@/components/RightToolbar"
+import RightToolbar from "@/components/RightToolbar";
 // 代码高亮插件
 // import hljs from 'highlight.js'
 // import 'highlight.js/styles/github-gist.css'
-import { DICT_TYPE, getDictDataLabel, getDictDatas, getDictDatas2 } from "@/utils/dict";
+import {
+  DICT_TYPE,
+  getDictDataLabel,
+  getDictDatas,
+  getDictDatas2,
+} from "@/utils/dict";

-import './theme/index.css'; // 自定义主题包 - code-brick-zj
+import "./theme/index.css"; // 自定义主题包 - code-brick-zj

 // 全局方法挂载
-Vue.prototype.getDicts = getDicts
-Vue.prototype.parseTime = parseTime
-Vue.prototype.resetForm = resetForm
-Vue.prototype.getDictDatas = getDictDatas
-Vue.prototype.getDictDatas2 = getDictDatas2
-Vue.prototype.getDictDataLabel = getDictDataLabel
-Vue.prototype.DICT_TYPE = DICT_TYPE
-Vue.prototype.handleTree = handleTree
-Vue.prototype.addBeginAndEndTime = addBeginAndEndTime
-Vue.prototype.divide = divide
+Vue.prototype.getDicts = getDicts;
+Vue.prototype.parseTime = parseTime;
+Vue.prototype.resetForm = resetForm;
+Vue.prototype.getDictDatas = getDictDatas;
+Vue.prototype.getDictDatas2 = getDictDatas2;
+Vue.prototype.getDictDataLabel = getDictDataLabel;
+Vue.prototype.DICT_TYPE = DICT_TYPE;
+Vue.prototype.handleTree = handleTree;
+Vue.prototype.addBeginAndEndTime = addBeginAndEndTime;
+Vue.prototype.divide = divide;

 // 全局组件挂载
-Vue.component('DictTag', DictTag)
-Vue.component('Pagination', Pagination)
-Vue.component('RightToolbar', RightToolbar)
+Vue.component("DictTag", DictTag);
+Vue.component("Pagination", Pagination);
+Vue.component("RightToolbar", RightToolbar);
 // 字典标签组件
-import DictTag from '@/components/DictTag'
+import DictTag from "@/components/DictTag";
 // 头部标签插件
-import VueMeta from 'vue-meta'
+import VueMeta from "vue-meta";

-Vue.use(directive)
-Vue.use(plugins)
-Vue.use(VueMeta)
+Vue.use(directive);
+Vue.use(plugins);
+Vue.use(VueMeta);

 // Form Generator 组件需要使用到 tinymce
-import Tinymce from '@/components/tinymce/index.vue'
-Vue.component('tinymce', Tinymce)
-import '@/assets/icons'
-import request from "@/utils/request"
-console.log(request)
-Vue.prototype.$axios = request
-import '@/styles/index.scss'
+import Tinymce from "@/components/tinymce/index.vue";
+Vue.component("tinymce", Tinymce);
+import "@/assets/icons";
+import request from "@/utils/request";
+console.log(request);
+Vue.prototype.$axios = request;
+import "@/styles/index.scss";

 // 默认点击背景不关闭弹窗
-import ElementUI from 'element-ui'
-ElementUI.Dialog.props.closeOnClickModal.default = false
+import ElementUI from "element-ui";
+ElementUI.Dialog.props.closeOnClickModal.default = false;

 /**
 * If you don't want to use mock-server
@ -77,11 +88,11 @@ Vue.use(Element, {
  size: localStorage.getItem("size") || "medium", // set element-ui default size
 });

-Vue.config.productionTip = false
+Vue.config.productionTip = false;

 new Vue({
-  el: '#app',
+  el: "#app",
  router,
  store,
-  render: h => h(App)
-})
+  render: (h) => h(App),
+});
--- a/src/views/dashboard/components/CompanyInfo.vue
+++ b/src/views/dashboard/components/CompanyInfo.vue
@ -0,0 +1,110 @@
+<!-- 
+    filename: CompanyInfo.vue
+    author: liubin
+    date: 2024-04-08 15:27:04
+    description: 
+-->
+
+<template>
+  <div class="company-info" :style="styles">
+    <div class="corner bl"></div>
+    <div class="corner br"></div>
+    <h2>{{ info.companyName }}</h2>
+    <ul>
+      <li v-for="item in info.items" :key="item.label">
+        {{ item.label }} {{ item.value }}
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "CompanyInfo",
+  components: {},
+  props: {
+    info: {
+      type: Object,
+      required: true,
+      default: () => ({}),
+    },
+    position: {
+      type: Object,
+      required: true,
+      default: () => ({ x: 0, y: 0 }),
+    },
+  },
+  data() {
+    return {};
+  },
+  computed: {
+    styles() {
+      return {
+        left: `${this.position.x}%`,
+        top: `${this.position.y}%`,
+      };
+    },
+  },
+  methods: {},
+};
+</script>
+
+<style scoped lang="scss">
+@font-face {
+  font-family: 优设标题黑;
+  src: url(../../../assets/YouSheBiaoTiHei-2.ttf);
+}
+
+.company-info {
+  color: #fff;
+  background: #4443;
+  position: absolute;
+  z-index: 9999;
+  padding: 14px;
+  backdrop-filter: blur(2px);
+  border-radius: 4px;
+  transform: translate(-50%, -100%);
+  box-shadow: inset 0 0 12px 2px #fff3;
+}
+
+h2 {
+  margin: 6px 0;
+  font-family: 优设标题黑;
+  color: #fff;
+  font-size: 24px;
+}
+
+ul,
+li {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+ul {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.corner {
+  position: absolute;
+  bottom: 0;
+  width: 12px;
+  height: 12px;
+  border-style: solid;
+  border-color: transparent;
+}
+
+.bl {
+  left: 0;
+  border-left: 3px solid #ffa600;
+  border-bottom: 3px solid #ffa600;
+}
+
+.br {
+  right: 0;
+  border-right: 3px solid #ffa600;
+  border-bottom: 3px solid #ffa600;
+}
+</style>
--- a/src/views/index.vue
+++ b/src/views/index.vue
@ -1,35 +1,167 @@
 <template>
  <div class="dashboard-factory-all">
-    <h1>Index</h1>
+    <div id="map-container">
+      <div class="databoard">
+        <div class="db-header"></div>
+        <div class="db-body">
+          <div class="db-left"></div>
+          <div class="db-right"></div>
+        </div>
+      </div>
+    </div>
+    <company-info
+      v-if="visible"
+      :info="info"
+      :position="hintPosition"
+      @close="closeHint"
+    />
  </div>
 </template>

 <script>
+import store from "@/store";
+import CompanyInfo from "./dashboard/components/CompanyInfo.vue";
+
 export default {
  name: "Index",
-  components: {},
+  components: { CompanyInfo },
  data() {
-    return {};
+    return {
+      visible: false,
+      hintPosition: null,
+    };
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.initPins();
+    });
+  },
+  beforeRouteEnter(to, from, next) {
+    next((vm) => {
+      store.dispatch("app/closeSideBar", { withoutAnimation: true });
+    });
+  },
+  methods: {
+    initPins() {
+      [
+        // 佳木斯
+        { x: 67, y: 20 },
+        // 成都
+        { x: 46, y: 56 },
+        // 蚌埠1
+        { x: 60, y: 52 },
+        // 蚌埠2
+        { x: 61, y: 53 },
+        // 江西 瑞昌
+        { x: 60, y: 58 },
+        // 湖南 株洲
+        { x: 56, y: 60 },
+      ].map((loc) => {
+        const pin = document.createElement("div");
+        pin.className = "pin";
+        pin.style.left = `${loc.x}%`;
+        pin.style.top = `${loc.y}%`;
+        pin.addEventListener("mouseenter", () => {
+          this.showHint({ x: loc.x, y: loc.y });
+        });
+        pin.addEventListener("mouseleave", () => {
+          this.closeHint();
+        });
+        document.getElementById("map-container").appendChild(pin);
+      });
+    },
+    closeHint() {
+      this.visible = false;
+      this.hintPosition = null;
+    },
+    showHint(position) {
+      this.hintPosition = position;
+      this.info = {
+        // companyName: "凯盛光伏材料有限公司（本部）",
+        companyName: "蚌埠兴科玻璃有限公司",
+        // companyName: "成都中建材光电材料有限公司",
+        // companyName: "瑞昌中建材光电材料有限公司",
+        // companyName: "邯郸中建材光电材料有限公司",
+        // companyName: "中建材（株洲）光电材料有限公司",
+        // companyName: "佳木斯中建材光电材料有限公司",
+        items: [
+          { label: "FTO投入", value: "1,200" },
+          { label: "芯片产出", value: "2,200" },
+          { label: "芯片投入", value: "1,300" },
+          { label: "标准组件产出", value: "1,100" },
+        ],
+      };
+      this.$nextTick(() => {
+        this.visible = true;
+      });
+    },
  },
-  methods: {},
 };
 </script>

 <style lang="scss" scoped>
 .dashboard-factory-all {
  background: #151516;
-  // flex: 1;
  position: fixed;
  top: 0;
  left: 0;
-  // position: absolute;
-  // top: -8px;
-  // left: -16px;
-  // height: calc(100% + 8px);
-  // width: calc(100% + 30px);
  height: 100vh;
  width: 100vw;
  z-index: 1000;
  color: #fff;
 }
+
+#map-container {
+  height: 100%;
+  background: url(../assets/bgearth.png) no-repeat 0 0 / 100% 100%;
+  position: relative;
+
+  .databoard {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: #15151633;
+    z-index: 1;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .db-header {
+    height: 88px;
+    background: #f001;
+  }
+
+  .db-body {
+    flex: 1;
+    background: #0f01;
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .db-left,
+  .db-right {
+    background: #00f2;
+    width: 420px;
+    padding: 20px;
+  }
+}
+</style>
+
+<style>
+.pin {
+  display: inline-block;
+  position: absolute;
+  z-index: 9998;
+  width: 32px;
+  height: 32px;
+  background: url(../assets/pinicon.png) no-repeat 0 0 / 100% 100%;
+  transition: transform 0.1s linear;
+  cursor: pointer;
+}
+
+.pin:hover {
+  transform: scale(1.2);
+}
 </style>