邓洁 : 用电量弹窗及样式修改

src/components/content/usedEle/UsedEle.vue

@@ -1,6 +1,6 @@
 <template>
   <div id="used-ele">
-    <div class="content">
+    <div class="content" @click="handleOpenChart">
       <div class="item">
         <div></div>
         <span>当月用电量：{{ electricityConsumptionMonthly }}v</span>
@@ -10,17 +10,44 @@
         <span>当月节省量：{{ monthlySavings }}v</span>
       </div>
     </div>
+    <div class="digital-tunnel">
+      <el-dialog v-model="isVisited" width="1365px" :modal="false">
+        <div class="left-top-icon"></div>
+        <div class="right-top-icon"></div>
+        <div class="top-tag">
+          <div class="allUsedEle">
+            <div class="use-title">
+              12月总用电量
+            </div>
+            <div class="value">2345v</div>
+          </div>
+          <div class="allUsedEle">
+            <div class="use-title">
+              当月节省量
+            </div>
+            <div class="value">345v</div>
+          </div>
+        </div>
+        <div id="containerEle"></div>
+        <div class="left-bottom-icon"></div>
+        <div class="right-bottom-icon"></div>
+      </el-dialog>
+    </div>
   </div>
 </template>
 
 <script setup>
+import * as echarts from 'echarts';
+
 const props = defineProps({
   list: Array,
   eleData: Array
 });
+let myEcharts = reactive({});
+const isVisited = ref(false);
 const eleData = ref([])
-const electricityConsumptionMonthly=ref()
-const monthlySavings=ref(55555)
+const electricityConsumptionMonthly = ref()
+const monthlySavings = ref(55555)
 watch(() => props.eleData, (now) => {
   getBasicData(now.frequencyChangerList)
 }, {deep: true});
@@ -29,7 +56,7 @@ watch(() => props.list, (now) => {
     now.forEach(newItem => {
       if (item.equipmentId === newItem.equipmentId) {
         if (newItem.electricityConsumptionDay) {
-          electricityConsumptionMonthly.value=newItem.electricityConsumptionMonthly
+          electricityConsumptionMonthly.value = newItem.electricityConsumptionMonthly
           // item.electricityConsumptionDay = newItem.electricityConsumptionDay
           // item.electricityConsumptionMonthly = newItem.electricityConsumptionMonthly
           // item.electricityConsumptionTotal = newItem.electricityConsumptionTotal
@@ -42,18 +69,92 @@ const getBasicData = (data) => {
   let tranObj = {}
   let tranArr = []
   data.map(item => {
-    electricityConsumptionMonthly.value=item.electricityConsumptionMonthly,
-    tranObj = {
-      equipmentId: item.equipmentId,
-      // equipmentName: item.equipmentName,
-      // electricityConsumptionDay: item.electricityConsumptionDay,
-      // electricityConsumptionMonthly: item.electricityConsumptionMonthly,
-      // electricityConsumptionTotal: item.electricityConsumptionTotal,
-    }
+    electricityConsumptionMonthly.value = item.electricityConsumptionMonthly,
+        tranObj = {
+          equipmentId: item.equipmentId,
+          // equipmentName: item.equipmentName,
+          // electricityConsumptionDay: item.electricityConsumptionDay,
+          // electricityConsumptionMonthly: item.electricityConsumptionMonthly,
+          // electricityConsumptionTotal: item.electricityConsumptionTotal,
+        }
     tranArr.push(tranObj)
   })
   eleData.value = tranArr
 }
+const handleOpenChart = () => {
+  console.log('用电量弹窗')
+  isVisited.value = true
+  nextTick(() => {
+    initChart()
+  })
+}
+/**
+ * 初始化echarts实例方法
+ */
+const initChart = () => {
+  //3.初始化container容器
+  myEcharts = echarts.init(document.getElementById('containerEle'));
+  //5.传入数据
+  let option = {
+    //图例
+    legend: {
+      left: 0,
+      textStyle: {
+        color: '#FFFFFF',
+        fontSize: 28
+      },
+      // itemWidth: 20,
+      // itemHeight: 20
+    },
+    //离容器四侧的距离
+    grid: {
+      left: 0, // 左边距
+      right: 20, // 右边距
+      // top: 80, // 顶边距
+      bottom: 20, // 底边距
+      containLabel: true,
+    },
+    //提示框组件
+    tooltip: {
+      show: true,
+      trigger: 'axis'
+    },
+    //X轴
+    xAxis: {
+      type: 'category',
+      data: ['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'],
+      axisLabel: {
+        textStyle: {
+          fontSize: 24,
+          color: '#D6F1FA'
+        },
+      },
+    },
+    //Y轴
+    yAxis: {
+      type: 'value',
+      axisLabel: {
+        textStyle: {
+          fontSize: 24,
+          color: '#D6F1FA'
+        },
+      },
+    },
+    //配置项
+    series: [
+      {
+        data: [120, 200, 150, 80, 70, 110, 130, 100, 140, 130, 160, 150, 90, 130, 110, 120, 150, 140, 130, 120, 110, 100, 90, 80, 100, 140, 130, 160, 150, 24, 50],
+        type: 'bar'
+      },
+    ]
+  }
+  myEcharts.setOption(option);
+  //图表大小自适应窗口大小变化
+  window.onresize = () => {
+    myEcharts.resize();
+  }
+}
+
 </script>
 
 <style lang="scss" scoped>
@@ -82,6 +183,7 @@ const getBasicData = (data) => {
     display: flex;
     align-items: center;
     justify-content: space-between;
+    cursor: pointer;
 
     .item {
       height: 37px;