首页

src/views/home/components/ProvincialChart.vue

@@ -4,7 +4,9 @@
       <div class="top-1">
         <Top1 />
       </div>
-      <div class="top-2"></div>
+      <div class="top-2">
+        <Top2 />
+      </div>
       <div class="top-3">
         <Top3 />
       </div>
@@ -37,6 +39,7 @@
 
 <script>
 import Top1 from './provincial/Top1'
+import Top2 from './provincial/Top2'
 import Top3 from './provincial/Top3'
 import Center1 from './provincial/Center1'
 import Center2 from './provincial/Center2'
@@ -48,6 +51,7 @@ export default {
   name: 'provincialChart',
   components: {
     Top1,
+    Top2,
     Top3,
     Center1,
     Center2,
@@ -90,6 +94,8 @@ export default {
     flex: 1;
     margin: 0 15px;
     height: 518px;
+    background-image: url('~@/assets/images/map-img.png');
+    background-size: 100% 100%;
   }
 }
 

src/views/home/components/provincial/Bottom2.vue

@@ -1,11 +1,55 @@
 <template>
   <div>
     <TitleBox titleText="装备在用率统计" @handleMore="handleMore" />
+
+    <div class="topView">
+      <div style="height: 100%; display: flex; align-items: center; justify-content: space-between">
+        <div class="topTab" :class="{ active: tabIndex == 0 }" @click="changTab(0)">总体</div>
+        <div class="topTab" :class="{ active: tabIndex == 1 }" @click="changTab(1)">线路</div>
+        <div class="topTab" :class="{ active: tabIndex == 2 }" @click="changTab(2)">变电</div>
+        <div class="topTab" :class="{ active: tabIndex == 3 }" @click="changTab(3)">电缆</div>
+      </div>
+      <div></div>
+    </div>
+
+    <div class="bottom-box">
+      <div class="bottom-item" v-for="(item, index) in tableList" :key="index">
+        <div class="item-top-title">
+          <img v-if="index == 0" src="@/assets/images/nb-1.png" style="width: 27px; height: 31px" alt="" />
+          <img v-if="index == 1" src="@/assets/images/nb-2.png" style="width: 27px; height: 31px" alt="" />
+          <img v-if="index == 2" src="@/assets/images/nb-3.png" style="width: 27px; height: 31px" alt="" />
+          <img v-if="index == 3" src="@/assets/images/nb-4.png" style="width: 27px; height: 31px" alt="" />
+          <span>{{ item.name || '-' }}</span>
+        </div>
+        <div class="img-box">
+          <img v-if="index == 0" src="@/assets/images/nb-img-1.png" flt="contain" alt="" />
+          <img v-if="index == 1" src="@/assets/images/nb-img-2.png" flt="contain" alt="" />
+          <img v-if="index == 2" src="@/assets/images/nb-img-3.png" flt="contain" alt="" />
+          <img v-if="index == 3" src="@/assets/images/nb-img-4.png" flt="contain" alt="" />
+        </div>
+        <div class="bt-content">
+          <div class="bt-content-item">
+            <span class="dot"></span>
+            <span style="margin-right: 10px">在用率</span>
+            <span class="num">{{ item.proportion || 0 }}%</span>
+          </div>
+          <div class="bt-content-item">
+            <span class="dot"></span>
+            <span style="margin-right: 10px">周转率</span>
+            <span class="num"
+              >{{ item.turnoverRate || 0 }}
+              <span class="unit-text">次/年</span>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 import TitleBox from '../TitleBox'
+import { getUsageStatisticsApi } from '@/api/wsScreen'
 
 export default {
   name: 'Bottom2',
@@ -13,10 +57,44 @@ export default {
     TitleBox,
   },
   data() {
-    return {}
+    return {
+      tabIndex: 0,
+      tableList: [],
+    }
+  },
+  created() {
+    this.getInfo()
   },
-  mounted() {},
   methods: {
+    changTab(type) {
+      console.log('🚀 ~ changTab ~ type:', type)
+      this.tabIndex = type
+      this.getInfo()
+    },
+    async getInfo() {
+      try {
+        let type = 0
+        if (this.tabIndex == 0) {
+          type = ''
+        } else if (this.tabIndex == 1) {
+          type = 1
+        } else if (this.tabIndex == 2) {
+          type = 2
+        } else if (this.tabIndex == 3) {
+          type = 3
+        }
+        const res = await getUsageStatisticsApi({ type })
+        if (!res.data) return
+        if (res.data.length > 4) {
+          this.tableList = res.data.slice(0, 4)
+        } else {
+          this.tableList = res.data
+        }
+        console.log('🚀 ~ 装备在用率统计 ~ res:', res)
+      } catch (error) {
+        console.log('🚀 ~ 装备在用率统计 ~ error:', error)
+      }
+    },
     handleMore() {
       console.log('🚀 ~ methods.handleMore:')
     },
@@ -24,4 +102,92 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.num {
+  font-family: OPPOSans;
+  font-size: 16px;
+}
+.unit-text {
+  font-family: Microsoft YaHei, Microsoft YaHei;
+  font-weight: 400;
+  font-size: 12px;
+  color: #333;
+}
+.topView {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 15px;
+
+  .topTab {
+    margin-right: 10px;
+    width: 60px;
+    height: 24px;
+    border-radius: 3px;
+    border: 1px solid #cccccc;
+    text-align: center;
+    cursor: pointer;
+  }
+  .active {
+    background: #2cbab2;
+    color: #fff;
+  }
+}
+
+.bottom-box {
+  display: flex;
+  align-items: center;
+
+  .bottom-item {
+    margin-right: 20px;
+    width: 25%;
+    height: 222px;
+    background-image: url('~@/assets/images/item-bg.png');
+    background-size: 100% 100%;
+    box-shadow: 0px 3px 1px 0px #e9f0f3;
+    border-radius: 5px;
+    font-family: Microsoft YaHei, Microsoft YaHei;
+    font-weight: 400;
+    font-size: 14px;
+    color: #333;
+
+    &:last-child {
+      margin-right: 0;
+    }
+
+    .item-top-title {
+      padding-right: 5px;
+      font-size: 13px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+
+    .img-box {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 90px;
+    }
+
+    .bt-content {
+      margin-top: 20px;
+      padding: 0 20px;
+      .dot {
+        width: 6px;
+        height: 6px;
+        background: #b7c7d5;
+        border-radius: 50%;
+        margin-right: 6px;
+        flex-shrink: 0; // 👈 防止被挤扁
+      }
+
+      .bt-content-item {
+        height: 40px;
+        display: flex;
+        align-items: center;
+      }
+    }
+  }
+}
+</style>

src/views/home/components/provincial/Gauge.vue

@@ -0,0 +1,193 @@
+<template>
+  <div class="gauge-wrap">
+    <div ref="chart" class="chart"></div>
+  </div>
+</template>
+
+<script>
+import * as echarts from 'echarts'
+
+export default {
+  name: 'UsageGauge',
+  props: {
+    value: {
+      type: Number,
+      default: 0,
+    },
+  },
+  data() {
+    return {
+      chart: null,
+    }
+  },
+  mounted() {
+    this.initChart()
+    window.addEventListener('resize', this.resize)
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.resize)
+    if (this.chart) {
+      this.chart.dispose()
+    }
+  },
+  watch: {
+    value() {
+      this.updateChart()
+    },
+  },
+  methods: {
+    resize() {
+      if (this.chart) {
+        this.chart.resize()
+      }
+    },
+    initChart() {
+      this.chart = echarts.init(this.$refs.chart)
+      this.updateChart()
+    },
+    updateChart() {
+      const val = this.value
+
+      const option = {
+        // backgroundColor: '#eef6ff',
+
+        series: [
+          // ① 主进度环
+          {
+            type: 'gauge',
+            startAngle: 210,
+            endAngle: -30,
+            min: 0,
+            max: 100,
+            radius: '90%',
+            center: ['50%', '60%'],
+            pointer: { show: false },
+
+            axisLine: {
+              lineStyle: {
+                width: 16,
+                color: [
+                  [
+                    val / 100,
+                    new echarts.graphic.LinearGradient(
+                      0,
+                      0,
+                      1,
+                      1, // 👈 斜向渐变（≈ 48deg）
+                      [
+                        { offset: 0, color: '#46B0FC' },
+                        { offset: 1, color: 'rgba(137,197,253,0.59)' },
+                      ],
+                    ),
+                  ],
+                  [1, '#e6f0fa'], // 未走到的底色
+                ],
+              },
+            },
+            axisTick: { show: false },
+            splitLine: { show: false },
+            axisLabel: { show: false },
+
+            detail: {
+              show: true,
+              offsetCenter: [0, '-10%'],
+              formatter: '{value}%',
+              fontSize: 28,
+              fontWeight: 'bold',
+              color: '#333',
+            },
+
+            title: {
+              show: true,
+              offsetCenter: [0, '55%'],
+              fontSize: 14,
+              color: '#666',
+            },
+
+            data: [{ value: val, name: '在用率' }],
+          },
+
+          // ② 外圈：一圈“小点虚线”
+          {
+            type: 'gauge',
+            startAngle: 210,
+            endAngle: -30,
+            min: 0,
+            max: 100,
+            radius: '119%',
+            center: ['50%', '60%'],
+            pointer: { show: false },
+
+            axisLine: { show: false },
+            axisTick: { show: false },
+            axisLabel: { show: false },
+
+            splitNumber: 60, // 点的数量（越大越密）
+            splitLine: {
+              show: true,
+              length: 4, // 点的大小
+              lineStyle: {
+                color: '#8ec5ff',
+                width: 3,
+                type: 'dotted', // 关键：点状
+              },
+            },
+
+            detail: { show: false },
+            title: { show: false },
+          },
+
+          // ③ 只画“起点 & 终点”的长实线
+          {
+            type: 'gauge',
+            startAngle: 210,
+            endAngle: -30,
+            min: 0,
+            max: 100,
+            radius: '121%',
+            center: ['50%', '60%'],
+            pointer: { show: false },
+
+            axisLine: { show: false },
+            axisTick: { show: false },
+            axisLabel: { show: false },
+
+            splitNumber: 1, // 只生成两端刻度
+            splitLine: {
+              show: true,
+              length: 25, // 长实线长度
+              lineStyle: {
+                color: '#46B0FC',
+                width: 2,
+                type: 'solid',
+              },
+            },
+
+            detail: { show: false },
+            title: { show: false },
+          },
+        ],
+      }
+
+      this.chart.setOption(option, true)
+    },
+  },
+}
+</script>
+
+<style scoped>
+.gauge-wrap {
+  width: 100%;
+  height: 100%;
+  border-radius: 12px;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.chart {
+  width: 165px;
+  height: 165px;
+}
+</style>

src/views/home/components/provincial/Top2.vue

@@ -0,0 +1,19 @@
+<template>
+  <div>
+地图
+  </div>
+</template>
+
+<script>
+  export default {
+    data() {
+      return {
+
+      }
+    },
+  }
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/views/home/components/provincial/Top3.vue

@@ -1,22 +1,91 @@
 <template>
   <div>
-    <TitleBox titleText="项目装备" @handleMore="handleMore" />
+    <TitleBox titleText="项目装备" @handleMore="handleMore" style="margin-bottom: 16px" />
+    <div class="top-box">
+      <div class="top-1">
+        <div class="img-box">
+          <img src="@/assets/images/top3-1.png" flt="contain" alt="" />
+        </div>
+        <div class="num">
+          {{ annualTotal }}
+          <span class="unit-text">万元</span>
+        </div>
+        <div class="name">总投资额</div>
+      </div>
+      <div class="top-2">
+        <div class="img-box">
+          <img src="@/assets/images/top3-2.png" flt="contain" alt="" />
+        </div>
+        <div class="num">
+          {{ projectNUm }}
+          <span class="unit-text">个</span>
+        </div>
+        <div class="name">在建工程数</div>
+      </div>
+      <div class="top-3">
+        <div class="img-box">
+          <img src="@/assets/images/top3-4.png" flt="contain" alt="" />
+        </div>
+        <div class="num">
+          {{ num }}
+          <span class="unit-text">台</span>
+        </div>
+        <div class="name">在用装备数</div>
+      </div>
+    </div>
+    <div class="bottom-box">
+      <div class="bt-1">
+        <Gauge :value="proportion" />
+      </div>
+      <div class="bt-2">
+        <div class="img-box">
+          <img src="@/assets/images/top3-4.png" flt="contain" alt="" />
+        </div>
+        <div class="num">
+          {{ turnoverRate }}
+          <span class="unit-text">次/年</span>
+        </div>
+        <div class="name">周转率</div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 import TitleBox from '../TitleBox'
+import Gauge from './Gauge'
 
 export default {
   name: 'Top3',
   components: {
     TitleBox,
+    Gauge,
   },
   data() {
-    return {}
+    return {
+      annualTotal: 0, // 年度总投资额
+      projectNUm: 0, // 在建工程数
+      num: 0, // 在用装备数
+      turnoverRate: 0, // 周转率
+      proportion: 0, // 在用率
+    }
+  },
+  created() {
+    this.getInfo()
   },
-  mounted() {},
   methods: {
+    async getInfo() {
+      try {
+        const res = await getProjectEquipmentApi()
+        this.annualTotal = res.data.annualTotal
+        this.projectNUm = res.data.projectNUm
+        this.num = res.data.num
+        this.turnoverRate = res.data.turnoverRate
+        this.proportion = res.data.proportion || 0
+      } catch (error) {
+        console.log('🚀 ~ getInfo ~ error:', error)
+      }
+    },
     handleMore() {
       console.log('🚀 ~ methods.handleMore:')
     },
@@ -24,4 +93,70 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.num {
+  font-family: OPPOSans;
+  font-size: 24px;
+  margin-bottom: 15px;
+}
+.unit-text {
+  font-family: Microsoft YaHei, Microsoft YaHei;
+  font-weight: 400;
+  font-size: 12px;
+  color: #999;
+}
+.top-box {
+  display: flex;
+  margin-bottom: 24px;
+}
+.bottom-box {
+  display: flex;
+}
+.top-1,
+.top-2,
+.top-3,
+.bt-2 {
+  width: 137px;
+  height: 203px;
+  background: rgba(254, 175, 106, 0.1);
+  box-shadow: 0px 3px 1px 0px #f3f0e9;
+  border-radius: 5px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.top-1,
+.bt-1 {
+  background: rgba(78, 172, 255, 0.1);
+  box-shadow: 0px 3px 1px 0px #e9f0f3;
+}
+
+.top-2 {
+  margin: 0 10px;
+  background: rgba(44, 186, 178, 0.1);
+  box-shadow: 0px 3px 1px 0px #e9f0f3;
+}
+
+.bt-1 {
+  margin-right: 10px;
+  width: 284px;
+  height: 203px;
+  border-radius: 5px;
+}
+.img-box {
+  width: 54px;
+  height: 54px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 30px;
+}
+.name {
+  font-family: Microsoft YaHei, Microsoft YaHei;
+  font-weight: 400;
+  font-size: 14px;
+  color: #333;
+}
+</style>