create-young-proj 1.7.0 → 2.0.0

package/template-big-screen/src/pages/electricity/reliability.vue

@@ -0,0 +1,137 @@
+<!--
+ * @Author: zhangyang
+ * @Date: 2024-02-02 14:48:13
+ * @LastEditTime: 2024-02-02 14:48:14
+ * @Description:
+-->
+<script setup lang='ts'>
+import echarts from '~/components/YoungECharts/config'
+
+const { data, options } = useLoadData<IGridReliability>(apis.get.getGridReliability, (res) => {
+  return {
+    title: {
+      text: '管理提升',
+      textStyle: {
+        color: '#aed3dd',
+        fontSize: 12,
+        width: 250,
+        overflow: 'break',
+      },
+      left: 'center',
+    },
+    grid: {
+      left: '0%',
+      right: '0%',
+      bottom: '0%',
+      top: '30%',
+      containLabel: true,
+    },
+    xAxis: {
+      type: 'category',
+      data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
+    },
+    yAxis: {
+      type: 'value',
+    },
+    legend: {
+      show: true,
+      itemHeight: 12,
+      itemWidth: 12,
+      itemGap: 6,
+      textStyle: {
+        fontSize: 10,
+        color: '#92b1bb',
+      },
+      top: '12%',
+    },
+    series: [
+      {
+        data: res.data1,
+        type: 'bar',
+        name: 'XX可靠性',
+        itemStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            {
+              offset: 0,
+              color: '#2797f7',
+            },
+            {
+              offset: 1,
+              color: '#3e3f7e',
+            },
+          ]),
+        },
+      },
+      {
+        data: res.data2,
+        type: 'bar',
+        name: '售电及线损',
+        itemStyle: {
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            {
+              offset: 0,
+              color: '#b8429c',
+            },
+            {
+              offset: 1,
+              color: '#412557',
+            },
+          ]),
+        },
+      },
+    ],
+  }
+})
+</script>
+
+<template>
+  <div v-if="data" class="h-full flex flex-col">
+    <YoungSectionHeader index="5" title="XX可靠性" />
+    <div class="h-full flex flex-1 py-4">
+      <div class="h-full w-50% center">
+        <YoungECharts :options="options" width="250px" height="200px" />
+      </div>
+      <YoungSectionContainer right>
+        <div class="h-full between">
+          <div class="w-full text-left">
+            <div class="between">
+              <div>
+                <div v-ellipsis>
+                  本月1000KV线路跳闸条次
+                </div>
+                <div class="center-y">
+                  <YoungCountUp :count="data?.values?.[0]" />
+                  <div>次</div>
+                </div>
+              </div>
+            </div>
+            <div class="between py-2">
+              <div>
+                <div v-ellipsis>
+                  500KV系统设备跳闸事件数
+                </div>
+                <div class="center-y">
+                  <YoungCountUp :count="data?.values?.[1]" />
+                  <div>起</div>
+                </div>
+              </div>
+            </div>
+            <div class="between">
+              <div>
+                <div v-ellipsis>
+                  300MW及以上跳闸次数
+                </div>
+                <div class="center-y">
+                  <YoungCountUp :count="data?.values?.[2]" />
+                  <div>台次</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </YoungSectionContainer>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss"></style>

package/template-big-screen/src/pages/electricity/sale-and-cost.vue

@@ -0,0 +1,158 @@
+<!--
+ * @Author: zhangyang
+ * @Date: 2024-02-02 14:49:50
+ * @LastEditTime: 2024-05-30 18:47:09
+ * @Description:
+-->
+<script setup lang='ts'>
+import echarts from '~/components/YoungECharts/config'
+
+const { data, options } = useLoadData(apis.get.getSalesOfElectricityAndLineLoss, (res) => {
+  return {
+    color: ['#80FFA5', '#00DDFF'],
+    title: {
+      text: '全网线损率',
+      left: 'center',
+      textStyle: {
+        fontSize: '12px',
+        width: 250,
+        overflow: 'break',
+        color: '#aed3dd',
+      },
+    },
+    tooltip: {
+      trigger: 'axis',
+      axisPointer: {
+        type: 'cross',
+        label: {
+          backgroundColor: '#6a7985',
+        },
+      },
+    },
+    legend: {
+      show: false,
+    },
+    grid: {
+      left: '3%',
+      right: '4%',
+      bottom: '3%',
+      top: '15%',
+      containLabel: true,
+    },
+    xAxis: [
+      {
+        type: 'category',
+        boundaryGap: false,
+        data: ['福建', '浙江', '安徽', '上海', '江苏'],
+      },
+    ],
+    yAxis: [
+      {
+        type: 'value',
+      },
+    ],
+    series: [
+      {
+        name: '网损率',
+        type: 'line',
+        stack: 'Total',
+        smooth: true,
+        lineStyle: {
+          width: 0,
+        },
+        showSymbol: false,
+        areaStyle: {
+          opacity: 0.8,
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            {
+              offset: 0,
+              color: 'rgb(128, 255, 165)',
+            },
+            {
+              offset: 1,
+              color: 'rgb(1, 191, 236)',
+            },
+          ]),
+        },
+        emphasis: {
+          focus: 'series',
+        },
+        data: res.data1,
+      },
+      {
+        name: '增长率',
+        type: 'line',
+        stack: 'Total',
+        smooth: true,
+        lineStyle: {
+          width: 0,
+        },
+        showSymbol: false,
+        areaStyle: {
+          opacity: 0.8,
+          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+            {
+              offset: 0,
+              color: 'rgb(0, 221, 255)',
+            },
+            {
+              offset: 1,
+              color: 'rgb(77, 119, 255)',
+            },
+          ]),
+        },
+        emphasis: {
+          focus: 'series',
+        },
+        data: res.data2,
+      },
+    ],
+  }
+})
+</script>
+
+<template>
+  <div v-if="data" class="h-full flex flex-col">
+    <YoungSectionHeader index="6" title="售电及线损" />
+    <div class="h-full flex flex-1 py-4">
+      <div class="h-full w-50% center">
+        <YoungECharts :options="options" width="250px" height="200px" />
+      </div>
+      <YoungSectionContainer right>
+        <div class="h-full between">
+          <div class="w-full text-left">
+            <div class="between">
+              <div>
+                <div v-ellipsis>
+                  XXXX计划售电量
+                </div>
+                <YoungCountUp :count="data?.values?.[0]" />
+              </div>
+              <YoungCountUp :count="data?.increment?.[`0`]" showfix :decimal-places="1" />
+            </div>
+            <div class="between py-2">
+              <div>
+                <div v-ellipsis>
+                  本月全网售电量
+                </div>
+                <YoungCountUp :count="data?.values?.[1]" />
+              </div>
+              <YoungCountUp :count="data?.increment?.[`1`]" showfix :decimal-places="1" />
+            </div>
+            <div class="between">
+              <div>
+                <div v-ellipsis>
+                  全网线损率
+                </div>
+                <YoungCountUp :count="data?.values?.[2]" />
+              </div>
+              <YoungCountUp :count="data?.increment?.[`2`]" showfix :decimal-places="1" />
+            </div>
+          </div>
+        </div>
+      </YoungSectionContainer>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss"></style>

package/template-big-screen/src/pages/index.vue

@@ -0,0 +1,59 @@
+<!--
+ * @Author: zhangyang
+ * @Date: 2024-02-02 14:34:34
+ * @LastEditTime: 2024-02-02 15:01:19
+ * @Description:
+-->
+<route lang="yaml">
+meta:
+  layout: blank
+</route>
+
+<script setup lang="ts">
+import SocialCondition from './social/condition.vue'
+import ElectricityBuild from './electricity/build.vue'
+import SocialElectricityUsage from './social/electricity-usage.vue'
+import Kpi from './kpi.vue'
+import ManageImprove from './manage-improve.vue'
+import ElectricityReliability from './electricity/reliability.vue'
+import SaleAndCost from './electricity/sale-and-cost.vue'
+</script>
+
+<template>
+  <div class="box-border h-full flex flex-col overflow-hidden px-20 text">
+    <YoungHeader class="relative -top-3" />
+    <div class="relative flex-1 text-[#00706c] -top-1 dark:text-[--text-color]">
+      <DvBorderBox12>
+        <div class="grid grid-cols-16 h-full px-6 py-4">
+          <div class="grid col-span-5 grid-rows-3 h-full">
+            <RouterLink to="/social/condition">
+              <SocialCondition />
+            </RouterLink>
+            <RouterLink to="/electricity/build">
+              <ElectricityBuild />
+            </RouterLink>
+            <RouterLink to="/social/electricity-usage">
+              <SocialElectricityUsage />
+            </RouterLink>
+          </div>
+          <div class="col-span-6">
+            <RouterLink to="/kpi">
+              <Kpi />
+            </RouterLink>
+          </div>
+          <div class="grid col-span-5 grid-rows-3 h-full">
+            <RouterLink to="/manage-improve">
+              <ManageImprove />
+            </RouterLink>
+            <RouterLink to="/electricity/reliability">
+              <ElectricityReliability />
+            </RouterLink>
+            <RouterLink to="/electricity/sale-and-cost">
+              <SaleAndCost />
+            </RouterLink>
+          </div>
+        </div>
+      </DvBorderBox12>
+    </div>
+  </div>
+</template>

package/template-big-screen/src/pages/kpi.vue

@@ -0,0 +1,129 @@
+<!--
+ * @Author: zhangyang
+ * @Date: 2024-02-02 14:45:20
+ * @LastEditTime: 2024-02-02 14:45:20
+ * @Description:
+-->
+<script setup lang='ts'>
+import echarts from '~/components/YoungECharts/config'
+import mapJson from '~/assets/data/china.json'
+
+const { options, setOptions } = useEcharts()
+
+const province = ['安徽', '福建', '江苏', '浙江']
+
+onMounted(() => {
+  mapJson.features.forEach((item, index) => {
+    item.properties.name = province[index]
+  })
+  echarts.registerMap('CN', mapJson as any)
+
+  setOptions({
+    xAxis: { show: false },
+    yAxis: { show: false },
+    series: [
+      {
+        type: 'map',
+        map: 'CN',
+        roam: false,
+        aspectScale: 1,
+        zoom: 1.2,
+        selectedMode: false,
+        label: {
+          show: true,
+          color: '#1cd8f5',
+          fontSize: 16,
+        },
+        emphasis: {
+          label: { color: '#1cd8f5' },
+          itemStyle: {
+            areaColor: isDark.value ? '#0b2035' : '#5db5b2',
+          },
+        },
+        itemStyle: {
+          areaColor: isDark.value ? '#101d2c' : '5db5b2',
+          borderColor: '#01c7e3',
+        },
+      },
+    ],
+  })
+})
+
+watch(isDark, () => {
+  mapJson.features.forEach((item, index) => {
+    item.properties.name = province[index]
+  })
+  echarts.registerMap('CN', mapJson as any)
+
+  setOptions({
+    xAxis: { show: false },
+    yAxis: { show: false },
+    series: [
+      {
+        type: 'map',
+        map: 'CN',
+        roam: false,
+        aspectScale: 1,
+        zoom: 1.2,
+        selectedMode: false,
+        label: {
+          show: true,
+          color: isDark.value ? '#1cd8f5' : '#fff',
+          fontSize: 16,
+        },
+        emphasis: {
+          label: { color: isDark.value ? '#1cd8f5' : '#ddd' },
+          itemStyle: {
+            areaColor: isDark.value ? '#0b2035' : '#75d4d1',
+          },
+        },
+        itemStyle: {
+          areaColor: isDark.value ? '#101d2c' : '#5db5b2',
+          borderColor: isDark.value ? '#01c7e3' : '#fefefe',
+        },
+      },
+    ],
+  })
+})
+</script>
+
+<template>
+  <div class="h-full center">
+    <div class="h-full w-90% flex flex-col">
+      <div class="contanier-border">
+        <div />
+        <div />
+        <div />
+        <div />
+        <div class="w-full center text-base">
+          运营关键指标
+        </div>
+      </div>
+      <dv-border-box12 :color="['#5893a6', '#ffda67']" :background-color="isDark ? '#1c3b4b' : '#f9f9f9'" class="my-4 h-full center flex-1">
+        <YoungECharts width="100%" height="100%" :options="options" />
+      </dv-border-box12>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.contanier-border{
+ --uno:relative px-2 py-4  text-sm w-full border-1 border-solid border-[#5893a6] ;
+
+ > div:nth-child(1){
+  --uno:h-1.5 w-1.5 bg-[#ffda67] absolute top-0 left-0 ;
+ }
+
+ > div:nth-child(2){
+  --uno:h-1.5 w-1.5 bg-[#ffda67] absolute top-0 right-0 ;
+ }
+
+ > div:nth-child(3){
+  --uno:h-1.5 w-1.5 bg-[#ffda67] absolute bottom-0 left-0 ;
+ }
+
+  > div:nth-child(4){
+  --uno:h-1.5 w-1.5 bg-[#ffda67] absolute bottom-0 right-0 ;
+ }
+}
+</style>

package/template-big-screen/src/pages/manage-improve.vue

@@ -0,0 +1,114 @@
+<!--
+ * @Author: zhangyang
+ * @Date: 2024-02-02 14:46:46
+ * @LastEditTime: 2024-02-02 14:46:47
+ * @Description:
+-->
+<script setup lang='ts'>
+const { options, data } = useLoadData<IManagementImprovement>(apis.get.getManagementImprovement, (res) => {
+  return {
+    grid: {
+      left: '2%',
+      right: '4%',
+      top: '0%',
+      bottom: '0%',
+      containLabel: true,
+    },
+    series: [
+      {
+        type: 'gauge',
+        radius: '90%',
+        axisLine: {
+          lineStyle: {
+            width: 10,
+            color: [
+              [0.3, '#fe6b93'],
+              [0.7, '#12c4fd'],
+              [1, '#9851eb'],
+            ],
+          },
+        },
+        pointer: {
+          itemStyle: {
+            color: 'auto',
+          },
+        },
+        axisTick: {
+          distance: -10,
+          lineStyle: {
+            color: '#173950',
+            width: 1,
+          },
+        },
+        splitLine: {
+          distance: -5,
+          length: 5,
+          lineStyle: {
+            color: '#173950',
+            width: 1,
+          },
+        },
+        axisLabel: {
+          color: 'inherit',
+          distance: 20,
+          fontSize: 12,
+        },
+        detail: {
+          valueAnimation: true,
+          formatter: '{value} %',
+          color: 'inherit',
+          fontSize: 16,
+          offsetCenter: [0, '70%'],
+        },
+        title: {
+          color: 'inherit',
+          offsetCenter: [0, '40%'],
+        },
+        data: [
+          {
+            value: res.data,
+            name: '可用率',
+          },
+        ],
+      },
+    ],
+  }
+})
+</script>
+
+<template>
+  <div v-if="data" class="h-full flex flex-col">
+    <YoungSectionHeader title="管理提升" index="4" />
+    <div class="h-full flex flex-1 py-4">
+      <div class="h-full w-50% center">
+        <YoungECharts :options="options" width="250px" height="200px" />
+      </div>
+      <YoungSectionContainer right>
+        <div class="h-full w-full center">
+          <div class="h-60% w-full between flex-col">
+            <div class="w-full between">
+              <div>
+                <div v-ellipsis>
+                  预算执行情况(万元)
+                </div>
+                <YoungCountUp :count="data?.values?.[0]" :decimal-places="2" />
+              </div>
+              <YoungCountUp :count="data?.increment?.[0]" :decimal-places="1" showfix />
+            </div>
+            <div class="w-full between">
+              <div>
+                <div v-ellipsis>
+                  本月运维费用(万元)
+                </div>
+                <YoungCountUp :count="data?.values?.[1]" :decimal-places="2" />
+              </div>
+              <YoungCountUp :count="data?.increment?.[1]" :decimal-places="1" showfix />
+            </div>
+          </div>
+        </div>
+      </YoungSectionContainer>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss"></style>