Merge branch 'master' of http://101.43.70.124:3000/williamet/vis389

src/views/bigScreen/bigScreenLayout.vue

@@ -10,6 +10,8 @@
 </template>
 
 <script>
+
+// import "./flexible.js";
 import scalseBox from './components/scaleBox.vue'
 import bigScreenHead from "./components/bigScreenHead/index.vue";
 
@@ -24,9 +26,25 @@ export default {
 
 <style lang="scss" scoped>
 .digScreenLayout {
+  // position:fixed;
+  // top: 0;
+  // left: 0;
+  // width:100%;
+  // height:100%;
+  // min-width: 1000px;
+  // z-index:-10;
+  // zoom: 1;
+  // background-color: #fff;
+  // background-repeat: no-repeat;
+  // background-size: cover;
+  // -webkit-background-size: cover;
+  // -o-background-size: cover;
+  // background-position: center 0;
+
+
   position: relative;
-  width: 1920px;
+  width: 100%;
-  height: 1080px;
+  height: 100%;
   background-color: #0D1049;
   // background-image: url("../img/bg.png");
   background-size: cover;
@@ -39,8 +57,8 @@ export default {
     position: absolute;
     bottom: 0;
     left: 0;
-    width: 1920px;
+    width: 10rem;
-    height: 485px;
+    height: 2.526042rem /* 485/192 */;
     background-image: url("./img/bg-1.png");
     background-size: cover;
   }

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

@@ -56,19 +56,19 @@ export default {
 
 <style lang="scss" scoped>
 .bigScreenHead {
-  width: 1920px;
+  width: 10rem /* 1920/192 */;
-  height: 100px;
+  height: .520833rem /* 100/192 */;
   background-image: url(./bg.png);
-  background-size: 100% 80px;
+  background-size: 100% .416667rem /* 80/192 */;
   background-repeat: no-repeat;
   .tit {
-    font-size: 36px;
+    font-size: .1875rem /* 36/192 */;
     font-family: YouSheBiaoTiHei;
     color: #91d5fe;
-    line-height: 47px;
+    line-height: .244792rem /* 47/192 */;
-    letter-spacing: 6px;
+    letter-spacing: .03125rem /* 6/192 */;
     text-align: center;
-    padding-top: 13px;
+    padding-top: .067708rem /* 13/192 */;
   }
 }
 </style>

src/views/bigScreen/components/scaleBox.vue

@@ -1,15 +1,30 @@
 <template>
-  <div style="background-color: #000;height: 100%;width:100%">
+  <div class="scaleBoxWrap">
-      <div class="ScaleBox" ref="ScaleBox" :style="{
+    <div class="ScaleBox" ref="ScaleBox" :style="{
-      width: width + 'px',
+      width: ScaleBoxWidth + 'px',
-      height: height + 'px'
+      height: ScaleBoxHeight + 'px'
     }">
-    <slot></slot>
+      <slot></slot>
-  </div>
+    </div>
   </div>
 </template>
 
 <script>
+let docEl = document.documentElement;
+// 获取当前显示设备的物理像素分辨率与CSS像素分辨率之比;
+let dpr = window.devicePixelRatio || 1;
+//根据分辨率调整全局字体大小
+function setBodyFontSize () {
+  // html已完成加载，则立即调整字体大小，否则等待html加载完成再调整字体大小
+  if (document.body) {
+    document.body.style.fontSize = 12 * dpr + "px";
+  } else {
+    // 监听DOMContentLoaded 事件——当初始的 HTML 文档被完全加载和解析完成之后触发，无需等待样式表
+    document.addEventListener("DOMContentLoaded", setBodyFontSize);
+  }
+}
+setBodyFontSize();
+
 export default {
   name: 'ScaleBox',
   props: {},
@@ -17,32 +32,75 @@ export default {
     return {
       scale: 0,
       width: 1920,
-      height: 1080
+      height: 1080,
+      ScaleBoxWidth: 1920,
+      ScaleBoxHeight: 1080,
+      style: {
+        width: '100%',
+      }
     }
   },
   mounted () {
     this.setScale()
     window.addEventListener('resize', this.debounce(this.setScale))
+    window.addEventListener("pageshow", function (e) {
+      // 若是浏览器中点击后退时显示页面，则重置rem
+      if (e.persisted) {
+        setRemUnit();
+      }
+    });
+    if (dpr >= 2) {
+      var fakeBody = document.createElement("body");
+      var testElement = document.createElement("div");
+      testElement.style.border = ".5px solid transparent";
+      fakeBody.appendChild(testElement);
+      docEl.appendChild(fakeBody);
+      if (testElement.offsetHeight === 1) {
+        docEl.classList.add("hairlines");
+      }
+      docEl.removeChild(fakeBody);
+    }
   },
   methods: {
     // to do
     getScale () {
+
+
       const { width, height } = this
       const wh = window.innerHeight / height
       const ww = window.innerWidth / width
-      console.log(ww < wh ? ww : wh)
+      console.log('wh', wh)
+      console.log('ww', ww)
+      if (wh > ww) {
+        this.ScaleBoxWidth = window.innerWidth;
+        this.ScaleBoxHeight = window.innerWidth * (height / width);
+
+      } else {
+        this.ScaleBoxWidth = window.innerHeight * (width / height);
+        this.ScaleBoxHeight = window.innerHeight;
+      }
+      this.setRemUnit();
       return ww < wh ? ww : wh
     },
     setScale () {
+      this.getScale()
       // if (window.innerHeight == 1080) {
       //   this.height = 1080
       // } else {
       //   this.height = 937
       // }
-      this.scale = this.getScale()
+      // this.scale = this.getScale()
-      if (this.$refs.ScaleBox) {
+      // console.log(this.scale)
-        this.$refs.ScaleBox.style.setProperty('--scale', this.scale)
+      // if (this.$refs.ScaleBox) {
-      }
+      //   this.$refs.ScaleBox.style.setProperty('--scale', this.scale)
+      // }
+    },
+
+    // 根据屏幕宽度，重置1rem的长度为当前屏幕宽度的1/10
+    setRemUnit () {
+      var rem = this.ScaleBoxWidth / 10;
+      // 1rem的值永远为根元素的字体大小，所以此处通过调整全局字体大小来重置rem
+      docEl.style.fontSize = rem + "px";
     },
     debounce (fn, delay) {
       const delays = delay || 500
@@ -64,19 +122,31 @@ export default {
 </script>
 
 <style lang="scss">
-#ScaleBox {
+.scaleBoxWrap {
-  --scale: 1;
+  display: flex;
+  display: -webkit-flex;
+  background-color: #000;
+  height: 100%;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
 }
 .ScaleBox {
-  position: absolute;
-  transform: scale(var(--scale)) translate(-50%, -50%);
-  display: flex;
-  flex-direction: column;
-  transform-origin: 0 0;
-  left: 50%;
-  top: 50%;
   transition: 0.3s;
-  z-index: 999;
-  // background: rgba(255, 0, 0, 0.3);
 }
+// #ScaleBox {
+//   --scale: 1;
+// }
+// .ScaleBox {
+//   position: absolute;
+//   transform: scale(var(--scale)) translate(-50%, -50%);
+//   display: flex;
+//   flex-direction: column;
+//   transform-origin: 0 0;
+//   left: 50%;
+//   top: 50%;
+//   transition: 0.3s;
+//   z-index: 999;
+//   // background: rgba(255, 0, 0, 0.3);
+// }
 </style>

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

@@ -48,17 +48,17 @@ export default {
 .container2 {
   display: flex;
   flex-direction: column;
-  width: 538px;
+  width: 2.802083rem /* 538/192 */;
-  height: 288px;
+  height: 1.5rem /* 288/192 */;
   background-image: url(./bg.png);
   background-size: cover;
   color: #ffffff;
-  font-size: 16px;
+  font-size: .083333rem /* 16/192 */;
   font-family: PingFangSC-Semibold, PingFang SC;
   font-weight: 600;
 
   .tit {
-    padding: 16px 16px 16px 24px;
+    padding: .083333rem /* 16/192 */ .083333rem /* 16/192 */ .083333rem /* 16/192 */ .125rem /* 24/192 */;
     position: relative;
     .datePicker {
       position: absolute;

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

@@ -0,0 +1,104 @@
+
+
+<template>
+  <div class="container3">
+    <div class="tit">
+      <rocketTit>{{title}}</rocketTit>
+      <div class="datePicker">
+        <slot name="datePicker"></slot>
+      </div>
+    </div>
+    <div class="content">
+      <div class="snap">
+        <slot name="snap"></slot>
+      </div>
+
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script>
+import rocketTit from "../../../components/rocketTit/index.vue";
+
+export default {
+  name: 'container3',
+  components: {
+    rocketTit,
+  },
+  props: {
+    title: {
+      type: String,
+      default: '',
+    },
+    selected: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data () {
+    return {
+
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.container3 {
+  display: flex;
+  flex-direction: column;
+  width: 3.505208rem /* 673/192 */;
+  height: 1.869792rem /* 359/192 */;
+  background-image: url(./bg.png);
+  background-size: cover;
+  color: #ffffff;
+  font-size: .083333rem /* 16/192 */;
+  font-family: PingFangSC-Semibold, PingFang SC;
+  font-weight: 600;
+
+  .tit {
+    padding: .083333rem /* 16/192 */ .083333rem /* 16/192 */ .083333rem /* 16/192 */ .125rem /* 24/192 */;
+    position: relative;
+    .datePicker {
+      position: absolute;
+      right: 16px;
+      top: 12px;
+
+      ::v-deep .el-date-editor {
+        border-radius: 0;
+        box-shadow: none !important;
+        border: 1px solid rgba(255, 255, 255, 0.2);
+        vertical-align: middle;
+        color: #fff;
+        background-color: transparent;
+        .el-range-input,
+        .el-range-separator {
+          color: #fff;
+        }
+        .el-range-editor.is-active {
+          border-color: #fff !important;
+        }
+
+        input {
+          background-color: transparent;
+        }
+      }
+    }
+  }
+
+  .content {
+    flex: 1;
+    padding: .010417rem /* 2/192 */;
+    box-sizing: border-box;
+    overflow: hidden;
+    position: relative;
+    .snap {
+      position: absolute;
+      top: 20px;
+      left: 25px;
+      font-weight: 300;
+    }
+  }
+}
+</style>

src/views/bigScreen/drivingCabin/index.vue

@@ -3,13 +3,16 @@
       <div class="left1">
         <left1></left1>
       </div>
+      <div class="left2">
+        <left2></left2>
+      </div>
       <!-- <div class="bg1"></div> -->
 
 
 
-      <div class="center1">
+      <!-- <div class="center1">
         <center1></center1>
-      </div>
+      </div> -->
       <div class="right1">
         <right1></right1>
       </div>
@@ -79,13 +82,13 @@ export default {
 
 .left1 {
   position: absolute;
-  top: 20px;
+  top: 3px;
   left: 24px;
 }
 .left2 {
   position: absolute;
-  top: 245px;
+  top: 3.151042rem /* 605/192 */;
-  left: 24px;
+  left: .125rem /* 24/192 */;
 }
 .center1 {
   position: absolute;

src/views/bigScreen/drivingCabin/left2.vue

@@ -1,12 +1,11 @@
 <template>
-
   <div>
-    <container2 title="生产总体走势">
+    <container3 title="利润概况">
-      <el-date-picker slot="datePicker" v-model="dateRange" size="small" style="width: 240px" value-format="yyyy-MM-dd" type="daterange"
+      <!-- <el-date-picker slot="datePicker" v-model="dateRange" size="small" style="width: 240px" value-format="yyyy-MM-dd" type="daterange"
         range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
-                <span slot="snap">件</span>
+                <span slot="snap">件</span> -->
-      <div style="height:100%;width:100%;" ref="chart"></div>
+      <div class="chart" ref="chart"></div>
-    </container2>
+    </container3>
   </div>
 
 </template>
@@ -15,7 +14,7 @@
 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 container3 from './components/container3/index.vue'
 
 
 import echarts from 'echarts'
@@ -28,92 +27,13 @@ export default {
     scalseBox,
     bigScreenHead,
     rocketTit,
-    container2,
+    container3,
   },
   data () {
     return {
       dateRange: [],
-      chart: null,
-      option: {
-        backgroundColor: '',
-        tooltip: {
-          trigger: 'axis'
-        },
-        legend: {
-          right: '10',
-          data: ['品类1', '品类2', '品类3'],
-          textStyle: {
-            color: '#fff'
-          },
-        },
-        grid: {
-          left: '3%',
-          right: '6%',
-          bottom: '3%',
-          containLabel: true
-        },
-        xAxis: {
-          type: 'category',
-          boundaryGap: false,
-          data: ['03-21', '03-22', '03-23', '03-24', '03-25', '03-26', '03-27'],
-          splitLine: {
-            show: false//不显示网格线
-          },
-          axisLine: {
-            lineStyle: {
-              color: 'rgb(255, 255, 255)'
-            },
-          },
-          axisLabel: {
-            interval: 0,
-            rotate: 320
-          }
-        },
-        yAxis: {
-          type: 'value',
-          splitLine: {
-            show: false//不显示网格线
-          },
-          splitArea: {
-            show: false//不显示网格区域
-          },
-          axisLine: {
-            lineStyle: {
-              color: 'rgb(255, 255, 255)'
-            },
-          }
-        },
-        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 () {
@@ -130,8 +50,134 @@ export default {
   },
   methods: {
     initChart () {
-      this.chart = echarts.init(this.$refs.chart, 'macarons');
+      const { DualAxes } = G2Plot
-      this.chart.setOption(this.option);
+
+      const uvBillData = [
+        { time: '2019-03', value: 350, type: '利润预测' },
+        { time: '2019-04', value: 900, type: '利润预测' },
+        { time: '2019-05', value: 300, type: '利润预测' },
+        { time: '2019-06', value: 450, type: '利润预测' },
+        { time: '2019-07', value: 470, type: '利润预测' },
+        { time: '2019-03', value: 220, type: '利润' },
+        { time: '2019-04', value: 300, type: '利润' },
+        { time: '2019-05', value: 250, type: '利润' },
+        { time: '2019-06', value: 220, type: '利润' },
+        { time: '2019-07', value: 362, type: '利润' },
+      ];
+
+      const transformData = [
+        { time: '2019-03', count: 800 },
+        { time: '2019-04', count: 600 },
+        { time: '2019-05', count: 400 },
+        { time: '2019-06', count: 380 },
+        { time: '2019-07', count: 220 },
+      ];
+
+      const dualAxes = new DualAxes(this.$refs.chart, {
+        data: [uvBillData, transformData],
+        xField: 'time',
+        yField: ['value', 'count'],
+        xAxis: {
+          grid: {
+            line: {
+              style: {
+                stroke: 'black',
+                lineWidth: 2,
+                lineDash: [4, 5],
+                strokeOpacity: 0,
+                cursor: 'pointer'
+              }
+            }
+          }
+        },
+        yAxis: [
+          {
+            grid: {
+              line: {
+                style: {
+                  stroke: 'rgba(255, 255, 255, 0.5)',
+                  lineWidth: 1,
+                }
+              }
+            },
+            min: 0,
+            minLimit: 0,
+          },
+          {
+
+            line: {
+              style: {
+                stroke: 'rgba(255, 255, 255, 0.5)',
+                lineWidth: 1,
+              }
+            },
+            label: {
+              style: {
+                fill: '#ffffff',
+                strokeOpacity: .5,
+              }
+            },
+                        min: 0,
+minLimit: 0,
+          },
+        ],
+        // yAxis: {
+        //   pv: {
+        //     tickCount: 5
+        //   },
+        //   uv: {
+        //     tickCount: 5
+        //   }
+        // },
+legend: {
+					itemName: {
+						style: {
+							fill: '#fff',
+						},
+					},
+},
+slider:{
+          start: 0.1,
+        end: 0.5,
+  textStyle: {
+    fill: '#ffffff'
+  }
+},
+        geometryOptions: [
+          {
+            geometry: 'column',
+            seriesField: 'type',
+            columnStyle: ({ type }) => {
+              if (type === '利润') {
+                return {
+                  lineWidth: 10
+                };
+              }
+              return {
+                  lineWidth: 0
+                };;
+            },
+            color: ({ type }) => {
+              if (type === '利润') {
+                return 'l(0) 0:#B5D3FE 1:#7EA7FC';
+              }
+              return 'rgba(145, 213, 254, .3)';
+            },
+          },
+          {
+            geometry: 'line',
+            lineStyle: {
+              lineWidth: 2,
+              stroke: '#55C5A2',
+            },
+
+          },
+
+        ],
+      });
+
+      dualAxes.render();
+
     }
   }
 }
@@ -153,4 +199,11 @@ export default {
   color: rgba(16, 152, 255, 1);
   line-height: 35px;
 }
+
+.chart {
+  padding: .052083rem /* 10/192 */ .15625rem /* 30/192 */;
+  box-sizing: border-box;
+  height: 100%;
+  width: 100%;
+}
 </style>