成航发看板

imcs-ui/src/views/zuihou/chfLargeScreen/jiankong/Index.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="container">
+    <div style="width: 50%;height: 100%;">
+      <div class="a">
+        <div style="color: green; font-size: 4vh;margin-top: 10%; text-align: center;">
+          实时监控1
+        </div>
+        <div style="height: 50%; width: 100%;border: 1px solid red;;margin-top: 5%;">
+          <iframe
+            src=""
+            frameborder="0"
+          />
+        </div>
+      </div>
+      <div class="b">
+        <div style="color: green; font-size: 4vh;margin-top: 10%; text-align: center;">
+          实时监控2
+        </div>
+        <div style="height: 50%; width: 100%;border: 1px solid red;;margin-top: 5%;">
+          <iframe
+            src=""
+            frameborder="0"
+          />
+        </div>
+      </div>
+    </div>
+    <div class="c">
+      <div style="font-size: 4vh; text-align: center;margin: 10%;">
+        <p style="margin-bottom: 10%;color: green;">
+          盘加工柔性智能生产线介绍
+        </p>
+        <p style="font-size: 4vh;color: green; letter-spacing:1vh; text-align: left;">
+          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;采用3台五轴联动加工中心(以下简称“五轴加工中心”)及其自动化辅助系统组成一条自动化精密机加制造系统。通过自动化辅助系统对于五轴加工中心的工艺流程进行管理和监控，将生产单元内各生产要素进行有机集成，实现零件的自动输送、防碰撞、自动定位、自动加工、自动清洁及自动检测，实现集成管理功能，确保产品加工过程稳定、产品质量受控，实现多品种、小批量产品的自动化生产。
+        </p>
+      </div>
+    </div>
+  </div>
+</template>
+<script></script>
+<style scoped>
+.container {
+  height: 100%;
+  width: 100%;
+  display: flex;
+  .a {
+    border: 1px solid #000;
+    height: 50%;
+    padding: 0 10%;
+
+  }
+  .b {
+    border: 1px solid #000;
+    height: 50%;
+    padding: 0 10%;
+  }
+  .c {
+    width: 50%;
+    height: 100%;
+    border: 1px solid #000;
+  }
+}
+</style>

imcs-ui/src/views/zuihou/chfLargeScreen/twoDatasModel/Index.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="DataContainer">
+    <Header class="header" />
+    <Main class="main" />
+    <Sidebar class="sidebar" />
+  </div>
+</template>
+<script>
+import Header from './component/header.vue'
+import Main from './component/main.vue'
+import Sidebar from './component/sidebar.vue';
+export default {
+  name: "TwoDatasModel",
+  components: {
+    Header,
+    Main,
+    Sidebar
+  }
+}
+</script>
+<style lang="scss" scoped>
+.DataContainer {
+  display: grid;
+  grid-template-areas:
+    "header header header"
+    "main main sidebar";
+  grid-template-rows: 10% 1fr;
+  grid-template-columns: 33% 33% 33% 1fr;
+  height: 100vh;
+  width: 100vw;
+  overflow: hidden;
+  background: #020718;
+  color: #fff;
+  background-image: url(../../../../assets/yunMap/yunBg.png) no-repeat;
+}
+.header {
+  grid-area: header;
+}
+.main {
+  grid-area: main;
+}
+.sidebar {
+  grid-area: sidebar;
+}
+</style>

imcs-ui/src/views/zuihou/chfLargeScreen/twoDatasModel/component/header.vue

@@ -0,0 +1,82 @@
+<template>
+  <div class="platformDivNew">
+    <div class="headerBg headerNwBg">
+      <div class="headerTitle">
+        盘加工柔性生产线智能监控平台
+      </div>
+      <div class="headerTime">
+        {{ time }}
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      time: "",
+    };
+  },
+  mounted() {
+    setInterval(() => {
+      this.getTime();
+    }, 1000);
+  },
+  methods: {
+    getTime() {
+      var myDate = new Date();
+      var date = myDate.toLocaleDateString();
+      var hours =
+        myDate.getHours() < 10 ? "0" + myDate.getHours() : myDate.getHours();
+      var minutes =
+        myDate.getMinutes() < 10
+          ? "0" + myDate.getMinutes()
+          : myDate.getMinutes();
+      var seconds =
+        myDate.getSeconds() < 10
+          ? "0" + myDate.getSeconds()
+          : myDate.getSeconds();
+      this.time = date + " " + hours + ":" + minutes + ":" + seconds;
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.platformDivNew {
+  background: url(../../../../../assets/yunMap/bg_all.png);
+  background-position: 50% 0;
+  background-size: 100% 100%;
+  width: 100%;
+  height: auto;
+  min-height: 100%;
+  margin: 0 auto;
+  padding: 10px 20px;
+  box-sizing: border-box;
+  text-align: center;
+  color: #ffffff;
+  overflow-y: auto;
+  .headerTitle {
+    position: relative;
+    top: 0.6vw;
+    font-family: "微软雅黑";
+    font-size: 3vh;
+    text-shadow: 0.1vw 0.2vw 0.25vw #ece9e9;
+    letter-spacing: 0.3vw;
+  }
+  .headerTime {
+    position: relative;
+    top: 0.6vw;
+    font-family: "微软雅黑";
+    font-size: 2vh;
+    text-shadow: 0.1vw 0.2vw 0.25vw #ece9e9;
+    letter-spacing: 0.3vw;
+    left: 40%;
+  }
+  .headerBg.headerNwBg {
+    background: url(../../../../..//assets/yunMap/bg_nw_header.png) no-repeat;
+    background-size: 100% 100%;
+    height: 100%;
+    width: 100%;
+  }
+}
+</style>

imcs-ui/src/views/zuihou/chfLargeScreen/twoDatasModel/component/machine.vue

@@ -0,0 +1,272 @@
+<template>
+  <div class="machine-container">
+    <div class="main">
+      <img
+        src="../../../../../assets/device/machine.png"
+        alt="Machine"
+        style="height: 100%; width: 100%;"
+      >
+      <div
+        v-if="!isOnline"
+        class="offLine"
+      >
+        离线
+      </div>
+      <div
+        v-if="isOnline"
+        class="onLine"
+      >
+        在线
+      </div>
+    </div>
+    <div class="title">
+      {{ title }}
+    </div>
+    <div
+      ref="echarts"
+      class="chart"
+    />
+  </div>
+  </div>
+</template>
+<script>
+// Echarts的组件
+import * as echarts from "echarts";
+import "echarts-liquidfill"; // 水球图
+export default {
+  name: "Machine",
+  props: {
+    status: {
+      type: String,
+      default: () => {
+        return "offLine";
+      },
+    },
+    title: {
+      type: String,
+      default: () => {
+        return "GMU800AVI-1";
+      },
+    },
+    progress: {
+      type: Number || String,
+      default: () => {
+        return 0;
+      },
+    },
+    isOnline: {
+      type: Boolean,
+      default: () => {
+        return false;
+      }
+    }
+  },
+  data() {
+    return {};
+  },
+  mounted() {
+    this.alarm(this.progress);
+  },
+  methods: {
+    //水球图
+    alarm(value,) {
+      value = value == 0 ? 0 : value;
+      this.myChartThree = echarts.init(
+        this.$refs.echarts
+      );
+      var option = {
+        title: [
+          {
+            text: value * 100 + "%",
+            top: "25%",
+            left: "40%",
+            textStyle: {
+              fontSize: "20",
+              fontWeight: "300",
+              color: "#fff",
+            },
+          },
+        ],
+        series: [
+          {
+            name: "最外层-虚线",
+            type: "gauge",
+            radius: "97%",
+            center: ["58%", "50%"],
+            startAngle: 0,
+            endAngle: 360,
+            axisLine: {
+              show: false,
+            },
+            axisTick: {
+              distance: -6,
+              length: 2,
+              lineStyle: {
+                color: "#2AECFF",
+                width: 5,
+                type: [20],
+                dashOffset: 19,
+                opacity: 0.8,
+              },
+              splitNumber: 6,
+            },
+            splitLine: {
+              show: false,
+            },
+            axisLabel: {
+              show: false,
+            },
+            pointer: {
+              show: false,
+            },
+          },
+          {
+            type: "liquidFill",
+            radius: "85%",
+            z: 5,
+            center: ["58%", "50%"],
+            amplitude: 14,
+            backgroundStyle: {
+              color: "#0d2d42",
+            },
+            color: [
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#0061A2",
+                  },
+                  {
+                    offset: 0,
+                    color: "#00FFE5",
+                  },
+                ],
+                globalCoord: false,
+              },
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#0061A2",
+                  },
+                  {
+                    offset: 0,
+                    color: "#00FFE5",
+                  },
+                ],
+                globalCoord: false,
+              },
+              {
+                type: "linear",
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [
+                  {
+                    offset: 1,
+                    color: "#0061A2",
+                  },
+                  {
+                    offset: 0,
+                    color: "#00FFE5",
+                  },
+                ],
+                globalCoord: false,
+              },
+            ],
+            data: [
+              value + 0.02,
+              {
+                value: value - 0.01,
+                direction: "left",
+              },
+              value - 0.01,
+            ],
+            label: {
+              normal: {
+                formatter: "",
+              },
+            },
+            outline: {
+              show: true,
+              borderDistance: 0,
+              itemStyle: {
+                borderWidth: 2,
+                borderColor: "#2AECFF",
+              },
+            },
+          },
+        ],
+      };
+
+      this.myChartThree.setOption(option);
+    },
+  },
+};
+</script>
+<style lang="css" scoped>
+.machine-container {
+  width: 80%;
+  background-color: #90aab2;
+  position: relative;
+  left: 15%;
+  border-radius: 10px;
+  .main {
+    position: relative;
+    height: 70%;
+    .offLine {
+      position: absolute;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      top: 60%;
+      height: 20%;
+      width: 20%;
+      background-color: grey;
+      color: #ffffff;
+      font-size: 2vh;
+      border-radius: 5px;
+    }
+    .onLine {
+      position: absolute;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      top: 60%;
+      height: 20%;
+      width: 20%;
+      background-color: yellow;
+      color: #000;
+      font-size: 2vh;
+      border-radius: 5px;
+    }
+  }
+
+  .title {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 30%;
+    font-size: 2vw;
+    color: yellow;
+  }
+  .chart {
+    height: 30%;
+    width: 30%;
+    position: absolute;
+    top: 10%;
+    left: -5%;
+  }
+}
+</style>

imcs-ui/src/views/zuihou/chfLargeScreen/twoDatasModel/component/main-item.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="item-container">
+    <machine />
+    <Order
+      title="当前加工订单"
+      :column="columnNow"
+    />
+    <Progress title="当前加工订单进度" />
+    <Order
+      title="待加工订单"
+      :column="columnNow"
+    />
+    <Order
+      title="维保倒计时"
+      :column="columnTime"
+    />
+  </div>
+</template>
+<script>
+import machine from "./machine.vue";
+import Order from "./order.vue";
+import Progress from "./progress.vue";
+export default {
+  components: {
+    machine,
+    Order,
+    Progress,
+  },
+  data() {
+    return {
+      columnNow: [
+        { prop: "name", label: "订单号" },
+        { prop: "name", label: "零件数量" },
+        { prop: "name", label: "已生产" },
+        { prop: "name", label: "交付时间" },
+      ],
+      columnTime: [
+        { prop: "name", label: "设备" },
+        { prop: "name", label: "剩余时间" },
+      ]
+    };
+  },
+};
+</script>
+<style lang="scss" scoped>
+.item-container {
+  height: 100%;
+  width: 100%;
+  display: grid;
+  grid-template-rows: 20% 20% 20% 20% 20%;
+  gap: 10px;
+}
+</style>

imcs-ui/src/views/zuihou/chfLargeScreen/twoDatasModel/component/main.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="mainCOntainer">
+    <div class="one">
+      <mainItem />
+    </div>
+    <div class="two">
+      <mainItem />
+    </div>
+    <div class="three">
+      <mainItem />
+    </div>
+  </div>
+</template>
+<script>
+import mainItem from './main-item.vue';
+export default {
+components: {
+  mainItem
+}
+}
+</script>
+<style lang="scss" scoped>
+.mainCOntainer {
+display: grid;
+  grid-template-areas:
+    "a b c";
+    grid-template-columns: 33% 33% 33%;
+  height: 100%;
+  width: 100%;
+  gap: 10px;
+}
+
+</style>

imcs-ui/src/views/zuihou/chfLargeScreen/twoDatasModel/component/metric-component.vue

@@ -0,0 +1,81 @@
+<template>
+  <div class="Metric">
+    <div style="grid-area: title; font-size: 1.5vh">
+      指标达成情况
+    </div>
+    <div
+      style="grid-area: week"
+      class="week-container"
+    >
+      <div
+        class="icon"
+        style="font-size: 6vh;color:#28bde0"
+      >
+        <el-icon class="el-icon-s-platform" />
+      </div>
+      <div class="week">
+        <div
+          style="
+            border-bottom: 1px solid #fff;
+            margin-right: 0.5vh;
+            padding-bottom: 5%;
+          "
+        >
+          周生产指标
+        </div>
+        <div style="font-size: 3vh">
+          4800件
+        </div>
+      </div>
+    </div>
+    <div
+      style="grid-area: project"
+      class="week-container"
+    >
+      <div
+        class="icon"
+        style="font-size: 6vh;color:#28bde0"
+      >
+        <el-icon class="el-icon-eleme" />
+      </div>
+      <div class="week">
+        <div
+          style="
+            border-bottom: 1px solid #fff;
+            margin-right: 2vh;
+            padding-bottom: 5%;
+          "
+        >
+          项目进度
+        </div>
+        <div style="margin-bottom: 2vh; font-size: 3vh">
+          4800件
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+</script>
+<style lang="scss" scoped>
+.Metric {
+  display: grid;
+  grid-template-areas:
+    "title title title"
+    "week project Placeholder";
+  grid-template-columns: 40% 40% 1fr;
+  grid-template-rows: 20% 60%;
+  column-gap: 10%;
+  .week-container {
+    display: grid;
+    grid-template-areas: "icon week";
+    grid-template-columns: 30% 1fr;
+    grid-template-rows: 1fr;
+    font-size: 1.5vh;
+    background-color: #457f968c;
+    padding: 10% 5%;
+    column-gap: 10%;
+  }
+
+}
+</style>

imcs-ui/src/views/zuihou/chfLargeScreen/twoDatasModel/component/order.vue

@@ -0,0 +1,86 @@
+<template>
+  <div class="order">
+    <div class="title">
+      {{ title }}
+    </div>
+    <el-table
+      :data="tableData"
+      style="width: 100%;"
+    >
+      <el-table-column
+        v-for="item in column"
+        :key="item.prop"
+        :prop="item.prop"
+        :label="item.label"
+      />
+    </el-table>
+  </div>
+</template>
+<script>
+export default {
+  name: 'OrderNow',
+  props: {
+    title: {
+      type: String,
+      default: '试试看'
+    },
+    tableData: {
+      type: Array,
+      default: () => [{name:123}]
+    },
+    column: {
+      type: Array,
+      default: () => [
+        {
+          prop: 'name',
+          label: '订单号'
+        },
+        {
+          prop: 'name',
+          label: '零件数量'
+        },
+        {
+          prop: 'name',
+          label: '已生产'
+        },
+        {
+          prop: 'name',
+          label: '交付时间'
+        },
+      ]
+    }
+  },
+  data () {
+    return {
+
+    }
+  },
+  methods: {
+  }
+}
+</script>
+<style scoped lang="scss">
+.order {
+  position: relative;
+  left: 15%;
+  width: 78%;
+}
+.title {
+  font-size: 2vh;
+  color: #28bde0;
+  margin-bottom: 1vh;
+}
+/*最外层透明*/
+/deep/ .el-table, /deep/ .el-table__expanded-cell{
+  background-color: transparent;
+}
+/* 表格内背景颜色 */
+/deep/ .el-table th {
+  background-color: #457f968c;
+
+}
+/deep/ .el-table tr,
+/deep/ .el-table td {
+  background-color: transparent;
+}
+</style>

imcs-ui/src/views/zuihou/chfLargeScreen/twoDatasModel/component/production-condition.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="production-condition">
+    <div style="display: flex;align-items: center;color: #28bde0; font-size: 6vh;">
+      <el-icon class="el-icon-s-order" />
+    </div>
+    <div style="display: flex;align-items: center;">
+      产出情况
+    </div>
+    <div style="font-size: 1.5vh;">
+      <div style="display: flex;margin: 5% 5% 0;justify-content: space-around;">
+        <div style="width: 50%;width: 60%;">
+          在库待加工件数
+        </div>
+        <div style="font-size: 2vh;width: 40%;">
+          328
+        </div>
+      </div>
+      <div style="display: flex;justify-content: space-around;margin: 5%">
+        <div style="width: 60%;">
+          在库已加工件数
+        </div>
+        <div style="font-size: 2vh;width: 40%;">
+          328
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<style scoped>
+.production-condition {
+  height: 40%;
+  display: grid;
+  grid-template-columns: 20% 30% 1fr;
+  grid-template-rows: 1fr 1fr;
+  background-color: #457f968c;
+}
+</style>

imcs-ui/src/views/zuihou/chfLargeScreen/twoDatasModel/component/progress.vue

@@ -0,0 +1,86 @@
+<template>
+  <div class="progress">
+    <div class="title">
+      {{ title }}
+    </div>
+    <el-table
+      :data="tableData"
+      style="height: 60%;"
+    >
+      <el-table-column
+        v-for="item in column"
+        :key="item.prop"
+        :prop="item.prop"
+        :label="item.label"
+      />
+    </el-table>
+    <el-progress
+      :percentage="50"
+    />
+  </div>
+</template>
+<script>
+export default {
+  name: "Progress",
+  props: {
+    title: {
+      type: String,
+      default: "试试看",
+    },
+    tableData: {
+      type: Array,
+      default: () => [{name:123}],
+    },
+    column: {
+      type: Array,
+      default: () => [
+        {
+          prop: "name",
+          label: "订单号",
+        },
+        {
+          prop: "name",
+          label: "零件数量",
+        },
+        {
+          prop: "name",
+          label: "已生产",
+        },
+        {
+          prop: "name",
+          label: "交付时间",
+        },
+      ],
+    },
+  },
+  data() {
+    return {};
+  },
+  methods: {},
+};
+</script>
+<style scoped lang="scss">
+.progress {
+  position: relative;
+  left: 15%;
+  width: 78%;
+}
+.title {
+  font-size: 2vh;
+  color: #28bde0;
+  margin-bottom: 1vh;
+}
+/*最外层透明*/
+/deep/ .el-table,
+/deep/ .el-table__expanded-cell {
+  background-color: transparent;
+}
+/* 表格内背景颜色 */
+/deep/ .el-table th {
+  background-color: #457f968c;
+}
+/deep/ .el-table tr,
+/deep/ .el-table td {
+  background-color: transparent;
+}
+</style>

imcs-ui/src/views/zuihou/chfLargeScreen/twoDatasModel/component/sidebar.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="sidebarCOntainer">
+    <Metric />
+    <productionCondition />
+    <productionCondition />
+    <div>
+      <img
+        src="../../../../../assets/logo/productLine.png"
+        style="height: 100%;width: 100%;"
+      >
+    </div>
+  </div>
+</template>
+<script>
+import Metric from './metric-component.vue';
+import productionCondition from './production-condition.vue'
+export default {
+components: {
+  Metric,
+  productionCondition
+}
+}
+</script>
+<style lang="scss" scoped>
+.sidebarCOntainer {
+  font-size: 2vh;
+  display: grid;
+  grid-template-rows: 20% 20% 20% 1fr;
+  grid-gap: 1vh;
+}
+</style>