feat:重庆海螺水泥有限公司扁鹊设备监测与健康管理平台建设 首页研发

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

@@ -213,7 +213,7 @@ export default {
         "chart2",
         generateBaseOptions({
           xAxis: {
-            data:xAxisData,
+            data:xAxisData.reverse(),
             axisLine: {
                         show: true,
                         lineStyle: {
@@ -319,7 +319,7 @@ export default {
         }
         initChartStatic('chart4', generateBaseOptions({
                 xAxis: {
-                    data: xAxisData
+                    data: xAxisData.reverse()
                 },
                 legend: {
                     // 图例配置

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

@@ -1,27 +1,42 @@
 <template>
   <div class="app-container main-outer-wrapper">
     <div class="top-card-wrapper">
-            <div class="top-card-item-extra" v-for="item in topList">
-                <div class="top-card-icon"></div>
+      <div
+        class="top-card-item-extra"
+        v-for="(item, index) in topList"
+        :key="index"
+      >
+        <div
+          :class="['top-card-icon', 'top-icon-' + (index + 1).toString()]"
+        ></div>
         <div class="top-card-inner">
-                    <div class="top-card-inner-value">25种</div>
-                    <div class="top-card-inner-title">设备种类</div>
+          <div class="top-card-inner-value">{{ item.value }}</div>
+          <div class="top-card-inner-title">{{ item.title }}</div>
         </div>
       </div>
     </div>
     <div class="grid-main-wrapper">
-            <div class="grid-item-wrapper" style="grid-column: span 2;">
+      <div class="grid-item-wrapper" style="grid-column: span 2">
         <div class="grid-item-title">设备基础信息</div>
         <div class="grid-item-content device-basic-wrapper">
-                    <div class="device-basic-item"></div>
-                    <div class="device-basic-item"></div>
+          <div class="device-basic-item" v-for="item,index in mainList" :key="index">
+            <div
+          :class="['top-card-icon', 'top-img-' + (index + 1).toString()]"
+        ></div>
+        <div style="display: flex;height: 100%; justify-content:space-around; flex-direction:column;">
+            <div>{{item.name}}</div>
+            <div>{{item.name2}}</div>
+            <div>{{item.name3}}</div>
+            <div>{{item.name4}}</div>
         </div>
           </div>
-            <div class="grid-item-wrapper">
+        </div>
+      </div>
+      <div class="grid-item-wrapper footer">
         <div class="grid-item-title">XK型油泵输出流量</div>
         <div class="grid-item-content" id="chart1"></div>
       </div>
-            <div class="grid-item-wrapper">
+      <div class="grid-item-wrapper footer">
         <div class="grid-item-title">重型锤式破碎机进料粒度</div>
         <div class="grid-item-content" id="chart2"></div>
       </div>
@@ -29,47 +44,192 @@
   </div>
 </template>
 <script>
+import {
+  generateBaseOptions,
+  generatePieOptions,
+  initChartStatic,
+} from "@/utils/bigscreenTool/index.js";
 export default {
   data() {
     return {
       topList: [
         {
-                    title: '',
-                    value: '',
-                    icon: ''
+          title: "设备种类",
+          value: "25种",
         },
         {
-                    title: '',
-                    value: '',
-                    icon: ''
+          title: "设备总数",
+          value: "123台",
         },
         {
-                    title: '',
-                    value: '',
-                    icon: ''
+          title: "运行中设备",
+          value: "118台",
         },
         {
-                    title: '',
-                    value: '',
-                    icon: ''
+          title: "停运设备",
+          value: "6台",
+          icon: "top4",
         },
         {
-                    title: '',
-                    value: '',
-                    icon: ''
+          title: "对接接口",
+          value: "18种",
+        },
+      ],
+      mainList:[
+        {
+            name:'设备名称：齿轮油泵',
+            name2:'设备型号：KCB-200',
+            name3:'设备状态：良好',
+            name4:'流量范围：1.1~960m³/h',
+        },
+        {
+            name:'设备名称：板式喂料机',
+            name2:'设备型号：XBW150',
+            name3:'槽板宽度：1500mm',
+            name4:'处理能力：61-610t/h',
         },
       ]
-        }
+
+    };
   },
   mounted() {
-        this.initChart1()
-        this.initChart2()
+    this.initChart1();
+    this.initChart2();
   },
   methods: {
-        initChart1() {},
-        initChart2() {},
+    initChart1() {
+      let time = new Date().getHours();
+      let xAxisData = [];
+      for (let i = 0; i < 9; i++) {
+        xAxisData.push(`${time - i}:00`);
       }
-}
+      initChartStatic(
+        "chart1",
+        generateBaseOptions({
+          legend: {
+            show: false,
+            top: "bottom",
+            left: "center",
+          },
+          xAxis: {
+            data: xAxisData.reverse(),
+            axisLine: {
+              show: true,
+            },
+          },
+          yAxis: {
+            type: "value",
+            max:300,
+            min:0,
+            splitNumber : 7.5,
+            axisLabel: {
+              show: true,
+            },
+            splitLine: {
+              //网格线
+              show: true, //是否显示
+              lineStyle: {
+                //网格线样式
+                color: "#0735a2", //网格线颜色
+                width: 1, //网格线的加粗程度
+                type: "dashed", //网格线类型
+              },
+            },
+          },
+          series: [
+            {
+              name: "油泵输出流量",
+              data: [84, 223, 189, 256, 187, 234, 258, 186, 272],
+              type: "line",
+              barWidth: 10,
+              itemStyle: {
+                normal: {
+                  label: {
+                    show: true, //开启显示
+                    position: "top", //在上方显示
+                    textStyle: {
+                      //数值样式
+                      color: "#000",
+                      fontSize: 13,
+                    },
+                  },
+                },
+              },
+            },
+          ],
+          grid: {
+            width: "90%",
+            height: "65%",
+          },
+        })
+      );
+    },
+    initChart2() {
+      initChartStatic(
+        "chart2",
+        generateBaseOptions({
+          legend: {
+            show: false,
+            top: "bottom",
+            left: "center",
+          },
+          xAxis: {
+            data: ["PCZ1308", "PCZ1512", "PCZ1615", "PCZ1802"],
+          },
+        //   color: ,
+          yAxis: {
+            type: "value",
+            axisLabel: {
+              show: true,
+            },
+            splitLine: {
+              //网格线
+              show: true, //是否显示
+              lineStyle: {
+                //网格线样式
+                color: "#0735a2", //网格线颜色
+                width: 1, //网格线的加粗程度
+                type: "dashed", //网格线类型
+              },
+            },
+          },
+          series: [
+            {
+              name: "破碎机进料粒度",
+              data: [800, 1000, 650, 500],
+              type: "bar",
+              barWidth: 40,
+              itemStyle: {
+               
+                normal: {
+                    color:function(params){
+                    var arr=["#61a4e7", "#7ece51", "#edca5f", "#9470e4"]
+                    return arr[params.dataIndex]
+                },
+                  label: {
+                    show: true, //开启显示
+                    position: "top", //在上方显示
+                    textStyle: {
+                      //数值样式
+                      color: "#000",
+                      fontSize: 13,
+                    },
+                  },
+                },
+              },
+            },
+          ],
+          grid: {
+            bottom: "25%",
+            left: "10%",
+            width: "78%",
+            height: "65%",
+          },
+        })
+      );
+    },
+  },
+};
 </script>
 <style scoped lang="scss">
 @import url(../../../styles/mainPage.scss);
@@ -85,11 +245,11 @@ export default {
   box-shadow: 2px 2px 2px #25252525, -2px -2px 2px #14141414;
   border-radius: 6px;
   background-color: white;
-    padding: .6rem .8rem;
+  padding: 0.6rem 0.8rem;
   .top-card-icon {
     width: 3rem;
     height: 3rem;
-        border: 1px solid #000;
+    background-size: 100% 100%;
   }
   .top-card-inner {
     display: flex;
@@ -98,10 +258,10 @@ export default {
     justify-content: center;
     width: calc(100% - 5rem);
     .top-card-inner-title {
-            font-size: .8rem;
+      font-size: 0.8rem;
     }
     .top-card-inner-value {
-            font-family: 'BiaoTiFont';
+      font-family: "BiaoTiFont";
     }
   }
 }
@@ -111,22 +271,43 @@ export default {
     box-shadow: 2px 2px 2px #25252525, -2px -2px 2px #14141414;
     border-radius: 6px;
     .grid-item-title {
-            font-family: 'BiaoTiFont';
+      font-family: "BiaoTiFont";
       font-weight: 500 !important;
-            color: #252525B0;
+      color: #252525b0;
     }
   }
 }
+.footer{
+    height: 300px !important;
 
+}
 /**设备基础信息 */
 .device-basic-wrapper {
   display: grid;
   grid-template-columns: 1fr 1fr;
-    gap: .8rem;
+  gap: 0.8rem;
   .device-basic-item {
+    overflow: hidden;
     border: 1px solid #25252529;
     min-height: 200px;
+    display: grid;
+    grid-template-columns:1fr 1fr ;
     border-radius: 6px;
+    .top-card-icon {
+    width: 15rem;
+    height: 12.5rem;
+    background-size: 100% 100%;
+  }
+  }
+}
+@for $i from 1 through 5 {
+  .top-icon-#{$i} {
+    background-image: url(./assets/top#{$i}.png);
+  }
+}
+@for $i from 1 through 2 {
+  .top-img-#{$i} {
+    background-image: url(./assets/img#{$i}.png);
   }
 }
 </style>