新疆马铃薯 1.删除按钮添加操作权限

gaoluyang

2 天以前 bc365ef47ae4e01754aeadbae26170e11c9bb80e

 src/views/reportAnalysis/dataDashboard/components/basic/center-bottom.vue

@@ -2,25 +2,29 @@
  <div>
    <PanelHeader title="人员分布" />
    <div class="main-panel panel-item-customers">
      <Echarts
        ref="echartsRef"
        :chartStyle="chartStyle"
        :legend="pieLegend"
        :series="pieSeries"
        :tooltip="pieTooltip"
        :color="pieColors"
        :options="pieOptions"
        style="height: 320px"
      />
      <div class="pie-chart-wrapper">
        <div class="pie-background" :style="{ backgroundImage: `url(${roseBorderImg})` }"></div>
        <Echarts
          ref="echartsRef"
          :chartStyle="chartStyle"
          :legend="pieLegend"
          :series="pieSeries"
          :tooltip="pieTooltip"
          :color="pieColors"
          :options="pieOptions"
          style="height: 320px"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { ref, onMounted, computed, inject, watch } from 'vue'
import { deptStaffDistribution } from '@/api/viewIndex.js'
import PanelHeader from '../PanelHeader.vue'
import Echarts from '@/components/Echarts/echarts.vue'
import roseBorderImg from '@/assets/BI/玫瑰图边框.png'

/**
 * @introduction 把数组中key值相同的那一项提取出来，组成一个对象
@@ -110,7 +114,7 @@
    center: ['20%', '50%'],
    itemStyle: {
      borderColor: '#0a1c3a',
      borderWidth: 2,
      borderWidth:5,
    },
    label: {
      show: false
@@ -144,6 +148,13 @@
  })
}

const dataDashboardRefreshTick = inject('dataDashboardRefreshTick', null)
if (dataDashboardRefreshTick) {
  watch(dataDashboardRefreshTick, () => {
    getDeptStaffDistribution()
  })
}

onMounted(() => {
  getDeptStaffDistribution()
})
@@ -161,5 +172,65 @@
  padding: 18px;
  width: 100%;
  height: 370px;
  position: relative;
  overflow: hidden;
}

/* 面板角落装饰 */
.panel-item-customers::before,
.panel-item-customers::after {
  content: '';
  position: absolute;
  width: 15px;
  height: 15px;
  border-color: rgba(0, 212, 255, 0.5);
  border-style: solid;
  pointer-events: none;
}

.panel-item-customers::before {
  top: -1px;
  left: -1px;
  border-width: 2px 0 0 2px;
}

.panel-item-customers::after {
  bottom: -1px;
  right: -1px;
  border-width: 0 2px 2px 0;
}

.pie-chart-wrapper {
  position: relative;
  width: 100%;
  height: 320px;
  background: transparent;
  animation: pieFloat 4s ease-in-out infinite;
}

@keyframes pieFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}


.pie-background {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-113%, -50%);
  width: 360px;
  height: 360px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1;
  pointer-events: none;
  animation: pieBgRotate 30s linear infinite;
}

@keyframes pieBgRotate {
  from { transform: translate(-113%, -50%) rotate(0deg); }
  to { transform: translate(-113%, -50%) rotate(360deg); }
}
</style>