init2

src/views/bigScreen/components/bigScreenBtn/index.vue

@@ -0,0 +1,55 @@
+
+
+<template>
+  <div class="bigScreenBtn" :class="{selected:selected}">
+    <div>{{title}}</div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'BigScreenBtn',
+  props: {
+    title: {
+      type: String,
+      default: '按钮',
+    },
+    selected: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data () {
+    return {
+
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.bigScreenBtn {
+  cursor: pointer;
+  user-select: none;
+  width: 125px;
+  height: 32px;
+  line-height: 25px;
+  padding-left: 22px;
+  box-sizing: border-box;
+  font-size: 18px;
+  font-family: PingFangSC-Semibold, PingFang SC;
+  font-weight: initial;
+  color: rgba(255, 255, 255, 0.6);
+  background-size: 100% 100%;
+  background-image: url(./default.png);
+}
+.bigScreenBtn:hover {
+    opacity: .8;
+}
+
+.bigScreenBtn.selected {
+  font-weight: 600;
+  color: #ffffff;
+  background-image: url(./selected.png);
+}
+</style>

src/views/bigScreen/components/bigScreenHead/index.vue

@@ -0,0 +1,74 @@
+
+
+<template>
+  <div class="bigScreenHead">
+    <div class="tit">驾驶舱总览</div>
+    <el-row style="width: 100%;">
+      <el-col :span="8">
+        <el-row style="padding: 0px 20px">
+          <el-col :span="8">
+            <bigScreenBtn title="驾驶舱总览" :selected="true"></bigScreenBtn>
+          </el-col>
+          <el-col :span="8">
+            <bigScreenBtn title="科研生产" :selected="false"></bigScreenBtn>
+          </el-col>
+          <el-col :span="8">
+            <bigScreenBtn title="经营管理" :selected="false"></bigScreenBtn>
+          </el-col>
+        </el-row>
+      </el-col>
+      <el-col :span="8" style="min-height: 1px">
+      </el-col>
+      <el-col :span="8">
+        <el-row style="padding: 0px 0 0 60px">
+          <el-col :span="8">
+            <bigScreenBtn title="质量管理" :selected="false"></bigScreenBtn>
+          </el-col>
+          <el-col :span="8">
+            <bigScreenBtn title="安全管理" :selected="false"></bigScreenBtn>
+          </el-col>
+          <el-col :span="8">
+            <bigScreenBtn title="信息化管理" :selected="false"></bigScreenBtn>
+          </el-col>
+        </el-row>
+      </el-col>
+    </el-row>
+
+  </div>
+</template>
+
+<script>
+
+import bigScreenBtn from "../bigScreenBtn/index.vue";
+export default {
+  name: 'BigScreenHead',
+  props: {},
+  components: {
+    bigScreenBtn
+  },
+  data () {
+    return {
+
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.bigScreenHead {
+  width: 1920px;
+  height: 100px;
+  background-image: url(./bg.png);
+  background-size: 100% 80px;
+  background-repeat: no-repeat;
+  .tit {
+    font-size: 36px;
+    font-family: YouSheBiaoTiHei;
+    color: #91d5fe;
+    line-height: 47px;
+    letter-spacing: 6px;
+    text-align: center;
+    padding-top: 13px;
+  }
+}
+</style>

src/views/bigScreen/components/container1/index.vue

@@ -0,0 +1,82 @@
+
+
+<template>
+  <div class="container1">
+      <div class="content">
+            <slot />
+            <div class="spot spot1"></div>
+            <div class="spot spot2"></div>
+            <div class="spot spot3"></div>
+            <div class="spot spot4"></div>
+      </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Container1',
+  props: {
+    title: {
+      type: String,
+      default: '',
+    },
+    selected: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data () {
+    return {
+
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+
+.container1 {
+    width: 535px;
+    padding: 7px 0;
+    border-top: 1px solid rgba(84,130,189);
+    border-bottom: 1px solid rgba(84,130,189);
+    font-size: 18px;
+    font-family: PingFangSC-Semibold, PingFang SC;
+    font-weight: 600;
+    color: #FFFFFF;
+    .content {
+        position: relative;
+        height: 161px;
+        background-color: rgba(2, 18, 63, 0.2);
+        border-top: 1px solid #91D5FE;
+        border-bottom: 1px solid #91D5FE;
+        .spot {
+            position: absolute;
+            width: 6px;
+            height: 6px;
+            background-color: #91D5FE;
+            border-radius: 50%;
+        }
+        .spot1 {
+            top: -3px;
+            left: 0;
+        }
+        .spot2 {
+            top: -3px;
+            right: 0;
+        }
+        .spot3 {
+            bottom: -3px;
+            left: 0;
+        }
+        .spot4 {
+            bottom: -3px;
+            right: 0;
+        }
+    }
+
+}
+
+
+
+</style>

src/views/bigScreen/components/container2/index.vue

@@ -0,0 +1,66 @@
+
+
+<template>
+  <div class="container2">
+    <div class="tit"><rocketTit>{{title}}</rocketTit></div>
+      <div class="content">
+        <slot />
+      </div>
+  </div>
+</template>
+
+<script>
+import rocketTit from "../rocketTit/index.vue";
+
+export default {
+  name: 'Container2',
+  components: {
+    rocketTit,
+  },
+  props: {
+    title: {
+      type: String,
+      default: '',
+    },
+    selected: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data () {
+    return {
+
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+
+.container2 {
+    display: flex;
+    flex-direction: column;
+    width: 536px;
+    height: 394px;
+    background-image: url(./bg.png);
+    background-size: cover;
+    color: #FFFFFF;
+    font-size: 16px;
+    font-family: PingFangSC-Semibold, PingFang SC;
+    font-weight: 600;
+
+    .tit {
+      padding: 16px 16px 16px 24px;
+    }
+    .content {
+      flex: 1;
+      padding: 2px;
+      box-sizing: border-box;
+      overflow: hidden;
+    }
+
+}
+
+
+
+</style>

src/views/bigScreen/components/container3/index.vue

@@ -0,0 +1,39 @@
+
+
+<template>
+  <div class="container3">
+    <slot />
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'Container3',
+  props: {
+    title: {
+      type: String,
+      default: '',
+    },
+    selected: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data () {
+    return {
+
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.container3 {
+  width: 766px;
+  height: 632px;
+  background-image: url(./bg.png);
+  background-size: cover;
+  overflow: hidden;
+}
+</style>

src/views/bigScreen/components/container4/index.vue

@@ -0,0 +1,66 @@
+
+
+<template>
+  <div class="container2">
+    <div class="tit"><rocketTit>{{title}}</rocketTit></div>
+      <div class="content">
+        <slot />
+      </div>
+  </div>
+</template>
+
+<script>
+import rocketTit from "../rocketTit/index.vue";
+
+export default {
+  name: 'Container2',
+  components: {
+    rocketTit,
+  },
+  props: {
+    title: {
+      type: String,
+      default: '',
+    },
+    selected: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data () {
+    return {
+
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+
+.container2 {
+    display: flex;
+    flex-direction: column;
+    width: 930px;
+    height: 311px;
+    background-image: url(./bg.png);
+    background-size: cover;
+    color: #FFFFFF;
+    font-size: 16px;
+    font-family: PingFangSC-Semibold, PingFang SC;
+    font-weight: 600;
+
+    .tit {
+      padding: 16px 16px 16px 24px;
+    }
+    .content {
+      flex: 1;
+      padding: 2px;
+      box-sizing: border-box;
+      overflow: hidden;
+    }
+
+}
+
+
+
+</style>

src/views/bigScreen/components/rocketTit/index.vue

@@ -0,0 +1,52 @@
+
+
+<template>
+  <div class="rocketTit">
+      <img class="rocket" src="./rocket.png" alt="">
+      <span><slot /></span>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'RocketTit',
+  props: {
+    title: {
+      type: String,
+      default: '',
+    },
+    selected: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data () {
+    return {
+
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+
+.rocket {
+    width: 17.5px;
+    height: 17.5px;
+    margin-right: 10px;
+    vertical-align: middle;
+}
+.rocketTit {
+    font-size: 16px;
+    font-family: PingFangSC-Semibold, PingFang SC;
+    font-weight: 600;
+    color: #FFFFFF;
+    line-height: 22px;
+    vertical-align: middle;
+    span {
+        vertical-align: middle;
+    }
+}
+
+
+</style>

src/views/bigScreen/components/scaleBox.vue

@@ -74,6 +74,6 @@ export default {
   top: 50%;
   transition: 0.3s;
   z-index: 999;
-  background: rgba(255, 0, 0, 0.3);
+  // background: rgba(255, 0, 0, 0.3);
 }
 </style>

src/views/bigScreen/drivingCabin/bottom1.vue

@@ -0,0 +1,39 @@
+<template>
+  <div>
+    <container4 title="总体经营情况">
+      <img src="./bottom1.png" style="width: 90%;display: block;margin: 0 auto">
+    </container4>
+  </div>
+
+</template>
+
+<script>
+import container4 from "../components/container4/index.vue";
+
+import echarts from 'echarts'
+require('echarts/theme/macarons') // echarts theme
+import resize from '../../dashboard/mixins/resize'
+export default {
+  mixins: [resize],
+  name: 'bottom1',
+  components: {
+    container4,
+  },
+  data () {
+    return {}
+  },
+  mounted () {
+
+  },
+  beforeDestroy () {
+
+  },
+  methods: {
+
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/bigScreen/drivingCabin/bottom2.vue

@@ -0,0 +1,39 @@
+<template>
+  <div>
+    <container4 title="总体生产情况">
+      <img src="./bottom2.png" style="width: 90%;display: block;margin: 0 auto">
+    </container4>
+  </div>
+
+</template>
+
+<script>
+import container4 from "../components/container4/index.vue";
+
+import echarts from 'echarts'
+require('echarts/theme/macarons') // echarts theme
+import resize from '../../dashboard/mixins/resize'
+export default {
+  mixins: [resize],
+  name: 'bottom1',
+  components: {
+    container4,
+  },
+  data () {
+    return {}
+  },
+  mounted () {
+
+  },
+  beforeDestroy () {
+
+  },
+  methods: {
+
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/bigScreen/drivingCabin/center.vue

@@ -0,0 +1,39 @@
+<template>
+  <div>
+    <container3>
+      <img src="./snap.png" style="width: 100%;height:100%">
+    </container3>
+  </div>
+
+</template>
+
+<script>
+import container3 from "../components/container3/index.vue";
+
+import echarts from 'echarts'
+require('echarts/theme/macarons') // echarts theme
+import resize from '../../dashboard/mixins/resize'
+export default {
+  mixins: [resize],
+  name: 'left1',
+  components: {
+    container3,
+  },
+  data () {
+    return {}
+  },
+  mounted () {
+
+  },
+  beforeDestroy () {
+
+  },
+  methods: {
+
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/bigScreen/drivingCabin/index.vue

@@ -1,19 +1,121 @@
 <template>
-    <scalseBox>
-        <div>111</div>
+  <scalseBox>
+    <div class="drivingCabin">
+      <div class="bg1"></div>
+      <bigScreenHead></bigScreenHead>
 
-    </scalseBox>
+      <div class="left1">
+        <left1></left1>
+      </div>
+      <div class="left2">
+        <left2></left2>
+      </div>
+      <div class="center1">
+        <center1></center1>
+      </div>
+      <div class="right1">
+        <right1></right1>
+      </div>
+      <div class="right2">
+        <right2></right2>
+      </div>
+      <div class="bottom1">
+        <bottom1></bottom1>
+      </div>
+      <div class="bottom2">
+        <bottom2></bottom2>
+      </div>
+
+    </div>
+  </scalseBox>
 
 </template>
 
 <script>
 import scalseBox from '../components/scaleBox.vue'
-import Screen from "../components/Screen";
+import bigScreenHead from "../components/bigScreenHead/index.vue";
+import rocketTit from "../components/rocketTit/index.vue";
+import container1 from "../components/container1/index.vue";
+
+
+import left1 from "./left1.vue";
+import left2 from "./left2.vue";
+import center1 from "./center.vue";
+import right1 from "./right1.vue";
+import right2 from "./right2.vue";
+import bottom1 from "./bottom1.vue";
+import bottom2 from "./bottom2.vue";
 export default {
   name: 'DrivingCabin',
   components: {
     scalseBox,
-    Screen
+    bigScreenHead,
+    rocketTit,
+    container1,
+    left1,
+    left2,
+    center1,
+    right1,
+    right2,
+    bottom1,
+    bottom2,
   }
 }
-</script>
+</script>
+
+<style lang="scss" scoped>
+.drivingCabin {
+  position: relative;
+  width: 1920px;
+  height: 1080px;
+  background-color: #0D1049;
+  // background-image: url("../img/bg.png");
+  background-size: cover;
+  .bg1 {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 1920px;
+    height: 485px;
+    background-image: url("../img/bg-1.png");
+    background-size: cover;
+  }
+}
+
+.left1 {
+  position: absolute;
+  top: 120px;
+  left: 24px;
+}
+.left2 {
+  position: absolute;
+  top: 345px;
+  left: 24px;
+}
+.center1 {
+  position: absolute;
+  top: 107px;
+  left: 578px;
+}
+
+.right1 {
+  position: absolute;
+  top: 120px;
+  right: 24px;
+}
+.right2 {
+  position: absolute;
+  top: 345px;
+  right: 24px;
+}
+.bottom1 {
+  position: absolute;
+  bottom: 16px;
+  left: 24px;
+}
+.bottom2 {
+  position: absolute;
+  bottom: 16px;
+  right: 24px;
+}
+</style>

src/views/bigScreen/drivingCabin/left1.vue

@@ -0,0 +1,238 @@
+<template>
+  <div>
+    <rocketTit style="margin-bottom: 9px">经营动态</rocketTit>
+    <container1>
+      <el-row style="height: 100%">
+        <el-col :span="12" style="height: 100%">
+          <el-row style="height: 100%">
+            <el-col :span="12" style="text-align:center,;padding: 26px 0 0 40px;">
+              <div>
+                今日收入
+              </div>
+              <div style="margin: 10px 0">
+                <span class="num">2890</span>万
+              </div>
+              <div>
+                同比增长
+              </div>
+            </el-col>
+            <el-col :span="12" style="height: 100%">
+              <div ref="chart1" style="width: 100%;height:100%;"></div>
+            </el-col>
+          </el-row>
+        </el-col>
+        <el-col :span="12" style="height: 100%">
+            <el-row style="height: 100%">
+              <el-col :span="12" style="text-align:center,;padding: 26px 0 0 40px;">
+                <div>
+                  今日合同
+                </div>
+                <div style="margin: 10px 0">
+                  <span class="num2">54</span>份
+                </div>
+                <div>
+                  同比增长
+                </div>
+              </el-col>
+              <el-col :span="12" style="height: 100%">
+                <div ref="chart2" style="width: 100%;height:100%;"></div>
+              </el-col>
+            </el-row>
+        </el-col>
+      </el-row>
+    </container1>
+  </div>
+
+</template>
+
+<script>
+import scalseBox from '../components/scaleBox.vue'
+import bigScreenHead from "../components/bigScreenHead/index.vue";
+import rocketTit from "../components/rocketTit/index.vue";
+import container1 from "../components/container1/index.vue";
+
+
+import echarts from 'echarts'
+require('echarts/theme/macarons') // echarts theme
+import resize from '../../dashboard/mixins/resize'
+export default {
+  mixins: [resize],
+  name: 'left1',
+  components: {
+    scalseBox,
+    bigScreenHead,
+    rocketTit,
+    container1,
+  },
+  data () {
+    return {
+      chart1: null,
+      chart2: null,
+      option1: {
+        grid: {
+          top: "20%",
+          left: "10%",
+          right: "10%",
+          bottom: "20%"
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+          show: false,//不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
+          //   axisTick: {
+          //     show: false//不显示坐标轴刻度线
+          //   },
+          //   axisLine: {
+          //     show: false,//不显示坐标轴线
+          //   },
+          //   axisLabel: {
+          //     show: false,//不显示坐标轴上的文字
+          //   },
+          //   splitLine: {
+          //     show: false//不显示网格线
+          //   },
+        },
+        yAxis: {
+          type: 'value',
+          scale: true,
+          show: false,
+          //   splitLine: {
+          //     show: false//不显示网格线
+          //   },
+        },
+        series: [
+          {
+            data: [30, 60, 80, 70, 80, 90, 110],
+            type: 'line',
+            symbol: 'none',
+            smooth: false,
+            lineStyle: {
+              color: '#f6d97e'
+            },
+            areaStyle: {//区域填充渐变颜色
+              color: {
+                type: 'linear',
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [{
+                  offset: 0, color: '#f6d97e' // 0% 处的颜色
+                }, {
+                  offset: .95, color: 'rgba(234,174,10, 0)' // 100% 处的颜色
+                }],
+                global: false // 缺省为 false
+              }
+            }
+
+
+          }
+        ]
+      },
+      option2: {
+        grid: {
+          top: "20%",
+          left: "10%",
+          right: "10%",
+          bottom: "20%"
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+          show: false,//不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
+          //   axisTick: {
+          //     show: false//不显示坐标轴刻度线
+          //   },
+          //   axisLine: {
+          //     show: false,//不显示坐标轴线
+          //   },
+          //   axisLabel: {
+          //     show: false,//不显示坐标轴上的文字
+          //   },
+          //   splitLine: {
+          //     show: false//不显示网格线
+          //   },
+        },
+        yAxis: {
+          type: 'value',
+          scale: true,
+          show: false,
+          //   splitLine: {
+          //     show: false//不显示网格线
+          //   },
+        },
+        series: [
+          {
+            data: [30, 60, 80, 70, 80, 90, 110],
+            type: 'line',
+            symbol: 'none',
+            smooth: false,
+            lineStyle: {
+              color: 'rgba(16, 152, 255, 1)'
+            },
+            areaStyle: {//区域填充渐变颜色
+              color: {
+                type: 'linear',
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [{
+                  offset: 0, color: 'rgba(16, 152, 255, 1)' // 0% 处的颜色
+                }, {
+                  offset: .95, color: 'rgba(16, 152, 255, 0)' // 100% 处的颜色
+                }],
+                global: false // 缺省为 false
+              }
+            }
+
+
+          }
+        ]
+      },
+    }
+  },
+  mounted () {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  beforeDestroy () {
+    if (!this.chart1 || !this.chart2) {
+      return
+    }
+    this.chart1.dispose()
+    this.chart2.dispose()
+    this.chart1 = null
+    this.chart2 = null
+  },
+  methods: {
+    initChart () {
+      this.chart1 = echarts.init(this.$refs.chart1, 'macarons');
+      this.chart2 = echarts.init(this.$refs.chart2, 'macarons');
+      this.chart1.setOption(this.option1);
+      this.chart2.setOption(this.option2);
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.num {
+  font-size: 30px;
+  font-family: Roboto-Black, Roboto;
+  font-weight: 900;
+  color: #f6d97e;
+  line-height: 35px;
+  //   margin-right: 3px;
+}
+.num2 {
+  font-size: 30px;
+  font-family: Roboto-Black, Roboto;
+  font-weight: 900;
+  color: rgba(16, 152, 255, 1);
+  line-height: 35px;
+}
+</style>

src/views/bigScreen/drivingCabin/left2.vue

@@ -0,0 +1,137 @@
+<template>
+  <div>
+    <container2 title="生产总体走势">
+      <div style="height:100%;width:100%;" ref="chart"></div>
+    </container2>
+  </div>
+
+</template>
+
+<script>
+import scalseBox from '../components/scaleBox.vue'
+import bigScreenHead from "../components/bigScreenHead/index.vue";
+import rocketTit from "../components/rocketTit/index.vue";
+import container2 from "../components/container2/index.vue";
+
+
+import echarts from 'echarts'
+require('echarts/theme/macarons') // echarts theme
+import resize from '../../dashboard/mixins/resize'
+export default {
+  mixins: [resize],
+  name: 'left2',
+  components: {
+    scalseBox,
+    bigScreenHead,
+    rocketTit,
+    container2,
+  },
+  data () {
+    return {
+      chart: null,
+      option: {
+        backgroundColor: '',
+        tooltip: {
+          trigger: 'axis'
+        },
+        legend: {
+          right: '10',
+          data: ['品类1', '品类2', '品类3'],
+          textStyle: {
+            color: '#fff'
+          },
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+          splitLine: {
+            show: false//不显示网格线
+          },
+        },
+        yAxis: {
+          type: 'value',
+          splitLine: {
+            show: false//不显示网格线
+          },
+          splitArea: {
+            show: false//不显示网格区域
+          }
+        },
+        series: [
+          {
+            name: '品类1',
+            type: 'line',
+            data: [120, 132, 101, 134, 90, 230, 210],
+            smooth: false,
+            lineStyle: {
+              color: 'rgba(203, 97, 79, 1)'
+            },
+          },
+          {
+            name: '品类2',
+            type: 'line',
+            data: [220, 182, 191, 234, 290, 330, 310],
+            smooth: false,
+            lineStyle: {
+              color: 'rgba(215, 170, 34, 1)'
+            },
+          },
+          {
+            name: '品类3',
+            type: 'line',
+            data: [150, 232, 201, 154, 190, 330, 410],
+            smooth: false,
+            lineStyle: {
+              color: 'rgba(121, 139, 219, 1)'
+            },
+          },
+
+        ]
+      },
+    }
+  },
+  mounted () {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  beforeDestroy () {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart () {
+      this.chart = echarts.init(this.$refs.chart, 'macarons');
+      this.chart.setOption(this.option);
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.num {
+  font-size: 30px;
+  font-family: Roboto-Black, Roboto;
+  font-weight: 900;
+  color: #f6d97e;
+  line-height: 35px;
+  //   margin-right: 3px;
+}
+.num2 {
+  font-size: 30px;
+  font-family: Roboto-Black, Roboto;
+  font-weight: 900;
+  color: rgba(16, 152, 255, 1);
+  line-height: 35px;
+}
+</style>

src/views/bigScreen/drivingCabin/right1.vue

@@ -0,0 +1,84 @@
+<template>
+  <div>
+    <rocketTit style="margin-bottom: 9px">生产动态</rocketTit>
+    <container1>
+      <el-row style="height: 100%">
+        <el-col :span="12" style="height: 100%">
+          <div class="right1_bg right1_bg1">
+            <div style="padding: 10px 0 20px 0;">
+              <span class="num">2890</span>件
+            </div>
+            <div style="font-size: 18px;">今日装药任务</div>
+          </div>
+        </el-col>
+        <el-col :span="12" style="height: 100%">
+          <div class="right1_bg right1_bg2">
+            <div style="padding: 10px 0 20px 0;">
+              <span class="num">824</span>人
+            </div>
+            <div style="font-size: 18px;">今日职工数</div>
+          </div>
+        </el-col>
+      </el-row>
+    </container1>
+  </div>
+
+</template>
+
+<script>
+import rocketTit from "../components/rocketTit/index.vue";
+import container1 from "../components/container1/index.vue";
+import resize from '../../dashboard/mixins/resize'
+
+export default {
+  mixins: [resize],
+  name: 'right1',
+  components: {
+    rocketTit,
+    container1,
+  },
+  data () {
+    return {}
+  },
+  mounted () {
+
+  },
+  beforeDestroy () {
+  },
+  methods: {
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.right1_bg {
+  width: 211px;
+  height: 132px;
+  background-size: cover;
+  text-align: center;
+  padding: 10px  0 10px 0;
+  margin: 20px auto 0 auto;
+  
+font-size: 14px;
+  .num {
+    font-size: 30px;
+    font-family: Roboto-Black, Roboto;
+    font-weight: 900;
+    line-height: 35px;
+    margin-right: 3px;
+    vertical-align: middle;
+  }
+}
+.right1_bg1 {
+  background-image: url(./right1-1.png);
+  .num {
+    color: #f6d97e;
+  }
+}
+.right1_bg2 {
+  background-image: url(./right1-2.png);
+  .num {
+    color: #1098ff;
+  }
+}
+</style>

src/views/bigScreen/drivingCabin/right2.vue

@@ -0,0 +1,163 @@
+<template>
+  <div>
+    <container2 title="经营总体走势">
+      <div style="height:100%;width:100%;" ref="chart"></div>
+    </container2>
+  </div>
+
+</template>
+
+<script>
+import scalseBox from '../components/scaleBox.vue'
+import bigScreenHead from "../components/bigScreenHead/index.vue";
+import rocketTit from "../components/rocketTit/index.vue";
+import container2 from "../components/container2/index.vue";
+
+
+import echarts from 'echarts'
+require('echarts/theme/macarons') // echarts theme
+import resize from '../../dashboard/mixins/resize'
+export default {
+  mixins: [resize],
+  name: 'right2',
+  components: {
+    scalseBox,
+    bigScreenHead,
+    rocketTit,
+    container2,
+  },
+  data () {
+    return {
+      chart: null,
+      option: {
+        backgroundColor: '',
+        tooltip: {
+          trigger: 'axis'
+        },
+        legend: {
+          right: '10',
+          data: ['XX零件收入占比', 'XY零件收入占比'],
+          textStyle: {
+            color: '#fff'
+          },
+        },
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          boundaryGap: false,
+          data: ['2021-04', '2021-05', '2021-06', '2021-07', '2021-08', '2021-09', '2021-10'],
+          splitLine: {
+            show: false//不显示网格线
+          },
+        },
+        yAxis: {
+          type: 'value',
+          splitLine: {
+            show: false//不显示网格线
+          },
+          splitArea: {
+            show: false//不显示网格区域
+          },
+          axisLabel: {
+            formatter: "{value}%"
+          },
+          min: 0,
+          max: 100
+        },
+        series: [
+          {
+            name: 'XX零件收入占比',
+            type: 'line',
+            data: [55, 30, 45, 35, 55, 60, 60],
+            smooth: false,
+            lineStyle: {
+              color: 'rgba(78, 187, 147, 1)'
+            },
+            areaStyle: {//区域填充渐变颜色
+              color: {
+                type: 'linear',
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [{
+                  offset: 0, color: 'rgba(78, 187, 147, 0.5)' // 0% 处的颜色
+                }, {
+                  offset: .75, color: 'rgba(78, 187, 147, 0)' // 100% 处的颜色
+                }],
+                global: false // 缺省为 false
+              }
+            }
+          },
+          {
+            name: 'XY零件收入占比',
+            type: 'line',
+            data: [45, 70, 50, 65, 45, 35, 40],
+            smooth: false,
+            lineStyle: {
+              color: 'rgba(16,148,249, 1)'
+            },
+            areaStyle: {//区域填充渐变颜色
+              color: {
+                type: 'linear',
+                x: 0,
+                y: 0,
+                x2: 0,
+                y2: 1,
+                colorStops: [{
+                  offset: 0, color: 'rgba(16,148,249, 0.5)' // 0% 处的颜色
+                }, {
+                  offset: .75, color: 'rgba(16,148,249, 0)' // 100% 处的颜色
+                }],
+                global: false // 缺省为 false
+              }
+            }
+          },
+
+        ]
+      },
+    }
+  },
+  mounted () {
+    this.$nextTick(() => {
+      this.initChart()
+    })
+  },
+  beforeDestroy () {
+    if (!this.chart) {
+      return
+    }
+    this.chart.dispose()
+    this.chart = null
+  },
+  methods: {
+    initChart () {
+      this.chart = echarts.init(this.$refs.chart, 'macarons');
+      this.chart.setOption(this.option);
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.num {
+  font-size: 30px;
+  font-family: Roboto-Black, Roboto;
+  font-weight: 900;
+  color: #f6d97e;
+  line-height: 35px;
+  //   margin-right: 3px;
+}
+.num2 {
+  font-size: 30px;
+  font-family: Roboto-Black, Roboto;
+  font-weight: 900;
+  color: rgba(16, 152, 255, 1);
+  line-height: 35px;
+}
+</style>