集团页面左侧图样式修改

src/views/home/expenseAnalysisComponents/operatingLineBarSaleGroup.vue

@@ -85,9 +85,10 @@ export default {
         },
        grid: {
           top: 30,
-          bottom: 30,
+          bottom: 5,
-          right: 20,
+          right: 10,
-          left: 60,
+          left: 10,
+          containLabel: true
         },
         xAxis: [
           {

src/views/home/fullCostAnalysisComponents/operatingLineBarSaleGroup.vue

@@ -85,9 +85,10 @@ export default {
         },
        grid: {
           top: 30,
-          bottom: 30,
+          bottom: 5,
-          right: 20,
+          right: 10,
-          left: 60,
+          left: 10,
+          containLabel: true
         },
         xAxis: [
           {

src/views/home/grossMarginComponents/operatingLineBarSaleGroup.vue

@@ -85,9 +85,10 @@ export default {
         },
        grid: {
           top: 30,
-          bottom: 30,
+          bottom: 5,
-          right: 20,
+          right: 10,
-          left: 60,
+          left: 10,
+          containLabel: true
         },
         xAxis: [
           {

src/views/home/inputOutputRatioComponents/operatingLineBarSaleGroup.vue

@@ -85,9 +85,10 @@ export default {
         },
        grid: {
           top: 30,
-          bottom: 30,
+          bottom: 5,
-          right: 20,
+          right: 10,
-          left: 60,
+          left: 10,
+          containLabel: true
         },
         xAxis: [
           {

src/views/home/netPriceAnalysisComponents/operatingLineBarSaleGroup.vue

@@ -85,9 +85,10 @@ export default {
         },
        grid: {
           top: 30,
-          bottom: 30,
+          bottom: 5,
-          right: 20,
+          right: 10,
-          left: 60,
+          left: 10,
+          containLabel: true
         },
         xAxis: [
           {

src/views/home/operatingComponents/operatingLineBarSaleGroup.vue

@@ -85,9 +85,10 @@ export default {
         },
        grid: {
           top: 30,
-          bottom: 30,
+          bottom: 5,
-          right: 20,
+          right: 10,
-          left: 60,
+          left: 10,
+          containLabel: true
         },
         xAxis: [
           {

src/views/home/operatingProfitComponents/operatingLineBarSaleGroup.vue

@@ -85,9 +85,10 @@ export default {
         },
         grid: {
           top: 30,
-          bottom: 30,
+          bottom: 5,
-          right: 70,
+          right: 10,
-          left: 30,
+          left: 10,
+          containLabel: true
         },
         xAxis: [
           {

src/views/home/operatingRevenueBase待删除.vue

@@ -1,304 +0,0 @@
-<template>
-  <div id="dayReport" class="dayReport" :style="styles">
-    <div v-if="device === 'mobile' && sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
-    <sidebar v-if="!sidebar.hide" class="sidebar-container" />
-    <ReportHeader size="psi" @timeRangeChange="handleTimeChange" top-title="基地营业收入" :is-full-screen="isFullScreen"
-      @screenfullChange="screenfullChange" />
-    <div class="main-body" style="
-        margin-top: -20px;
-        flex: 1;
-        display: flex;
-        padding: 0px 16px 0 272px;
-        flex-direction: column;
-      ">
-      <div class="top" style="display: flex; gap: 16px">
-        <div class="top-three" style="
-            display: grid;
-            gap: 12px;
-            grid-template-columns: 1624px;
-          ">
-          <changeBase @selectChange="selectChange" />
-        </div>
-      </div>
-      <div class="top" style="display: flex; gap: 16px;margin-top: -20px;">
-        <div class="left-three" style="
-            display: grid;
-            gap: 12px;
-            grid-template-columns: 1624px;
-          ">
-          <costItemOverviewItem :itemData="renderList" :title="'燃料成本概述·元/m²'" />
-        </div>
-      </div>
-      <div class="top" style="display: flex; gap: 16px;margin-top: 6px;">
-        <div class="left-three" style="
-            display: grid;
-            gap: 12px;
-            grid-template-columns: 1624px;
-          ">
-          <profitLineChart :yName="'元/㎡'" :trendData="trendData" :dateData="dateData" />
-        </div>
-      </div>
-    </div>
-    <!-- <div class="centerImg" style="
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: 1; /* 确保在 backp 之上、内容之下 */
-      "></div> -->
-  </div>
-</template>
-<script>
-import ReportHeader from "./components/noRouterHeader.vue";
-import { Sidebar } from "../../layout/components";
-import screenfull from "screenfull";
-import changeBase from "./components/changeBase.vue";
-import costItemOverviewItem from "./costComponents/costItemOverviewItem.vue";
-import profitLineChart from "./costComponents/profitLineChart.vue";
-import { mapState } from "vuex";
-import { getCostAnalysisXXCostList } from '@/api/cockpit'
-// import PSDO from "./components/PSDO.vue";
-// import psiLineChart from "./components/psiLineChart.vue";
-
-// import coreBottomLeft from "./components/coreBottomLeft.vue";
-// import orderProgress from "./components/orderProgress.vue";
-// import keyWork from "./components/keyWork.vue";
-import moment from "moment";
-// import html2canvas from 'html2canvas'
-// import JsPDF from 'jspdf'
-export default {
-  name: "DayReport",
-  components: {
-    ReportHeader,
-    changeBase,
-    profitLineChart,
-    costItemOverviewItem,
-    Sidebar,
-    // psiLineChart
-  },
-  data() {
-    return {
-      isFullScreen: false,
-      timer: null,
-      beilv: 1,
-      value: 100,
-      dateData:{},
-      levelId:undefined,
-      itemData: [],
-      trendData: [],
-      parentItemList: [
-        { name: "燃料成本", target: 0, value: 0, proportion: 0, flag: 1 },
-        { name: "天然气", target: 0, value: 0, proportion: 0, flag: 1 }
-      ],
-    };
-  },
-
-  created() {
-    this.init();
-    this.windowWidth(document.documentElement.clientWidth);
-  },
-  computed: {
-    ...mapState({
-      theme: (state) => state.settings.theme,
-      sideTheme: (state) => state.settings.sideTheme,
-      sidebar: (state) => state.app.sidebar,
-      device: (state) => state.app.device,
-      needTagsView: (state) => state.settings.tagsView,
-      fixedHeader: (state) => state.settings.fixedHeader,
-    }),
-    renderList() {
-      if (this.itemData && this.itemData.length > 0) {
-        return this.itemData;
-      }
-      return this.parentItemList;
-    },
-    classObj() {
-      return {
-        hideSidebar: !this.sidebar.opened,
-        openSidebar: this.sidebar.opened,
-        withoutAnimation: this.sidebar.withoutAnimation,
-        mobile: this.device === "mobile",
-      };
-    },
-    variables() {
-      return variables;
-    },
-    // ...mapGetters(['sidebar']),
-    styles() {
-      const v = Math.floor(this.value * this.beilv * 100) / 10000;
-      return {
-        transform: `scale(${v})`,
-        transformOrigin: "left top",
-        // overflow: hidden;
-      };
-    },
-  },
-  watch: {
-    clientWidth(val) {
-      if (!this.timer) {
-        this.clientWidth = val;
-        this.beilv2 = this.clientWidth / 1920;
-        this.timer = true;
-        let _this = this;
-        setTimeout(function () {
-          _this.timer = false;
-        }, 500);
-      }
-      // 这里可以添加修改时的方法
-      this.windowWidth(val);
-    },
-  },
-  beforeDestroy() {
-    clearInterval(this.timer);
-    this.destroy();
-  },
-  mounted() {
-    const _this = this;
-    _this.beilv = document.documentElement.clientWidth / 1920;
-    window.onresize = () => {
-      return (() => {
-        _this.clientWidth = `${document.documentElement.clientWidth}`;
-        this.beilv = _this.clientWidth / 1920;
-      })();
-    };
-  },
-  methods: {
-    getData() {
-      const requestParams = {
-        // startTime: this.startTime,
-        // endTime: this.endTime,
-        // mode: this.mode,
-        startTime: this.dateData.startTime,
-        endTime: this.dateData.endTime,
-        mode: this.dateData.mode,
-        trendName: "燃料成本",
-        levelId: this.levelId ? this.levelId :1
-      };
-      // 调用接口
-      getCostAnalysisXXCostList(requestParams).then((res) => {
-        this.itemData = res.data[0].map((item) => {
-          return {
-            ...item,
-            route: 'singleFuelAnalysis'
-          }
-        })
-        this.trendData= res.data[1]
-      });
-    },
-
-    handleTimeChange(obj) {
-      console.log(obj, 'obj');
-      this.dateData = {
-        startTime: obj.startTime,
-        endTime: obj.endTime,
-        mode: obj.mode,
-      }
-
-      this.getData()
-    },
-    selectChange(data) {
-      console.log('选中的数据：', data);
-      this.levelId = data
-      if (this.dateData.startTime && this.dateData.endTime) {
-        this.getData();
-      }
-    },
-    handleClickOutside() {
-      this.$store.dispatch("app/closeSideBar", { withoutAnimation: false });
-    },
-    windowWidth(value) {
-      this.clientWidth = value;
-      this.beilv2 = this.clientWidth / 1920;
-    },
-    change() {
-      this.isFullScreen = screenfull.isFullscreen;
-    },
-    init() {
-      if (!screenfull.isEnabled) {
-        this.$message({
-          message: "you browser can not work",
-          type: "warning",
-        });
-        return false;
-      }
-      screenfull.on("change", this.change);
-    },
-    destroy() {
-      if (!screenfull.isEnabled) {
-        this.$message({
-          message: "you browser can not work",
-          type: "warning",
-        });
-        return false;
-      }
-      screenfull.off("change", this.change);
-    },
-    // 全屏
-    screenfullChange() {
-      console.log("screenfull.enabled", screenfull.isEnabled);
-
-      if (!screenfull.isEnabled) {
-        this.$message({
-          message: "you browser can not work",
-          type: "warning",
-        });
-        return false;
-      }
-      screenfull.toggle(this.$refs.dayReportB);
-    },
-    changeDate(val) {
-      this.date = val;
-      // this.weekDay = this.weekArr[moment(this.date).format('e')]
-      // this.getData()
-      if (this.date === moment().format("yyyy-MM-DD")) {
-        this.loopTime();
-      } else {
-        clearInterval(this.timer);
-      }
-    },
-    // 导出
-    // () {
-    //   this.$message.success('正在导出，请稍等！')
-    //   const element = document.getElementById('dayRepDom')
-    //   element.style.display = 'block'
-    //   const fileName = '株洲碲化镉生产日报' + moment().format('yyMMDD') + '.pdf'
-    //   html2canvas(element, {
-    //     dpi: 300, // Set to 300 DPI
-    //     scale: 3 // Adjusts your resolution
-    //   }).then(function(canvas) {
-    //     const imgWidth = 595.28
-    //     const imgHeight = 841.89
-    //     const pageData = canvas.toDataURL('image/jpeg', 1.0)
-    //     const PDF = new JsPDF('', 'pt', [imgWidth, imgHeight])
-    //     PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
-    //     setTimeout(() => {
-    //       PDF.save(fileName) // 导出文件名
-    //     }, 1000)
-    //   })
-    //   element.style.display = 'none'
-    // }
-  },
-};
-</script>
-<style scoped lang="scss">
-@import "~@/assets/styles/mixin.scss";
-@import "~@/assets/styles/variables.scss";
-.dayReport {
-  width: 1920px;
-  height: 1080px;
-  background: url("../../assets/img/backp.png") no-repeat;
-  background-size: cover;
-}
-.hideSidebar .fixed-header {
-  width: calc(100% - 54px);
-}
-
-.sidebarHide .fixed-header {
-  width: calc(100%);
-}
-
-.mobile .fixed-header {
-  width: 100%;
-}
-</style>

src/views/home/operatingRevenue待删除.vue

@@ -1,248 +0,0 @@
-<template>
-  <div id="dayReport" class="dayReport" :style="styles">
-    <div v-if="device === 'mobile' && sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
-    <sidebar v-if="!sidebar.hide" class="sidebar-container" />
-    <ReportHeader top-title="营业收入" :is-full-screen="isFullScreen" @screenfullChange="screenfullChange"
-      @timeRangeChange="handleTimeChange" />
-    <div class="main-body" style="
-        flex: 1;
-        display: flex;
-        padding: 0px 16px 0 272px;
-        flex-direction: column;
-      ">
-      <div class="top" style="margin-top: -20px;  display: flex; gap: 16px">
-        <div class="top-three" style="
-            display: grid;
-            gap: 12px;
-            grid-template-columns:1624px;
-          ">
-          <operatingLineChart :salesTrendMap="salesTrendMap" :grossMarginTrendMap="grossMarginTrendMap" />
-        </div>
-      </div>
-      <div class="top" style="display: flex; gap: 16px;margin-top: 6px;">
-        <div class="left-three" style="
-            display: grid;
-            gap: 12px;
-            grid-template-columns: 1624px;
-          ">
-          <operatingLineChartCumulative :salesTrendMap="salesTrendMap" :grossMarginTrendMap="grossMarginTrendMap" />
-          <!-- <keyWork /> -->
-        </div>
-      </div>
-    </div>
-    <!-- <div class="centerImg" style="
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        z-index: 1; /* 确保在 backp 之上、内容之下 */
-      "></div> -->
-  </div>
-</template>
-<script>
-import ReportHeader from "./components/noRouterHeader.vue";
-import { Sidebar } from "../../layout/components";
-import screenfull from "screenfull";
-// import operatingSalesRevenue from "./operatingComponents/operatingSalesRevenue";
-// import premProdStatus from "./components/premProdStatus.vue";
-import { mapState } from "vuex";
-import operatingLineChart from "./operatingComponents/operatingLineChart";
-import operatingLineChartCumulative from "./operatingComponents/operatingLineChartCumulative.vue";
-
-import { getSalesRevenueData } from '@/api/cockpit'
-import moment from "moment";
-export default {
-  name: "DayReport",
-  components: {
-    ReportHeader,
-    operatingLineChartCumulative,
-    operatingLineChart,
-    // premProdStatus,
-    Sidebar,
-  },
-  data() {
-    return {
-      weekArr: ["周日", "周一", "周二", "周三", "周四", "周五", "周六"],
-      isFullScreen: false,
-      timer: null,
-      beilv: 1,
-      value: 100,
-      saleData: {},
-      premiumProduct: {},
-      salesTrendMap: {},
-      grossMarginTrendMap: {},
-      salesProportion:{},
-    };
-  },
-
-  created() {
-    this.init();
-    this.windowWidth(document.documentElement.clientWidth);
-  },
-  computed: {
-    ...mapState({
-      theme: (state) => state.settings.theme,
-      sideTheme: (state) => state.settings.sideTheme,
-      sidebar: (state) => state.app.sidebar,
-      device: (state) => state.app.device,
-      needTagsView: (state) => state.settings.tagsView,
-      fixedHeader: (state) => state.settings.fixedHeader,
-    }),
-    classObj() {
-      return {
-        hideSidebar: !this.sidebar.opened,
-        openSidebar: this.sidebar.opened,
-        withoutAnimation: this.sidebar.withoutAnimation,
-        mobile: this.device === "mobile",
-      };
-    },
-    variables() {
-      return variables;
-    },
-    // ...mapGetters(['sidebar']),
-    styles() {
-      const v = Math.floor(this.value * this.beilv * 100) / 10000;
-      return {
-        transform: `scale(${v})`,
-        transformOrigin: "left top",
-        // overflow: hidden;
-      };
-    },
-  },
-  watch: {
-    clientWidth(val) {
-      if (!this.timer) {
-        this.clientWidth = val;
-        this.beilv2 = this.clientWidth / 1920;
-        this.timer = true;
-        let _this = this;
-        setTimeout(function () {
-          _this.timer = false;
-        }, 500);
-      }
-      // 这里可以添加修改时的方法
-      this.windowWidth(val);
-    },
-  },
-  beforeDestroy() {
-    clearInterval(this.timer);
-    this.destroy();
-  },
-  mounted() {
-    const _this = this;
-    _this.beilv = document.documentElement.clientWidth / 1920;
-    window.onresize = () => {
-      return (() => {
-        _this.clientWidth = `${document.documentElement.clientWidth}`;
-        this.beilv = _this.clientWidth / 1920;
-      })();
-    };
-  },
-  methods: {
-    getData(obj) {
-      getSalesRevenueData({
-        startTime: obj.startTime,
-        endTime: obj.endTime,
-        timeDim: obj.mode
-      }).then((res) => {
-        console.log(res);
-        this.saleData = res.data.SaleData
-        this.premiumProduct = res.data.premiumProduct
-        this.salesTrendMap = res.data.salesTrendMap
-        this.grossMarginTrendMap = res.data.grossMarginTrendMap
-        this.salesProportion = res.data.salesProportion ? res.data.salesProportion : {}
-      })
-    },
-    handleTimeChange(obj) {
-      console.log(obj, 'obj');
-      this.getData(obj)
-    },
-    handleClickOutside() {
-      this.$store.dispatch("app/closeSideBar", { withoutAnimation: false });
-    },
-    windowWidth(value) {
-      this.clientWidth = value;
-      this.beilv2 = this.clientWidth / 1920;
-    },
-    change() {
-      this.isFullScreen = screenfull.isFullscreen;
-    },
-    init() {
-      if (!screenfull.isEnabled) {
-        this.$message({
-          message: "you browser can not work",
-          type: "warning",
-        });
-        return false;
-      }
-      screenfull.on("change", this.change);
-    },
-    destroy() {
-      if (!screenfull.isEnabled) {
-        this.$message({
-          message: "you browser can not work",
-          type: "warning",
-        });
-        return false;
-      }
-      screenfull.off("change", this.change);
-    },
-    // 全屏
-    screenfullChange() {
-      console.log("screenfull.enabled", screenfull.isEnabled);
-
-      if (!screenfull.isEnabled) {
-        this.$message({
-          message: "you browser can not work",
-          type: "warning",
-        });
-        return false;
-      }
-      screenfull.toggle(this.$refs.dayReportB);
-    },
-    // 导出
-    // exportPDF() {
-    //   this.$message.success('正在导出，请稍等！')
-    //   const element = document.getElementById('dayRepDom')
-    //   element.style.display = 'block'
-    //   const fileName = '株洲碲化镉生产日报' + moment().format('yyMMDD') + '.pdf'
-    //   html2canvas(element, {
-    //     dpi: 300, // Set to 300 DPI
-    //     scale: 3 // Adjusts your resolution
-    //   }).then(function(canvas) {
-    //     const imgWidth = 595.28
-    //     const imgHeight = 841.89
-    //     const pageData = canvas.toDataURL('image/jpeg', 1.0)
-    //     const PDF = new JsPDF('', 'pt', [imgWidth, imgHeight])
-    //     PDF.addImage(pageData, 'JPEG', 0, 0, imgWidth, imgHeight)
-    //     setTimeout(() => {
-    //       PDF.save(fileName) // 导出文件名
-    //     }, 1000)
-    //   })
-    //   element.style.display = 'none'
-    // }
-  },
-};
-</script>
-<style scoped lang="scss">
-@import "~@/assets/styles/mixin.scss";
-@import "~@/assets/styles/variables.scss";
-.dayReport {
-  width: 1920px;
-  height: 1080px;
-  background: url("../../assets/img/backp.png") no-repeat;
-  background-size: cover;
-}
-.hideSidebar .fixed-header {
-  width: calc(100% - 54px);
-}
-
-.sidebarHide .fixed-header {
-  width: calc(100%);
-}
-
-.mobile .fixed-header {
-  width: 100%;
-}
-</style>

src/views/home/procurementGainAnalysisComponents/operatingLineBarSaleGroup.vue

@@ -85,9 +85,10 @@ export default {
         },
        grid: {
           top: 30,
-          bottom: 30,
+          bottom: 5,
-          right: 20,
+          right: 10,
-          left: 60,
+          left: 10,
+          containLabel: true
         },
         xAxis: [
           {

src/views/home/productionCostAnalysisComponents/operatingLineBarSaleGroup.vue

@@ -89,9 +89,10 @@ export default {
         },
        grid: {
           top: 30,
-          bottom: 30,
+          bottom: 5,
-          right: 20,
+          right: 10,
-          left: 60,
+          left: 10,
+          containLabel: true
         },
         xAxis: [
           {

src/views/home/rawSheetYieldComponents/operatingLineBarSaleGroup.vue

@@ -79,9 +79,10 @@ export default {
         },
         grid: {
           top: 30,
-          bottom: 30,
+          bottom: 5,
-          right: 20,
+          right: 10,
-          left: 60,
+          left: 10,
+          containLabel: true
         },
         xAxis: [
           {

src/views/home/salesVolumeAnalysisComponents/operatingLineBarSaleGroup.vue

@@ -85,9 +85,10 @@ export default {
         },
        grid: {
           top: 30,
-          bottom: 30,
+          bottom: 5,
-          right: 20,
+          right: 10,
-          left: 60,
+          left: 10,
+          containLabel: true
         },
         xAxis: [
           {

src/views/home/totalProfitComponents/operatingLineBarSaleGroup.vue

@@ -85,9 +85,10 @@ export default {
         },
         grid: {
           top: 30,
-          bottom: 30,
+          bottom: 5,
-          right: 20,
+          right: 10,
-          left: 60,
+          left: 10,
+          containLabel: true
         },
         xAxis: [
           {

src/views/home/unitPriceAnalysisComponents/operatingLineBarSaleGroup.vue

@@ -85,9 +85,10 @@ export default {
         },
        grid: {
           top: 30,
-          bottom: 30,
+          bottom: 5,
-          right: 20,
+          right: 10,
-          left: 60,
+          left: 10,
+          containLabel: true
         },
         xAxis: [
           {