Merge branch 'feature_big_screen'

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

@@ -1,69 +1,590 @@
 <template>
-    <div class="bigscreen3-wrapper bigscreen-main-wrapper">
-        <div class="header-main-wrapper">
-            <div class="header-left-part-wrapper">
-                <BigScreenTime />
-            </div>
-            <div class="header-title-wrapper">工业园区安全生产综合服务监测大屏</div>
-            <div class="header-right-part-wrapper"></div>
-        </div>
-        <div class="content-main-wrapper grid-layout">
-            <div class="content-main-item" style="grid-row: span 4;">
-            </div>
-            <div class="content-main-item"></div>
-            <div class="content-main-item"></div>
-            <div class="content-main-item" style="grid-column: span 2;">
-                <div class="bigscreen-item-wrapper">
-                    <div class="bigscreen-item-title item-title-bg">报警中心</div>
-                    <div class="bigscreen-item-content">
-                    </div>
-                </div>
-            </div>
-            <div class="content-main-item" style="grid-column: span 2;">
-                <div class="bigscreen-item-wrapper">
-                    <div class="bigscreen-item-title item-title-bg">能耗比例图</div>
-                    <div class="bigscreen-item-content">
-                    </div>
-                </div>
-            </div>
-            <div class="content-main-item" style="grid-column: span 2;">
-                <div class="bigscreen-item-wrapper">
-                    <div class="bigscreen-item-title item-title-bg">水电能耗统计</div>
-                    <div class="bigscreen-item-content">
-                    </div>
-                </div>
-            </div>
-        </div>
-        <div class="footer-main-wrapper"></div>
+  <div class="bigscreen3-wrapper bigscreen-main-wrapper">
+    <div class="header-main-wrapper">
+      <div class="header-left-part-wrapper">
+        <BigScreenTime />
+      </div>
+      <div class="header-title-wrapper">工业园区安全生产综合服务监测大屏</div>
+      <div class="header-right-part-wrapper"></div>
     </div>
+    <div class="content-main-wrapper grid-layout">
+      <div class="content-main-item left-container" style="grid-row: span 4">
+        <div class="alarm1-wrapper">
+          <div class="wrap-content">
+            <div class="alarm-tip" v-for="(item, index) in alarm1" :key="index">
+              <span class="arrow-bg"></span>
+              <span>{{ item }}</span>
+            </div>
+          </div>
+          <div class="alarm-icon-bg"></div>
+        </div>
+        <div class="alarm2-wrapper">
+          <div class="wrap-content">
+            <div class="alarm-tip" v-for="(item, index) in alarm2" :key="index">
+              <span class="arrow-bg"></span>
+              <span>{{ item }}</span>
+            </div>
+          </div>
+          <div class="alarm-icon-bg hot"></div>
+        </div>
+      </div>
+      <div
+        class="content-main-item"
+        style="
+          grid-row: span 4;
+          display: grid;
+          grid-template-rows: 2fr 3fr 3fr 3fr;
+        "
+      >
+        <div class="content-main-item data-container">
+          <div class="show-data">
+            <div class="data-left">
+              <div class="data-content">
+                <div class="data-title">98台</div>
+                <div class="data-count">设备总数</div>
+              </div>
+            </div>
+            <div class="data-right">
+              <div class="data-right-content">
+                <div class="item-des">
+                  <span class="item-label">正在使用</span
+                  ><span class="item-count">96台</span>
+                </div>
+                <div class="item-des">
+                  <span class="item-label">维修中</span
+                  ><span class="item-count">1台</span>
+                </div>
+                <div class="item-des">
+                  <span class="item-label">已报废</span
+                  ><span class="item-count">1台</span>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="show-data">
+            <div class="data-left">
+              <div class="data-content">
+                <div class="data-title">86条</div>
+                <div class="data-count">报警总数</div>
+              </div>
+            </div>
+            <div class="data-right">
+              <div class="data-right-content">
+                <div class="item-des">
+                  <span class="item-label">已处理</span
+                  ><span class="item-count">83条</span>
+                </div>
+                <div class="item-des">
+                  <span class="item-label">未处理</span
+                  ><span class="item-count">3条</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="item-box">
+          <div class="bigscreen-item-wrapper">
+            <div class="bigscreen-item-title item-title-bg">报警中心</div>
+            <div class="bigscreen-item-content alarm-wrap">
+              <div
+                v-for="(item, index) in lists"
+                :key="index"
+                class="alarm-item"
+              >
+                <span>{{ item.title }}</span>
+                <span>{{ item.time }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="item-box">
+          <div class="bigscreen-item-wrapper">
+            <div class="bigscreen-item-title item-title-bg">能耗比例图</div>
+            <div class="bigscreen-item-content" style="display: grid">
+              <div ref="chart1" :style="{ height: height }"></div>
+            </div>
+          </div>
+        </div>
+        <div class="item-box">
+          <div class="bigscreen-item-wrapper">
+            <div class="bigscreen-item-title item-title-bg">水电能耗统计</div>
+            <div class="bigscreen-item-content">
+              <div ref="chart2" :style="{ height: height }"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 <script>
-import BigScreenTime from '@/utils/bigscreenTool/currentTime.vue'
+import BigScreenTime from "@/utils/bigscreenTool/currentTime.vue";
 import {
-    generateBaseOptions,
-    generatePieOptions,
-    initChartStatic
-} from '@/utils/bigscreenTool/index.js'
-
+  generateBaseOptions,
+  generatePieOptions,
+  initChartStatic,
+} from "@/utils/bigscreenTool/index.js";
+import * as echarts from "echarts";
 export default {
-    components: { BigScreenTime },
-}
+  components: { BigScreenTime },
+  data() {
+    return {
+      height: "100%",
+      pieData: [
+        { value: 86.88, name: "电能" },
+        { value: 2.5, name: "油耗" },
+        { value: 2.5, name: "天然气" },
+        { value: 8.0, name: "煤炭" },
+        { value: 0.12, name: "其他" },
+      ],
+      colors: ["#23E69B", "#66FFFF", "#DFC970", "#1BA3E8", "#DC0EEC"],
+      lists: [
+        {
+          title: "三车间2号线 液压设备PH3689 出现压力异常，请前往处理!",
+          time: "2023-11-05 15:32:03",
+        },
+        {
+          title: "一车间照明设备异常，请前往处理!",
+          time: "2023-11-04 19:32:03",
+        },
+        {
+          title: "三车间 二氧化碳气体浓度超标，请前往处理!",
+          time: "2023-11-04 14:02:26",
+        },
+        {
+          title: "一车间公厕停水，请前往处理!",
+          time: "2023-11-02 09:05:00",
+        },
+      ],
+      alarm1: [
+        "设备名称:监测集成器01",
+        "监测地点:一车间",
+        "气温:26°C",
+        "风速:2M/S",
+        "气压:0.1013Mpa",
+        "噪音: 86dB",
+        "预警内容:一切正常",
+      ],
+      alarm2: [
+        "设备名称:监测集成器05",
+        "监测地点:三车间",
+        "气温:46°C",
+        "风速:2M/S",
+        "气压:0.1013Mpa",
+        "噪音: 86dB",
+        "预警内容:高温预警",
+      ],
+    };
+  },
+  mounted() {
+    this.getEchart1Data();
+    this.getEchart2Data();
+  },
+  methods: {
+    getEchart2Data() {
+      //   calEquipNumPerWeek({ locationId: 0 }).then((response) => {
+
+      this.initchart2();
+      //   });
+    },
+    getEchart1Data() {
+      //   calEquipNumPerWeek({ locationId: 0 }).then((response) => {
+
+      this.initchart1();
+      //   });
+    },
+    initchart1() {
+      let p = new Promise((resolve) => {
+        resolve();
+      });
+      p.then(() => {
+        this.chart1 = echarts.init(this.$refs.chart1);
+        let option = {
+          tooltip: {
+            trigger: "item",
+          },
+          //   color: this.colors,
+          legend: {
+            orient: "vertical",
+            top: "10%",
+            right: "15%",
+            textStyle: {
+              color: "#fff",
+              fontSize: "9",
+            },
+          },
+          series: [
+            {
+              name: "",
+              type: "pie",
+              radius: ["40%", "70%"],
+              center: ["50%", "50%"],
+              // adjust the start angle
+              startAngle: 180,
+              label: {
+                show: true,
+                color: function (param) {
+                  console.log("param.color", param.color);
+                  return param.color;
+                },
+                formatter(param) {
+                  // correct the percentage
+                  return param.name + " (" + param.percent + "%)";
+                },
+              },
+              data: this.pieData,
+            },
+          ],
+        };
+        this.chart1.setOption(option);
+      });
+    },
+    initchart2() {
+      let p = new Promise((resolve) => {
+        resolve();
+      });
+      p.then(() => {
+        this.chart2 = echarts.init(this.$refs.chart2);
+        let option = {
+          xAxis: {
+            type: "category",
+            data: ["5月", "6月", "7月", "8月", "9月", "10月"],
+            axisLine: {
+              lineStyle: {
+                color: "rgba(255,255,255,0.8)",
+                width: 0, //这里是为了突出显示加上的
+              },
+            },
+            axisTick: {
+              show: false, //隐藏x轴刻度
+            },
+            axisLabel: {
+              interval: 0,
+              textStyle: {
+                fontSize: "11",
+              },
+              formatter: (params) => {
+                let newParamsName = "";
+                const paramsNameNumber = params.length;
+                const provideNumber = 7; // 一行显示几个字符
+                const rowNumber = Math.ceil(paramsNameNumber / provideNumber);
+                if (paramsNameNumber > provideNumber) {
+                  /*for (let p = 0; p < rowNumber; p++) {
+                    let tempStr = "";
+                    const start = p * provideNumber;
+                    const end = start + provideNumber;
+                    if (p === rowNumber - 1) {
+                      tempStr = params.substring(start, paramsNameNumber);
+                    } else {
+                      tempStr = params.substring(start, end) + "\n";
+                    }
+                    newParamsName += tempStr;
+                  }*/
+                  newParamsName = params.substring(5, paramsNameNumber);
+                } else {
+                  newParamsName = params;
+                }
+                return newParamsName;
+              },
+            },
+          },
+          yAxis: [
+            {
+              type: "value",
+              name: "kW·h",
+              min: 0,
+              max: 2500,
+              interval: 500,
+              nameLocation: "end",
+              nameTextStyle: {
+                color: "rgba(255,255,255,0.8)",
+                fontSize: "9",
+              },
+              axisLine: {
+                show: false, // 必须显示!!!!!!否则name无效
+                lineStyle: {
+                  color: "rgba(255,255,255,0.5)",
+                },
+              },
+              splitLine: {
+                lineStyle: {
+                  color: "rgba(255,255,255,0.2)",
+                  type: "dashed", //虚线
+                },
+                show: true, //隐藏
+              },
+            },
+            {
+              type: "value",
+              name: "m³",
+              min: 0,
+              max: 500,
+              interval: 100,
+              nameLocation: "end",
+              nameTextStyle: {
+                color: "rgba(255,255,255,0.8)",
+                fontSize: "9",
+              },
+              axisLine: {
+                show: false, // 必须显示!!!!!!否则name无效
+                lineStyle: {
+                  color: "rgba(255,255,255,0.5)",
+                },
+              },
+              splitLine: {
+                lineStyle: {
+                  color: "rgba(255,255,255,0.2)",
+                  type: "dashed", //虚线
+                },
+                show: true, //隐藏
+              },
+            },
+          ],
+          legend: {
+            data: ["电", "水"],
+            textStyle: {
+              //图例文字的样式
+              color: "#fff",
+              fontSize: 9,
+            },
+          },
+          grid: {
+            x: 40,
+            x2: 40,
+            y: 25,
+            y2: 25,
+          },
+          tooltip: {
+            trigger: "axis",
+            axisPointer: {
+              type: "shadow",
+            },
+          },
+          series: [
+            {
+              name: "电",
+              data: [1800, 1445, 1653, 1705, 1509, 1357],
+              yAxisIndex: 0, // 默认使用的是左侧的y轴 左侧的y轴yAxisIndex值为0
+              type: "line",
+              smooth: true,
+              symbol: "circle", //折线点设置为实心点
+              symbolSize: 2, //折线点的大小
+              itemStyle: {
+                normal: {
+                  color: "#FF0000", //折线点的颜色
+                },
+              },
+              lineStyle: {
+                normal: {
+                  width: 2, //波形图波浪的边框
+                  borderWidth: 2,
+                  color: "#FF0000",
+                },
+              },
+            },
+            {
+              name: "水",
+              data: [420, 445, 463, 436, 463, 447],
+              yAxisIndex: 1, // 默认使用的是左侧的y轴 左侧的y轴yAxisIndex值为0
+              type: "line",
+              smooth: true,
+              symbol: "circle", //折线点设置为实心点
+              symbolSize: 2, //折线点的大小
+              itemStyle: {
+                normal: {
+                  color: "#0E9CFF", //折线点的颜色
+                },
+              },
+              lineStyle: {
+                normal: {
+                  width: 2, //波形图波浪的边框
+                  borderWidth: 2,
+                  color: "#0E9CFF",
+                },
+              },
+            },
+          ],
+        };
+        this.chart2.setOption(option);
+      });
+    },
+  },
+};
 </script>
 <style scoped lang="scss">
 @import url(../../utils/bigscreenTool/index.scss);
 .bigscreen3-wrapper {
-    width: 100vw;
-    height: 100vh;
-    .header-main-wrapper {
-    }
+  width: 100vw;
+  height: 100vh;
+  .header-main-wrapper {
+    background-image: url(./assets/titleBg.png);
+  }
+  .current-time-wrapper {
+    color: #30c76f;
+  }
 }
 
 .grid-layout {
-    grid-template-columns: repeat(2, 1fr);
-    grid-template-rows: 14% 28% 30% 28%;
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-rows: 14% 28% 30% 28%;
 }
 
 .item-title-bg {
-    /**标题的背景图 */
+  /**标题的背景图 */
+  background-image: url(./assets/itemTitleBg.png);
 }
-</style>
+.content-main-item {
+  padding: 10px 0 !important;
+  margin-bottom: 0px;
+  &.left-container {
+    position: relative;
+    .alarm1-wrapper {
+      position: absolute;
+      left: 6%;
+      top: 8%;
+    }
+    .alarm2-wrapper {
+      position: absolute;
+      right: 18%;
+      bottom: 18%;
+    }
+    .wrap-content {
+      background-image: url(./assets/tipBox.png);
+      background-size: contain;
+
+      height: 220px;
+      width: 220px;
+      background-repeat: no-repeat;
+      padding: 12px 12px 12px 16px;
+
+      .alarm-tip {
+        margin-bottom: 6px;
+        color: rgba(221, 221, 221, 0.8);
+        .arrow-bg {
+          background-image: url(./assets/arrow.png);
+          background-size: contain;
+          background-repeat: no-repeat;
+          background-position: center;
+          display: inline-block;
+          width: 10px;
+          height: 10px;
+          margin-right: 10px;
+        }
+      }
+    }
+    .alarm-icon-bg {
+      position: absolute;
+      background-image: url(./assets/normalcon.png);
+      background-repeat: no-repeat;
+      width: 40px;
+      height: 40px;
+      right: -44px;
+      bottom: 4px;
+      &.hot {
+        background-image: url(./assets/alarmIcon.png);
+      }
+    }
+  }
+}
+.content-main-wrapper {
+  height: 93%;
+  background-image: url(./assets/contentBg.png);
+}
+.bigscreen-item-content {
+  background: unset;
+}
+.item-box {
+  background: rgba(1, 22, 16, 0.7);
+  &:not(:last-child) {
+    margin-bottom: 10px;
+  }
+}
+.pie-image {
+  background-image: url(./assets/pieBg.png);
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+.pie-container {
+  padding: 3% 5%;
+  .pie-lable {
+    width: 70%;
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 1%;
+    background: #979797;
+    border-bottom: 1px solid #66ffff;
+  }
+}
+.alarm-wrap {
+  padding: 1% 3%;
+  display: grid;
+  align-items: center;
+  .alarm-item {
+    background-image: url(./assets/titleLable.png);
+    background-repeat: no-repeat;
+    background-position: left;
+    padding-left: 28px;
+    margin-bottom: 6px;
+    color: rgba(221, 221, 221, 0.8);
+    display: flex;
+    justify-content: space-between;
+  }
+}
+.data-container {
+  display: grid;
+  grid-template-columns: repeat(2, 48%);
+  grid-gap: 2%;
+  .show-data {
+    border: 1px solid #23e69b;
+    height: 100%;
+    display: grid;
+    grid-template-columns: repeat(2, 50%);
+    .data-left {
+      background-image: url(./assets/iconBg.png);
+      background-repeat: no-repeat;
+      background-position: left;
+      padding-left: 28px;
+      display: flex;
+      align-items: center;
+      flex-flow: row-reverse;
+      padding-right: 28px;
+      .data-content {
+        .data-title {
+          font-size: 22px;
+          font-weight: 600;
+          background-image: -webkit-linear-gradient(top, #6bffba, #03b079);
+          -webkit-background-clip: text;
+          -webkit-text-fill-color: transparent;
+        }
+        .data-count {
+          color: rgba(221, 221, 221, 0.8);
+        }
+      }
+    }
+    .data-right {
+      background-image: url(./assets/brack.png);
+      background-repeat: no-repeat;
+      background-position: left;
+      padding-left: 28px;
+      display: flex;
+      align-items: center;
+      .data-right-content {
+        .item-des {
+          .item-label {
+            color: rgba(221, 221, 221, 0.8);
+            font-size: 12px;
+            margin-right: 16px;
+          }
+          .item-count {
+            background-image: -webkit-linear-gradient(top, #6bffba, #03b079);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            fong-weight: 550;
+          }
+        }
+      }
+    }
+  }
+}
+</style>