大屏

package.json

@@ -11,7 +11,10 @@
     "element-ui": "^2.15.2",
     "node-modules": "^1.0.1",
     "vue": "^2.6.10",
+    "vue-drag-resize": "^1.5.4",
+    "vue-draggable-resizable": "^2.3.0",
     "vue-router": "^3.0.3",
+    "vuedraggable": "^2.24.3",
     "vuex": "^3.0.1"
   },
   "devDependencies": {

src/components/mining/powertest.vue

@@ -0,0 +1,127 @@
+ <!-- <template>
+     <div class="com-chart" ref="power"></div> 
+</template>-->
+<script>
+    export default {
+        name: "power",
+        data() {
+            return {
+                myChart: null
+
+            }
+        },
+        mounted() {
+            this.initCharts();
+            this.updateChart();
+        },
+        methods: {
+            // 初始化图表
+            initCharts() {
+                this.myChart = this.$echarts.init(document.getElementById('chart'))
+
+            },
+            // 更新图表
+            updateChart() {
+                const option = {
+                    title: {
+                        text: '采煤机平均功率',
+                        textStyle: {
+                            fontSize: 12,
+                            fontWeight: 'bold'
+                        }
+                    },
+                    tooltip: {
+                        trigger: 'axis',
+                        // axisPointer: {
+                        //     type: 'cross',
+                        //     label: {
+                        //         backgroundColor: '#6a7985'
+                        //     }
+                        // }
+                    },
+                    legend: {
+                        data: ['单位：KW/min']
+                    },
+                    grid: {
+                        top: '15%',
+                        left: '1%',
+                        right: '4%',
+                        bottom: '3%',
+                        containLabel: true
+                    },
+                    xAxis: [{
+                        type: 'category',
+                        boundaryGap: false,
+                        data: ['16:19', '16:21', '16:23', '16:25', '16:27'],
+                        // 修改x轴文字颜色和大小
+                        axisLabel: {
+                            textStyle: {
+                                color: "rgba(187, 174, 200, 1)",
+                                fontSize: "12"
+                            }
+                        }
+                    }],
+                    yAxis: [{
+                            type: 'value',
+                            // axisTick: { show: false },
+                            axisLine: {
+                                // 修改Y轴坐标轴颜色
+                                lineStyle: {
+                                    color: "rgba(187, 174, 200, 1)",
+
+                                }
+                            },
+                            axisLabel: {
+                                //修改y轴数据颜色
+                                textStyle: {
+                                    color: "rgba(187, 174, 200, 1)",
+                                    fontSize: 12
+                                }
+                            },
+                            // 修改分割线的颜色
+                            splitLine: {
+                                lineStyle: {
+                                    color: "rgba(199, 186, 212, 0.3)",
+                                    // color: "rgba(0, 255, 0, 1.0)",
+                                }
+                            }
+                        }
+
+                    ],
+                    series: [{
+                        name: '采煤机平均功率',
+                        type: 'line',
+                        smooth: true,
+                        // 单独修改当前线条的样式
+                        lineStyle: {
+                            color: "#0cff30",
+                            width: "2"
+                        },
+                        // 设置拐点
+                        symbol: "circle",
+                        // 拐点大小
+                        symbolSize: 3,
+                        // 开始不显示拐点， 鼠标经过显示
+                        showSymbol: false,
+                        // 设置拐点颜色以及边框
+                        itemStyle: {
+                            color: "#0184d5",
+                            borderColor: "rgba(0, 170, 255, 0.1)",
+                            borderWidth: 6
+                        },
+                        emphasis: {
+                            focus: 'series'
+                        },
+                        data: [500, 400, 200, 600, 500, 800, 600]
+                    }]
+                };
+                this.myChart.setOption(option);
+            }
+        }
+    }
+</script>
+<style scoped>
+    .com-chart {
+        height: 145px;
+    }
+</style>

src/main.js

@@ -6,6 +6,9 @@ import ElementUI from 'element-ui';
 import 'element-ui/lib/theme-chalk/index.css';
 import './assets/css/global.css'
 
+import VueDragResize from "vue-drag-resize"
+Vue.component('vue-drag-resize', VueDragResize)
+
 Vue.prototype.$echarts = window.echarts
 Vue.config.productionTip = false
 

src/views/Home.vue

@@ -29,6 +29,7 @@
 <el-col :span="20">
     <!-- 展示   -->
     <el-main>
+        <iframe v-if="this.$route.path=='/'" id="content" frameborder="0" src="http://localhost:50401/" width="1100px" height="800px"></iframe>
         <router-view></router-view>
     </el-main>
 </el-col>
@@ -96,6 +97,11 @@
                 }
             }
         },
+        mounted(){
+            console.log(111)
+            console.log(this.$route.path)
+
+        },
         methods: {
             handleOpen(key, keyPath) {
                 console.log(key, keyPath);

src/views/app_industrial_video/industrialVideo.vue

@@ -1,13 +1,193 @@
 <template>
-  <div>industrialVideo</div>
+ 
+    <div class="helloword">
+    <VueDragResize :isActive="true" :w="200" :h="200" v-on:resizing="resize" :parent="true" v-on:dragging="resize">
+      <!--将这个div的宽高动态设置==VueDrangResize的宽高这样可实时完成缩放-->
+       <div id="chart" :style="{width: + vw+ 'px',height:+vh+'px'}"></div>
+       <!-- <div id="chart" :style="chartStyle"></div> -->
+       <!-- <div id="chart" style="width:100%;height:100%;"></div> -->
+             <!-- <div id="chart" style="width:200px;height:200px;"></div> -->
+        <!-- <div class="box"  id="chart" :style="{width: +vw+ 'px',height:+vh+'px'}"></div> -->
+         <!-- <div id="chart"></div> -->
+        <!-- <div id="chart" :style="chartStyle"></div> -->
+       <!-- <div :style="{width:+ vw+'px',height:+vh+'px'}" id="chart"></div> -->
+         <!-- <power style="width:100%;height:100%;position:absolute;"></power> -->
+       
+    </VueDragResize>
+
+  </div>
 </template>
 
 <script>
+// import VueDraggableResizable from 'vue-draggable-resizable'
+  import VueDragResize from 'vue-drag-resize';
+  import power from '@/components/mining/power.vue'
+    import coal_output from '@/components/mining/coal_output.vue'
 export default {
-  name: "industrialVideo"
+  name: "industrialVideo",
+  data(){
+    return{
+        vw: 0,
+      vh: 0,
+      top: 0,
+      left: 0,
+      chartStyle:{
+        width:"",
+        height:""
+      }
+
+    }
+  },
+  mounted(){
+    this.$nextTick(()=>{
+      this.initChart()
+    })
+ 
+    },
+  watch:{
+    vw(newName, oldName) {
+    this.myChart.resize();
+  
+      console.log(this.chartStyle.width)
+
+    },
+    vh(newName, oldName) {
+      this.myChart.resize();
+  },
+  },
+  created() {
+    this.vw = 200 + "px";
+    this.vh = 200 + "px";
+  },
+ methods: {
+    resize(newRect) {
+      this.vw = newRect.width;
+      this.vh = newRect.height;
+      this.top = newRect.top;
+      this.left = newRect.left;
+      // this.$echarts.resize;
+      // this.myChart.resize;
+    },
+
+    initChart(){
+      this.myChart = this.$echarts.init(document.getElementById('chart'));
+      this.myChart.setOption({
+                    title: {
+                        text: '采煤机平均功率',
+                        textStyle: {
+                            fontSize: 12,
+                            fontWeight: 'bold'
+                        }
+                    },
+                    tooltip: {
+                        trigger: 'axis',
+                        // axisPointer: {
+                        //     type: 'cross',
+                        //     label: {
+                        //         backgroundColor: '#6a7985'
+                        //     }
+                        // }
+                    },
+                    legend: {
+                        data: ['单位：KW/min']
+                    },
+                    grid: {
+                        top: '15%',
+                        left: '1%',
+                        right: '4%',
+                        bottom: '3%',
+                        containLabel: true
+                    },
+                    xAxis: [{
+                        type: 'category',
+                        boundaryGap: false,
+                        data: ['16:19', '16:21', '16:23', '16:25', '16:27'],
+                        // 修改x轴文字颜色和大小
+                        axisLabel: {
+                            textStyle: {
+                                color: "rgba(187, 174, 200, 1)",
+                                fontSize: "12"
+                            }
+                        }
+                    }],
+                    yAxis: [{
+                            type: 'value',
+                            // axisTick: { show: false },
+                            axisLine: {
+                                // 修改Y轴坐标轴颜色
+                                lineStyle: {
+                                    color: "rgba(187, 174, 200, 1)",
+
+                                }
+                            },
+                            axisLabel: {
+                                //修改y轴数据颜色
+                                textStyle: {
+                                    color: "rgba(187, 174, 200, 1)",
+                                    fontSize: 12
+                                }
+                            },
+                            // 修改分割线的颜色
+                            splitLine: {
+                                lineStyle: {
+                                    color: "rgba(199, 186, 212, 0.3)",
+                                    // color: "rgba(0, 255, 0, 1.0)",
+                                }
+                            }
+                        }
+
+                    ],
+                    series: [{
+                        name: '采煤机平均功率',
+                        type: 'line',
+                        smooth: true,
+                        // 单独修改当前线条的样式
+                        lineStyle: {
+                            color: "#0cff30",
+                            width: "2"
+                        },
+                        // 设置拐点
+                        symbol: "circle",
+                        // 拐点大小
+                        symbolSize: 3,
+                        // 开始不显示拐点， 鼠标经过显示
+                        showSymbol: false,
+                        // 设置拐点颜色以及边框
+                        itemStyle: {
+                            color: "#0184d5",
+                            borderColor: "rgba(0, 170, 255, 0.1)",
+                            borderWidth: 6
+                        },
+                        emphasis: {
+                            focus: 'series'
+                        },
+                        data: [500, 400, 200, 600, 500, 800, 600]
+                    }]
+                });
+
+    },
+    // resize(){
+    //   this.myChart.resize;
+    // }
+  },
+  components: {
+          VueDragResize,
+           power,
+            coal_output,
+            // VueDraggableResizable 
+      },
+
+
 }
 </script>
 
 <style scoped>
+.box{
+position: relative;
+}
+
 
 </style>
+
+    
+      

src/views/drain/drain.vue

@@ -69,6 +69,7 @@
                 currentPage4: 4
             }
         },
+      
         methods: {
             handleSizeChange(newSize) {
                 console.log(newSize)