大屏1

package.json

@@ -36,6 +36,7 @@
     "url": "https://gitee.com/y_project/RuoYi-Vue.git"
   },
   "dependencies": {
+    "@antv/g2plot": "^2.3.40",
     "@riophae/vue-treeselect": "0.4.0",
     "axios": "0.21.0",
     "clipboard": "2.0.6",

public/index.html

@@ -6,6 +6,7 @@
     <meta name="renderer" content="webkit">
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <script type="text/javascript" src="https://unpkg.com/@antv/g2plot@latest/dist/g2plot.min.js"></script>
     <title><%= webpackConfig.name %></title>
     <!--[if lt IE 11]><script>window.location.href='/html/ie.html';</script><![endif]-->
 	  <style>

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

@@ -0,0 +1,62 @@
+
+
+<template>
+  <div class="BigScreenTabs">
+    <div v-for="(v,index) in titleArr" :key="index" class="button" :class="{active:value == index}">
+      <div @click="updateVal(index)">{{v}}</div>
+    </div>
+  </div>
+
+</template>
+
+<script>
+export default {
+  name: 'BigScreenTabs',
+  props: {
+    value: {
+      type: Number
+    },
+    titleArr: {
+      type: Array,
+      default: ['部门', '类型'],
+    },
+  },
+  data () {
+    return {
+
+    }
+  },
+  methods: {
+    updateVal: function (val) {
+      // 2、手动触发父组件的input事件并将值传给父组件
+      this.$emit('input', val);
+    }
+
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.button {
+  display: inline-block;
+  background: rgba(145, 213, 254, 0.2);
+  width: 77px;
+  height: 28px;
+  line-height: 28px;
+  text-align: center;
+  font-weight: 500;
+  color: rgba(255, 255, 255, 0.65);
+  transform: skewX(-20deg);
+  cursor: pointer;
+}
+.button.active {
+  background: linear-gradient(270deg, #3661a8 0%, #8bb1ed 100%);
+  font-weight: 500;
+  color: #ffffff;
+}
+.button > div {
+  width: 100%;
+  height: 100%;
+  transform: skewX(20deg);
+}
+</style>

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

@@ -48,8 +48,8 @@ export default {
 .container2 {
   display: flex;
   flex-direction: column;
-  width: 536px;
+  width: 538px;
-  height: 394px;
+  height: 589px;
   background-image: url(./bg.png);
   background-size: cover;
   color: #ffffff;

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

@@ -31,8 +31,8 @@ export default {
 
 <style lang="scss" scoped>
 .container3 {
-  width: 766px;
+  width: 769px;
-  height: 632px;
+  height: 586px;
   background-image: url(./bg.png);
   background-size: cover;
   overflow: hidden;
@@ -41,8 +41,8 @@ export default {
     position: absolute;
     top: 0;
     left: 0;
-    width: 766px;
+    width: 100%;
-    height: 632px;
+    height: 100%;
     background-image: url(./bg.png);
     background-size: cover;
     pointer-events: none;

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

@@ -1,7 +1,7 @@
 
 
 <template>
-  <div class="container2">
+  <div class="container4">
     <div class="tit">
       <rocketTit>{{title}}</rocketTit>
       <div class="datePicker">
@@ -27,10 +27,6 @@ export default {
       type: String,
       default: '',
     },
-    selected: {
-      type: Boolean,
-      default: false,
-    },
   },
   data () {
     return {
@@ -41,11 +37,11 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.container2 {
+.container4 {
   display: flex;
   flex-direction: column;
-  width: 930px;
+  width: 537px;
-  height: 311px;
+  height: 528px;
   background-image: url(./bg.png);
   background-size: cover;
   color: #ffffff;

src/views/bigScreen/drivingCabin/center.vue

@@ -1,8 +1,36 @@
 <template>
   <div>
     <container3>
-      <img src="./conter.png" style="width: 100%;height:100%">
+      <img class="img" src="./conter.png" style="width: 100%;height:100%">
-      <div class="con_right">
+      <rocketTit class="tit">今日动态</rocketTit>
+      <div class="data">
+        <div class="data-item">
+          <div>收入</div>
+          <div><span class="num">3380</span>万</div>
+        </div>
+        <div class="data-item">
+          <div>支出</div>
+          <div><span class="num">3380</span>万</div>
+        </div>
+        <div class="data-item">
+          <div>合同</div>
+          <div><span class="num">3380</span>份</div>
+        </div>
+        <div class="data-item">
+          <div>装药任务</div>
+          <div><span class="num">3380</span>件</div>
+        </div>
+        <div class="data-item">
+          <div>职工出勤数</div>
+          <div><span class="num">3380</span>人</div>
+        </div>
+        <div class="data-item">
+          <div>职工出勤数</div>
+          <div><span class="num">42<span style="font-size:22px">/80%</span></span>人</div>
+        </div>
+      </div>
+
+      <!-- <div class="con_right">
         <div class="con_title">
           <img src="./conter1-1.png" alt="">
           <span style="margin-left:2px">正在工作</span>
@@ -41,7 +69,7 @@
             <img src="./conter2-2.png" alt="">
           </div>
         </div>
-      </div>
+      </div> -->
     </container3>
   </div>
 
@@ -49,6 +77,7 @@
 
 <script>
 import container3 from "../components/container3/index.vue";
+import rocketTit from "../components/rocketTit/index.vue";
 
 import echarts from 'echarts'
 require('echarts/theme/macarons') // echarts theme
@@ -58,6 +87,7 @@ export default {
   name: 'left1',
   components: {
     container3,
+    rocketTit,
   },
   data () {
     return {}
@@ -75,6 +105,38 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.tit {
+  padding: 16px 24px; 
+}
+.img {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+}
+.data {
+  display: flex;
+  margin: 0 15px;
+  background: rgba(2, 18, 63, 0.4);
+  color: #FFFFFF;
+  font-size: 18px;
+  .data-item {
+    flex: 1;
+    >div {
+      margin: 5px 0;
+      text-align: center;
+    }
+    .num {
+      font-size: 28px;
+      font-family: Roboto-BlackItalic, Roboto;
+      font-weight: 600;
+      color: #55C5A2;
+      vertical-align: sub;
+      padding-right: 3px;
+    }
+  }
+}
+
 .container3{
   position: relative;
   .con_right{

src/views/bigScreen/drivingCabin/index.vue

@@ -5,18 +5,17 @@
       </div>
       <!-- <div class="bg1"></div> -->
 
-      <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="right1">
+        <right1></right1>
+      </div>
       <div class="right2">
         <right2></right2>
       </div>
@@ -25,7 +24,7 @@
       </div>
       <div class="bottom2">
         <bottom2></bottom2>
-      </div>
+      </div> -->
     </div>
 </template>
 
@@ -90,7 +89,7 @@ export default {
 }
 .center1 {
   position: absolute;
-  top: 7px;
+  top: 20px;
   left: 578px;
 }
 

src/views/bigScreen/drivingCabin/left1.vue

@@ -1,238 +1,349 @@
 <template>
-  <div>
+  <container2 title="经营责任书完成概况">
-    <rocketTit style="margin-bottom: 9px">经营动态</rocketTit>
+    <div class="wrap">
-    <container1>
+      <el-row class="content1">
-      <el-row style="height: 100%">
+        <el-col :span="12">
-        <el-col :span="12" style="height: 100%">
+          <div id="left1" ref="left1" class="chart1"></div>
-          <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-col :span="12">
-            <el-row style="height: 100%">
+          <div class="record">
-              <el-col :span="12" style="text-align:center,;padding: 26px 0 0 40px;">
+            <div>0进展指标 <span class="num">2</span>个</div>
-                <div>
+          </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>
+      <el-row class="content2">
-  </div>
+        <el-row class="titWrap">
+          <el-col :span="12" class="tit">责任书各类完成情况百分比</el-col>
+          <el-col :span="12" style="text-align:right">
+            <bigScreenTabs v-model="index" :titleArr="['部门', '类型']"></bigScreenTabs>
+          </el-col>
+        </el-row>
+        <div class="tabContent" v-show="index == 0">
+          <div id="left2"></div>
+        </div>
+        <div class="tabContent" v-show="index == 1">
+          <div id="left3"></div>
+        </div>
+      </el-row>
 
+    </div>
+  </container2>
 </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 container2 from "../components/container2/index.vue";
-
+import bigScreenTabs from "../components/bigScreenTabs/index.vue";
-
+// import {Liquid} from '@antv/g2plot';
-import echarts from 'echarts'
+// import resize from '../../dashboard/mixins/resize'
-require('echarts/theme/macarons') // echarts theme
-import resize from '../../dashboard/mixins/resize'
 export default {
-  mixins: [resize],
+  // mixins: [resize],
   name: 'left1',
   components: {
-    scalseBox,
-    bigScreenHead,
     rocketTit,
-    container1,
+    container2,
+    bigScreenTabs,
   },
   data () {
     return {
-      chart1: null,
+      index: 0,
-      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
-              }
-            }
 
-
+      data: [
-          }
+        {
-        ]
+          "year": "2021-01",
-      },
+          "value": ~~(Math.random() * 100),
-      option2: {
+          "category": "部门一"
-        grid: {
-          top: "20%",
-          left: "10%",
-          right: "10%",
-          bottom: "20%"
         },
-        xAxis: {
+        {
-          type: 'category',
+          "year": "2021-02",
-          boundaryGap: false,
+          "value": ~~(Math.random() * 100),
-          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+          "category": "部门一"
-          show: false,//不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
-          //   axisTick: {
-          //     show: false//不显示坐标轴刻度线
-          //   },
-          //   axisLine: {
-          //     show: false,//不显示坐标轴线
-          //   },
-          //   axisLabel: {
-          //     show: false,//不显示坐标轴上的文字
-          //   },
-          //   splitLine: {
-          //     show: false//不显示网格线
-          //   },
         },
-        yAxis: {
+        {
-          type: 'value',
+          "year": "2021-03",
-          scale: true,
+          "value": ~~(Math.random() * 100),
-          show: false,
+          "category": "部门一"
-          //   splitLine: {
-          //     show: false//不显示网格线
-          //   },
         },
-        series: [
+        {
-          {
+          "year": "2021-04",
-            data: [30, 60, 80, 70, 80, 90, 110],
+          "value": ~~(Math.random() * 100),
-            type: 'line',
+          "category": "部门一"
-            symbol: 'none',
+        },
-            smooth: false,
+        {
-            lineStyle: {
+          "year": "2021-05",
-              color: 'rgba(16, 152, 255, 1)'
+          "value": ~~(Math.random() * 100),
-            },
+          "category": "部门一"
-            areaStyle: {//区域填充渐变颜色
+        },
-              color: {
+        {
-                type: 'linear',
+          "year": "2021-06",
-                x: 0,
+          "value": ~~(Math.random() * 100),
-                y: 0,
+          "category": "部门一"
-                x2: 0,
+        },
-                y2: 1,
+        {
-                colorStops: [{
+          "year": "2021-01",
-                  offset: 0, color: 'rgba(16, 152, 255, 1)' // 0% 处的颜色
+          "value": ~~(Math.random() * 100),
-                }, {
+          "category": "部门二"
-                  offset: .95, color: 'rgba(16, 152, 255, 0)' // 100% 处的颜色
+        },
-                }],
+        {
-                global: false // 缺省为 false
+          "year": "2021-02",
-              }
+          "value": ~~(Math.random() * 100),
-            }
+          "category": "部门二"
-
+        },
-
+        {
-          }
+          "year": "2021-03",
-        ]
+          "value": ~~(Math.random() * 100),
-      },
+          "category": "部门二"
+        },
+        {
+          "year": "2021-04",
+          "value": ~~(Math.random() * 100),
+          "category": "部门二"
+        },
+        {
+          "year": "2021-05",
+          "value": ~~(Math.random() * 100),
+          "category": "部门二"
+        },
+        {
+          "year": "2021-06",
+          "value": ~~(Math.random() * 100),
+          "category": "部门二"
+        },
+      ]
     }
   },
   mounted () {
     this.$nextTick(() => {
       this.initChart()
+      this.initLine()
     })
   },
   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');
+      const { Liquid } = G2Plot;
-      this.chart2 = echarts.init(this.$refs.chart2, 'macarons');
+      const liquidPlot = new Liquid(this.$refs.left1, {
-      this.chart1.setOption(this.option1);
+        percent: 0.25,
-      this.chart2.setOption(this.option2);
+        statistic: {
+          content: {
+            style: {
+              color: 'rgb(255,255,255)',
+              fontSize: 18,
+            },
+            customHtml: (container, view, { percent }) => {
+              const text = `总体<br/>完成情况 ${(percent * 100).toFixed(0)}%`;
+              return `<div>${text}</div>`;
+            },
+          }
+        },
+        outline: {
+          border: 4,
+          style: {
+            stroke: 'l(0) 0:rgba(89, 184, 244, 1) 0.5:rgba(106, 232, 216, 1) 1:rgba(88, 151, 240, 1)'
+          }
+        },
+        wave: {
+          length: 128,
+        },
+      });
+      console.log(liquidPlot.render())
+      // liquidPlot.render();
+    },
+    initLine () {
+      const { Line } = G2Plot;
+      let arr = this.data;
+      const line = new Line('left2', {
+        data: arr,
+        xField: 'year',
+        yField: 'value',
+        padding: 'auto',
+        seriesField: 'category',
+        legend: {
+          position: 'top',
+          title: {
+            style: {
+              color: '#ffffff'
+            }
+          },
+          itemName: {
+            style: {
+              fill: '#ffffff'
+            }
+          }
+        },
+        // 配置折线趋势填充
+        area: {
+          style: {
+            fillOpacity: 0.15,
+          },
+        },
+        xAxis: {
+          type: 'time',
+          label: {
+            // 数值格式化为千分位
+            style: {
+              stroke: 'rgba(145, 213, 254, 0.1)',
+              fill: '#ffffff',
+            }
+          },
+        },
+
+        yAxis: {
+          label: {
+            // 数值格式化为千分位
+            formatter: (v) => `${v}`.replace(/\d{1,3}(?=(\d{3})+$)/g, (s) => `${s},`),
+            style: {
+              stroke: 'rgba(145, 213, 254, 0.1)',
+              fill: '#ffffff',
+            }
+          },
+          grid: {
+            line: {
+              style: {
+                stroke: 'rgba(145, 213, 254, 0.1)',
+                fill: '#ffffff',
+                lineWidth: 2,
+                lineDash: [4, 5],
+                strokeOpacity: 0,
+                cursor: 'pointer'
+              }
+            }
+          },
+          line: {
+            style: {
+              stroke: 'rgba(145, 213, 254, 0.1)',
+              fill: '#ffffff',
+              lineWidth: 2,
+            }
+          }
+        },
+      });
+      const line1 = new Line('left3', {
+        data: arr,
+        xField: 'year',
+        yField: 'value',
+        padding: 'auto',
+        seriesField: 'category',
+        legend: {
+          position: 'top',
+          title: {
+            style: {
+              color: '#ffffff'
+            }
+          }
+        },
+        // 配置折线趋势填充
+        area: {
+          style: {
+            fillOpacity: 0.15,
+          },
+        },
+        xAxis: {
+          type: 'time',
+        },
+        yAxis: {
+          label: {
+            // 数值格式化为千分位
+            formatter: (v) => `${v}`.replace(/\d{1,3}(?=(\d{3})+$)/g, (s) => `${s},`),
+          },
+        },
+      });
+
+      line.render();
+      line1.render();
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
+.wrap {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+}
+
+.content1 {
+  height: 200px;
+  .chart1 {
+    margin: 0 auto;
+    width: 192px;
+    height: 192px;
+    background: transparent;
+  }
+
+  .record {
+    display: flex;
+    align-items: center;
+    height: 192px;
+    padding-left: 30px;
+    > div {
+      flex: 1;
+      position: relative;
+      ::before {
+        content: "";
+        display: inline-block;
+        width: 9px;
+        height: 9px;
+        background: #ffffff;
+        border-radius: 50%;
+        position: absolute;
+        left: -18px;
+        top: 18px;
+      }
+    }
+  }
+}
+
 .num {
   font-size: 30px;
-  font-family: Roboto-Black, Roboto;
+  font-family: Roboto-BlackItalic, Roboto;
-  font-weight: 900;
+  font-weight: normal;
-  color: #f6d97e;
+  color: #91d5fe;
-  line-height: 35px;
+  vertical-align: sub;
   //   margin-right: 3px;
 }
-.num2 {
+
-  font-size: 30px;
+.content2 {
-  font-family: Roboto-Black, Roboto;
+  padding: 20px;
-  font-weight: 900;
+  flex: 1;
-  color: rgba(16, 152, 255, 1);
+  box-sizing: border-box;
-  line-height: 35px;
+  display: flex;
+  flex-direction: column;
+
+  .titWrap {
+    height: 30px;
+  }
+
+  .tabContent {
+    flex: 1;
+  }
+  .tabContent > div {
+    width: 100%;
+    height: 100%;
+  }
+
+  .tit {
+    font-size: 16px;
+    font-family: PingFangSC-Semibold, PingFang SC;
+    font-weight: 600;
+    color: #ffffff;
+    line-height: 22px;
+    position: relative;
+    padding-left: 15px;
+  }
+  .tit::after {
+    content: "";
+    display: block;
+    position: absolute;
+    top: 3px;
+    left: 0px;
+    width: 4px;
+    height: 16px;
+    background: #00ffff;
+  }
 }
 </style>

src/views/bigScreen/drivingCabin/right1.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <rocketTit style="margin-bottom: 9px">生产动态</rocketTit>
-    <container1>
+    <container4>
       <el-row style="height: 100%">
         <el-col :span="12" style="height: 100%">
           <div class="right1_bg right1_bg1">
@@ -20,14 +20,14 @@
           </div>
         </el-col>
       </el-row>
-    </container1>
+    </container4>
   </div>
 
 </template>
 
 <script>
 import rocketTit from "../components/rocketTit/index.vue";
-import container1 from "../components/container1/index.vue";
+import container4 from "../components/container4/index.vue";
 import resize from '../../dashboard/mixins/resize'
 
 export default {
@@ -35,7 +35,7 @@ export default {
   name: 'right1',
   components: {
     rocketTit,
-    container1,
+    container4,
   },
   data () {
     return {}