1.导入svg。2.系统跳转 3.首月基本布局

.env.development

@@ -11,7 +11,7 @@ VITE_APP_BASE_API = '/dev-api'
 VITE_APP_UPLOAD_URL = 'http://192.168.101.4:9000'
 
 # 开发接口地址
- VITE_APP_API_URL = 'http://192.168.101.26:7105'
+ VITE_APP_API_URL = 'http://192.168.101.4:7105'
 
 
 # 是否启用 Mock 服务

.run/docker_Dockerfile.run.xml

@@ -0,0 +1,20 @@
+<component name="ProjectRunConfigurationManager">
+  <configuration default="false" name="docker/Dockerfile" type="docker-deploy" factoryName="dockerfile" singleton="false" server-name="Docker">
+    <deployment type="dockerfile">
+      <settings>
+        <option name="imageTag" value="qingban-zonghe:latest" />
+        <option name="containerName" value="qingban-zonghe" />
+        <option name="portBindings">
+          <list>
+            <DockerPortBindingImpl>
+              <option name="containerPort" value="80" />
+              <option name="hostPort" value="20000" />
+            </DockerPortBindingImpl>
+          </list>
+        </option>
+        <option name="sourceFilePath" value="docker/Dockerfile" />
+      </settings>
+    </deployment>
+    <method v="2" />
+  </configuration>
+</component>

docker/Dockerfile

@@ -0,0 +1,39 @@
+FROM nginx
+MAINTAINER jgiot@163.com
+RUN ln -sf /usr/share/zoneinfo/Asia/Shanghai /etc/localtime
+VOLUME /tmp
+ENV LANG en_US.UTF-8
+RUN echo "server {  \
+                      listen       80; \
+                      client_max_body_size 100m;\
+                      location   /prod-api/ { \
+                      proxy_pass              http://192.168.101.4:7105/; \
+                      proxy_redirect          off; \
+                      proxy_set_header        Host mes-server; \
+                      proxy_set_header        X-Real-IP \$remote_addr; \
+                      proxy_set_header        X-Forwarded-For \$proxy_add_x_forwarded_for; \
+                  } \
+                  location /jgfile/ { \
+                              proxy_pass          http://192.168.101.4:9000/jgfile/; \
+                              proxy_redirect      off; \
+                              proxy_set_header    Host jgfile; \
+                              proxy_set_header    X-Real-IP \$remote_addr; \
+                              proxy_set_header    X-Forwarded-For \$proxy_add_x_forwarded_for; \
+                      } \
+                  #解决Router(mode: 'history')模式下，刷新路由地址不能找到页面的问题 \
+                  location / { \
+                     root   /var/www/html/; \
+                      index  index.html index.htm; \
+                      if (!-e \$request_filename) { \
+                          rewrite ^(.*)\$ /index.html?s=\$1 last; \
+                          break; \
+                      } \
+                  } \
+                  access_log  /var/log/nginx/access.log ; \
+              } " > /etc/nginx/conf.d/default.conf \
+    &&  mkdir  -p  /var/www \
+    &&  mkdir -p /var/www/html
+
+ADD dist/ /var/www/html/
+EXPOSE 80
+EXPOSE 443

package.json

@@ -6,7 +6,7 @@
   "scripts": {
     "preinstall": "npx only-allow pnpm",
     "dev": "vite serve --mode development",
-    "build:prod": "vite build --mode production && vue-tsc --noEmit",
+    "build": "vite build --mode production ",
     "lint:eslint": "eslint  --fix --ext .ts,.js,.vue ./src ",
     "lint:prettier": "prettier --write \"**/*.{js,cjs,ts,json,tsx,css,less,scss,vue,html,md}\"",
     "lint:stylelint": "stylelint  \"**/*.{css,scss,vue}\" --fix",

src/components/TopTitle.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="top-title">
+    <svg-icon :icon-class="icon" size="26" />
+
+    <div class="title">{{ title }}</div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+const props = defineProps<{
+  title: string;
+  icon: string;
+}>();
+</script>
+
+<style lang="scss" scoped>
+.top-title {
+  display: flex;
+  justify-content: start;
+  align-items: center;
+  margin-bottom: 12px;
+}
+
+.title {
+  margin-left: 8px;
+  font-weight: bold;
+  font-size: 16px;
+  color: #666666;
+  text-align: left;
+}
+</style>

src/styles/index.scss

@@ -36,3 +36,9 @@
   background-color: white;
   border-radius: 10px;
 }
+
+.common-box {
+  background: #ffffff;
+  border-radius: 8px 8px 8px 8px;
+  padding: 25px;
+}

src/views/main/main.vue

@@ -1,12 +1,27 @@
 <template>
-  <div>
-    <Systems />
-    <div @click="gotoZHDP">综合大屏</div>
-  </div>
+  <el-row :gutter="20">
+    <el-col :span="16">
+      <Systems />
+      <el-row :gutter="20">
+        <el-col :span="20">
+          <ScreenEntry />
+        </el-col>
+        <el-col :span="4">
+          <Set />
+        </el-col>
+      </el-row>
+    </el-col>
+    <el-col :span="8">
+      <Task />
+    </el-col>
+  </el-row>
 </template>
 
 <script lang="ts" setup>
 import Systems from "@/views/systems/systems.vue";
+import ScreenEntry from "@/views/main/screenEntry.vue";
+import Set from "@/views/main/set.vue";
+import Task from "@/views/main/task.vue";
 
 const router = useRouter();
 const gotoZHDP = () => {

src/views/main/screenEntry.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="common-box" style="margin-top: 20px">
+    <TopTitle icon="daping" title="大屏入口" />
+    <div class="sys-container">
+      <div
+        v-for="(item, index) in screenData"
+        :key="index"
+        class="sys-item"
+        @click="gotoScreen(item.routeName)"
+      >
+        <img alt="" class="sys-item-img" />
+        <h3 class="sys-item-title">{{ item.name }}</h3>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import TopTitle from "@/components/TopTitle.vue";
+
+const screenData = ref([
+  { name: "综合大屏", routeName: "totalScreen" },
+  {
+    name: "综合大屏",
+    routeName: "totalScreen",
+  },
+  { name: "综合大屏", routeName: "totalScreen" },
+  { name: "综合大屏", routeName: "totalScreen" },
+]);
+
+const router = useRouter();
+const gotoScreen = (routeName: string) => {
+  router.push({ name: routeName });
+};
+</script>
+
+<style lang="scss" scoped>
+.sys-container {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+}
+
+.sys-item {
+  min-width: 150px;
+  padding: 15px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  .sys-item-img {
+    width: 120px;
+    height: 100px;
+  }
+
+  .sys-item-title {
+    font-size: 18px;
+    font-weight: bold;
+    margin-bottom: 10px;
+  }
+}
+
+.sys-item:hover {
+  background-color: #87cefa;
+  cursor: pointer;
+}
+</style>

src/views/main/set.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="common-box" style="margin-top: 20px; height: 273px">
+    <div class="sys-container">
+      <div
+        v-for="(item, index) in sysData"
+        :key="index"
+        class="sys-item"
+        @click="openSetPage"
+      >
+        <svg-icon
+          :icon-class="item.icon"
+          alt=""
+          class="sys-item-img"
+          size="60"
+        />
+        <h3 class="sys-item-title">{{ item.menuName }}</h3>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useUserStore } from "@/store";
+
+const userStore = useUserStore();
+
+const sysData = ref<any[]>([{ menuName: "设置", icon: "set" }]);
+
+const openSetPage = () => {};
+</script>
+
+<style lang="scss" scoped>
+.sys-container {
+  height: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+}
+
+.sys-item {
+  min-width: 150px;
+  padding: 15px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  .sys-item-img {
+    width: 60px;
+  }
+
+  .sys-item-title {
+    font-size: 18px;
+    font-weight: bold;
+    margin-bottom: 10px;
+  }
+}
+
+.sys-item:hover {
+  background-color: #87cefa;
+  cursor: pointer;
+}
+</style>

src/views/main/task.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="common-box">
+    <TopTitle icon="wanchengrenwu" title="任务中心" />
+    <div id="taskChart">ddd</div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import TopTitle from "@/components/TopTitle.vue";
+import * as echarts from "echarts";
+
+onMounted(() => {
+  const chart = echarts.init(document.getElementById("taskChart"));
+  let option = {
+    legend: {
+      top: "bottom",
+    },
+    tooltip: {
+      trigger: "item",
+      show: true,
+      formatter: function (params: any) {
+        return params.name + "<br>生产量 " + params.value;
+      },
+    },
+    series: [
+      {
+        name: "Nightingale Chart",
+        type: "pie",
+        radius: [50, 150],
+        center: ["50%", "50%"],
+        roseType: "area",
+        itemStyle: {
+          borderRadius: 8,
+        },
+        data: [
+          { value: 40, name: "rose 1" },
+          { value: 38, name: "rose 2" },
+          { value: 32, name: "rose 3" },
+          { value: 30, name: "rose 4" },
+          { value: 28, name: "rose 5" },
+          { value: 26, name: "rose 6" },
+          { value: 22, name: "rose 7" },
+          { value: 18, name: "rose 8" },
+        ],
+      },
+    ],
+  };
+  chart.setOption(option);
+});
+</script>
+
+<style lang="scss" scoped>
+#taskChart {
+  height: 438px;
+  width: 100%;
+}
+</style>

src/views/systems/systems.vue

@@ -1,14 +1,28 @@
 <template>
-  <div class="sys-container">
-    <div v-for="(item, index) in sysData" :key="index" class="sys-item">
-      <svg-icon :icon-class="item.icon" alt="" class="sys-item-img" size="60" />
-      <h3 class="sys-item-title">{{ item.menuName }}</h3>
+  <div class="common-box">
+    <TopTitle icon="xitong" title="系统入口" />
+    <div class="sys-container">
+      <div
+        v-for="(item, index) in sysData"
+        :key="index"
+        class="sys-item"
+        @click="openInNewTab(item.path)"
+      >
+        <svg-icon
+          :icon-class="item.icon"
+          alt=""
+          class="sys-item-img"
+          size="60"
+        />
+        <h3 class="sys-item-title">{{ item.menuName }}</h3>
+      </div>
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { useUserStore } from "@/store";
+import TopTitle from "@/components/TopTitle.vue";
 
 const userStore = useUserStore();
 
@@ -18,6 +32,10 @@ onMounted(async () => {
   let res = await userStore.getUserInfo();
   sysData.value = res.menus;
 });
+
+const openInNewTab = (url: string) => {
+  window.open(url, "_blank");
+};
 </script>
 
 <style lang="scss" scoped>
@@ -29,7 +47,7 @@ onMounted(async () => {
 }
 
 .sys-item {
-  min-width: 120px;
+  min-width: 150px;
   padding: 15px;
   display: flex;
   flex-direction: column;
@@ -45,4 +63,9 @@ onMounted(async () => {
     margin-bottom: 10px;
   }
 }
+
+.sys-item:hover {
+  background-color: #87cefa;
+  cursor: pointer;
+}
 </style>