feat:工程车作业管控及人员行为AI智能识别预警系统首页 新疆天山钢铁新能源装载机监控项目 登陆

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

@@ -98,6 +98,11 @@ export default {
         this.title = '工程设备新能源电池溯源'
         document.title = '工程设备新能源电池溯源'
         break;
+      case '9340':
+        // 新疆天山钢铁新能源监控
+        this.title = '新疆天山钢铁新能源监控'
+        document.title = '新疆天山钢铁新能源监控'
+        break;
       // case '9320':
       //   // 工程车作业及人员行为AI系统
       //   this.title = '工程车作业及人员行为AI系统'

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

@@ -5,23 +5,12 @@
       <div class="top-warper">
         <div
           v-for="(item, index) in topList"
-          class="top-warper-item"
+          :class="['top-warper-item','top-img-'+(index+1).toString()]"
-          :style="{ backgroundColor: item.color }"
           :key="index"
         >
           <div>{{ item.name }}</div>
-          <div
+          <div style="font-weight:600;font-size:20px;font-family: 'TITLEFONT';margin-top:10px;">{{ item.val }}</div>
-            style="
+          
-              display: flex;
-              width: 100%;
-              margin-top:20px;
-              align-items: center;
-              justify-content: space-between;
-            "
-          >
-            <div style="font-weight:600;font-size:20px;">{{ item.val }}</div>
-            <div :class="['top-card-icon', 'top-icon-' + (index + 1).toString()]"></div>
-          </div>
         </div>
       </div>
     </div>
@@ -71,37 +60,30 @@ export default {
         {
           name: "车辆总数",
           val: "326",
-          color: "#e9f1ff",
         },
         {
           name: "在线总数",
           val: "260",
-          color: "#f0faff",
         },
         {
           name: "工地总数",
           val: "34",
-          color: "#e9f1ff",
         },
         {
           name: "油耗",
           val: "153",
-          color: "#f0faff",
         },
         {
           name: "报警统计",
           val: "15",
-          color: "#e9f1ff",
         },
         {
           name: "故障总量",
           val: "30",
-          color: "#f0faff",
         },
         {
           name: "维修总量",
           val: "26",
-          color: "#e9f1ff",
         },
       ],
     };
@@ -172,10 +154,11 @@ export default {
             },
           ],
           grid: {
-            width: "80%",
+            width: "82%",
             height: "auto",
             left: "15%",
-            // bottom:'15%'
+            top:'5%',
+            bottom:'10%'
           },
         })
       );
@@ -277,6 +260,7 @@ export default {
             width: "80%",
             height: "auto",
             left: "10%",
+            top:'5%',
             bottom: "20%",
           },
         })
@@ -340,9 +324,9 @@ export default {
             },
           ],
           grid: {
-            width: "80%",
+            width: "90%",
             height: "auto",
-            left: "15%",
+            top:'10%',
             bottom: "20%",
           },
         })
@@ -357,6 +341,9 @@ export default {
             axisLine: {
               show: true,
             },
+            axisLabel:{
+              interval:0
+            },
             data: [
               "牵引工具",
               "紧固工具",
@@ -395,13 +382,12 @@ export default {
                 normal: {
                   color: function (params) {
                     var arr = [
-                      "#418fe2",
+                      "#23d96e",
                       "#d5adff",
                       "#39d8f9",
                       "#689fff",
                       "#fdd67c",
                     ];
-                    console.log(params,99);
                     return arr[params.dataIndex];
                   },
                 label: {
@@ -418,15 +404,14 @@ export default {
             },
           ],
           grid: {
-            width: "80%",
+            width: "90%",
             height: "auto",
-            left: "15%",
+            top:'10%',
-            bottom: "20%",
+            bottom: "10%",
           },
         })
       );
     },
-
     initMap() {
       AMapLoader.load({
         key: "e49669059fa36494531a82ed982f395c", // 申请好的Web端开发者Key，首次调用 load 时必填
@@ -435,7 +420,7 @@ export default {
       })
         .then((AMap) => {
           this.map = new AMap.Map("map", {
-            zoom: 15, //级别
+            zoom: 16, //级别
             center: [106.503005,29.515668], //中心点坐标
           });
           this.map.on("click", (e) => {
@@ -446,22 +431,35 @@ export default {
           const marks=[
               {
                 locaton:[106.49925434121705,29.516762649621796],
-                name:'新世纪百货',
+                name:'张建波',
-                device:'AI摄像头-CAM90801'
+                device:'川A56578',
+                phone:'18715351234',
+                type:'渣土车'
               },
               {
                 locaton:[106.50233888158418, 29.51453123556404],
-                name:'五洲小区东区彩虹广场',
+                name:'管春鹏',
-                device:'AI摄像头-CAM90802'
+                device:'川A66666',
+                phone:'15615312983',
+                type:'推土车'
               },
               {
                 locaton:[106.50438272485353,29.518270460128708],
-                name:'虹桥小区',
+                name:'张志扬',
-                device:'AI摄像头-CAM90804'
+                device:'川A99999',
-              }
+                phone:'16615371234',
+                type:'破石车'
+              },
+              {
+                locaton:[106.50738272485353,29.518570460128708],
+                name:'孙留住',
+                device:'川A32621',
+                phone:'18515371234',
+                type:'渣土车'
+              },
             ]
           marks.forEach((item, index) => {
-            this.addMapMarker(item.locaton, 'car2', { name: item.name, device: item.device })
+            this.addMapMarker(item.locaton, 'car2', { name: item.name, device: item.device,type:item.type,phone: item.phone})
           });
         })
         .catch((e) => {
@@ -469,7 +467,7 @@ export default {
         });
     },
     // 添加图形点标记
-    addMapMarker(sourceData = [], type = "sxt", info = {}) {
+    addMapMarker(sourceData = [], type = "car2", info = {}) {
       const marker = new AMap.Marker({
         position: new AMap.LngLat(sourceData[0], sourceData[1]),
         offset: new AMap.Pixel(-30, -52),
@@ -487,12 +485,16 @@ export default {
     // 显示信息窗体
     showInfoWindow(lng, lat, sourceInfo) {
       let content = `
-                 <div style="padding: 6px;background-color: #52bcff;border-radius: 10px;color:#fff;">   
+                 <div style="padding: 6px;background-color: #39c5ff;border-radius: 10px;color:#fff;">   
                      <div>
                        <div style="padding: 4px;fontweigth:500">车牌：${sourceInfo.device}</div>
                          <div style="padding: 4px;margin:5px 0">司机：${sourceInfo.name}</div>
-                         <div style="padding: 4px;margin:5px 0">联系方式：${sourceInfo.name}</div>
+                         <div style="padding: 4px;margin:5px 0">联系方式：${sourceInfo.phone}</div>
-                         <div style="padding: 4px;margin:5px 0">车辆类型：${sourceInfo.name}</div>
+                         <div style="padding: 4px;margin:5px 0">车辆类型：${sourceInfo.type}</div>
+                         <div style='display:flex;justify-content: space-between;align-items: center;'>
+                            <div style="width:47%;height:2rem;padding:2px; background-image:url('/images/icon.png');color:#008DFF; background-size:100% 100%; line-height:2rem;text-align:center;">查看轨迹</div>
+                            <div style="width:47%;height:2rem;padding:2px; background-image:url('/images/icon.png');color:#008DFF; background-size:100% 100%; line-height:2rem;text-align:center;">一键呼叫</div>
+                          </div>
                      </div>
                  </div>
             `;
@@ -514,7 +516,6 @@ export default {
 .box {
   width: 100%;
   padding: 10px 15px;
-  height: calc(100% - 84px) !important;
   background: #f1f1f1;
 }
 .box-title {
@@ -527,15 +528,11 @@ export default {
   grid-gap: 20px;
   .top-warper-item {
     padding: 15px;
+    background-size: 100% 100%;
     display: flex;
     width: 100%;
+    
     flex-direction: column;
-    align-items: center;
-    .top-card-icon{
-        width: 2rem;
-        height: 2rem;
-        background-size: 100% 100%;
-    }
   }
 }
 //中间
@@ -568,7 +565,7 @@ export default {
     }
   }
   .center {
-    width: 43%;
+    width: 41%;
     height: 600px;
     #map{
         width: 100%;
@@ -598,8 +595,8 @@ export default {
     }
   }
 }
-@for $i from 1 through 7{
+@for $i from 1 through 7 {
-  .top-icon-#{$i} {
+  .top-img-#{$i} {
     background-image: url(./assets/top#{$i}.png);
   }
 }

god-ui/src/views/index.vue

@@ -30,6 +30,7 @@ import constructionHome from './constructionSiteData/analysis/index.vue'
 import waterHome from './waterHome/index.vue'
 import battery from './battery/index.vue'
 import hlsnHome from './hlsnManage/home/index.vue'
+import engineer from './engineeringVehicle/home/index.vue'
 export default {
   components: {
     HomePage,
@@ -44,7 +45,8 @@ export default {
     constructionHome,
     waterHome,
     battery,
-    hlsnHome
+    hlsnHome,
+    engineer
   },
   data() {
     return {

god-ui/src/views/login.vue

@@ -214,6 +214,11 @@ export default {
           loginDom.style.backgroundImage = 'url(/images/xinnengyuan-bg.png)'
           this.redirect = '/index'
           break;
+        case '9340':
+          document.title = '新疆天山钢铁新能源监控'
+          loginDom.style.backgroundImage = 'url(/images/xinjiang-bg.png)'
+          this.redirect = '/index'
+          break;
         // case '9350':
         //   document.title = '工程车作业管控及人员行为AI智能识别系统'
         //   loginDom.style.backgroundImage = 'url(/images/zuoye.png)'

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

@@ -0,0 +1,279 @@
+<template>
+  <div class="box">
+    <!-- 系统入口 -->
+    <div class="top">
+      <div class="box-title">系统入口</div>
+      <div class="top-item">
+        <div
+          :style="{
+            textAlign: 'center',
+            height: '70px',
+            lineHeight: '70px',
+            boxShadow: '2px 2px 2px #ccc',
+            color: '#fff',
+            background: item.color,
+          }"
+          v-for="(item, index) in topList"
+          :key="index"
+        >
+          <div>{{ item.name }}</div>
+        </div>
+      </div>
+    </div>
+    <!-- 设备统计 -->
+    <div class="statistics">
+      <div class="box-title">设备统计</div>
+      <div class="statistics-warper">
+        <div
+          class="statistics-item"
+          v-for="(item, index) in statisticsList"
+          :key="index"
+        >
+          <div style="margin-bottom: 10px">{{ item.name }}</div>
+          <div
+            style="
+              display: flex;
+              width: 100%;
+              justify-content: space-between;
+              align-items: center;
+            "
+          >
+            <div style="font-family: 'TITLEFONT'; font-size: 20px">
+              {{ item.value }}
+            </div>
+            <div
+              :class="['top-icon-warper', 'top-icon-' + (index + 1).toString()]"
+            ></div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!-- 设备运行统计 -->
+    <div class="device">
+      <div class="box-title">设备运行统计</div>
+      <div>
+        <div id="chart1"></div>
+      </div>
+    </div>
+    <!-- 设备报警 -->
+    <div class="footer"></div>
+  </div>
+</template>
+<script>
+import {
+  generateBaseOptions,
+  generatePieOptions,
+  initChartStatic,
+} from "@/utils/bigscreenTool/index.js";
+export default {
+  data() {
+    return {
+      topList: [
+        {
+          name: "新能源转载机接口对接",
+          color: "#73bfdd",
+          path: "",
+        },
+        {
+          name: "新能源装载机监控",
+          color: "#90cb75",
+          path: "",
+        },
+        {
+          name: "工程设备统一监控",
+          color: "#ed6666",
+          path: "",
+        },
+        {
+          name: "工程数据可视化",
+          color: "#f9c758",
+          path: "",
+        },
+      ],
+      statisticsList: [
+        {
+          name: "设备总数",
+          value: "32",
+          color: "#ed6666",
+        },
+        {
+          name: "已监控设备",
+          value: "28",
+          color: "#2ac2d3",
+        },
+        {
+          name: "未监控设备",
+          value: "4",
+          color: "#f7b400",
+        },
+        {
+          name: "正常运行设备",
+          value: "19",
+          color: "#73bfdd",
+        },
+        {
+          name: "正常停机设备",
+          value: "10",
+          color: "#90cb75",
+        },
+        {
+          name: "维修保养设备",
+          value: "3",
+          color: "#ffd662",
+        },
+      ],
+    };
+  },
+  mounted() {
+    this.initChart1();
+    this.initChart2();
+  },
+  methods: {
+    initChart1() {
+      let xAxisData = [];
+      for (let i = 0; i <= 24; i++) {
+        xAxisData.push(i);
+      }
+      console.log(xAxisData, 98);
+      initChartStatic(
+        "chart1",
+        generateBaseOptions({
+          xAxis: {
+            data: xAxisData,
+            axisTick: {
+              alignWithLabel: true,
+            },
+            axisLine: {
+              show: true,
+              lineStyle: {
+                color: "#25252545",
+              },
+            },
+          },
+          legend: { show: false },
+          yAxis: {
+            type: "value",
+            splitLine: {
+              //网格线
+              show: true, //是否显示
+              lineStyle: {
+                //网格线样式
+                color: "#0735a2", //网格线颜色
+                width: 1, //网格线的加粗程度
+                type: "dashed", //网格线类型
+              },
+            },
+            splitArea: {
+              //网格区域
+              show: true, //是否显示
+            },
+          },
+          color: ["", "#"],
+          series: [
+            {
+              name: "设备停机数量",
+              data: [
+                160, 100, 90, 100, 90, 70, 80, 100, 90, 70, 90, 60, 80, 60, 90,
+                110, 60, 70, 80, 60, 120, 130, 140, 150, 160,
+              ],
+              type: "line",
+              smooth: false,
+              showSymbol: false, //默认展示的时候没有圆圈出现
+              lineStyle: {
+                color: "#cdb1b1",
+              },
+            },
+            {
+              name: "设备运行数量",
+              data: [
+                0, 90, 100, 110, 110, 130, 120, 150, 110, 130, 100, 110, 110,
+                130, 150, 140, 100, 100, 110, 100, 90, 100, 110, 80, 0,
+              ],
+              type: "line",
+              showSymbol: false, //默认展示的时候没有圆圈出现
+              smooth: false,
+              lineStyle: {
+                color: "#23d96e",
+              },
+            },
+          ],
+          grid:{
+            left:'3%',
+            top:'5%',
+            bottom:'10%'
+          }
+        })
+      );
+    },
+    initChart2() {},
+  },
+};
+</script>
+<style lang="scss" scoped>
+@font-face {
+  font-family: "TITLEFONT";
+  src: url(../../../assets/biaoti.ttf);
+}
+.box {
+  width: 100%;
+  height: 100vh;
+  background: #f1f1f1;
+  padding: 10px 15px;
+}
+.box-title {
+  font-family: "TITLEFONT";
+  margin-bottom: 15px;
+}
+//系统入口
+.top {
+  width: 100%;
+  background: #fff;
+  padding: 15px;
+  .top-item {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    grid-column-gap: 50px;
+  }
+}
+//设备统计
+.statistics {
+  width: 100%;
+  background: #fff;
+  padding: 15px;
+  margin-top: 20px;
+  .statistics-warper {
+    display: grid;
+    grid-template-columns: repeat(6, 1fr);
+    grid-column-gap: 20px;
+    .statistics-item {
+      display: flex;
+      padding: 15px;
+      flex-direction: column;
+      align-items: center;
+      box-shadow: 2px 2px 2px #ccc;
+      border: 1px solid #000;
+      .top-icon-warper {
+        width: 2rem;
+        height: 2rem;
+        background-size: 100% 100%;
+      }
+    }
+  }
+}
+// 设备运行统计
+.device {
+  width: 100%;
+  padding: 15px;
+  margin-top: 20px;
+  background: #fff;
+  #chart1 {
+    width: 100%;
+    height: calc(300px - 2rem);
+  }
+}
+@for $i from 1 through 6 {
+  .top-icon-#{$i} {
+    background-image: url(./assets/top#{$i}.png);
+  }
+}
+</style>