页面路径调整

public/static/config.js

@@ -7,10 +7,16 @@ if (window.location.host.indexOf('localhost') != -1 || window.location.host.inde
     // PLATFROM_CONFIG.baseUrl = "https://qhome.usky.cn/fivapi/" //线上--->测试
     // PLATFROM_CONFIG.images = "https://qhome.usky.cn/file/" //线上图片--->测试
     // PLATFROM_CONFIG.fileUrl = "https://qhome.usky.cn/file/" //xlsx文件访问路径--->测试
+    
+    PLATFROM_CONFIG.baseUrl = "https://qhome.usky.cn/uskypower/" //线上--->测试
+    PLATFROM_CONFIG.images = "https://qhome.usky.cn/file/" //线上图片--->测试
+    PLATFROM_CONFIG.fileUrl = "https://qhome.usky.cn/file/" //xlsx文件访问路径--->测试
 
-    PLATFROM_CONFIG.baseUrl = "https://wx.ewoogi.com/api/" //线上--->正式
-    PLATFROM_CONFIG.images = "https://wx.ewoogi.com/file/" //线上图片--->正式
-    PLATFROM_CONFIG.fileUrl = "https://wx.ewoogi.com/file/" //xlsx文件访问路径--->正式
+    
+
+    // PLATFROM_CONFIG.baseUrl = "https://wx.ewoogi.com/api/" //线上--->正式
+    // PLATFROM_CONFIG.images = "https://wx.ewoogi.com/file/" //线上图片--->正式
+    // PLATFROM_CONFIG.fileUrl = "https://wx.ewoogi.com/file/" //xlsx文件访问路径--->正式
 } else {
     PLATFROM_CONFIG.baseUrl = "https://wx.ewoogi.com/api/" //线上--->正式
     PLATFROM_CONFIG.images = "https://wx.ewoogi.com/file/" //线上图片--->正式

src/router/index.js

@@ -8,24 +8,6 @@ export const constantRoutes = [
             import('@/views/login'),
         hidden: true,
     },
-    {
-        path: '/index2',
-        component: () =>
-            import('@/views/index2/index'),
-        hidden: true,
-    },
-    {
-        path: '/index3',
-        component: () =>
-            import('@/views/index3/index'),
-        hidden: true,
-    },
-    {
-        path: '/index4',
-        component: () =>
-            import('@/views/index4/index'),
-        hidden: true,
-    },
     {
         path: '/403',
         name: '403',

src/views/index4/index.vue → src/views/electricFire/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="app-container">
+  <div class="app-container electricFire">
     <div class="top">
       <div class="modeSwitching">
         <div @click="switchMode(1)" :class="{ active: mode == 1 }">
@@ -388,6 +388,10 @@ function switchMode(val){
 
 </script>
 <style lang="scss" scoped>
+.electricFire{
+  background: none !important;
+  padding:0;
+}
 .top{
   display: flex;
   flex-direction: row;
@@ -401,9 +405,9 @@ function switchMode(val){
       line-height: 28px;
       margin-right:10px;
       display: inline-block;
-      background: #33404c;
+      background: #fff;
       text-align: center;
-      color:#ccc;
+      color:#333;
       i{
         font-size:16px;
         vertical-align: middle;
@@ -452,14 +456,14 @@ function switchMode(val){
     .listItem{
       border: 1px solid #00a854;
       width: 280px;
-      background-color: #1b2834;
+      background-color: #fff;
       float: left;
       margin-bottom: 20px;
       margin-right: 8px;
       .header{
         height: 32px;
         line-height: 32px;
-        color: #FFF;
+        color: #fff;
         padding: 0 12px;
         background: linear-gradient(180deg, rgba(0, 168, 84, 0.7) 0, #00a854 100%);
         .name{
@@ -477,11 +481,11 @@ function switchMode(val){
       }
       .content{
         padding:10px;
-        color:#fff;
+        color:#333;
         .content_wrap{
           .content_top{
             padding: 0 6px 0 10px;
-            background-color: rgba(51,64,76,0.4);
+            background-color: rgba(245,245,245,0.4);
             display: flex;
             align-items: center;
             justify-content: space-between;
@@ -495,11 +499,11 @@ function switchMode(val){
             .item{
               width:calc(50% - 5px);
               display: inline-block;
-              color:#fff;
+              color:#333;
               font-size: 12px;
               margin-top:10px;
               .list{
-                background: rgba(51,64,76,0.4);
+                background: rgba(245,245,245,0.4);
                 margin-top:-10px;
                 .data{
                   vertical-align: middle;

src/views/electricityFeeAnalysis/components/chart.vue

@@ -0,0 +1,109 @@
+<template>
+  <div  v-loading="loading" >
+    <div class="chart" ref="lineChartBanlance" />
+  </div>
+</template>
+<script setup>
+import {  defineComponent, onMounted, ref, watch } from 'vue'
+import * as echarts from 'echarts'
+const props = defineProps({
+  data: {
+    type: Object,
+    default: null,
+  },
+});
+
+    let lineChartBanlance = ref(null)
+    const electricChart=ref({})
+    // 读取数据 func
+    const loading = ref(true)
+    function echarts2(){
+      let myChart = echarts.init(lineChartBanlance.value)
+      // 绘制图表
+      myChart.setOption(option)
+      loading.value = false
+      window.addEventListener('resize', () => {
+        myChart.resize()
+      })
+    }
+    
+    var option 
+    option = {
+      title: {
+        text: props.data.title,
+        left: 'center',
+        top: '10px',
+        textStyle: {
+          fontSize: 16,
+          color: '#333'
+        }
+      },
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+          type: 'cross',
+          label: {
+            backgroundColor: '#6a7985'
+          }
+        }
+      },
+      legend: {
+        data: props.data.type,
+        bottom:"0"
+      },
+      toolbox: {
+        feature: {
+          saveAsImage: {}
+        }
+      },
+      grid: {
+        top:'14%',
+        left: '3%',
+        right: '4%',
+        bottom: '10%',
+        containLabel: true
+      },
+      xAxis: [
+        {
+          type: 'category',
+          // boundaryGap: false,
+          data: props.data.xAxis,
+        }
+      ],
+      yAxis: [
+        {
+          type: 'value',
+          name:props.data.unit,
+          axisLine: { // 轴线
+            show: true, // 是否显示
+            lineStyle: { // 轴线的样式
+                color: '#333',
+                width: 1
+            }
+          },
+        }
+      ],
+      
+    };
+    var series = []
+    for (let i = 0; i < props.data.type.length; i++) {
+      series.push({
+        name: props.data.type[i],
+        type: 'bar',
+        stack: 'Total',
+        barWidth: 25,
+        // areaStyle: {},
+        data: props.data.data[i],
+      })
+    }
+    option.series = series
+    onMounted(() => {
+      echarts2()
+    })
+
+</script>
+<style lang="scss" scoped>
+.chart{
+  height:306px;
+}
+</style>

src/views/electricityFeeAnalysis/components/tableD.vue

@@ -0,0 +1,39 @@
+<template>
+  <el-table :data="tableData" border stripe :header-cell-style="headClass"   height="calc(100vh - 110px)" style="overflow-y: auto;">
+    <el-table-column prop="a" label="支路名称" align="center" />
+    <el-table-column  label="尖" align="center">
+      <el-table-column prop="a" label="电量（kWh）" align="center" />
+      <el-table-column prop="a" label="电费元h）" align="center" />
+    </el-table-column>
+    <el-table-column  label="峰" align="center">
+      <el-table-column prop="a" label="电量（kWh）" align="center" />
+      <el-table-column prop="a" label="电费元h）" align="center" />
+    </el-table-column>
+    <el-table-column  label="平" align="center">
+      <el-table-column prop="a" label="电量（kWh）" align="center" />
+      <el-table-column prop="a" label="电费元h）" align="center" />
+    </el-table-column>
+    <el-table-column  label="谷" align="center">
+      <el-table-column prop="a" label="电量（kWh）" align="center" />
+      <el-table-column prop="a" label="电费元h）" align="center" />
+    </el-table-column>
+    <el-table-column  label="总" align="center">
+      <el-table-column prop="a" label="电量（kWh）" align="center" />
+      <el-table-column prop="a" label="电费元h）" align="center" />
+    </el-table-column>
+    <el-table-column prop="a" label="谷电量占比" align="center" />
+  </el-table>
+</template>
+<script setup>
+import {  defineComponent, onMounted, ref, watch } from 'vue'
+const props = defineProps({
+  data: {
+    type: Object,
+    default: null,
+  },
+});
+const tableData = ref(props.data)
+</script>
+<style lang="scss" scoped>
+
+</style>

src/views/electricityFeeAnalysis/index.vue

@@ -0,0 +1,309 @@
+<template>
+  <div class="app-container fsyd">
+      <div class="right">
+        <div class="top">
+          <span>日期：</span>
+          <el-date-picker
+            v-model="time"
+            type="daterange"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            format="YYYY/MM/DD"
+            value-format="YYYY-MM-DD"
+            unlink-panels
+          />
+          <el-button type="primary" :icon="Search" style="margin-left:10px;">查询</el-button>
+          <el-button type="warning" :icon="Bottom">导出</el-button>
+          <div class="right">
+            <div class="modeSwitching pob">
+              <div @click="switchMode(1)" :class="{ active: mode == 1 }">
+                表格
+              </div>
+              <div @click="switchMode(2)" :class="{ active: mode == 2 }">
+                图表
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="content">
+          <tableD :data="tableData"  v-if="mode == 1" style="padding:10px;"/>
+          <div v-if="mode == 2">
+            <div class="echartWrap">
+              <div class="top">
+                <img src="@/assets/images/logo1.png" alt="">
+                <span>告警处理统计</span>
+              </div>
+            
+              <div class="right" style="padding:20px 10px;">
+                <div class="modeSwitching">
+                  <div @click="switchMode2(1)" :class="{ active2: mode2 == 1 }">
+                    电量
+                  </div>
+                  <div @click="switchMode2(2)" :class="{ active2: mode2 == 2 }">
+                    电费
+                  </div>
+                </div>
+                <div class="chart">
+                  <chart :data="chartData1" v-if="mode2 == 1"/>
+                  <chart :data="chartData2" v-if="mode2 == 2"/>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+  </div>
+</template>
+
+<script setup>
+
+import { ref,onMounted } from "vue";
+import tableD from "./components/tableD";
+import chart from "./components/chart";
+onMounted(() => {
+  init()
+})
+const selectAll = ref([]) //站点全选
+const siteSelectArray = ref([]) //站点选中列表
+const siteList = ref([
+  { label:"站点1", value :1},
+  { label:"站点2", value :2},
+  { label:"站点3", value :3},
+  { label:"站点4", value :4},
+]) //站点列表
+//初始化
+
+const mode = ref(2) //模式 1:列表模式 2:模式图表
+const mode2 = ref(1) //模式 1:电量模式 2:电费模式
+const time = ref()
+
+
+const tableData = ref([
+  { a: 1000 },
+  { a: 1000 },
+]) //列表数据
+const pieData1 = ref({
+  data:[
+    { value: 1048, name: '尖', unit:"kWh" },
+    { value: 735, name: '峰', unit:"kWh" },
+    { value: 580, name: '平', unit:"kWh" },
+    { value: 484, name: '谷', unit:"kWh" }
+  ],
+  color:["#FE8B6A","#BB7582","#F54C5E","#8AD4C7"],
+  type:"4"
+}) //饼图数据
+const pieData2 = ref({
+  data:[
+    { value: 48, name: '尖', unit:"元" },
+    { value: 75, name: '峰', unit:"元" },
+    { value: 580, name: '平', unit:"元" },
+    { value: 484, name: '谷', unit:"元" }
+  ],
+  color:["#FE8B6A","#BB7582","#F54C5E","#8AD4C7"],
+  type:"4"
+}) //饼图数据
+
+const chartData1 = ref({
+  xAxis:["00:00", "02:00", "04:00", "06:00", "08:00", "10:00", "12:00", "14:00", "16:00", "18:00", "20:00", "22:00"],
+  type:["总有功功率1（kW）","总有功功率2（kW）","总有功功率3（kW）","总有功功率4（kW）","总有功功率5（kW）"],
+  data:[
+    [100, 101, 120, 50, 70, 95, 65, 120, 5, 14, 78, 32],
+    [5, 4, 10, 15, 13, 14, 9, 12, 45, 25, 32],
+    [100,89,101,110,99,94,45,89,99,100,110,102],
+    [11,8,33,22,11,66,22,8,13,8,46,16],
+    [50,51,15,20,45,35,35,40,45,20,15,6]
+  ],
+  unit:"kWh",
+  title:"每日电量趋势"
+})
+const chartData2 = ref({
+  xAxis:["00:00", "02:00", "04:00", "06:00", "08:00", "10:00", "12:00", "14:00", "16:00", "18:00", "20:00", "22:00"],
+  type:["总有功功率1（kW）","总有功功率2（kW）","总有功功率3（kW）","总有功功率4（kW）","总有功功率5（kW）"],
+  data:[
+    [100, 101, 120, 50, 70, 95, 65, 120, 5, 14, 78, 32],
+    [5, 4, 10, 15, 13, 14, 9, 12, 45, 25, 32],
+    [100,89,101,110,99,94,45,89,99,100,110,102],
+    [11,8,33,22,11,66,22,8,13,8,46,16],
+    [50,51,15,20,45,35,35,40,45,20,15,6]
+  ],
+  unit:"kWh",
+  title:"每日电费趋势"
+})
+
+function init(){
+
+}
+
+/**
+ * 切换模式
+ * @param {Number} val 1:表格模式 2:图表模式
+ */
+function switchMode(val) {
+  mode.value = val
+  // if(val == 1){
+  //   setTimeout(() => {
+  //     init()
+  //     site(1)
+  //   })
+  // }
+}
+
+/**
+ * 切换模式
+ * @param {Number} val 1:电量模式 2:电费模式
+ */
+ function switchMode2(val) {
+  mode2.value = val
+
+}
+
+
+
+/**
+ * 全选事件
+ */
+function siteAllChange(){
+  if(selectAll.value[0]){
+    siteSelectArray.value = [1,2,3,4]
+  }else{
+    siteSelectArray.value = []
+  }
+}
+
+/**
+ * 站点列表点击事件
+ * @param val 
+ */
+function siteClick(val){
+  if(siteSelectArray.value.length == siteList.value.length){
+    selectAll.value = [1]
+    console.log(selectAll.value)
+  }else{
+    selectAll.value = []
+  }
+}
+
+</script>
+<style lang="scss" scoped>
+.fsyd{
+  height:100%;
+  background: #F2F3F8;
+    >div{
+      padding:10px;
+      display: inline-block;
+      vertical-align: top;
+    }
+    .left{
+      width:20%;
+      height:100%;
+      margin-right:10px;
+      font-size: 14px;
+      background: #fff;
+      border-radius: 4px;
+      .top{
+        padding-bottom:10px;
+        border-bottom:1px solid #eee;
+        .el-row{
+          .el-col{
+            margin-top:10px;
+          }
+          .el-col:nth-child(1){
+            color:#333;
+            span{
+              padding:5px;
+              font-size:12px;
+              color:#fff;
+              background:#48A4FF;
+            }
+          }
+          .el-col:nth-child(2){
+            >div{
+              width:50%;
+              height:20px;
+              display: inline-block;
+            }
+            >div:nth-child(2){
+              text-align: right;
+            }
+          }
+        }
+  
+      }
+      .bottom{
+        padding:20px;
+      }
+    }
+    >.right{
+      width:calc(80% - 10px);
+      .top{
+        margin-top:-10px;
+        font-size: 12px;
+      }
+      .comtent{
+        height:calc(100% - 50px);
+        background: #fff;
+      }
+    }
+    .content{
+     margin-top:20px;
+     background: #fff;
+     border-radius: 4px;
+     .echartWrap{
+      .pie{
+        width:50%;
+        display: inline-block;
+      }
+      .chart{
+        width:100%;
+      }
+     }
+     .top{
+        background: #fafafa;
+        padding:8px;
+        img{
+          width:25px;
+        }
+        img,span{
+          display: inline-block;
+          vertical-align: middle;
+        }
+        span{
+          font-size: 16px;
+          margin-left:10px;
+        }
+     }
+    }
+}
+.pob{
+  position: absolute;
+  z-index: 1;
+  top:20px;
+  right:20px;
+  background: #fff !important;
+}
+.modeSwitching{
+  width:116px;
+  height:32px;
+  display: flex;
+  border-radius: 2px;
+  background: #F2F3F8;
+  cursor: pointer;
+  box-shadow: 0px 3px 7px 0px rgba(0,0,0,0.07);
+  >div{
+    padding:8px 15px;
+    display: inline-block;
+    background: none;
+    text-align: center;
+    font-size: 14px;
+    color:#333;
+  }
+  .active{
+    background: #48A4FF;
+    color:#fff;
+  }
+  .active2{
+    background: #48A4FF;
+    color:#fff;
+  }
+}
+</style>

src/views/index/components/chart.vue

@@ -0,0 +1,115 @@
+<template>
+  <div  v-loading="loading">
+    <div class="chart" ref="lineChartBanlance" />
+  </div>
+</template>
+<script setup>
+import {  defineComponent, onMounted, ref, watch } from 'vue'
+import * as echarts from 'echarts'
+const props = defineProps({
+  data: {
+    type: Object,
+    default: null,
+  },
+});
+
+    let lineChartBanlance = ref(null)
+    const electricChart=ref({})
+    const xData= [ "00:00", "02:00", "04:00", "06:00", "08:00", "10:00", "12:00", "14:00", "16:00", "18:00", "20:00", "22:00" ]
+    const dataType= [ "IA(A)", "IB(A)", "IC(A)" ]
+    const data2 = [
+      [120, 132, 101, 134, 90, 230, 210, 1, 45, 56, 78, 8],
+      [10, 12, 11, 14, 9, 30, 21, 100, 245, 156, 378, 568],
+      [1200, 1312, 1, 1304, 900, 2300, 20, 105, 45, 16, 708, 68]
+    ]
+    // 读取数据 func
+    const loading = ref(true)
+    function echarts2(){
+      let myChart = echarts.init(lineChartBanlance.value)
+      // 绘制图表
+      myChart.setOption(option)
+      loading.value = false
+      window.addEventListener('resize', () => {
+        myChart.resize()
+      })
+    }
+    
+    var option 
+    option = {
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+          type: 'cross',
+          label: {
+            backgroundColor: '#6a7985'
+          }
+        }
+      },
+      legend: {
+        data: dataType,
+        bottom:"0"
+      },
+      toolbox: {
+        feature: {
+          saveAsImage: {}
+        }
+      },
+      grid: {
+        top:'14%',
+        left: '3%',
+        right: '4%',
+        bottom: '10%',
+        containLabel: true
+      },
+      xAxis: [
+        {
+          type: 'category',
+          boundaryGap: false,
+          data: props.data.xAxis,
+        }
+      ],
+      yAxis: [
+        {
+          type: 'value',
+          axisLine: { // 轴线
+            show: true, // 是否显示
+            lineStyle: { // 轴线的样式
+                color: '#333',
+                width: 1
+            }
+          },
+        }
+      ],
+      
+    };
+    var series = []
+    for (let i = 0; i < props.data.type.length; i++) {
+      series.push({
+        name: props.data.type[i],
+        type: 'line',
+        stack: 'Total',
+        // areaStyle: {},
+      
+        data: props.data.data[i],
+        markPoint: {
+          data: [
+            { type: 'max', name: 'Max' },
+            { type: 'min', name: 'Min' }
+          ]
+        },
+        // markLine: {
+        //   data: [{ type: 'average', name: 'Avg' }]
+        // }
+      })
+    }
+    option.series = series
+    onMounted(() => {
+      echarts2()
+    })
+
+</script>
+<style lang="scss" scoped>
+.chart{
+  height:306px;
+}
+</style>

src/views/index/components/pie.vue

@@ -0,0 +1,69 @@
+<template>
+  <div  v-loading="loading">
+    <div class="chart" ref="lineChartBanlance" />
+  </div>
+</template>
+<script setup>
+import {  defineComponent, onMounted, ref, watch } from 'vue'
+import * as echarts from 'echarts'
+const props = defineProps({
+  data: {
+    type: Object,
+    default: null,
+  },
+});
+  let lineChartBanlance = ref(null)
+  const electricChart=ref({})
+  const total = props.data.data.reduce((acc, cur) => acc + cur.value, 0)
+  // 读取数据 func
+  const loading = ref(true)
+  var option 
+  option = {
+    color: props.data.color,
+    title: [
+      {
+          text: total,
+          x: 'center',
+          y: 'center',
+          top: '45%',
+          textStyle: {
+              fontSize: '22',
+              color: 'rgba(0,0,0,0.55)',
+              foontWeight: '600',
+          },
+      },
+  ],
+    series: [
+      {
+        name: '',
+        type: 'pie',
+        radius: ['40%', '60%'],
+        data: props.data.data,
+        label: {
+          fontSize: 12,
+          formatter: (params) => {
+            return  params.name + ':' + params.value +'\n' + (params.value / total * 100).toFixed(2) + '%';
+          },
+        },
+      }
+    ]
+  };
+  function initChart(){
+    let myChart = echarts.init(lineChartBanlance.value)
+    // 绘制图表
+    myChart.setOption(option)
+    loading.value = false
+    window.addEventListener('resize', () => {
+      myChart.resize()
+    })
+  }
+onMounted(() => {
+  initChart()
+})
+
+</script>
+<style lang="scss" scoped>
+.chart{
+  height:292px;
+}
+</style>

src/views/index/components/tableD.vue

@@ -0,0 +1,32 @@
+<template>
+    <el-table :data="tableData" border stripe  height="335" style="overflow-y: auto;">
+        <el-table-column prop="time" label="时间" width="100">
+            <template #default="scope">
+              {{ scope.row.time ? scope.row.time.slice(10, 19) : '' }}
+          </template>
+        </el-table-column>
+        <el-table-column prop="name" label="事件"></el-table-column>
+        <el-table-column prop="deviceName" label="设备" width="200"></el-table-column>
+        <el-table-column prop="statue" label="状态" width="100">
+          <template #default="scope">
+            <span v-if="scope.row.statue !=1">自动恢复</span>
+            <el-button type="text"  style="color: #409eff" @click.prevent="Update(scope.row)" v-if="scope.row.statue == 1">
+              确定
+            </el-button>
+          </template>
+        </el-table-column>
+    </el-table>
+</template>
+<script setup>
+import {  defineComponent, onMounted, ref, watch } from 'vue'
+const props = defineProps({
+  data: {
+    type: Object,
+    default: null,
+  },
+});
+const tableData = ref(props.data)
+</script>
+<style lang="scss" scoped>
+
+</style>

src/views/index/index.vue

@@ -1,14 +1,424 @@
 <template>
-  <div class="index-container">
-    <version-information />
+  <div class="app-container bulletinBoard" style="background: #f0f2f5 !important;height:90vw">
+      <div class="height100 component1" style="margin-left:10px;">
+        <div class="type type1">
+          <p class="color1">上海永天科技</p>
+          <img src="@/assets/images/logo1.png" alt="">
+          <p class="desc">站点名称</p>
+        </div>
+      </div>
+      <div class="height100 component2">
+        <div class="left">
+          <p class="color2">0.98  <span>/0.88</span></p>
+        </div>
+        <div class="right">
+          <p class="">平均功率因数</p>
+          <p class="">2025年7月2日 起</p>
+        </div>
+      </div>
+      <div class="height100 component1">
+        <div class="type type1">
+          <p class="color3">1023</p>
+          <img src="@/assets/images/logo1.png" alt="">
+          <p class="desc">运行天数</p>
+        </div>
+      </div>
+      <div class="height100 component3" >
+        <div class="type">
+          <img src="@/assets/images/logo1.png" alt="">
+          <div class="title color5">告警</div>
+          <p class="desc3">平均功率因数</p>
+        </div>
+      </div>
+      <div class="height100 component3">
+        <div class="type">
+          <img src="@/assets/images/logo1.png" alt="">
+          <div class="title color1">在线</div>
+          <p class="desc3">站点通讯状态</p>
+        </div>
+      </div>
+      <div class="height100 component3">
+        <div class="type">
+          <img src="@/assets/images/logo1.png" alt="">
+          <div class="title color1">正常</div>
+          <p class="desc3">站点故障状态</p>
+        </div>
+      </div>
+        <div class="height190 component4" style="margin-left:8px;">
+            <div class="top">
+              <p>今日用电<span>（kWh）</span></p>
+              <img src="@/assets/images/day/31.png" alt="">
+            </div>
+            <div class="middle">
+              1968
+            </div>
+            <div class="bottom">
+              <p>昨日同期<span>2775</span></p>
+              <p><span>28.32%</span><span></span></p>
+            </div>
+        </div>
+        <div class="height190 component4" style="display: inline-block;">
+          <div class="top">
+            <p>本月用电<span>（kWh）</span></p>
+            <img src="@/assets/images/month/7.png" alt="">
+          </div>
+          <div class="middle">
+            247605
+          </div>
+          <div class="bottom">
+            <p>上月同期<span>1322913</span></p>
+            <p><span>28.32%</span><span></span></p>
+          </div>
+        </div>
+      <div class="height190 component5 echarts" style="margin-top:-185px;width:62%;">
+        <div class="top">
+          <img src="@/assets/images/logo1.png" alt="">
+          <span>今日用电趋势</span>
+        </div>
+        <chart :data="ydqs"/>
+      </div>
+      <div class="height190 component6 echarts" style="margin-top:-185px;height:380px;">
+        <div class="top">
+          <img src="@/assets/images/logo1.png" alt="">
+          <span>告警处理统计</span>
+        </div>
+        <pie :data="alarm"/>
+      </div>
+      <div class="height190 component7 echarts" style="margin-left:10px;" >
+        <div class="top">
+          <img src="@/assets/images/logo1.png" alt="">
+          <span>支路用能占比</span>
+        </div>
+        <div class="time">
+          <div :class="['switch',dateType == '1' ? 'active': '']" @click="dateSwitch(1)">月</div>
+          <div :class="['switch',dateType == '2' ? 'active': '']" @click="dateSwitch(2)">年</div>
+        </div>
+        <pie :data="zlydzb"/>
+      </div>
+      <div class="height190 component7 echarts" style="height:375px;width:28.3%;">
+        <div class="top">
+          <img src="@/assets/images/logo1.png" alt="">
+          <span>事件告警列表</span>
+        </div>
+        <tableD :data="eventList"/>
+      </div>
+      <div class="height190 component5 echarts" style="height:375px !important;width:calc(50% - 23px)">
+        <div class="top">
+          <img src="@/assets/images/logo1.png" alt="">
+          <span>有功功率</span>
+        </div>
+        <chart :data="ydqs"/>
+      </div>
+      <div class="height190 component5 echarts" style="margin-left:10px;width:calc(50% - 23px)">
+        <div class="top">
+          <img src="@/assets/images/logo1.png" alt="">
+          <span>有功功率同比分析</span>
+        </div>
+        <chart :data="ydqs"/>
+      </div>
+      <div class="height190 component5 echarts" style="width:calc(50% - 23px)">
+        <div class="top">
+          <img src="@/assets/images/logo1.png" alt="">
+          <span>功率因数</span>
+        </div>
+        <chart :data="ydqs"/>
+      </div>
+      <div class="height190 component5 echarts" style="margin-left:10px;width:calc(50% - 23px)">
+        <div class="top">
+          <img src="@/assets/images/logo1.png" alt="">
+          <span>环境温湿度</span>
+        </div>
+        <chart :data="ydqs"/>
+      </div>
   </div>
 </template>
 
-<script>
-export default {
-  name: 'Index',
-  components: {},
+<script setup>
+import chart from './components/chart'
+import pie from './components/pie'
+import tableD from './components/tableD'
+import { ref } from 'vue'
+
+//用电趋势
+const ydqs = ref({
+  xAxis:["00:00", "02:00", "04:00", "06:00", "08:00", "10:00", "12:00", "14:00", "16:00", "18:00", "20:00", "22:00"],
+  type:["总有功功率1（kW）","总有功功率2（kW）","总有功功率3（kW）","总有功功率4（kW）","总有功功率5（kW）"],
+  data:[
+    [100, 101, 120, 50, 70, 95, 65, 120, 5, 14, 78, 32],
+    [5, 4, 10, 15, 13, 14, 9, 12, 45, 25, 32],
+    [100,89,101,110,99,94,45,89,99,100,110,102],
+    [11,8,33,22,11,66,22,8,13,8,46,16],
+    [50,51,15,20,45,35,35,40,45,20,15,6]
+  ],
+  unit:""
+})
+//告警统计
+const alarm = ref({
+  data:[
+    {name: '未确认', value: 3},
+    {name: '已确认', value: 3 },
+  ],
+  color:["red","#10aaeb"],
+  type:"1"
+})
+//支路用电占比
+const zlydzb = ref({
+  data:[
+    {name: '路灯照明', value: 3},
+    {name: '站内用电', value: 4 },
+    {name: '站外用电', value: 5 },
+  ],
+  color:["red","#10aaeb","#FF691C"],
+  type:"2"
+})
+const dateType = ref(1)
 
-}
 
+//事件告警列表
+const eventList = ref([
+  { name:"事件名称", time:"2021-10-10 10:10:10", deviceName:"设备1", statue:"1" },
+  { name:"事件名称", time:"2021-10-10 10:10:10", deviceName:"设备1", statue:"0" },
+  { name:"事件名称", time:"2021-10-10 10:10:10", deviceName:"设备1", statue:"1" },
+  { name:"事件名称", time:"2021-10-10 10:10:10", deviceName:"设备1", statue:"1" },
+  { name:"事件名称", time:"2021-10-10 10:10:10", deviceName:"设备1", statue:"1" },
+  { name:"事件名称", time:"2021-10-10 10:10:10", deviceName:"设备1", statue:"1" },
+  { name:"事件名称", time:"2021-10-10 10:10:10", deviceName:"设备1", statue:"1" },
+  { name:"事件名称", time:"2021-10-10 10:10:10", deviceName:"设备1", statue:"1" },
+  { name:"事件名称", time:"2021-10-10 10:10:10", deviceName:"设备1", statue:"1" },
+  { name:"事件名称", time:"2021-10-10 10:10:10", deviceName:"设备1", statue:"1" },
+  { name:"事件名称", time:"2021-10-10 10:10:10", deviceName:"设备1", statue:"1" },
+])
+
+function dateSwitch(type){
+  dateType.value = type
+}
 </script>
+
+<style lang="scss" scoped>
+.bulletinBoard{
+  padding:0;
+  .height100{
+    height:100px;
+    margin-top:10px;
+    margin-right:10px;
+    border-radius: 6px;
+    display: inline-block;
+    vertical-align: top;
+    position: relative;
+    .type{
+      padding:10px 8px;
+    }
+    .type1{
+      img{
+        position: absolute;
+        right:8px;;
+        top:25px;
+      }
+      p:nth-child(1){
+        font-size: 24px;
+      }
+      
+      .desc{
+        position: absolute;
+        bottom:-5px;
+        color:#fff;
+      }
+      .desc2{
+        position: absolute;
+        bottom:15px;
+      }
+      .time{
+        position: absolute;
+        bottom:-5px;
+        font-size: 12px;
+        color:#333;
+      }
+    }
+  }
+  .component1{
+    width:24.3%;
+    background: linear-gradient(to right bottom, rgb(56, 148, 190), rgb(80, 227, 194));
+  }
+  .component2{
+    width:24.3%;
+    background:linear-gradient(to right bottom, rgb(27, 40, 52), rgb(27, 40, 52));
+    >div{
+      width:50%;
+      display: inline-block;
+    }
+    .left{
+      font-size: 40px;
+      color:rgb(80, 227, 194);
+      text-align: center;
+      vertical-align: middle;
+      margin-top:25px;
+      span{
+        font-size: 14px;
+        color:rgb(126, 147, 166);
+        vertical-align: top;
+        margin-top:10px;
+        display: inline-block;
+      }
+    }
+    .right{
+      color:rgb(126, 147, 166);
+
+      vertical-align: middle;
+
+    }
+  }
+  .component3{
+    width:7.5%;
+    background: #fff;
+    text-align: center;
+    .title{
+      font-weight: 600;
+      margin:6px 0;
+    }
+    
+  }
+  .height100:last-child{
+    margin-right:0;
+  }
+  .component4{
+    width:15%;
+    height:185px;
+    margin-top:10px;
+    margin-right:10px;
+    margin-left:10px;
+    background: #fff;
+    // display: inline-block;
+    >div{
+      height: 50px;
+    }
+    .top{
+      position: relative;
+      padding:15px;
+      p{
+        font-size: 20px;
+        span{
+          font-size: 12px;
+        }
+      }
+      img{
+        position: absolute;
+        width:40px;
+        top:15px;
+        right:15px;
+      }
+    }
+    .middle{
+      font-size:34px;
+      color:#10aaeb;
+      padding:15px 15px 40px 15px;
+      border-bottom:2px solid #eee;
+    }
+    .bottom{
+      padding:15px;
+      color:rgba(0,0,0,0.65);
+      p:nth-child(1){
+        span:nth-child(1){
+          margin-left:10px;
+        }
+      }
+      p:nth-child(2){
+        span{
+          vertical-align: middle;
+        }
+        span:nth-child(1){
+          color:#1BCCC1;
+        }
+        span:nth-child(2){
+          margin-left:10px;
+          margin-top:-4px;
+          display: inline-block;
+        }
+        span:nth-child(2)::after{
+          display: inline-block;
+          content: ""; /* 伪元素不包含内容 */
+          width: 0; /* 必须设置为0，因为我们不显示宽度 */
+          height: 0; /* 必须设置为0，因为我们不显示高度 */
+          margin-left: -5px; /* 根据需要调整，这里是让箭头中心对齐 */
+          margin-top:-10px;
+          border-left: 5px solid transparent; /* 左边框透明 */
+          border-right: 5px solid transparent; /* 右边框透明 */
+          border-top: 5px solid #08b762; /* 上边框是三角形的颜色 */
+        }
+      }
+    }
+  }
+  .component5{
+    width:49%;
+    height:380px !important;
+    display: inline-block;
+    vertical-align: top;
+  }
+  .component6{
+    width:20%;
+  }
+  .component7{
+    width:20%;
+    .time{
+      margin:6px;
+      .switch{
+        width:40px;
+        height:30px;
+        line-height: 26px;
+        text-align: center;
+        margin-right:6px;
+        padding:2px;
+        color:rgba(0,0,0,0.65);
+        border: 1px solid #ccc;
+        display: inline-block;
+        cursor: pointer;
+      }
+      .active{
+        background: #6c7fff;
+        color:#fff;
+      }
+    }
+  }
+}
+.echarts{
+  margin-top:10px;
+  margin-right:10px;
+  display: inline-block;
+  vertical-align: top;
+  border-top:solid 1px #1890ff;
+  background: #fff;
+  .top{
+      background: #fafafa;
+      padding:8px;
+      img{
+        width:25px;
+      }
+      img,span{
+        display: inline-block;
+        vertical-align: middle;
+      }
+      span{
+        font-size: 16px;
+        margin-left:10px;
+      }
+    }
+}
+.color1{
+  color:#1BCCC1;
+}
+.color2{
+  color:#FF691C ;
+}
+.color3{
+  color:#8942F5 ;
+}
+.color4{
+  color:#FF397F ;
+  span{
+    color:#333;
+    margin-left:10px;
+  }
+}
+.color5{
+  color:red
+}
+</style>

src/views/index2/index.vue → src/views/siteDistribution/index.vue

@@ -364,7 +364,7 @@ function site(val){
       >div{
         width:50%;
         height:100%;
-        line-height: 130%;;
+        line-height: 115%;;
         display: inline-block;
         background: none;
         text-align: center;

src/views/index3/components/overview.vue → src/views/starMarkingEquipment/components/overview.vue

@@ -72,7 +72,7 @@
                       placeholder=""
                       :disabled-date="disabledDate"
                       v-if="dateType == 1"
-                      style="width:140px;display: inline-block;"
+                      style="width:140px;margin-top:-5px;display: inline-block;"
                     />
                     <el-date-picker
                       v-model="month"
@@ -122,11 +122,11 @@
         <div class="right">
           <div>
             <span>当月分时电量</span>
-            <pie/>
+            <pie :data="electricalVoltage"/>
           </div>
           <div>
             <span>当月分时电费</span>
-            <pie/>
+            <pie :data="electricityBill"/>
           </div>
         </div>
       </div>
@@ -139,27 +139,37 @@ import dayjs from 'dayjs'
 import chart from './chart'
 import pie from './pie'
 import running from '@/assets/images/running.png'
+import a from '@/assets/images/a.png'
+import b from '@/assets/images/b.png'
+import c from '@/assets/images/c.png'
+import demand from '@/assets/images/demand.png'
+import I from '@/assets/images/I.png'
+import power from '@/assets/images/power.png'
+import powerqulity from '@/assets/images/powerqulity.png'
+import temperature from '@/assets/images/temperature.png'
+import UA from '@/assets/images/UA.png'
 import UAB from '@/assets/images/UAB.png'
+import dian from '@/assets/images/dian.png'
 const overviewData = ref([
   { name: '回路带电/停电', value: 'ON' , img: running },
-  { name: '环境温度', value: 'OFF' , img: running },
-  { name: '剩余电流超限', value: 'ON' , img: running },
-  { name: '线路电气故障总', value: 'ON' , img: running },
-  { name: '电压缺相', value: 'ON' , img: running },
-  { name: '线路开关状态', value: 'ON' , img: running },
-  { name: '电压越上限告警', value: 'ON' , img: running },
-  { name: '电压越下限告警', value: 'ON' , img: running },
+  { name: '环境温度', value: 'OFF' , img: temperature },
+  { name: '剩余电流超限', value: 'ON' , img: a },
+  { name: '线路电气故障总', value: 'ON' , img: b },
+  { name: '电压缺相', value: 'ON' , img: c },
+  { name: '线路开关状态', value: 'ON' , img: a },
+  { name: '电压越上限告警', value: 'ON' , img: b },
+  { name: '电压越下限告警', value: 'ON' , img: c },
 ])
 const quota = ref([
   [
-      { title: '电压', img: UAB,
+      { title: '电流', img: I,
         array:[
           { name: 'IA',value: '2.81',unit:'A' },
           { name: 'IB',value: '2.87',unit:'A' },
           { name: 'IC',value: '2.52',unit:'A' },
         ]
       },
-      { title: '相电压', img: UAB, 
+      { title: '相电压', img: UA, 
         array:[
           { name: 'UA',value: '5.92',unit:'kW' },
           { name: 'UB',value: '2.91',unit:'kW' },
@@ -175,27 +185,27 @@ const quota = ref([
       }
   ],
   [
-      { title: '功率', img: UAB,num:"two",
+      { title: '功率', img: power,num:"two",
         array:[
           { name: '有功功率',value: '36.3',unit:'kW' },
           { name: '无功功率',value: '-23.7',unit:'kW' },
         ]
       },
-      { title: '需量', img: UAB, num:"three",
+      { title: '需量', img: demand, num:"three",
         array:[
           { name: '当前需量',value: '37.8',unit:'kV' },
           { name: '当月最大需量',value: '21265.7',unit:'kV' },
           { name: '发生时间',value: '2025-05-01 12:00:00',unit:'' },
         ]
       },
-      { title: '电能质量', img: UAB, num:"three2",
+      { title: '电能质量', img: powerqulity, num:"three2",
         array:[
           { name: '当月功率因数',value: '0.99',unit:'7月1日 起' },
           { name: '频率',value: '50.03',unit:'Hz' },
           { name: '实时功率因数',value: '0.8276',unit:'' },
         ]
       },
-      { title: '电度', img: UAB, num:"four",
+      { title: '电度', img: dian, num:"four",
         array:[
           { name: '正向有功',value: '182153.96',unit:'kWh', },
           { name: '反向有功',value: '-3',unit:'kWh' },
@@ -236,6 +246,28 @@ const electronData = ref([
   { name: '当月用电', value: '129465', unit: 'kWh', img: UAB, synchronism: '上月同期', synchronisNum:"148950", proportion:"13.08" },
   { name: '当月电费', value: '73618.45', unit: 'kWh', img: UAB, synchronism: '上月同期', synchronisNum:"91539.14", proportion:"19.58" },
 ])
+
+const electricalVoltage = ref({
+  data:[
+    { value: 1048, name: '尖', unit:"kWh" },
+    { value: 735, name: '峰', unit:"kWh" },
+    { value: 580, name: '平', unit:"kWh" },
+    { value: 484, name: '谷', unit:"kWh" }
+  ],
+  color:["#FE8B6A","#BB7582","#F54C5E","#8AD4C7"],
+  type:"3"
+})
+
+const electricityBill = ref({
+  data:[
+    { value: 1048, name: '尖', unit:"元" },
+    { value: 735, name: '峰', unit:"元" },
+    { value: 580, name: '平', unit:"元" },
+    { value: 484, name: '谷', unit:"元" }
+  ],
+  color:["#FE8B6A","#BB7582","#F54C5E","#8AD4C7"],
+  type:"3"
+})
 function disabledDate(time) {
   // 禁止选择今天之后的日子
   return time.getTime() > Date.now();
@@ -398,6 +430,7 @@ function dateSwitch(type){
               >span{
                 vertical-align: middle;
                 display: inline-block;
+                margin-top:-5px;
               }
               >div:first-child{
                 width:60px;

src/views/index3/components/pie.vue → src/views/starMarkingEquipment/components/pie.vue

@@ -6,17 +6,14 @@
 <script setup>
 import {  defineComponent, onMounted, ref, watch } from 'vue'
 import * as echarts from 'echarts'
-
-
+const props = defineProps({
+  data: {
+    type: Object,
+    default: null,
+  },
+});
+const total = props.data?.data.reduce((acc, cur) => acc + cur.value, 0)
     let lineChartBanlance = ref(null)
-    const electricChart=ref({})
-    const xData= [ "00:00", "02:00", "04:00", "06:00", "08:00", "10:00", "12:00", "14:00", "16:00", "18:00", "20:00", "22:00" ]
-    const dataType= [ "IA(A)", "IB(A)", "IC(A)" ]
-    const data2 = [
-      [120, 132, 101, 134, 90, 230, 210, 1, 45, 56, 78, 8],
-      [10, 12, 11, 14, 9, 30, 21, 100, 245, 156, 378, 568],
-      [1200, 1312, 1, 1304, 900, 2300, 20, 105, 45, 16, 708, 68]
-    ]
     // 读取数据 func
     const loading = ref(true)
     function echarts2(){
@@ -31,9 +28,10 @@ import * as echarts from 'echarts'
     
     var option 
     option = {
+      color: props.data.color,
       title: [
         {
-            text: 'kWh',
+            text: props.data.data[0]?.unit,
             x: 'center',
             top: '53%',
             textStyle: {
@@ -43,7 +41,7 @@ import * as echarts from 'echarts'
             },
         },
         {
-            text: '75%',
+            text: props.data?.data[0]?.unit == 'kWh' ? Math.round(total) : total.toFixed(2),
             x: 'center',
             y: 'center',
             top: '43%',
@@ -58,7 +56,7 @@ import * as echarts from 'echarts'
         trigger: 'item'
       },
       legend: {
-        right: '0',
+        right: props.data.type == 4 ? '2%' : '0',
         top:'2%'
       },
       grid: {
@@ -71,14 +69,13 @@ import * as echarts from 'echarts'
           name: '',
           type: 'pie',
           radius: ['40%', '60%'],
-         
-          data: [
-            { value: 1048, name: '尖' },
-            { value: 735, name: '峰' },
-            { value: 580, name: '平' },
-            { value: 484, name: '谷' },
-           
-          ]
+          data: props.data.data,
+          label: {
+            fontSize: 12,
+            formatter: (params) => {
+              return  params.name + ':' + params.value +'\n' + (params.value / total * 100).toFixed(2) + '%';
+            },
+          },
         }
       ]
       

src/views/index3/index.vue → src/views/starMarkingEquipment/index.vue

@@ -21,7 +21,7 @@
       <div class="right">
         <el-button
             type="danger"
-            icon="el-icon-delete"
+            :icon="Delete"
             class="search-button"
           >
           取消星标
@@ -42,6 +42,7 @@
 import overview from './components/overview'
 import electron from './components/electron'
 import { ref } from 'vue'
+import { Delete } from '@element-plus/icons-vue'
 const activePage = ref('1')
 const activeList = ref([
   { key:"1", name:'概览' },

src/views/useElectricity/components/chart.vue

@@ -0,0 +1,109 @@
+<template>
+  <div  v-loading="loading" >
+    <div class="chart" ref="lineChartBanlance" />
+  </div>
+</template>
+<script setup>
+import {  defineComponent, onMounted, ref, watch } from 'vue'
+import * as echarts from 'echarts'
+const props = defineProps({
+  data: {
+    type: Object,
+    default: null,
+  },
+});
+
+    let lineChartBanlance = ref(null)
+    const electricChart=ref({})
+    // 读取数据 func
+    const loading = ref(true)
+    function echarts2(){
+      let myChart = echarts.init(lineChartBanlance.value)
+      // 绘制图表
+      myChart.setOption(option)
+      loading.value = false
+      window.addEventListener('resize', () => {
+        myChart.resize()
+      })
+    }
+    
+    var option 
+    option = {
+      title: {
+        text: props.data.title,
+        left: 'center',
+        top: '10px',
+        textStyle: {
+          fontSize: 16,
+          color: '#333'
+        }
+      },
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+          type: 'cross',
+          label: {
+            backgroundColor: '#6a7985'
+          }
+        }
+      },
+      legend: {
+        data: props.data.type,
+        bottom:"0"
+      },
+      toolbox: {
+        feature: {
+          saveAsImage: {}
+        }
+      },
+      grid: {
+        top:'14%',
+        left: '3%',
+        right: '4%',
+        bottom: '10%',
+        containLabel: true
+      },
+      xAxis: [
+        {
+          type: 'category',
+          // boundaryGap: false,
+          data: props.data.xAxis,
+        }
+      ],
+      yAxis: [
+        {
+          type: 'value',
+          name:props.data.unit,
+          axisLine: { // 轴线
+            show: true, // 是否显示
+            lineStyle: { // 轴线的样式
+                color: '#333',
+                width: 1
+            }
+          },
+        }
+      ],
+      
+    };
+    var series = []
+    for (let i = 0; i < props.data.type.length; i++) {
+      series.push({
+        name: props.data.type[i],
+        type: 'bar',
+        stack: 'Total',
+        barWidth: 25,
+        // areaStyle: {},
+        data: props.data.data[i],
+      })
+    }
+    option.series = series
+    onMounted(() => {
+      echarts2()
+    })
+
+</script>
+<style lang="scss" scoped>
+.chart{
+  height:306px;
+}
+</style>

src/views/useElectricity/components/tableD.vue

@@ -0,0 +1,39 @@
+<template>
+  <el-table :data="tableData" border stripe :header-cell-style="headClass"   height="calc(100vh - 110px)" style="overflow-y: auto;">
+    <el-table-column prop="a" label="支路名称" align="center" />
+    <el-table-column  label="尖" align="center">
+      <el-table-column prop="a" label="电量（kWh）" align="center" />
+      <el-table-column prop="a" label="电费元h）" align="center" />
+    </el-table-column>
+    <el-table-column  label="峰" align="center">
+      <el-table-column prop="a" label="电量（kWh）" align="center" />
+      <el-table-column prop="a" label="电费元h）" align="center" />
+    </el-table-column>
+    <el-table-column  label="平" align="center">
+      <el-table-column prop="a" label="电量（kWh）" align="center" />
+      <el-table-column prop="a" label="电费元h）" align="center" />
+    </el-table-column>
+    <el-table-column  label="谷" align="center">
+      <el-table-column prop="a" label="电量（kWh）" align="center" />
+      <el-table-column prop="a" label="电费元h）" align="center" />
+    </el-table-column>
+    <el-table-column  label="总" align="center">
+      <el-table-column prop="a" label="电量（kWh）" align="center" />
+      <el-table-column prop="a" label="电费元h）" align="center" />
+    </el-table-column>
+    <el-table-column prop="a" label="谷电量占比" align="center" />
+  </el-table>
+</template>
+<script setup>
+import {  defineComponent, onMounted, ref, watch } from 'vue'
+const props = defineProps({
+  data: {
+    type: Object,
+    default: null,
+  },
+});
+const tableData = ref(props.data)
+</script>
+<style lang="scss" scoped>
+
+</style>

src/views/useElectricity/index.vue

@@ -0,0 +1,340 @@
+<template>
+  <div class="app-container fsyd">
+    <div class="item">
+      <div class="left">
+        <div class="top">
+          <el-row>
+            <el-col :span="24">标签：<span>支路</span></el-col>
+            <el-col :span="24">
+              <div>电--支路 名称</div>
+              <div class="right">
+                <el-checkbox-group v-model="selectAll" style="margin-top: -10px;" @change="siteAllChange">
+                  <el-checkbox :label="1" size="large" >全选</el-checkbox>
+                </el-checkbox-group>
+              </div>
+            </el-col>
+          </el-row>
+        </div>
+        <div class="bottom">
+          <el-checkbox-group v-model="siteSelectArray">
+            <el-checkbox :label="item.value" size="large" v-for="item in siteList" :key="item.value" style="display: block;position: relative; " @change="siteClick">
+              <div style="top:0px !important;position: absolute;">
+                <img src="@/assets/images/site.png" alt="" style="width:15px;margin-right:8px;vertical-align: top;">{{ item.label }}
+              </div>
+            </el-checkbox>
+          </el-checkbox-group>
+        </div>
+      </div>
+      <div class="right">
+        <div class="top">
+          <span>日期：</span>
+          <el-date-picker
+            v-model="time"
+            type="daterange"
+            start-placeholder="开始日期"
+            end-placeholder="结束日期"
+            format="YYYY/MM/DD"
+            value-format="YYYY-MM-DD"
+            unlink-panels
+          />
+          <el-button type="primary" :icon="Search" style="margin-left:10px;">查询</el-button>
+          <el-button type="warning" :icon="Bottom">导出</el-button>
+          <div class="right">
+            <div class="modeSwitching pob">
+              <div @click="switchMode(1)" :class="{ active: mode == 1 }">
+                表格
+              </div>
+              <div @click="switchMode(2)" :class="{ active: mode == 2 }">
+                图表
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="content">
+          <tableD :data="tableData"  v-if="mode == 1" style="padding:10px;"/>
+          <div v-if="mode == 2">
+            <div class="echartWrap">
+              <div class="top">
+                <img src="@/assets/images/logo1.png" alt="">
+                <span>告警处理统计</span>
+              </div>
+              <div class="pie"><pie :data="pieData1" /></div>
+              <div class="pie"><pie :data="pieData2" /></div>
+              <div class="right" style="padding:20px 10px;">
+                <div class="modeSwitching">
+                  <div @click="switchMode2(1)" :class="{ active2: mode2 == 1 }">
+                    电量
+                  </div>
+                  <div @click="switchMode2(2)" :class="{ active2: mode2 == 2 }">
+                    电费
+                  </div>
+                </div>
+                <div class="chart">
+                  <chart :data="chartData1" v-if="mode2 == 1"/>
+                  <chart :data="chartData2" v-if="mode2 == 2"/>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+
+import { ref,onMounted } from "vue";
+import tableD from "./components/tableD";
+import chart from "./components/chart";
+import pie from "@/views/starMarkingEquipment/components/pie";
+onMounted(() => {
+  init()
+})
+const selectAll = ref([]) //站点全选
+const siteSelectArray = ref([]) //站点选中列表
+const siteList = ref([
+  { label:"站点1", value :1},
+  { label:"站点2", value :2},
+  { label:"站点3", value :3},
+  { label:"站点4", value :4},
+]) //站点列表
+//初始化
+
+const mode = ref(2) //模式 1:列表模式 2:模式图表
+const mode2 = ref(1) //模式 1:电量模式 2:电费模式
+const time = ref()
+
+
+const tableData = ref([
+  { a: 1000 },
+  { a: 1000 },
+]) //列表数据
+const pieData1 = ref({
+  data:[
+    { value: 1048, name: '尖', unit:"kWh" },
+    { value: 735, name: '峰', unit:"kWh" },
+    { value: 580, name: '平', unit:"kWh" },
+    { value: 484, name: '谷', unit:"kWh" }
+  ],
+  color:["#FE8B6A","#BB7582","#F54C5E","#8AD4C7"],
+  type:"4"
+}) //饼图数据
+const pieData2 = ref({
+  data:[
+    { value: 48, name: '尖', unit:"元" },
+    { value: 75, name: '峰', unit:"元" },
+    { value: 580, name: '平', unit:"元" },
+    { value: 484, name: '谷', unit:"元" }
+  ],
+  color:["#FE8B6A","#BB7582","#F54C5E","#8AD4C7"],
+  type:"4"
+}) //饼图数据
+
+const chartData1 = ref({
+  xAxis:["00:00", "02:00", "04:00", "06:00", "08:00", "10:00", "12:00", "14:00", "16:00", "18:00", "20:00", "22:00"],
+  type:["总有功功率1（kW）","总有功功率2（kW）","总有功功率3（kW）","总有功功率4（kW）","总有功功率5（kW）"],
+  data:[
+    [100, 101, 120, 50, 70, 95, 65, 120, 5, 14, 78, 32],
+    [5, 4, 10, 15, 13, 14, 9, 12, 45, 25, 32],
+    [100,89,101,110,99,94,45,89,99,100,110,102],
+    [11,8,33,22,11,66,22,8,13,8,46,16],
+    [50,51,15,20,45,35,35,40,45,20,15,6]
+  ],
+  unit:"kWh",
+  title:"每日电量趋势"
+})
+const chartData2 = ref({
+  xAxis:["00:00", "02:00", "04:00", "06:00", "08:00", "10:00", "12:00", "14:00", "16:00", "18:00", "20:00", "22:00"],
+  type:["总有功功率1（kW）","总有功功率2（kW）","总有功功率3（kW）","总有功功率4（kW）","总有功功率5（kW）"],
+  data:[
+    [100, 101, 120, 50, 70, 95, 65, 120, 5, 14, 78, 32],
+    [5, 4, 10, 15, 13, 14, 9, 12, 45, 25, 32],
+    [100,89,101,110,99,94,45,89,99,100,110,102],
+    [11,8,33,22,11,66,22,8,13,8,46,16],
+    [50,51,15,20,45,35,35,40,45,20,15,6]
+  ],
+  unit:"kWh",
+  title:"每日电费趋势"
+})
+
+function init(){
+
+}
+
+/**
+ * 切换模式
+ * @param {Number} val 1:表格模式 2:图表模式
+ */
+function switchMode(val) {
+  mode.value = val
+  // if(val == 1){
+  //   setTimeout(() => {
+  //     init()
+  //     site(1)
+  //   })
+  // }
+}
+
+/**
+ * 切换模式
+ * @param {Number} val 1:电量模式 2:电费模式
+ */
+ function switchMode2(val) {
+  mode2.value = val
+
+}
+
+
+
+/**
+ * 全选事件
+ */
+function siteAllChange(){
+  if(selectAll.value[0]){
+    siteSelectArray.value = [1,2,3,4]
+  }else{
+    siteSelectArray.value = []
+  }
+}
+
+/**
+ * 站点列表点击事件
+ * @param val 
+ */
+function siteClick(val){
+  if(siteSelectArray.value.length == siteList.value.length){
+    selectAll.value = [1]
+    console.log(selectAll.value)
+  }else{
+    selectAll.value = []
+  }
+}
+
+</script>
+<style lang="scss" scoped>
+.fsyd{
+  height:100%;
+  background: #F2F3F8;
+  padding:0 !important;
+  .item{
+    >div{
+      padding:10px;
+      display: inline-block;
+      vertical-align: top;
+    }
+    .left{
+      width:20%;
+      height:100%;
+      margin-right:10px;
+      font-size: 14px;
+      background: #fff;
+      border-radius: 4px;
+      .top{
+        padding-bottom:10px;
+        border-bottom:1px solid #eee;
+        .el-row{
+          .el-col{
+            margin-top:10px;
+          }
+          .el-col:nth-child(1){
+            color:#333;
+            span{
+              padding:5px;
+              font-size:12px;
+              color:#fff;
+              background:#48A4FF;
+            }
+          }
+          .el-col:nth-child(2){
+            >div{
+              width:50%;
+              height:20px;
+              display: inline-block;
+            }
+            >div:nth-child(2){
+              text-align: right;
+            }
+          }
+        }
+  
+      }
+      .bottom{
+        padding:20px;
+      }
+    }
+    >.right{
+      width:calc(80% - 10px);
+      .top{
+        margin-top:-10px;
+        font-size: 12px;
+      }
+      .comtent{
+        height:calc(100% - 50px);
+        background: #fff;
+      }
+    }
+    .content{
+     margin-top:20px;
+     background: #fff;
+     border-radius: 4px;
+     .echartWrap{
+      .pie{
+        width:50%;
+        display: inline-block;
+      }
+      .chart{
+        width:100%;
+      }
+     }
+     .top{
+        background: #fafafa;
+        padding:8px;
+        img{
+          width:25px;
+        }
+        img,span{
+          display: inline-block;
+          vertical-align: middle;
+        }
+        span{
+          font-size: 16px;
+          margin-left:10px;
+        }
+     }
+    }
+  }
+}
+.pob{
+  position: absolute;
+  z-index: 1;
+  top:20px;
+  right:20px;
+  background: #fff !important;
+}
+.modeSwitching{
+  width:116px;
+  height:32px;
+  display: flex;
+  border-radius: 2px;
+  background: #F2F3F8;
+  cursor: pointer;
+  box-shadow: 0px 3px 7px 0px rgba(0,0,0,0.07);
+  >div{
+    padding:8px 15px;
+    display: inline-block;
+    background: none;
+    text-align: center;
+    font-size: 14px;
+    color:#333;
+  }
+  .active{
+    background: #48A4FF;
+    color:#fff;
+  }
+  .active2{
+    background: #48A4FF;
+    color:#fff;
+  }
+}
+</style>