feat:WMS及产线数据管理系统项目登陆以及首页研发

god-ui/src/layout/components/Navbar.vue

@@ -7,7 +7,7 @@
 
     <div class="right-menu">
       <template v-if="device!=='mobile'">
-        <div v-show="port !== '9210'" class="el-icon-s-platform bigscreen-frame" @click="handleBigscreen()"></div>
+        <div v-show="fn" class="el-icon-s-platform bigscreen-frame" @click="handleBigscreen()"></div>
         <search id="header-search" class="right-menu-item" />
 
         <screenfull id="screenfull" class="right-menu-item hover-effect" />
@@ -69,6 +69,10 @@ export default {
       'avatar',
       'device'
     ]),
+    fn(){
+      let arr=['9210','9230']
+        return arr.includes(this.port.toString())
+    },
     setting: {
       get() {
         return this.$store.state.settings.showSettings

god-ui/src/layout/components/Sidebar/Logo.vue

@@ -68,6 +68,10 @@ export default {
         this.title = '工程机械数字服务平台'
         document.title = '工程机械数字服务平台'
         break;
+      case '9230':
+        this.title = '企业作业综合可视化监管平台'
+        document.title = '企业作业综合可视化监管平台'
+        break;
       default:
         this.title = ''
         document.title = ''

god-ui/src/views/home/index.vue

@@ -730,6 +730,7 @@ export default {
                 ]
             }))
         }
+        
     }
 }
 </script>

god-ui/src/views/index.vue

@@ -6,6 +6,7 @@
     <deviceMap v-else-if="port === '9190'"></deviceMap>
     <device-info v-else-if="port === '9210'"></device-info>
     <cityManageMap v-else-if="port === '9180'" />
+    <interface-home v-else-if="port === '9230'" />
     <operate-home v-else-if="port === '80' || port === ''"></operate-home>
     <home-page v-else></home-page>
   </div>
@@ -18,7 +19,7 @@ import MachineryHome from './machinery/home/index.vue'
 import deviceMap from './monitorMap/deviceMap/index.vue'
 import cityManageMap from './cityManage/map/index.vue'
 import deviceInfo from './deviceInfo/home/index.vue'
-
+import interfaceHome from './interface/home/index.vue'
 export default {
   components: {
     HomePage,
@@ -27,7 +28,8 @@ export default {
     MachineryHome,
     deviceMap,
     cityManageMap,
-    deviceInfo
+    deviceInfo,
+    interfaceHome
   },
   data() {
     return {

god-ui/src/views/interface/home/index.vue

@@ -0,0 +1,449 @@
+<template>
+  <div class="app-container main-outer-wrapper">
+    <div class="top-card-wrapper" style="grid-template-columns: repeat(5, 1fr)">
+      <div
+        class="top-card-inner top-card-item"
+        v-for="(item, index) in topCardList"
+        :key="index"
+      >
+        <div
+          :class="['top-card-icon', 'top-icon-' + (index + 1).toString()]"
+        ></div>
+        <div class="top-card-text-wrapper">
+          <div class="top-card-value">{{ item.value }}</div>
+          <div class="top-card-title">{{ item.title }}</div>
+        </div>
+      </div>
+    </div>
+    <div class="grid-main-wrapper">
+      <div class="grid-item-wrapper">
+        <div id="echart1" style="width: 100%; height: 100%"></div>
+      </div>
+      <div class="grid-item-wrapper">
+        <div
+          id="echart2"
+          style="width: 100%; height: 100%"
+        ></div>
+      </div>
+      <div class="grid-item-wrapper">
+        <div id="echart3" style="width: 100%; height: 100%"></div>
+      </div>
+      <div class="grid-item-wrapper" style="padding: 0 20px">
+        <div>设备情况</div>
+        <div class="grid-item-right">
+          <div class="grid-right-item">
+            <div
+              v-for="(item, index) in shebeiList"
+              style="width: 100%; box-shadow: 2px 2px 2px"
+              :key="index"
+            >
+              <div>{{ item.title }}</div>
+              <div style="display: flex">
+                <div
+                  :class="[
+                    'top-card-icon',
+                    'right-icon-' + (index + 1).toString(),
+                  ]"
+                ></div>
+                <div style="margin-left: 10px">{{ item.number }}</div>
+              </div>
+            </div>
+          </div>
+          <div
+            id="echart5"
+            style="width: 78%; height: 100%;box-shadow: 2px 2px 2px #ccc, -2px -2px 1px #12121225;"
+          ></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+  <script>
+import {
+  generateBaseOptions,
+  generatePieOptions,
+  initChartStatic,
+} from "@/utils/bigscreenTool/index.js";
+export default {
+  data() {
+    return {
+      topCardList: [
+        {
+          title: "采购订单",
+          value: "312",
+        },
+        {
+          title: "销售订单",
+          value: "234",
+        },
+        {
+          title: "采购发票",
+          value: "135",
+        },
+        {
+          title: "销售发票",
+          value: "123",
+        },
+        {
+          title: "设备数量",
+          value: "32",
+        },
+      ],
+      shebeiList: [
+        {
+          title: "在线设备",
+          number: "30",
+        },
+        {
+          title: "离线设备",
+          number: "1",
+        },
+      ],
+    };
+  },
+  mounted() {
+    this.initEchart1();
+    this.initEchart2();
+    this.initEchart3();
+    this.initEchart4();
+  },
+  methods: {
+    initEchart1() {
+      const xAxisData = [],
+        baseDate = new Date();
+      for (let i = 0; i < 5; i++) {
+        const middleDate = new Date();
+        middleDate.setMonth(baseDate.getMonth() - i);
+        xAxisData.unshift(`${middleDate.getMonth()}月`);
+      }
+      initChartStatic(
+        "echart1",
+        generateBaseOptions({
+          title: {
+            text: "订单分析趋势",
+          },
+          xAxis: {
+            data: xAxisData,
+          },
+          legend: {
+            top: "bottom",
+            left: "center",
+          },
+          yAxis: {
+            type: "value",
+          },
+          color: ["#609dd5", "#ec7d31"],
+          series: [
+            {
+              name: "采购订单",
+              data: [49, 60, 39, 60, 50, 55],
+              type: "line",
+            },
+            {
+              name: "销售订单",
+              data: [35, 40, 38, 43, 40, 35],
+              type: "line",
+            },
+          ],
+          grid:{
+            bottom:'17%'
+          }
+        })
+      );
+    },
+    initEchart2() {
+      const xAxisData = [],
+        baseDate = new Date();
+      for (let i = 0; i < 5; i++) {
+        const middleDate = new Date();
+        middleDate.setMonth(baseDate.getMonth() - i);
+        xAxisData.unshift(`${middleDate.getMonth()}月`);
+      }
+      initChartStatic(
+        "echart2",
+        generateBaseOptions({
+          legend: {
+            show: true,
+            top: "bottom",
+            left: "center",
+          },
+          title: {
+            text: "生产统计分析(万斤)",
+          },
+          xAxis: {
+            data: xAxisData,
+          },
+          color: ["#5b9ad4", "#ec7d31", "#a4a4a4"],
+          yAxis: [
+            {
+              type: "value",
+              min: 0,
+              max: 50,
+              interval: 10,
+              axisLabel: {
+                formatter: "{value}",
+                textStyle: {
+                     color: "#252525",//Y轴内容文字颜色
+                },
+              },
+            },
+            {
+              type: "value",
+              min: 88,
+              max: 100,
+              interval: 2,
+              axisLabel: {
+                textStyle: {
+                     color: "#252525",//Y轴内容文字颜色
+                },
+                formatter: "{value}%",
+              },
+            },
+          ],
+          series: [
+            {
+              name: "生产总量",
+              type: "bar",
+              label: {
+                show: true,
+                position: "top",
+              },
+              itemStyle: {
+                barWidth: 5, // 设置柱子粗细
+              },
+              tooltip: {
+                valueFormatter: function (value) {
+                  return value;
+                },
+              },
+              data: [32, 29, 38, 35, 41, 46],
+            },
+            {
+              name: "残次品",
+              type: "bar",
+              itemStyle: {
+                barWidth: 5, // 设置柱子粗细
+              },
+              label: {
+                show: true,
+                position: "top",
+              },
+              tooltip: {
+                valueFormatter: function (value) {
+                  return value;
+                },
+              },
+              data: [3, 2.5, 2.8, 2, 3.3, 2.7],
+            },
+            {
+              name: "合格率",
+              type: "line",
+              yAxisIndex: 1,
+              label: {
+                show: true,
+                position: "top",
+                formatter: "{c}%", //显示百分号
+              },
+              tooltip: {
+                valueFormatter: function (value) {
+                  return value + " %";
+                },
+              },
+              data: [91, 91, 93, 94, 92, 92],
+            },
+          ],
+          grid:{
+            width:'90%',
+            bottom:'18%'
+          }
+        })
+      );
+    },
+    initEchart3() {
+      initChartStatic(
+        "echart3",
+        generatePieOptions({
+          color: ["#a4a4a4", "#5b9ad4", "#ec7d31"],
+          legend: {
+            left: "right",
+            textStyle: {
+              color: "#252525",
+            },
+          },
+          title: {
+            text: "销售金额占比",
+            left: "center",
+          },
+          graphic: [
+            {
+              //环形图中间添加文字
+              type: "text", //通过不同top值可以设置上下显示
+              left: "center",
+              top: "center",
+              style: {
+                text: "906.2万",
+                textAlign: "center",
+                fill: "red", //文字的颜色
+                fontSize: 20,
+                lineHeight: 20,
+              },
+            },
+          ],
+          series: [
+            {
+              name: "数据详情",
+              type: "pie",
+              radius: ["40%", "70%"],
+              center: ["50%", "50%"],
+              data: [
+                { value: 468.5, name: "桐盛建材" },
+                { value: 329, name: "青鹏水泥" },
+                { value: 108.7, name: "安达橡胶" },
+              ],
+              label: {
+                formatter: "{c|{c}} , {per|{d}%}",
+                rich: {
+                  c: {
+                    color: "#252525",
+                    fontSize: 12,
+                    lineHeight: 33,
+                  },
+                  per: {
+                    color: "#252525",
+                    fontSize: 12,
+                    lineHeight: 33,
+                  },
+                },
+              },
+            },
+          ],
+        })
+      );
+    },
+    initEchart4() {
+      initChartStatic(
+        "echart5",
+        generatePieOptions({
+          color: ["#a4a4a4", "#5b9ad4", "#ec7d31"],
+          legend: {
+            left: "right",
+            itemWidth: 10,
+            itemHeight: 10,
+            textStyle: {
+              color: "#252525",
+            },
+          },
+          title: {
+            text: "设备分布",
+            top: "2%",
+            left: "2%",
+          },
+          series: [
+            {
+              name: "数据详情",
+              type: "pie",
+              radius: ["40%", "70%"],
+              center: ["50%", "50%"],
+              data: [
+                { value: 12.37, name: "金马地磅" },
+                { value: 6.19, name: "金钟衡器" },
+                { value: 14.44, name: "凯土地磅" },
+              ],
+              label: {
+                formatter: "{c|{c}%} ",
+                rich: {
+                  c: {
+                    color: "#252525",
+                    fontSize: 12,
+                    lineHeight: 33,
+                  },
+                  per: {
+                    color: "#252525",
+                    fontSize: 12,
+                    lineHeight: 33,
+                  },
+                },
+              },
+            },
+          ],
+        })
+      );
+    },
+  },
+};
+</script>
+  <style scoped lang="scss">
+@import url(../../../styles/mainPage.scss);
+.top-card-icon {
+    width: 2rem;
+    height: 2rem;
+    background-size: 100% 100%;
+  }
+.top-card-inner {
+  flex-direction: row !important;
+  box-shadow: 2px 2px 2px #25252525;
+  border-radius: 6px;
+
+  .top-card-icon {
+    width: 4rem;
+    height: 4rem;
+    background-size: 100% 100%;
+  }
+
+  .top-card-text-wrapper {
+    width: calc(100% - 5rem);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    .top-card-value {
+      font-family: "TitleFont";
+      font-size: 1.6rem;
+      position: relative;
+      top: 0.2rem;
+    }
+  }
+}
+
+.grid-main-wrapper {
+  grid-template-columns: 0.8fr 1.2fr;
+  grid-template-rows: 2fr 2fr;
+  width: 100%;
+  .grid-item-wrapper {
+    box-shadow: 2px 2px 2px #25252525;
+    border-radius: 6px;
+
+    .grid-item-title {
+      font-family: "TitleFont";
+      font-weight: 500 !important;
+    }
+  }
+  .grid-item-right {
+    width: 100%;
+    display: flex;
+    height: calc(100% - 3rem);
+    align-items: center;
+    justify-content: space-between;
+    .grid-right-item {
+      width: 20%;
+      display: flex;
+      height: 100%;
+      flex-direction: column;
+      align-items: center;
+      justify-content: space-around;
+    }
+  }
+}
+
+@for $i from 1 through 5 {
+  .top-icon-#{$i} {
+    background-image: url(./assets/top#{$i}.png);
+  }
+}
+@for $i from 1 through 2 {
+  .right-icon-#{$i} {
+    background-image: url(./assets/icon#{$i}.png);
+  }
+}
+</style>

god-ui/src/views/login.vue

@@ -158,6 +158,11 @@ export default {
           loginDom.style.backgroundImage = 'url(/images/gongcheng-bg.png)'
           this.redirect = '/index'
           break;
+        case '9230':
+          document.title = '企业作业综合可视化监管平台'
+          loginDom.style.backgroundImage = 'url(/images/qiye-bg.png)'
+          this.redirect = '/index'
+          break;
         default:
           document.title = ''
           loginDom.style.backgroundImage = 'url(/images/gangyin-bg.png)'