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,132 +1,313 @@
 <template>
-    <div class="app-container main-outer-wrapper">
+  <div class="app-container main-outer-wrapper">
-        <div class="top-card-wrapper">
+    <div class="top-card-wrapper">
-            <div class="top-card-item-extra" v-for="item in topList">
+      <div
-                <div class="top-card-icon"></div>
+        class="top-card-item-extra"
-                <div class="top-card-inner">
+        v-for="(item, index) in topList"
-                    <div class="top-card-inner-value">25种</div>
+        :key="index"
-                    <div class="top-card-inner-title">设备种类</div>
+      >
-                </div>
+        <div
-            </div>
+          :class="['top-card-icon', 'top-icon-' + (index + 1).toString()]"
-        </div>
+        ></div>
-        <div class="grid-main-wrapper">
+        <div class="top-card-inner">
-            <div class="grid-item-wrapper" style="grid-column: span 2;">
+          <div class="top-card-inner-value">{{ item.value }}</div>
-                <div class="grid-item-title">设备基础信息</div>
+          <div class="top-card-inner-title">{{ item.title }}</div>
-                <div class="grid-item-content device-basic-wrapper">
-                    <div class="device-basic-item"></div>
-                    <div class="device-basic-item"></div>
-                </div>
-            </div>
-            <div class="grid-item-wrapper">
-                <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-title">重型锤式破碎机进料粒度</div>
-                <div class="grid-item-content" id="chart2"></div>
-            </div>
         </div>
+      </div>
     </div>
+    <div class="grid-main-wrapper">
+      <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" 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>
+      </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 footer">
+        <div class="grid-item-title">重型锤式破碎机进料粒度</div>
+        <div class="grid-item-content" id="chart2"></div>
+      </div>
+    </div>
+  </div>
 </template>
 <script>
+import {
+  generateBaseOptions,
+  generatePieOptions,
+  initChartStatic,
+} from "@/utils/bigscreenTool/index.js";
 export default {
-    data() {
+  data() {
-        return {
+    return {
-            topList: [
+      topList: [
-                {
+        {
-                    title: '',
+          title: "设备种类",
-                    value: '',
+          value: "25种",
-                    icon: ''
+        },
+        {
+          title: "设备总数",
+          value: "123台",
+        },
+        {
+          title: "运行中设备",
+          value: "118台",
+        },
+        {
+          title: "停运设备",
+          value: "6台",
+          icon: "top4",
+        },
+        {
+          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();
+  },
+  methods: {
+    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,
+                    },
+                  },
                 },
-                {
+              },
-                    title: '',
+            },
-                    value: '',
+          ],
-                    icon: ''
+          grid: {
-                },
+            width: "90%",
-                {
+            height: "65%",
-                    title: '',
+          },
-                    value: '',
+        })
-                    icon: ''
+      );
-                },
-                {
-                    title: '',
-                    value: '',
-                    icon: ''
-                },
-                {
-                    title: '',
-                    value: '',
-                    icon: ''
-                },
-            ]
-        }
     },
-    mounted() {
+    initChart2() {
-        this.initChart1()
+      initChartStatic(
-        this.initChart2()
+        "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%",
+          },
+        })
+      );
     },
-    methods: {
+  },
-        initChart1() {},
+};
-        initChart2() {},
-    }
-}
 </script>
 <style scoped lang="scss">
 @import url(../../../styles/mainPage.scss);
 .top-card-wrapper {
-    grid-template-columns: repeat(5, 1fr);
+  grid-template-columns: repeat(5, 1fr);
 }
 .top-card-item-extra {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid #25252525;
+  border-radius: 6px;
+  box-shadow: 2px 2px 2px #25252525, -2px -2px 2px #14141414;
+  border-radius: 6px;
+  background-color: white;
+  padding: 0.6rem 0.8rem;
+  .top-card-icon {
+    width: 3rem;
+    height: 3rem;
+    background-size: 100% 100%;
+  }
+  .top-card-inner {
     display: flex;
+    flex-direction: column;
     align-items: center;
     justify-content: center;
-    border: 1px solid #25252525;
+    width: calc(100% - 5rem);
-    border-radius: 6px;
+    .top-card-inner-title {
-    box-shadow: 2px 2px 2px #25252525, -2px -2px 2px #14141414;
+      font-size: 0.8rem;
-    border-radius: 6px;
-    background-color: white;
-    padding: .6rem .8rem;
-    .top-card-icon {
-        width: 3rem;
-        height: 3rem;
-        border: 1px solid #000;
     }
-    .top-card-inner {
+    .top-card-inner-value {
-        display: flex;
+      font-family: "BiaoTiFont";
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        width: calc(100% - 5rem);
-        .top-card-inner-title {
-            font-size: .8rem;
-        }
-        .top-card-inner-value {
-            font-family: 'BiaoTiFont';
-        }
     }
+  }
 }
 .grid-main-wrapper {
-    grid-template-columns: 1fr 1fr;
+  grid-template-columns: 1fr 1fr;
-    .grid-item-wrapper {
+  .grid-item-wrapper {
-        box-shadow: 2px 2px 2px #25252525, -2px -2px 2px #14141414;
+    box-shadow: 2px 2px 2px #25252525, -2px -2px 2px #14141414;
-        border-radius: 6px;
+    border-radius: 6px;
-        .grid-item-title {
+    .grid-item-title {
-            font-family: 'BiaoTiFont';
+      font-family: "BiaoTiFont";
-            font-weight: 500 !important;
+      font-weight: 500 !important;
-            color: #252525B0;
+      color: #252525b0;
-        }
     }
+  }
 }
+.footer{
+    height: 300px !important;
 
+}
 /**设备基础信息 */
 .device-basic-wrapper {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.8rem;
+  .device-basic-item {
+    overflow: hidden;
+    border: 1px solid #25252529;
+    min-height: 200px;
     display: grid;
-    grid-template-columns: 1fr 1fr;
+    grid-template-columns:1fr 1fr ;
-    gap: .8rem;
+    border-radius: 6px;
-    .device-basic-item {
+    .top-card-icon {
-        border: 1px solid #25252529;
+    width: 15rem;
-        min-height: 200px;
+    height: 12.5rem;
-        border-radius: 6px;
+    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>