修改整体样式偏大问题

ali

2025-01-13 2f2b09869423f7e98c64f79dc96c62d9a1696f24

 zhitan-vue/src/views/powerbalance/powerbalance.vue

@@ -8,22 +8,22 @@
        <div class="table-box">
          <div class="table-header-box">
            <div>
              <div class="cell"> </div>
              <div class="cell"></div>
            </div>
            <div v-for=" (item, i) in tableHeaderData" :key="i">
            <div v-for="(item, i) in tableHeaderData" :key="i">
              <div class="cell">{{ item }}</div>
            </div>
          </div>

          <div class="table-content-box" v-for="(items, i) in ListData" :key="i">
            <div class="calc6_4 ">
              <div style="display: flex;align-items: center; width: 100%;border: 1px solid #666;">
            <div class="calc6_4">
              <div style="display: flex; align-items: center; width: 100%; border: 1px solid #666">
                <div class="calc4">
                  {{ items.jinList.jinName }}
                </div>
                <div class="width50">
                  <div v-for="  (item, k) in items.jinList.list" :key="k" class="data-list-ul">
                    <div class="width50" style="border-right: 1px solid #666;">{{ item.title }}</div>
                  <div v-for="(item, k) in items.jinList.list" :key="k" class="data-list-ul">
                    <div class="width50" style="border-right: 1px solid #666">{{ item.title }}</div>
                    <div class="width50">{{ item.num }}</div>
                  </div>
                </div>
@@ -31,16 +31,19 @@
                  {{ items.jinList.total }}
                </div>
              </div>
              <div style="display: flex;align-items: center; width: 100%;border: 1px solid #666;">
              <div style="display: flex; align-items: center; width: 100%; border: 1px solid #666">
                <div class="calc4">
                  {{ items.chuList.chuName }}
                </div>
                <div class="width50">
                  <div v-for="  (item, k) in items.chuList.list" :key="k"
                    style="display: flex;align-items: center; width: 100%;" class="data-list-ul">
                    <div class="width50" style="border-right: 1px solid #666;">{{ item.title }}</div>
                  <div
                    v-for="(item, k) in items.chuList.list"
                    :key="k"
                    style="display: flex; align-items: center; width: 100%"
                    class="data-list-ul"
                  >
                    <div class="width50" style="border-right: 1px solid #666">{{ item.title }}</div>
                    <div class="width50">{{ item.num }}</div>

                  </div>
                </div>
                <div class="calc4">
@@ -48,21 +51,23 @@
                </div>
              </div>
            </div>
            <div class="calc6"
              style="border: 1px solid #666;display: flex;align-items: center;justify-content: center;">
            <div
              class="calc6"
              style="border: 1px solid #666; display: flex; align-items: center; justify-content: center"
            >
              <div>
                {{ items.cha }}
              </div>
            </div>
            <div class="calc6"
              style="border: 1px solid #666;display: flex;align-items: center;justify-content: center;">
            <div
              class="calc6"
              style="border: 1px solid #666; display: flex; align-items: center; justify-content: center"
            >
              <div>
                {{ items.baifenbi }}
              </div>

            </div>
          </div>

        </div>
        <BaseCard title="能源流向分析">
          <div class="chart-box">
@@ -74,119 +79,111 @@
  </div>
</template>
<script setup>
import useSettingsStore from '@/store/modules/settings'
import useSettingsStore from "@/store/modules/settings"
const settingsStore = useSettingsStore()
import * as echarts from 'echarts';
import { onMounted } from 'vue';
import * as echarts from "echarts"
import { onMounted } from "vue"
/** 节点单击事件 */
function handleNodeClick(data) {
}
function handleNodeClick(data) {}


const tableHeaderData = ['线路名称', '耗电量', '小计', '差值', '百分比']
const tableHeaderData = ["线路名称", "耗电量", "小计", "差值", "百分比"]
const ListData = ref([
  {
    id: 1,
    jinList: {
      jinName: '进线',
      jinName: "进线",
      list: [
        { num: 24726900, title: '1#主变' },
        { num: 0, title: '冶三余热发电反向' },
        { num: 958880, title: '吉顺光伏1#线' },
        { num: 874720, title: '吉顺光伏2#线' }
        { num: 24726900, title: "1#主变" },
        { num: 0, title: "冶三余热发电反向" },
        { num: 958880, title: "吉顺光伏1#线" },
        { num: 874720, title: "吉顺光伏2#线" },
      ],
      total: 39375820
      total: 39375820,
    },

    chuList: {
      chuName: '出线',
      chuName: "出线",
      list: [
        { num: 1766800, title: '冶三鼓风机房1#线' },
        { num: 1046400, title: '冶三鼓风机房2#线' },
        { num: 1790400, title: '冶三硫酸1#线' },
        { num: 1385700, title: '冶三硫酸2#线' },
        { num: 5058600, title: '冶三制氧1#线' },
        { num: 3921600, title: '冶三制氧2#线' },
        { num: 215760, title: '生化2#线' },
        { num: 0, title: '侧吹精炼1#线' },
        { num: 5555000, title: '侧吹熔炼1#线' },
        { num: 4786530, title: '1#35kV生化线' },
        { num: 973980, title: '2#35kV生化线' },
        { num: 7680, title: '吉顺光伏1#线' },
        { num: 5280, title: '吉顺光伏2#线' }

        { num: 1766800, title: "冶三鼓风机房1#线" },
        { num: 1046400, title: "冶三鼓风机房2#线" },
        { num: 1790400, title: "冶三硫酸1#线" },
        { num: 1385700, title: "冶三硫酸2#线" },
        { num: 5058600, title: "冶三制氧1#线" },
        { num: 3921600, title: "冶三制氧2#线" },
        { num: 215760, title: "生化2#线" },
        { num: 0, title: "侧吹精炼1#线" },
        { num: 5555000, title: "侧吹熔炼1#线" },
        { num: 4786530, title: "1#35kV生化线" },
        { num: 973980, title: "2#35kV生化线" },
        { num: 7680, title: "吉顺光伏1#线" },
        { num: 5280, title: "吉顺光伏2#线" },
      ],
      total: 39173060
      total: 39173060,
    },
    cha: 202760,
    baifenbi: '0.51%'
    baifenbi: "0.51%",
  },
])

watch(
  () => settingsStore.sideTheme,
  (val) => {
    getChart()
  }

]);



watch(() => settingsStore.sideTheme, (val) => {
  getChart()
})
)

function getChart() {


  let colors = ['#FBB4AE', '#B3CDE3', '#CCEBC5', '#DECBE4', '#5470C6'];
  let colors = ["#FBB4AE", "#B3CDE3", "#CCEBC5", "#DECBE4", "#5470C6"]
  let mydata = [
    { id: 1, name: '1#主变', itemStyle: { color: colors[0] }, depth: 0 },
    { id: 2, name: '吉顺光伏1#线', itemStyle: { color: colors[0] }, depth: 0 },
    { id: 3, name: '吉顺光伏2#线', itemStyle: { color: colors[0] }, depth: 0 },
    { id: 4, name: '冶三余热发电反向', itemStyle: { color: colors[0] }, depth: 0 },
    { id: 1, name: "1#主变", itemStyle: { color: colors[0] }, depth: 0 },
    { id: 2, name: "吉顺光伏1#线", itemStyle: { color: colors[0] }, depth: 0 },
    { id: 3, name: "吉顺光伏2#线", itemStyle: { color: colors[0] }, depth: 0 },
    { id: 4, name: "冶三余热发电反向", itemStyle: { color: colors[0] }, depth: 0 },


    { id: 5, name: '进出线', itemStyle: { color: colors[1] }, depth: 1 },
    { id: 5, name: "进出线", itemStyle: { color: colors[1] }, depth: 1 },
    // { name: 'L2-1', itemStyle: { color: colors[1] }, depth: 1 },
    // { name: 'L2-2', itemStyle: { color: colors[1] }, depth: 1 },
    // { name: 'L2-3', itemStyle: { color: colors[1] }, depth: 1 },


    // { name: 'L3', itemStyle: { color: colors[2] }, depth: 2 },
    // { name: 'L3-1', itemStyle: { color: colors[2] }, depth: 2 },
    // { name: 'L3-2', itemStyle: { color: colors[2] }, depth: 2 },

    { id: 6, name: '冶三鼓风机房1#线', itemStyle: { color: colors[3] }, depth: 3 },
    { id: 7, name: '冶三鼓风机房2#线', itemStyle: { color: colors[3] }, depth: 3 },
    { id: 8, name: '冶三硫酸1#线', itemStyle: { color: colors[3] }, depth: 3 },
    { id: 9, name: '冶三硫酸2#线', itemStyle: { color: colors[3] }, depth: 3 },
    { id: 10, name: '冶三制氧1#线', itemStyle: { color: colors[3] }, depth: 3 },
    { id: 11, name: '冶三制氧2#线', itemStyle: { color: colors[3] }, depth: 3 },
    { id: 12, name: '生化2#线', itemStyle: { color: colors[3] }, depth: 3 },
    { id: 13, name: '侧吹精炼1#线', itemStyle: { color: colors[3] }, depth: 3 },
    { id: 14, name: '侧吹熔炼1#线', itemStyle: { color: colors[3] }, depth: 3 },
    { id: 15, name: '1#35kV生化线', itemStyle: { color: colors[3] }, depth: 3 },
    { id: 16, name: '2#35kV生化线', itemStyle: { color: colors[3] }, depth: 3 },
    { id: 17, name: '吉顺光伏1#线', itemStyle: { color: colors[3] }, depth: 3 },
    { id: 18, name: '吉顺光伏2#线', itemStyle: { color: colors[3] }, depth: 3 },
  ];
    { id: 6, name: "冶三鼓风机房1#线", itemStyle: { color: colors[3] }, depth: 3 },
    { id: 7, name: "冶三鼓风机房2#线", itemStyle: { color: colors[3] }, depth: 3 },
    { id: 8, name: "冶三硫酸1#线", itemStyle: { color: colors[3] }, depth: 3 },
    { id: 9, name: "冶三硫酸2#线", itemStyle: { color: colors[3] }, depth: 3 },
    { id: 10, name: "冶三制氧1#线", itemStyle: { color: colors[3] }, depth: 3 },
    { id: 11, name: "冶三制氧2#线", itemStyle: { color: colors[3] }, depth: 3 },
    { id: 12, name: "生化2#线", itemStyle: { color: colors[3] }, depth: 3 },
    { id: 13, name: "侧吹精炼1#线", itemStyle: { color: colors[3] }, depth: 3 },
    { id: 14, name: "侧吹熔炼1#线", itemStyle: { color: colors[3] }, depth: 3 },
    { id: 15, name: "1#35kV生化线", itemStyle: { color: colors[3] }, depth: 3 },
    { id: 16, name: "2#35kV生化线", itemStyle: { color: colors[3] }, depth: 3 },
    { id: 17, name: "吉顺光伏1#线", itemStyle: { color: colors[3] }, depth: 3 },
    { id: 18, name: "吉顺光伏2#线", itemStyle: { color: colors[3] }, depth: 3 },
  ]
  // mydata.reverse()
  let mylinks = [
    // L1→L4    9720
    { source: '1', target: '5', value: 24726900 },
    { source: '2', target: '5', value: 958880 },
    { source: '3', target: '5', value: 874720 },
    { source: '4', target: '5', value: 0 },
    { source: "1", target: "5", value: 24726900 },
    { source: "2", target: "5", value: 958880 },
    { source: "3", target: "5", value: 874720 },
    { source: "4", target: "5", value: 0 },
    // L2→L4    24396
    { source: '5', target: '6', value: 1766800 },
    { source: '5', target: '7', value: 1046400 },
    { source: '5', target: '8', value: 1790400 },
    { source: '5', target: '9', value: 1385700 },
    { source: '5', target: '10', value: 5058600 },
    { source: '5', target: '11', value: 3921600 },
    { source: '5', target: '12', value: 215760 },
    { source: '5', target: '13', value: 0 },
    { source: '5', target: '14', value: 5555000 },
    { source: '5', target: '15', value: 4786530 },
    { source: '5', target: '16', value: 973980 },
    { source: '5', target: '17', value: 7680 },
    { source: '5', target: '18', value: 5280 },

    { source: "5", target: "6", value: 1766800 },
    { source: "5", target: "7", value: 1046400 },
    { source: "5", target: "8", value: 1790400 },
    { source: "5", target: "9", value: 1385700 },
    { source: "5", target: "10", value: 5058600 },
    { source: "5", target: "11", value: 3921600 },
    { source: "5", target: "12", value: 215760 },
    { source: "5", target: "13", value: 0 },
    { source: "5", target: "14", value: 5555000 },
    { source: "5", target: "15", value: 4786530 },
    { source: "5", target: "16", value: 973980 },
    { source: "5", target: "17", value: 7680 },
    { source: "5", target: "18", value: 5280 },

    // // L3→L4    1462
    // { source: 'L3', target: 'L4', value: 1462 },
@@ -206,28 +203,26 @@
    // // L2→L3→L4    893
    // { source: 'L2-3', target: 'L3-3', value: 893 },
    // { source: 'L3-3', target: 'L4', value: 893 },
  ]

  ];


  const myChart1 = echarts.init(document.getElementById("Chart1"));
  const myChart1 = echarts.init(document.getElementById("Chart1"))
  myChart1.setOption({
    tooltip: {
      trigger: 'item',
      triggerOn: 'mousemove',
      trigger: "item",
      triggerOn: "mousemove",
    },
    series: {
      type: 'sankey',
      type: "sankey",
      lineStyle: {
        opacity: 0.3,
        color: 'gradient',
        color: "gradient",
        curveness: 0.7,
      },
      // nodeAlign: 'left',
      nodeGap: 18,
      layoutIterations: 1,
      emphasis: {
        focus: 'adjacency',
        focus: "adjacency",
      },
      data: mydata,
      links: mylinks,
@@ -237,15 +232,19 @@
          // position: 'left', // 标签位置
          formatter: function (node) {
            // 自定义标签内容
            return node.data.name;
          }
        }
            return node.data.name
          },
        },
      },
    },
  })
  window.addEventListener("resize", () => {
    myChart1.resize();
  }, { passive: true });
  window.addEventListener(
    "resize",
    () => {
      myChart1.resize()
    },
    { passive: true }
  )
}
onMounted(() => {
  getChart()
@@ -272,7 +271,7 @@
  padding: 8px 0;
  align-items: center;

  &>div {
  & > div {
    width: calc(100% / 6);
    word-break: break-word;
    background-color: #1d3778 !important;
@@ -296,13 +295,12 @@
      line-height: 23px;
      padding: 0 12px;
    }


  }
}

.table-content-box {
  color: #fff;
  background-color: #1d3778 !important;
  padding: 8px 0;
  width: 100%;
  display: flex;
@@ -311,24 +309,20 @@
  align-items: stretch;

  .calc6_4 {
    width: calc((100% / 6) * 4)
    width: calc((100% / 6) * 4);
  }



  .calc6 {
    width: calc(100% / 6)
    width: calc(100% / 6);
  }

  .calc4 {
    width: calc(100% / 4)
    width: calc(100% / 4);
  }

  .width50 {
    width: 50%;
  }



  .data-list-ul {
    width: 100%;
@@ -353,8 +347,6 @@
    //   /* 使用省略号表示溢出的文本 */
    // }
  }


}

.chart-box {
@@ -366,4 +358,4 @@
    height: 100%;
  }
}
</style>
</style>