feat: 新效果大屏暂存

src/views/largeScreen/ProductionCommandCenter3.vue

@@ -1,102 +1,137 @@
 <!-- 4096*2160版本 6个图表 iframe作为背景-->
 <script>
-import ProductData from './components/ProductData.vue'
-import Production from './components/Production.vue'
-import ProductQualityRate from './components/ProductQualityRate.vue'
-import FurnaceTemperatureStability from './components/FurnaceTemperatureStability.vue'
-import UnitPowerConsumption from './components/UnitPowerConsumption.vue'
-import PowerUsage from './components/PowerUsage.vue'
+import PieChart from './components/PieChart.vue'
+import BarChart from './components/BarChart.vue'
+import ElectrodeConsumption from './components/ElectrodeConsumption.vue'
 
 export default {
   components: {
-    ProductData,
-    Production,
-    ProductQualityRate,
-    FurnaceTemperatureStability,
-    UnitPowerConsumption,
-    PowerUsage
+    PieChart,
+    BarChart,
+    ElectrodeConsumption
+  },
+  methods: {
+    getItemStyle(item) {
+      return {
+        backgroundImage: `url(${require('@/assets/big-screen/nav/' + item + '.png')})`,
+        backgroundSize: '100% 100%',
+        backgroundRepeat: 'no-repeat',
+        backgroundPosition: 'center'
+      }
+    }
   }
 }
 </script>
 
 <template>
-  <div class="main">
-    <div id="middleTitle" class="middleTitle">
-      <!-- <div class="cockpit"><div class="cockpitFont">驾驶舱</div></div>
-      <div class="branchPlantProCap"><div class="branchPlantProCapFont">分厂产能</div></div> -->
-      <div class="middleTitleFont"><img src="@/assets/title.png" alt="" /></div>
-      <!-- <div class="productionEfficiency"><div class="productionEfficiencyFont">生产效能</div></div>
-      <div class="safetyManagement"><div class="safetyManagementFont">安全管理</div></div> -->
+  <div class="main-container">
+    <div class="top-container"></div>
+
+    <div class="center-container">
+      <iframe width="100%" height="100%" src="http://127.0.0.1:10000/"></iframe>
     </div>
-    <div class="operatingStatusBox">
-      <div class="operatingStatus1">
-        <iframe width="100%" height="100%" src="https://e.baidu.com/?refer=50008978"></iframe>
+
+    <div class="left-container">
+      <div class="container-content">
+
+        <div class="container-content-top">
+          <div class="title-box yunxingzhuangtai"></div>
+          <div class="box-container">
+            <div class="line-item bg">
+              <div class="lint-item-title">本月累计产量</div>
+              <div class="icon"><img src="@/assets/big-screen/icon-chanliang.png" alt="" /><</div>
+              <div class="value">432,928<span class="unit">t</span></div>
+              <div class="end-time">截止到8-20</div>
             </div>
-      <div class="operatingStatus left">
-        <div class="operatingStatusFont">工厂整体运行状态</div>
-        <div class="operatingStatusContent">
-          <div class="contentBox">
-            <div class="contentBoxFont">
-              <img src="@/assets/Component 1.svg" alt="" />
-            </div>
-            <div class="contentBoxCont">
-              <product-data></product-data>
+            <div class="line-item bg">
+              <div class="lint-item-title">产品回收率</div>
+              <div style="width: 100%; height: calc(100% - 60px);">
+                <PieChart></PieChart>
               </div>
             </div>
-          <div class="contentBox">
-            <div class="contentBoxFont">
-              <img src="@/assets/Component 6.svg" alt="" />
-              <span>单位：t</span>
-            </div>
-            <div class="contentBoxCont">
-              <production></production>
+            <div class="line-item bg">
+              <div class="lint-item-title">炉温稳定率</div>
+              <div style="width: 100%; height: calc(100% - 60px);">
+                <PieChart></PieChart>
               </div>
             </div>
-          <div class="contentBox">
-            <div class="contentBoxFont">
-              <img src="@/assets/Component 8.svg" alt="" />
-              <span>百分比</span>
           </div>
-            <div class="contentBoxCont">
-              <div class="contentBoxCont">
-                <product-quality-rate></product-quality-rate>
+
+          <div class="title-box chanliang"></div>
+          <div class="box-container title">
+            <div class="line-item">
+              <div class="lint-item-title">硅锰合计</div>
+            </div>
+            <div class="line-item">
+              <div class="lint-item-title">铬铁合计</div>
+            </div>
+            <div class="line-item">
+              <div class="lint-item-title">硅铁合计</div>
+            </div>
+          </div>
+          <div class="box-container title-box">
+            <div class="line-item bg"></div>
+            <div class="line-item bg"></div>
+            <div class="line-item bg"></div>
+          </div>
+        </div>
+
+        <div class="container-content-bottom">
+          <div class="chart-container luwenwendinglv">
+            <div class="title-chart-box luwenwendinglv"></div>
+            <div class="chart-box-container" style="width: 100%; height: calc(100% - 8rem);">
+              <BarChart></BarChart>
+            </div>
+          </div>
+        </div>
+
+      </div>
+    </div>
+
+    <div class="right-container">
+      <div class="container-content" style="display: flex;">
+
+        <div class="left">
+          <div class="container-content-top">
+            <div class="title-box xiaohaoshuju"></div>
+            <div class="box-container">
+              <div class="line-item">1</div>
+              <div class="line-item">2</div>
+              <div class="line-item">3</div>
+            </div>
+
+            <div class="chart-container danweidianhao">
+              <div class="title-chart-box danweidianhao"></div>
+              <div class="chart-box-container" style="width: 100%; height: calc(100% - 8rem);">
+                <!-- <LineChart></LineChart> -->
+                <ElectrodeConsumption></ElectrodeConsumption>
+              </div>
+            </div>
+          </div>
+
+          <div class="container-content-bottom">
+            <div class="title-box anquanjiance"></div>
+
+            <div class="chart-container anquanjiance">
+              <div>
+                <div>2022-11-23 11:37:25</div>
+                <div>Ⅱ级 xxxx段发生严重xx，请立即前往处理!</div>
+              </div>
+              <div>
+                <div>2022-11-23 09:37:25</div>
+                <div>Ⅱ级 xxxx段发生严重xx，请立即前往处理!</div>
               </div>
             </div>
           </div>
         </div>
-      </div>
-      <div class="operatingStatus right">
-        <div class="operatingStatusFont">能耗与电耗分析</div>
-        <div class="operatingStatusContent">
-          <div class="contentBox">
-            <div class="contentBoxFont">
-              <img src="@/assets/Component 12.svg" alt="" />
-            </div>
-            <div class="contentBoxCont">
-              <PowerUsage />
-            </div>
-          </div>
-          <div class="contentBox">
-            <div class="contentBoxFont">
-              <img src="@/assets/Component 13.svg" alt="" />
-              <span>单位：kWh/t</span>
-            </div>
-            <div class="contentBoxCont">
-              <div class="contentBoxCont">
-                <UnitPowerConsumption />
-              </div>
-            </div>
-          </div>
-          <div class="contentBox">
-            <div class="contentBoxFont">
-              <img src="@/assets/Component 5.svg" alt="" />
-            </div>
-            <div class="contentBoxCont">
-              <div class="contentBoxCont">
-                <furnace-temperature-stability></furnace-temperature-stability>
-              </div>
-            </div>
-          </div>
+
+        <div class="right">
+          <div
+            class="luzi-item"
+            v-for="item in 14"
+            :key="item"
+            :style="getItemStyle(item)"
+          ></div>
         </div>
       </div>
     </div>
@@ -104,204 +139,197 @@ export default {
 </template>
 
 <style scoped lang="less">
-.main {
-  position: relative;
-  width: 256rem; // 416 * 0.615
-  height: 135rem; // 114.1875 * 1.154
-  background: radial-gradient(50% 50% at 50% 50%, #0f3b8c 0%, #0e357e 33.17%, #041026 100%);
-}
-.middleTitle {
-  position: relative;
-  z-index: 9999;
-  width: 256rem; // 415.8125 * 0.615
-  height: 11.77rem; // 10.19919 * 1.154
-  flex-shrink: 0;
-  padding-top: 16px; // 33.81 * 1.154
-  display: inline-block;
-  background-image: url('~@/assets/title1.svg');
-  background-size: auto 72%;
+.bg-image-mixin(@image-path) {
+  background-image: url(@image-path);
+  background-size: 100% 100%;
   background-repeat: no-repeat;
-  background-position: top center;
 }
-.middleTitleFont {
-  text-align: center;
-  text-shadow: 0 3.47px 8.68px #010a14; // 3.008 * 1.154, 7.519 * 1.154
-  font-family: 'DingTalk JinBuTi';
-  font-size: 4.33rem; // 3.75 * 1.154
-  font-style: normal;
-  font-weight: 400;
-  line-height: 4.33rem; // 3.75 * 1.154
-  letter-spacing: 0.87rem; // 0.75 * 1.154
-
-  background: linear-gradient(180deg, #fff 0%, #96dbf2 66.32%);
-  background-clip: text;
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
+.lint-item-title {
+  color: #40a9ff;
+  font-size: 2rem;
 }
-.cockpit {
-  width: 15.97rem; // 25.96338 * 0.615
-  height: 5.55rem; // 4.8125 * 1.154
-  flex-shrink: 0;
-  margin-left: 41.77rem; // 67.92 * 0.615
-  background-image: url('~@/assets/Group 2785.svg');
-}
-.cockpitFont {
-  text-align: center;
-  text-shadow: 0 3.47px 8.68px #010a14;
-  font-family: 'DingTalk JinBuTi';
-  font-size: 3.25rem; // 2.8125 * 1.154
-  font-style: normal;
-  font-weight: 400;
-  letter-spacing: 0.87rem;
-
-  background: linear-gradient(180deg, #fff 0%, #dff7ff 66.32%);
-  background-clip: text;
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-}
-.branchPlantProCap {
-  width: 15.97rem;
-  height: 5.55rem;
-  flex-shrink: 0;
-  margin-left: 57.84rem; // 94.04 * 0.615
-  background-image: url('~@/assets/Group 2789.png');
-}
-.branchPlantProCapFont {
-  text-align: center;
-  text-shadow: 0 3.47px 8.68px #010a14;
-  font-family: 'DingTalk JinBuTi';
-  font-size: 3.25rem;
-  font-style: normal;
-  font-weight: 400;
-  letter-spacing: 0.87rem;
-
-  background: linear-gradient(180deg, rgba(177, 245, 255, 0.8) 0%, rgba(150, 219, 242, 0.8) 66.32%);
-  background-clip: text;
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-}
-.productionEfficiency {
-  width: 16.03rem; // 26.0625 * 0.615
-  height: 5.55rem;
-  flex-shrink: 0;
-  margin-left: 182.04rem; // 296 * 0.615
-  background-image: url('~@/assets/Group 2790.svg');
-}
-.productionEfficiencyFont {
-  text-align: center;
-  text-shadow: 0 3.47px 8.68px #010a14;
-  font-family: 'DingTalk JinBuTi';
-  font-size: 3.25rem;
-  font-style: normal;
-  font-weight: 400;
-  letter-spacing: 0.87rem;
-
-  background: linear-gradient(180deg, rgba(177, 245, 255, 0.8) 0%, rgba(150, 219, 242, 0.8) 66.32%);
-  background-clip: text;
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-}
-.safetyManagement {
-  width: 16.03rem;
-  height: 5.55rem;
-  flex-shrink: 0;
-  margin-left: 198.03rem; // 322 * 0.615
-  background-image: url('~@/assets/Group 2791.svg');
-}
-.safetyManagementFont {
-  text-align: center;
-  text-shadow: 0 3.47px 8.68px #010a14;
-  font-family: 'DingTalk JinBuTi';
-  font-size: 3.25rem;
-  font-style: normal;
-  font-weight: 400;
-  letter-spacing: 0.87rem;
-
-  background: linear-gradient(180deg, rgba(177, 245, 255, 0.8) 0%, rgba(150, 219, 242, 0.8) 66.32%);
-  background-clip: text;
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-}
-.operatingStatus1 {
-  position: absolute;
-  z-index: 1;
-  width: 100%; // 2236 * 0.615
-  height: calc(100% - 11.77rem); // 1217 * 1.154
-  top: 11.77rem; // 10.19919 * 1.154
-  left: 0;
-}
-.operatingStatusFont {
-  color: #fff;
-  font-family: 'DingTalk JinBuTi';
-  font-size: 2.16rem; // 1.8745 * 1.154
-  font-style: normal;
-  font-weight: 400;
-  line-height: 180%;
-  letter-spacing: 0.43rem; // 0.37488 * 1.154
-  height: 4.04rem; // 3.5 * 1.154
-  flex-shrink: 0;
-  background-image: url('~@/assets/Group 1142814701.svg');
-}
-.operatingStatusBox {
-  // position: relative;
-  // display: flex;
-  // justify-content: space-between;
-  // margin: 0px 100px; // 215 * 0.615
-}
-.operatingStatus {
-  position: absolute;
-  z-index: 9999;
-  width: 900px; // 941 * 0.615
-  top: 11.77rem;
-  margin-top: 5rem;
-  &.left {
-    left: 100px;
-  }
-  &.right {
-    right: 100px;
-  }
-}
-.operatingStatusContent {
+.line-item {
+  width: 32%;
+  height: 100%;
+  float: left;
   display: flex;
-  flex-direction: column;
-  height: 1500px; // 1300 * 1.154
-  justify-content: space-around;
-  .contentBox {
-    width: 900px; // 936 * 0.615
-    height: 410px; // 343 * 1.154
-    flex-shrink: 0;
-    .contentBoxFont {
-      overflow: hidden;
+  align-items: center;
+  justify-content: center;
+  &.bg, .bg {
+    .bg-image-mixin('~@/assets/big-screen/bg-line-item.png');
+  }
+}
+.main-container {
   position: relative;
-      span {
+  width: 100%;
+  height: 100vh;
+  background-image: url('~@/assets/big-screen/bg-main.png');
+  background-size: 100% 100%;
+  .top-container {
     position: absolute;
-        z-index: 99;
-        right: 0; // 335 * 0.615
-        top: 10px; // 9 * 1.154
-        font-family: 'DingTalk JinBuTi';
-        font-style: italic;
-        font-weight: 400;
-        font-size: 17px; // 15 * 1.154
-        line-height: 150%;
-        text-align: center;
-        letter-spacing: 0.2em;
-        color: #60f2ff;
-        &.half {
+    z-index: 30;
+    top: 0;
+    width: 100%;
+    height: 7%;
+    background-image: url('~@/assets/big-screen/bg-title.png');
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+  }
+  .center-container {
+    position: absolute;
+    z-index: 20;
+    width: 36%;
+    height: 100%;
+    left: 50%;
+    margin-left: -18%;
+  }
+  .left-container, .right-container {
+    position: absolute;
+    z-index: 20;
+    width: 36%;
+    height: 100%;
+    background-image: url('~@/assets/big-screen/bg-right.png');
+    background-size: 100% 100%;
+    background-position: right;
+    background-repeat: no-repeat;
     right: 0;
+    .container-content {
+      width: 90%;
+      height: 91%;
+      margin: 7% 5% 2%;
+      background-image: url('~@/assets/big-screen/bg-border-right.png');
+      background-size: auto 100%;
+      background-repeat: no-repeat;
+      background-position: right;
+      .container-content-top, .container-content-bottom {
+        width: 100%;
+        padding-left: 9%;
+        padding-right: 5%;
+      }
+      .container-content-top {
+        height: 60%;
+        padding-top: 3rem;
+      }
+      .container-content-bottom {
+        height: 40%;
       }
     }
+    .title-chart-box {
+      height: 3rem;
+      margin: 2rem 3rem;
+      background-repeat: no-repeat;
+      &.luwenwendinglv {
+        background-image: url('~@/assets/big-screen/title-wendinglv.png');
       }
-    .contentBoxCont {
-      background: linear-gradient(126.97deg, rgba(6, 11, 40, 0.74) 28.26%, rgba(10, 14, 35, 0.71) 91.2%);
-      border: 0.94px solid #3675c9;
-      height: 380px; // 298 * 1.154
+      &.danweidianhao {
+        background-image: url('~@/assets/big-screen/title-danweidianhao.png');
       }
     }
-  .contentBox1{
+    .title-box {
+      width: 100%;
+      height: 6rem;
+      background-size: 100% 100%;
+      background-repeat: no-repeat;
+      margin-bottom: 3rem;
+      &.anquanjiance {
+        background-image: url('~@/assets/big-screen/title-anquanjiance.png');
+      }
+      &.chanliang {
+        background-image: url('~@/assets/big-screen/title-chanliang.png');
+      }
+      &.xiaohaoshuju {
+        background-image: url('~@/assets/big-screen/title-xiaohaoshuju.png');
+      }
+      &.yunxingzhuangtai {
+        background-image: url('~@/assets/big-screen/title-yunxingzhuangtai.png');
+      }
+    }
+    .box-container {
+      width: 100%;
+      height: 30%;
       display: flex;
       justify-content: space-between;
-    > div {
-      width: 49%;
+      &.title {
+        height: 5rem;
+      }
+    }
+    .chart-container {
+      width: 100%;
+      margin-bottom: 3rem;
+      background-size: 100% 100%;
+      background-repeat: no-repeat;
+      .title-chart-box {
+      }
+      &.luwenwendinglv {
+        padding-top: 0.5rem;
+        height: 94%;
+        background-image: url('~@/assets/big-screen/border-wendinglv.png');
+        .chart-box-container {
+          width: 100%;
+          height: 100%;
+        }
+      }
+      &.danweidianhao {
+        padding-top: 0.5rem;
+        height: 40%;
+        background-image: url('~@/assets/big-screen/border-danweidianhao.png');
+      }
+      &.anquanjiance {
+        height: 77%;
+        background-image: url('~@/assets/big-screen/border-anquanjiance.png');
+      }
+    }
+  }
+  .right-container {
+    .container-content {
+      background: none;
+      margin-right: 15px;
+      width: 100%;
+      .left, .right {
+        height: 100%;
+        display: inline-block;
+      }
+      .left {
+        width: 70%;
+      }
+      .right {
+        width: 26%;
+      }
+      .left {
+        background-image: url('~@/assets/big-screen/bg-border-right.png');
+        background-size: auto 100%;
+        background-repeat: no-repeat;
+        background-position: right;
+      }
+      .right {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-evenly;
+        .luzi-item {
+          width: 90%;
+          margin: 0 6% 0 2%;
+          height: 3rem;
+        }
+      }
+    }
+  }
+  .left-container {
+    background-image: url('~@/assets/big-screen/bg-left.png');
+    left: 0;
+    background-position: left;
+    .container-content {
+      background-image: url('~@/assets/big-screen/bg-border-left.png');
+      background-position: left;
+      .container-content-top, .container-content-bottom {
+        padding-left: 5%;
+        padding-right: 9%;
+      }
+      .container-content-top {
+        height: 75%;
+      }
+      .container-content-bottom {
+        height: 25%;
+      }
     }
   }
 }

src/views/largeScreen/components/BarChart.vue

@@ -0,0 +1,165 @@
+<template>
+  <div class="bar-chart">
+    <div class="chart-container" ref="barChart"></div>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+
+export default {
+  name: 'BarChart',
+  data() {
+    return {
+      barChart: null,
+      barData: {
+        dates: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31'],
+        values: [7000, 5000, 6000, 4500, 3000, 5000, 9000, 4500, 6000, 3500, 2000, 6500, 4500, 7500, 5000, 5000, 4500, 6000, 3000, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
+      }
+    }
+  },
+  mounted() {
+    this.initbarChart()
+    // 自适应窗口大小
+    window.addEventListener('resize', this.resizeChart)
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.resizeChart)
+    if (this.barChart) {
+      this.barChart.dispose()
+    }
+  },
+  methods: {
+    initbarChart() {
+      this.barChart = echarts.init(this.$refs.barChart)
+      const seriesData = this.barData.values
+      const option = {
+        grid: {
+          left: '3%',
+          right: '4%',
+          bottom: '3%',
+          top: '5%',
+          containLabel: true
+        },
+        xAxis: {
+          type: 'category',
+          data: this.barData.dates,
+          axisLine: {
+            lineStyle: {
+              color: '#60f2ff'
+            }
+          },
+          axisLabel: {
+            color: '#fff',
+            fontFamily: 'DingTalk JinBuTi',
+            fontSize: 10
+          },
+          axisTick: {
+            show: false
+          }
+        },
+        yAxis: {
+          type: 'value',
+          max: 10000,
+          splitLine: {
+            lineStyle: {
+              color: 'rgba(96, 242, 255, 0.1)'
+            }
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: '#60f2ff'
+            }
+          },
+          axisLabel: {
+            color: '#fff',
+            fontFamily: 'DingTalk JinBuTi',
+            fontSize: 10
+          }
+        },
+        series: [
+          {
+            name: '数量',
+            type: 'pictorialBar',
+            symbol: 'rect',
+            itemStyle: {
+              color: '#10bffc'
+            },
+            symbolRepeat: true,
+            symbolSize: [14, 4],
+            // symbolBoundingData: 100,
+            symbolMargin: 0.5,
+            symbolPosition: 'start',
+            z: -20,
+            data: seriesData,
+            label: {
+              normal: {
+                show: false,
+                position: 'top',
+                verticalAlign: 'top'
+                // formatter: function(value){
+                //   return value && (value.data * 100).toFixed(1) + '%'
+                // }
+              }
+            }
+          },
+          {
+            name: '',
+            type: 'bar',
+            barWidth: 19,
+            itemStyle: {
+              color: 'rgba(0,0,0,0)',
+              borderWidth: 2,
+              borderColor: '#10bffc',
+              padding: 0
+            },
+            label: {
+              show: false
+            },
+            z: -10,
+            data: seriesData
+          },
+          {
+            name: '',
+            type: 'line',
+            // barWidth: 19,
+            symbol:
+              'image://data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAFCAYAAAB1j90SAAABS2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxMzggNzkuMTU5ODI0LCAyMDE2LzA5LzE0LTAxOjA5OjAxICAgICAgICAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIi8+CiA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgo8P3hwYWNrZXQgZW5kPSJyIj8+IEmuOgAAADFJREFUGJVjFNj/hwEK/jMQBxgZGBgYWNAFiAUwjcTaBrcEppEk22A2kmobAwMDAwMA74EE3gW8aacAAAAASUVORK5CYII=',
+            symbolSize: [14, 6],
+            symbolOffset: [0, '-70%'],
+            itemStyle: {
+              color: 'rgba(0,0,0,0)',
+              borderWidth: 2,
+              borderColor: '#10bffc',
+              padding: 0
+            },
+            hoverAnimation: false,
+            legendHoverLink: false,
+            z: -10,
+            data: seriesData
+          }
+        ]
+      }
+      this.barChart.setOption(option)
+    },
+    resizeChart() {
+      if (this.barChart) {
+        this.barChart.resize()
+      }
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+.bar-chart {
+  width: 100%;
+  height: 100%;
+
+  .chart-container {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>

src/views/largeScreen/components/PieChart.vue

@@ -0,0 +1,157 @@
+<template>
+  <div class="pie-chart">
+    <div class="chart-container" ref="chart"></div>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+
+export default {
+  name: 'PieChart',
+  data() {
+    return {
+      chart: null,
+      productionData: {
+        dates: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31'],
+        values: [7000, 5000, 6000, 4500, 3000, 5000, 9000, 4500, 6000, 3500, 2000, 6500, 4500, 7500, 5000, 5000, 4500, 6000, 3000, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
+      }
+    }
+  },
+  mounted() {
+    this.initChart()
+    // 自适应窗口大小
+    window.addEventListener('resize', this.resizeChart)
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.resizeChart)
+    if (this.productionChart) {
+      this.productionChart.dispose()
+    }
+  },
+  methods: {
+    initChart() {
+      this.chart = echarts.init(this.$refs.chart)
+      const option = {
+        title: [
+            {
+            x: 'center',
+            top: '55%',
+            textStyle: {
+                color: '#FFFFFF',
+                fontSize: 16,
+                fontWeight: '100'
+            }
+            },
+            {
+            text: '75%',
+            x: 'center',
+            y: 'center',
+            textStyle: {
+                fontSize: '60',
+                color: '#FFFFFF',
+                fontFamily: 'DINAlternate-Bold, DINAlternate',
+                foontWeight: '600'
+            }
+            }
+        ],
+        polar: {
+            radius: ['42%', '52%'],
+            center: ['50%', '50%']
+        },
+        angleAxis: {
+            max: 100,
+            show: false
+        },
+        radiusAxis: {
+            type: 'category',
+            show: true,
+            axisLabel: {
+            show: false
+            },
+            axisLine: {
+            show: false
+            },
+            axisTick: {
+            show: false
+            }
+        },
+        series: [
+            {
+            name: '',
+            type: 'bar',
+            roundCap: true,
+            barWidth: 30,
+            showBackground: true,
+            backgroundStyle: {
+                color: 'rgba(66, 66, 66, .3)'
+            },
+            data: [60],
+            coordinateSystem: 'polar',
+            itemStyle: {
+                normal: {
+                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
+                    {
+                    offset: 0,
+                    color: '#16CEB9'
+                    },
+                    {
+                    offset: 1,
+                    color: '#6648FF'
+                    }
+                ])
+                }
+            }
+            },
+            {
+            name: '',
+            type: 'pie',
+            startAngle: 80,
+            radius: ['56%'],
+            hoverAnimation: false,
+            center: ['50%', '50%'],
+            itemStyle: {
+                color: 'rgba(66, 66, 66, .1)',
+                borderWidth: 1,
+                borderColor: '#5269EE'
+            },
+            data: [100]
+            },
+            {
+            name: '',
+            type: 'pie',
+            startAngle: 80,
+            radius: ['38%'],
+            hoverAnimation: false,
+            center: ['50%', '50%'],
+            itemStyle: {
+                color: 'rgba(66, 66, 66, .1)',
+                borderWidth: 1,
+                borderColor: '#5269EE'
+            },
+            data: [100]
+            }
+        ]
+      }
+      this.chart.setOption(option)
+    },
+    resizeChart() {
+      if (this.chart) {
+        this.chart.resize()
+      }
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+.pie-chart {
+  width: 100%;
+  height: 100%;
+
+  .chart-container {
+    width: 100%;
+    height: 100%;
+  }
+}
+</style>