电气火灾，可燃气体静态排版

src/assets/styles/index.css

@@ -190,7 +190,8 @@ header .showTime {
 .gas-container {
     text-align: center;
     color: #fff;
-    margin-top: .5rem
+    margin-top: .5rem;
+    position: relative;
 }
 
 .gas-container h3 {
@@ -204,6 +205,154 @@ header .showTime {
     margin-bottom: .575rem
 }
 
+.return-back {
+    position: absolute;
+    right: 20px;
+    top: -1rem;
+    width: 1.125rem;
+    line-height: .5rem;
+    font-size: .275rem;
+    opacity: 1;
+    background: linear-gradient(0deg, #0148cd 0%, #1c9bf5 100%);
+    border-radius: 4px;
+    cursor: pointer;
+}
+
+.cardTabs li {
+    width: 1.875rem;
+    display: inline-block;
+    font-size: 0.25rem;
+    height: 0.575rem;
+    line-height: 0.575rem;
+    background: url(../../assets/images/card-bg.png);
+    background-size: cover;
+    cursor: pointer;
+}
+
+.cardTabs li:first-child {
+    background: url(../../assets/images/card-bg1-active.png);
+}
+
+.tabBox {
+    padding: 0.325rem 0.4875rem;
+    background: rgba(255, 255, 255, 0);
+    border: 1px solid #1257c9;
+    border-radius: 7px;
+    display: inline-block;
+    box-shadow: inset 0 0 0.2rem 0.0125rem rgba(3, 54, 159, 1);
+}
+
+.tabBox table {
+    border-collapse: collapse;
+    font-size: 0.225rem;
+    width: 11.625rem;
+    margin: 0 auto;
+    line-height: 0.95rem;
+}
+
+.tabBox .gas-data {
+    width: 10rem
+}
+
+.tabBox table th {
+    color: #fff;
+    background: rgba(84, 143, 255, 0.5);
+}
+
+.tabBox table td {
+    font-size: 0.225rem;
+    font-weight: 400;
+}
+
+.tabBox.fireTabs {
+    padding: 0;
+}
+
+.tabBox.fireTabs th {
+    /* border: none; */
+    background: none;
+    font-weight: 400
+}
+
+.fireTabs {
+    /* width: 13.05rem; */
+    box-shadow: none;
+}
+
+.fireTabs table,
+.fireTabs tr,
+.fireTabs td {
+    box-shadow: inset 0 0 0.2rem 0.0125rem rgba(3, 54, 159, 1);
+}
+
+.fireTabs table td {
+    padding: .75rem .4375rem
+}
+
+.fireTabs table p {
+    margin-bottom: 0;
+    line-height: 1.5;
+    font-size: .225rem;
+}
+
+.fireTabs table p:nth-child(2) {
+    margin: .25rem 0;
+}
+
+.normal {
+    color: #60FF12;
+}
+
+.error {
+    color: #ff1212;
+}
+
+.eleFire-data {
+    margin: 0 auto;
+    width: calc(100% - .5rem);
+    display: flex;
+    padding: .55rem;
+    height: 10.425rem;
+    margin-bottom: 0.325rem;
+}
+
+.eleFire-data .column {
+    flex: 1
+}
+
+.eleFire-data .column .panel {
+    height: calc(50% - .325rem);
+    /* border: 1px solid pink; */
+    margin-bottom: .55rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.inner-box {
+    width: 9.725rem;
+}
+
+.inner-box div {
+    display: flex;
+    justify-content: space-between;
+}
+
+.inner-box div:nth-child(2) {
+    margin: .5rem 0;
+}
+
+.inner-box div p {
+    box-shadow: inset 0 0 0.2rem 0.0125rem rgba(3, 54, 159, 1);
+    width: 4.6rem;
+    line-height: .875rem;
+    font-size: .25rem;
+    margin-bottom: 0
+}
+
+
+/* 电气火灾卡片 */
+
 @keyframes rotatel {
     from {
         transform: translate(-50%, -50%) rotate(0deg);

src/components/topHeader.vue

@@ -23,13 +23,11 @@
 <script>
 import TimeMenu from "@/components/TimeMenu";
 export default {
-  name: "header",
+  // name: "header",
   components: {
     TimeMenu,
   },
-  data() {
   
-  },
   methods: {
    
   },

src/pages/eleFireCard/eleFireCard.vue

@@ -0,0 +1,78 @@
+<template>
+  <div>
+    <top-header></top-header>
+
+    <div class="gas-container">
+      <div class="return-back">返回</div>
+      <h3>电气火灾监控实时信息</h3>
+      <p>更新时间：2021-06-15 13:25:00</p>
+
+      <div>
+        <ul class="cardTabs">
+          <li  @click="Inv=0">数据列表</li>
+          <li @click="Inv=1">数据可视化</li>
+        </ul>
+
+        <div class="tabBox fireTabs">
+          <div>
+              <table>
+              <tr>
+                <th>供电过压告警：<span class="normal">正常</span></th>
+                <th>供电低压告警：<span class="normal">正常</span></th>
+                <th>供电过流告警：<span class="normal">正常</span></th>
+                <th>漏电告警：<span class="normal">正常</span></th>
+              </tr>
+              <tr>
+                <td>
+                    <P>A相线缆温度超高：<span class="normal">正常</span></P>
+                    <P>B相线缆温度超高：<span class="normal">正常</span></P>
+                    <P>C相线缆温度超高：<span class="normal">正常</span></P>
+                </td>
+                 <td>
+                    <P>A相电压：<span class="normal">219.00</span></P>
+                    <P>B相电压：<span class="normal">219.00</span></P>
+                    <P>C相电压：<span class="normal">219.00</span></P>
+                </td>
+                 <td>
+                    <P>A相电流：<span class="normal">9.00</span></P>
+                    <P>B相电流：<span class="error">3.00</span></P>
+                    <P>C相电流：<span class="normal">9.00</span></P>
+                </td>
+                 <td>
+                    <P>A相线缆温度：<span class="normal">29.00</span></P>
+                    <P>B相线缆温度：<span class="error">56.00</span></P>
+                    <P>C相线缆温度：<span class="normal">29.00</span></P>
+                </td>
+              </tr>
+            </table>
+
+            
+         
+
+             
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import topHeader from "@/components/topHeader";
+export default {
+  name: "index",
+  components: {
+    topHeader
+  },
+  data(){
+    return{
+  
+    }
+  }
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+
+</style>

src/pages/eleFireData/components/cableTemChart.vue

@@ -0,0 +1,150 @@
+<template>
+  <div id="myChart" :style="{ width: '100%', height: ' 100% ' }" stye="z-index:1000"></div>
+</template>
+<script>
+var yearData = [
+  {
+    year: "2020", // 年份
+    data: [
+      // 两个数组是因为有两条线
+      [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
+      [30, 50, 110, 144, 110, 240, 228, 240, 130, 240, 220, 130],
+      [43, 61, 125, 153, 138, 250, 239, 264, 143, 260, 229, 160],
+    ],
+  },
+];
+// 实列化对象
+// var myChart = echarts.init(document.querySelector(".line .chart"));
+
+export default {
+  name: "lineChart",
+  data() {
+    return {
+      myChart: null,
+    };
+  },
+  mounted() {
+    this.draw();
+    window.addEventListener("resize", () => {
+      this.myChart.resize();
+    });
+  },
+  methods: {
+    draw() {
+      this.myChart = this.$echarts.init(document.getElementById("myChart"));
+      this.myChart.setOption({
+        // 通过这个color修改两条线的颜色
+        title: {
+          text: "ABC三相线缆温度",
+          textStyle: {
+            align: "center",
+            color: "#fff",
+            fontSize: '.225rem ',
+            fontWeight:'400'
+          },
+          left: "center",
+        },
+
+        color: ["#60FF12", "#FF1212", "#26BFFF"],
+        tooltip: {
+          trigger: "axis",
+        },
+        // 图列组件
+        legend: {
+        //   show:false,
+          itemGap: 120,
+          /* 如果series对象有name值，则legend可以不用写data */
+          // 修改图列组件文字颜色
+          textStyle: {
+            color: "#fff",
+            fontSize:'.225rem '
+          },
+
+          bottom: "-2%",
+          left:"-30%",
+         
+        },
+        grid: {
+          left: "1%",
+          right: "1%",
+          top: "13%",
+          bottom: "12%",
+          containLabel: true, // 包含刻度文字在内
+        },
+        xAxis: {
+          type: "category",
+          boundaryGap: true,
+          data: [
+            "09:00",
+            "11:00",
+            "13:00",
+            "15:00",
+            "17:00",
+            "19:00",
+            "21:00",
+            "23:00",
+            "01:00",
+            "03:00",
+            "05:00",
+            "07:00",
+          ],
+          axisTick: {
+            show: false, //去除刻度线
+          },
+          axisLabel: {
+            color: "#4c9bfd", // 文本颜色
+          },
+          axisLine: {
+            show: false, // 去除轴线
+          },
+          // boundaryGap: false
+        },
+        yAxis: {
+          type: "value",
+          axisTick: {
+            show: false, //去除刻度线
+          },
+          axisLabel: {
+            color: "#fff", // 文本颜色
+          },
+          axisLine: {
+            show: false, // 去除轴线
+          },
+          splitNumber: 5,
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(-11,72,255,.5)",
+            },
+          },
+        },
+        series: [
+          {
+            name: "A相",
+            type: "line",
+            smooth: false, // 曲线是否平滑显示
+            data: yearData[0].data[0],
+            symbolSize: 10, //拐点圆的大小
+          },
+          {
+            name: "B相",
+            type: "line",
+            smooth: false, // 曲线是否平滑显示
+            data: yearData[0].data[1],
+            symbolSize: 10, //拐点圆的大小
+          },
+          {
+            name: "C相",
+            type: "line",
+            smooth: false, // 曲线是否平滑显示
+            data: yearData[0].data[2],
+            symbolSize: 10, //拐点圆的大小
+          },
+        ],
+      });
+    },
+  },
+};
+</script>
+<style>
+</style>

src/pages/eleFireData/components/eleCurrentChart.vue

@@ -0,0 +1,148 @@
+<template>
+  <div id="eleCurrentChart" :style="{ width: '100%', height: '100% ' }"></div>
+</template>
+<script>
+var yearData = [
+  {
+    year: "2020", // 年份
+    data: [
+      // 两个数组是因为有两条线
+      [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
+      [30, 50, 110, 144, 110, 240, 228, 240, 130, 240, 220, 130],
+      [43, 61, 125, 153, 138, 250, 239, 264, 143, 260, 229, 160],
+    ],
+  },
+];
+// 实列化对象
+// var myChart = echarts.init(document.querySelector(".line .chart"));
+
+export default {
+  name: "lineChart",
+  data() {
+    return {
+      myChart: null,
+    };
+  },
+  mounted() {
+    this.draw();
+    window.addEventListener("resize", () => {
+      this.myChart.resize();
+    });
+  },
+  methods: {
+    draw() {
+      this.myChart = this.$echarts.init(document.getElementById("eleCurrentChart"));
+      this.myChart.setOption({
+        // 通过这个color修改两条线的颜色
+        title: {
+          text: "ABC三相电压",
+          textStyle: {
+            align: "center",
+            color: "#fff",
+            fontSize: '.225rem ',
+            fontWeight:'400'
+          },
+          left: "center",
+        },
+
+        color: ["#60FF12", "#FF1212", "#26BFFF"],
+        tooltip: {
+          trigger: "axis",
+        },
+        // 图列组件
+        legend: {
+          show:false,
+          itemGap: 50,
+          /* 如果series对象有name值，则legend可以不用写data */
+          // 修改图列组件文字颜色
+          textStyle: {
+            color: "#fff",
+            fontSize:'.225rem '
+          },
+
+          bottom: "-2%",
+        },
+        grid: {
+          left: "1%",
+          right: "1%",
+          top: "13%",
+          bottom: "10%",
+          containLabel: true, // 包含刻度文字在内
+        },
+        xAxis: {
+          type: "category",
+          boundaryGap: true,
+          data: [
+            "09:00",
+            "11:00",
+            "13:00",
+            "15:00",
+            "17:00",
+            "19:00",
+            "21:00",
+            "23:00",
+            "01:00",
+            "03:00",
+            "05:00",
+            "07:00",
+          ],
+          axisTick: {
+            show: false, //去除刻度线
+          },
+          axisLabel: {
+            color: "#4c9bfd", // 文本颜色
+          },
+          axisLine: {
+            show: false, // 去除轴线
+          },
+          // boundaryGap: false
+        },
+        yAxis: {
+          type: "value",
+          axisTick: {
+            show: false, //去除刻度线
+          },
+          axisLabel: {
+            color: "#fff", // 文本颜色
+          },
+          axisLine: {
+            show: false, // 去除轴线
+          },
+          splitNumber: 5,
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(-11,72,255,.5)",
+            },
+          },
+        },
+        series: [
+          {
+            name: "位置AAA",
+            type: "line",
+            smooth: false, // 曲线是否平滑显示
+            data: yearData[0].data[0],
+            symbolSize: 10, //拐点圆的大小
+          },
+          {
+            name: "位置bbb",
+            type: "line",
+            smooth: false, // 曲线是否平滑显示
+            data: yearData[0].data[1],
+            symbolSize: 10, //拐点圆的大小
+          },
+          {
+            name: "位置CCC",
+            type: "line",
+            smooth: false, // 曲线是否平滑显示
+            data: yearData[0].data[2],
+            symbolSize: 10, //拐点圆的大小
+          },
+        ],
+      });
+    },
+  },
+};
+</script>
+<style>
+</style>

src/pages/eleFireData/components/voltageChart.vue

@@ -0,0 +1,149 @@
+<template>
+  <div id="voltageChart" :style="{ width: '100%', height: ' 100% ' }"  ></div>
+</template>
+<script>
+var yearData = [
+  {
+    year: "2020", // 年份
+    data: [
+      // 两个数组是因为有两条线
+       [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
+      [30, 50, 110, 144, 110, 240, 228, 240, 130, 240, 220, 130],
+      [43, 61, 125, 153, 138, 250, 239, 264, 143, 260, 229, 160],
+    ],
+  },
+];
+// 实列化对象
+// var voltageChart = echarts.init(document.querySelector(".line .chart"));
+
+export default {
+  name: "lineChart",
+  data() {
+    return {
+      myChart: null,
+    };
+  },
+  mounted() {
+    this.draw();
+    window.addEventListener("resize", () => {
+      this.myChart.resize();
+    });
+  },
+  methods: {
+    draw() {
+      this.myChart = this.$echarts.init(document.getElementById("voltageChart"));
+      this.myChart.setOption({
+        // 通过这个color修改两条线的颜色
+        title: {
+          text: "ABC三相电流",
+          textStyle: {
+            align: "center",
+            color: "#fff",
+            fontSize: '.225rem ',
+            fontWeight:'400'
+          },
+          left: "center",
+        },
+
+        color: ["#60FF12", "#FF1212", "#26BFFF"],
+        tooltip: {
+          trigger: "axis",
+        },
+        // 图列组件
+        legend: {
+        //   show:false,
+          itemGap: 100,
+          /* 如果series对象有name值，则legend可以不用写data */
+          // 修改图列组件文字颜色
+          textStyle: {
+            color: "#fff",
+            fontSize:'.225rem '
+          },
+
+          bottom: "-2%",
+          right:"-18%"
+        },
+        grid: {
+          left: "1%",
+          right: "1%",
+          top: "13%",
+          bottom: "12%",
+          containLabel: true, // 包含刻度文字在内
+        },
+        xAxis: {
+          type: "category",
+          boundaryGap: true,
+          data: [
+            "09:00",
+            "11:00",
+            "13:00",
+            "15:00",
+            "17:00",
+            "19:00",
+            "21:00",
+            "23:00",
+            "01:00",
+            "03:00",
+            "05:00",
+            "07:00",
+          ],
+          axisTick: {
+            show: false, //去除刻度线
+          },
+          axisLabel: {
+            color: "#4c9bfd", // 文本颜色
+          },
+          axisLine: {
+            show: false, // 去除轴线
+          },
+          // boundaryGap: false
+        },
+        yAxis: {
+          type: "value",
+          axisTick: {
+            show: false, //去除刻度线
+          },
+          axisLabel: {
+            color: "#fff", // 文本颜色
+          },
+          axisLine: {
+            show: false, // 去除轴线
+          },
+          splitNumber: 5,
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(-11,72,255,.5)",
+            },
+          },
+        },
+        series: [
+          {
+            name: "A相",
+            type: "line",
+            smooth: false, // 曲线是否平滑显示
+            data: yearData[0].data[0],
+            symbolSize: 10, //拐点圆的大小
+          },
+          {
+            name: "B相",
+            type: "line",
+            smooth: false, // 曲线是否平滑显示
+            data: yearData[0].data[1],
+            symbolSize: 10, //拐点圆的大小
+          },
+          {
+            name: "C相",
+            type: "line",
+            smooth: false, // 曲线是否平滑显示
+            data: yearData[0].data[2],
+            symbolSize: 10, //拐点圆的大小
+          },
+        ],
+      });
+    },
+  },
+};
+</script>
+<style>
+</style>

src/pages/eleFireData/eleFireData.vue

@@ -0,0 +1,73 @@
+<template>
+  <div>
+    <top-header></top-header>
+
+    <div class="gas-container">
+      <div class="return-back">返回</div>
+      <h3>电气火灾监控实时信息</h3>
+      <p>更新时间：2021-06-15 13:25:00</p>
+
+      <div>
+        <ul class="cardTabs">
+          <li  @click="Inv=0">数据列表</li>
+          <li @click="Inv=1">数据可视化</li>
+        </ul>
+
+        <div class="tabBox eleFire-data">
+         <div class="column">
+
+           <div class="panel sec1">
+             <div class="inner-box">
+               <div>
+                 <p>供电过压告警：<span class="normal">正常</span></p>
+                 <p>供电低压告警：<span class="normal">正常</span></p>
+               </div>
+               <div>
+                 <p>供电过压告警：<span class="normal">正常</span></p>
+                 <p>供电低压告警：<span class="normal">正常</span></p>
+               </div>
+               <div><p style="width:100%">供电低压告警：<span class="normal">正常</span></p></div>
+             </div>
+
+           </div>
+           <div class="panel eleCurrentChart" >
+
+           <voltage-chart></voltage-chart>
+
+           </div>
+         </div>
+         <div class="column">
+           <div class="panel">  <ele-current-chart></ele-current-chart></div>
+           <div class="panel">
+             <cable-tem-chart></cable-tem-chart>
+           </div>
+         </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>  
+
+<script>
+import topHeader from "@/components/topHeader";
+import eleCurrentChart from "./components/eleCurrentChart";
+import voltageChart from "./components/voltageChart";
+import cableTemChart from "./components/cableTemChart";
+
+export default {
+  name: "eleFireData",
+  components: {
+    topHeader,eleCurrentChart,voltageChart,cableTemChart
+  },
+  data(){
+    return{
+  
+    }
+  }
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+
+</style>

src/pages/gasCard/components/lineChart.vue

@@ -1,197 +1,146 @@
 <template>
-  <div id="myChart" :style="{width: '100%', height: ' 4rem '}"></div>
-
+  <div id="myChart" :style="{ width: '100%', height: ' 5rem ' }"></div>
 </template>
 <script>
-
- var sortData = [{
-        data: [
-            // 三个数组是因为有3条线
-            [123, 175, 112, 197, 121, 67, 98, 21, 43, 64, 76, 38, 24, 52, 26, 27, 30, 35, 36, 40, 120, 230, 210, 120, 213, 180, 200, 180, 79, 191, 324, ],
-            [24, 52, 26, 27, 30, 35, 36, 40, 120, 230, 210, 120, 213, 180, 200, 180, 79, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 82, 64, 43, 60, 19, 34],
-            [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 9, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79, 82, 64, 79, 82, 64, 4]
-        ]
-    }];
-
-    var xData = function() {
-        var data = [];
-        for (var i = 1; i < 31; i++) {
-            data.push(i);
-        }
-        return data;
-    }();
-
+var yearData = [
+  {
+    year: "2020", // 年份
+    data: [
+      // 两个数组是因为有两条线
+      [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
+      [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79],
+      [80, 93, 90, 93, 120, 130, 130, 32, 29, 33, 50, 160],
+    ],
+  },
+];
+// 实列化对象
+// var myChart = echarts.init(document.querySelector(".line .chart"));
 
 export default {
-  name: 'lineChart',
-  data () {
+  name: "lineChart",
+  data() {
     return {
-    myChart: null
-    }
+      myChart: null,
+    };
   },
   mounted() {
-      this.draw()
-	window.addEventListener('resize', () => {
-		this.myChart.resize()
-	})
-},
+    this.draw();
+    window.addEventListener("resize", () => {
+      this.myChart.resize();
+    });
+  },
   methods: {
-      draw() {
-		this.myChart = this.$echarts.init(document.getElementById('myChart'));
-		this.myChart.setOption({
-           color: ["#05EEE7", "#9999FF", "#FE92B3"], // 通过这个color修改三条线的颜色
-        tooltip: {
-            trigger: "axis",
-            textStyle: {
-                align: 'left' //图例左对齐
-            },
-            backgroundColor: '#12DFE0',
-            formatter: '{a0}: {c0}°C<br />{a1}: {c1}°C<br />{a2}: {c2}°C<br />时间：2021年3月{b}日'
+    draw() {
+      this.myChart = this.$echarts.init(document.getElementById("myChart"));
+      this.myChart.setOption({
+        // 通过这个color修改两条线的颜色
+        title: {
+          text: "一氧化碳浓度",
+          textStyle: {
+            align: "center",
+            color: "#fff",
+            fontSize: '.225rem ',
+          },
+          left: "center",
+        },
 
+        color: ["#60FF12", "#FF1212", "#26BFFF"],
+        tooltip: {
+          trigger: "axis",
         },
+        // 图列组件
         legend: {
-            // 如果series 对象有name 值，则 legend可以不用写data
-            itemGap: 20,
-            itemHeight: 2,
-            itemWidth: 15,
-            icon: 'rect',
-            textStyle: {
-                color: "#fff"
-            },
-            top: "bottom",
+          itemGap: 50,
+          /* 如果series对象有name值，则legend可以不用写data */
+          // 修改图列组件文字颜色
+          textStyle: {
+            color: "#fff",
+            fontSize:'.225rem '
+          },
+
+          bottom: "-2%",
         },
         grid: {
-            top: "0%",
-            left: "1%",
-            right: "1%",
-            bottom: "15%",
-            show: true, // 显示边框
-            borderWidth: '0', //去除边框
-            containLabel: true // 包含刻度文字在内
+          left: "1%",
+          right: "1%",
+          top: "13%",
+          bottom: "10%",
+          containLabel: true, // 包含刻度文字在内
         },
-
         xAxis: {
-            type: "category",
-            boundaryGap: false,
-            data: xData,
-            axisTick: {
-                show: false // 去除刻度线
-            },
-            axisLabel: {
-                color: "#AADDFF" // 文本颜色
-            },
-            axisLine: {
-                show: false // 去除轴线
-            }
+          type: "category",
+          boundaryGap: true,
+          data: [
+            "09:00",
+            "11:00",
+            "13:00",
+            "15:00",
+            "17:00",
+            "19:00",
+            "21:00",
+            "23:00",
+            "01:00",
+            "03:00",
+            "05:00",
+            "07:00",
+          ],
+          axisTick: {
+            show: false, //去除刻度线
+          },
+          axisLabel: {
+            color: "#4c9bfd", // 文本颜色
+          },
+          axisLine: {
+            show: false, // 去除轴线
+          },
+          // boundaryGap: false
         },
-
         yAxis: {
-            type: "value",
-            axisTick: {
-                show: false // 去除刻度线
-            },
-            axisLabel: {
-                show: false // 去除文本
+          type: "value",
+          axisTick: {
+            show: false, //去除刻度线
+          },
+          axisLabel: {
+            color: "#fff", // 文本颜色
+          },
+          axisLine: {
+            show: false, // 去除轴线
+          },
+          splitNumber: 5,
+          splitLine: {
+            show: true,
+            lineStyle: {
+              color: "rgba(-11,72,255,.5)",
             },
-            axisLine: {
-                show: false // 去除轴线
-            },
-            splitLine: {
-                lineStyle: {
-                    color: "#012f4a" // 分割线颜色
-                }
-            }
+          },
         },
-        series: [{
-                symbol: "none",
-                name: "线缆产生的温度",
-                type: "line",
-                smooth: true, // true 可以让我们的折线显示带有弧度
-                // areaStyle: {
-                //     normal: {
-                //         color: new echarts.graphic.LinearGradient(
-                //             0,
-                //             0,
-                //             0,
-                //             1, [{
-                //                     offset: 0,
-                //                     color: "rgba(5,238,231,.6)"
-                //                 },
-                //                 {
-                //                     offset: 0.8,
-                //                     color: "rgba(5,238,231, 0.4)"
-                //                 }
-                //             ],
-                //             false
-                //         ),
-                //     }
-                // },
-
-                data: sortData[0].data[0]
-            },
-            {
-                symbol: "none",
-                name: "环境温度",
-                type: "line",
-                smooth: true,
-                areaStyle: {
-                    // normal: {
-                    //     color: new echarts.graphic.LinearGradient(
-                    //         0,
-                    //         0,
-                    //         0,
-                    //         1, [{
-                    //                 offset: 0,
-                    //                 color: "rgba(153,153,255,.6)"
-                    //             },
-                    //             {
-                    //                 offset: 0.8,
-                    //                 color: "rgba(153,153,255, 0.4)"
-                    //             }
-                    //         ],
-                    //         false
-                    //     ),
-                    // }
-                },
-
-                data: sortData[0].data[1]
-            },
-            {
-                symbol: "none",
-                name: "线缆温度",
-                type: "line",
-                smooth: true,
-                areaStyle: {
-                    normal: {
-                        // color: new echarts.graphic.LinearGradient(
-                        //     0,
-                        //     0,
-                        //     0,
-                        //     1, [{
-                        //             offset: 0,
-                        //             color: "rgba(255,147,180,.6)"
-                        //         },
-                        //         {
-                        //             offset: 0.8,
-                        //             color: "rgba(255,147,180, 0.4)"
-                        //         }
-                        //     ],
-                        //     false
-                        // ),
-                    }
-                },
-
-                data: sortData[0].data[2]
-            }
-        ]
-        })
-	}
-
-      
-   
-  }
-}
+        series: [
+          {
+            name: "位置AAA",
+            type: "line",
+            smooth: false, // 曲线是否平滑显示
+            data: yearData[0].data[0],
+            symbolSize: 10, //拐点圆的大小
+          },
+          {
+            name: "位置bbb",
+            type: "line",
+            smooth: false, // 曲线是否平滑显示
+            data: yearData[0].data[1],
+            symbolSize: 10, //拐点圆的大小
+          },
+          {
+            name: "位置CCC",
+            type: "line",
+            smooth: false, // 曲线是否平滑显示
+            data: yearData[0].data[2],
+            symbolSize: 10, //拐点圆的大小
+          },
+        ],
+      });
+    },
+  },
+};
 </script>
 <style>
-
 </style>

src/pages/gasCard/gasCard.vue

@@ -3,6 +3,7 @@
     <top-header></top-header>
 
     <div class="gas-container">
+      <div class="return-back">返回</div>
       <h3>可燃气体监控实时信息</h3>
       <p>更新时间：2021-06-15 13:25:00</p>
 
@@ -12,15 +13,13 @@
           <li @click="Inv=1">数据可视化</li>
         </ul>
 
-        <div class="gasTabs">
+        <div class="tabBox">
           <div>
-           
-          
-            <div v-if="Inv == 0" class="lineChart">
+            <div v-if="Inv == 1" class="lineChart gas-data">
              <line-chart></line-chart>
             </div>
 
-             <table v-if="Inv == 1">
+             <table v-if="Inv == 0" >
               <tr>
                 <th>名称qq</th>
                 <th>设备位置</th>
@@ -71,43 +70,5 @@ export default {
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
-.cardTabs li {
-  width: 1.875rem;
-  display: inline-block;
-  font-size: 0.25rem;  
-  height: 0.575rem;
-  line-height: 0.575rem;
-  background: url(../../assets/images/card-bg.png);
-  background-size: cover;
-  cursor: pointer;
-}
-.cardTabs li:first-child {
-  background: url(../../assets/images/card-bg1-active.png);
-}
-.gasTabs {
-  padding: 0.325rem 0.4875rem;
-  margin: 0 auto;
-  width: 11.625rem;
-  height: 4.275rem;
-  background: rgba(255, 255, 255, 0);
-  border: 1px solid #1257c9;
-  border-radius: 7px;
-  box-shadow: inset 0 0 0.2rem 0.0125rem rgba(3, 54, 159, 1);
-  /* box-shadow: 83px 83px 150px 0px rgba(3,54,159,0.20) inset; */
-}
 
-.gasTabs table {
-  border-collapse: collapse;
-  font-size: 0.225rem;
-  width: 100%;
-  line-height: 0.95rem;
-}
-.gasTabs table th {
-  color: #fff;
-  background: rgba(84, 143, 255, 0.5);
-}
-.gasTabs table td {
-  font-size: 0.225rem;
-  font-weight: 400;
-}
 </style>

src/pages/index/index.vue

@@ -80,4 +80,5 @@ export default {
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
 
+
 </style>

src/router/index.js

@@ -4,6 +4,9 @@ import Vue from 'vue'
 
 import Home from '../pages/index/index'
 import gasCard from '../pages/gasCard/gasCard'
+import eleFireCard from '../pages/eleFireCard/eleFireCard'
+import eleFireData from '../pages/eleFireData/eleFireData'
+
 
 // 1.通过Vue.use(插件), 安装插件
 Vue.use(VueRouter)
@@ -20,6 +23,12 @@ const routes = [{
     }, {
         path: '/gasCard',
         component: gasCard
+    }, {
+        path: '/eleFireCard',
+        component: eleFireCard
+    }, {
+        path: '/eleFireData',
+        component: eleFireData
     }
 ]
 const router = new VueRouter({