功能静态页面完成

README.md

@@ -0,0 +1,2 @@
+### node运行版本
+ - node· 16.17.1

src/assets/icons/svgIcon/历史报表.svg

@@ -0,0 +1,7 @@
+<svg 
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="14px" height="14px">
+<path fill-rule="evenodd"  
+ d="M13.500,12.500 C13.224,12.500 13.000,12.276 13.000,12.000 L13.000,1.000 L3.016,1.000 C2.740,1.000 2.516,0.776 2.516,0.500 C2.516,0.224 2.740,-0.000 3.016,-0.000 L13.500,-0.000 C13.776,-0.000 14.000,0.224 14.000,0.500 L14.000,12.000 C14.000,12.276 13.776,12.500 13.500,12.500 ZM11.000,2.500 L11.000,13.500 C11.000,13.776 10.776,14.000 10.500,14.000 L0.500,14.000 C0.224,14.000 -0.000,13.776 -0.000,13.500 L-0.000,2.500 C-0.000,2.224 0.224,2.000 0.500,2.000 L10.500,2.000 C10.776,2.000 11.000,2.224 11.000,2.500 ZM10.000,3.000 L1.000,3.000 L1.000,13.000 L10.000,13.000 L10.000,3.000 ZM2.500,8.000 C2.776,8.000 3.000,8.224 3.000,8.500 L3.000,12.000 L2.000,12.000 L2.000,8.500 C2.000,8.224 2.224,8.000 2.500,8.000 ZM2.175,6.880 C1.965,6.700 1.941,6.384 2.120,6.175 L3.620,4.425 C3.716,4.314 3.854,4.250 4.000,4.250 C4.146,4.250 4.285,4.314 4.380,4.425 L5.592,5.838 L8.223,4.084 C8.453,3.931 8.763,3.993 8.916,4.223 C9.070,4.452 9.008,4.763 8.778,4.916 L5.778,6.916 C5.696,6.971 5.599,7.000 5.500,7.000 C5.359,7.000 5.219,6.940 5.120,6.825 L4.000,5.518 L2.880,6.825 C2.700,7.035 2.384,7.059 2.175,6.880 ZM5.500,9.000 C5.776,9.000 6.000,9.224 6.000,9.500 L6.000,12.000 L5.000,12.000 L5.000,9.500 C5.000,9.224 5.224,9.000 5.500,9.000 ZM8.500,7.000 C8.776,7.000 9.000,7.224 9.000,7.500 L9.000,12.000 L8.000,12.000 L8.000,7.500 C8.000,7.224 8.224,7.000 8.500,7.000 Z"/>
+</svg>

src/assets/icons/svgIcon/数据看板.svg

@@ -0,0 +1,7 @@
+<svg 
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="14px" height="14px">
+<path fill-rule="evenodd"  
+ d="M13.977,1.724 L13.298,4.309 C13.275,4.396 13.229,4.476 13.166,4.539 C12.972,4.731 12.662,4.725 12.475,4.526 L11.841,3.855 L8.504,6.899 C8.315,7.072 8.027,7.068 7.843,6.889 L6.327,5.421 L3.370,8.592 C3.401,8.689 3.422,8.791 3.422,8.900 C3.422,8.969 3.415,9.037 3.402,9.104 C3.291,9.645 2.773,9.992 2.245,9.879 C1.716,9.766 1.377,9.236 1.488,8.695 C1.598,8.155 2.116,7.808 2.645,7.921 L5.956,4.370 C6.142,4.171 6.450,4.163 6.645,4.352 L8.189,5.847 L11.161,3.135 L10.605,2.546 C10.543,2.481 10.500,2.400 10.480,2.312 C10.419,2.043 10.583,1.774 10.846,1.712 L13.395,1.108 C13.658,1.046 13.921,1.213 13.982,1.482 C14.000,1.562 13.998,1.645 13.977,1.724 ZM9.574,1.000 L1.467,1.000 C1.197,1.000 0.978,1.224 0.978,1.500 L0.978,10.500 C0.978,10.776 1.197,11.000 1.467,11.000 L12.222,11.000 C12.492,11.000 12.711,10.776 12.711,10.500 L12.711,6.538 C12.711,6.262 12.930,6.038 13.200,6.038 C13.470,6.038 13.688,6.262 13.688,6.538 L13.688,10.500 C13.688,11.328 13.032,12.000 12.222,12.000 L1.467,12.000 C0.657,12.000 0.000,11.328 0.000,10.500 L0.000,1.500 C0.000,0.672 0.657,-0.000 1.467,-0.000 L9.574,-0.000 C9.844,-0.000 10.063,0.224 10.063,0.500 C10.063,0.776 9.844,1.000 9.574,1.000 ZM0.734,13.000 L12.955,13.000 C13.225,13.000 13.444,13.224 13.444,13.500 C13.444,13.776 13.225,14.000 12.955,14.000 L0.734,14.000 C0.464,14.000 0.245,13.776 0.245,13.500 C0.245,13.224 0.464,13.000 0.734,13.000 Z"/>
+</svg>

src/assets/icons/svgIcon/星标设备.svg

@@ -0,0 +1,7 @@
+<svg 
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="14px" height="14px">
+<path fill-rule="evenodd"  
+ d="M2.754,13.811 C2.928,13.934 3.132,13.997 3.336,13.997 C3.507,13.997 3.675,13.953 3.826,13.870 L7.003,12.106 L10.181,13.870 C10.331,13.953 10.499,13.997 10.670,13.997 C10.878,13.997 11.081,13.932 11.253,13.811 C11.569,13.586 11.730,13.201 11.667,12.816 L11.048,9.002 L13.719,6.251 C13.984,5.979 14.074,5.581 13.954,5.220 C13.833,4.859 13.522,4.595 13.148,4.537 L9.503,3.978 L7.919,0.587 C7.753,0.230 7.396,0.003 7.003,0.003 C6.612,0.003 6.254,0.231 6.087,0.587 L4.503,3.978 L0.859,4.537 C0.484,4.595 0.173,4.859 0.053,5.220 C-0.068,5.581 0.023,5.979 0.288,6.251 L2.958,9.002 L2.339,12.816 C2.276,13.201 2.438,13.586 2.754,13.811 L2.754,13.811 ZM0.852,5.548 L4.485,4.992 L5.124,4.893 L5.405,4.294 L7.003,0.875 L8.602,4.294 L8.882,4.893 L9.521,4.992 L13.154,5.548 L10.505,8.273 L10.060,8.731 L10.164,9.370 L10.783,13.178 L7.581,11.402 L7.003,11.081 L6.424,11.402 L3.222,13.178 L3.841,9.370 L3.945,8.731 L3.500,8.274 L0.852,5.548 Z"/>
+</svg>

src/assets/icons/svgIcon/电子档案.svg

@@ -0,0 +1,7 @@
+<svg 
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="14px" height="14px">
+<path fill-rule="evenodd"  
+ d="M12.630,13.999 L11.110,13.999 C10.354,13.999 9.741,13.384 9.741,12.625 L9.741,1.375 C9.743,0.616 10.354,0.000 11.110,0.000 L12.632,0.000 C13.388,0.002 13.999,0.617 14.000,1.375 L14.000,12.625 C13.997,13.384 13.386,13.999 12.630,13.999 ZM13.190,1.375 C13.190,1.065 12.940,0.816 12.632,0.814 L11.110,0.814 C10.802,0.814 10.553,1.065 10.551,1.375 L10.551,12.625 C10.551,12.935 10.802,13.184 11.110,13.186 L12.632,13.186 C12.940,13.186 13.188,12.935 13.190,12.625 L13.190,1.375 ZM11.108,4.632 L12.782,4.632 L12.782,5.599 L11.108,5.599 L11.108,4.632 ZM11.108,3.207 L12.782,3.207 L12.782,4.174 L11.108,4.174 L11.108,3.207 ZM11.108,1.781 L12.782,1.781 L12.782,2.749 L11.108,2.749 L11.108,1.781 ZM7.761,13.999 L6.239,13.999 C5.483,13.999 4.870,13.384 4.870,12.625 L4.870,1.375 C4.872,0.616 5.483,0.000 6.239,0.000 L7.761,0.000 C8.517,0.002 9.130,0.616 9.130,1.375 L9.130,12.625 C9.130,13.384 8.517,13.999 7.761,13.999 ZM8.319,1.375 C8.319,1.065 8.069,0.816 7.761,0.814 L6.239,0.814 C5.931,0.814 5.682,1.065 5.680,1.375 L5.680,12.625 C5.680,12.935 5.931,13.184 6.239,13.186 L7.761,13.186 C8.069,13.186 8.318,12.935 8.319,12.625 L8.319,1.375 ZM6.239,4.632 L7.912,4.632 L7.912,5.599 L6.239,5.599 L6.239,4.632 ZM6.239,3.207 L7.912,3.207 L7.912,4.174 L6.239,4.174 L6.239,3.207 ZM6.239,1.781 L7.912,1.781 L7.912,2.749 L6.239,2.749 L6.239,1.781 ZM2.892,13.999 L1.370,13.999 C0.614,13.999 0.001,13.384 -0.001,12.625 L-0.001,1.375 C-0.001,0.616 0.612,0.000 1.368,0.000 L2.890,0.000 C3.646,0.000 4.259,0.616 4.259,1.375 L4.259,12.625 C4.261,13.384 3.648,13.999 2.892,13.999 ZM3.450,1.375 C3.450,1.065 3.200,0.816 2.892,0.814 L1.370,0.814 C1.062,0.814 0.811,1.065 0.811,1.375 L0.811,12.625 C0.811,12.935 1.062,13.184 1.370,13.186 L2.892,13.186 C3.200,13.186 3.449,12.935 3.450,12.625 L3.450,1.375 ZM1.370,4.632 L3.043,4.632 L3.043,5.599 L1.370,5.599 L1.370,4.632 ZM1.370,3.207 L3.043,3.207 L3.043,4.174 L1.370,4.174 L1.370,3.207 ZM1.370,1.781 L3.043,1.781 L3.043,2.749 L1.370,2.749 L1.370,1.781 Z"/>
+</svg>

src/assets/icons/svgIcon/电气火灾.svg

@@ -0,0 +1,7 @@
+<svg 
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="14px" height="14px">
+<path fill-rule="evenodd"  
+ d="M12.825,11.081 L11.104,11.081 L11.104,13.559 C11.104,13.804 10.908,14.000 10.663,14.000 C10.418,14.000 10.222,13.804 10.222,13.559 L10.222,11.081 L3.771,11.081 L3.771,13.559 C3.764,13.804 3.568,14.000 3.330,14.000 C3.085,14.000 2.889,13.804 2.889,13.559 L2.889,11.081 L1.168,11.081 C0.525,11.081 -0.000,10.556 -0.000,9.912 L-0.000,1.162 C-0.000,0.525 0.525,-0.000 1.168,-0.000 L12.832,-0.000 C13.475,-0.000 14.000,0.525 14.000,1.169 L14.000,9.919 C13.993,10.563 13.468,11.081 12.825,11.081 ZM13.126,1.169 C13.126,1.008 12.993,0.875 12.832,0.875 L1.168,0.875 C1.007,0.875 0.874,1.008 0.874,1.169 L0.874,9.919 C0.874,10.080 1.007,10.213 1.168,10.213 L3.296,10.213 C3.309,10.212 3.317,10.199 3.330,10.199 C3.344,10.199 3.351,10.212 3.364,10.213 L10.629,10.213 C10.642,10.212 10.649,10.199 10.663,10.199 C10.676,10.199 10.684,10.212 10.697,10.213 L12.832,10.213 C12.993,10.213 13.126,10.080 13.126,9.919 L13.126,1.169 ZM6.402,8.848 C6.318,8.932 6.206,8.974 6.094,8.974 C5.982,8.974 5.870,8.932 5.786,8.848 C5.618,8.680 5.618,8.400 5.786,8.232 L8.032,5.985 L4.904,5.985 C4.730,5.985 4.569,5.880 4.499,5.712 C4.429,5.551 4.471,5.362 4.597,5.236 L7.591,2.240 C7.759,2.072 8.039,2.072 8.207,2.240 C8.375,2.408 8.375,2.688 8.207,2.856 L5.961,5.103 L9.088,5.103 C9.263,5.103 9.424,5.208 9.494,5.376 C9.564,5.537 9.522,5.726 9.396,5.852 L6.402,8.848 Z"/>
+</svg>

src/assets/icons/svgIcon/电费分析.svg

@@ -0,0 +1,7 @@
+<svg 
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="14px" height="14px">
+<path fill-rule="evenodd"  
+ d="M12.477,14.000 L1.523,14.000 C0.683,14.000 0.002,13.370 0.002,12.594 L0.002,1.406 C0.002,0.630 0.683,-0.000 1.523,-0.000 L12.477,-0.000 C13.317,-0.000 13.998,0.630 13.998,1.406 L13.998,12.594 C13.998,13.370 13.317,14.000 12.477,14.000 ZM12.984,1.406 C12.984,1.147 12.757,0.937 12.477,0.937 L1.523,0.937 C1.243,0.937 1.016,1.147 1.016,1.406 L1.016,12.594 C1.016,12.853 1.243,13.063 1.523,13.063 L12.477,13.063 C12.757,13.063 12.984,12.853 12.984,12.594 L12.984,1.406 ZM11.226,11.461 L2.774,11.461 C2.494,11.461 2.267,11.251 2.267,10.992 C2.267,10.733 2.494,10.523 2.774,10.523 L11.226,10.523 C11.506,10.523 11.733,10.733 11.733,10.992 C11.733,11.251 11.506,11.461 11.226,11.461 ZM11.226,8.805 L2.774,8.805 C2.494,8.805 2.267,8.595 2.267,8.336 C2.267,8.077 2.494,7.867 2.774,7.867 L11.226,7.867 C11.506,7.867 11.733,8.077 11.733,8.336 C11.733,8.595 11.506,8.805 11.226,8.805 ZM11.125,6.148 L8.471,6.148 C8.191,6.148 7.964,5.939 7.964,5.680 C7.964,5.421 8.191,5.211 8.471,5.211 L11.125,5.211 C11.405,5.211 11.632,5.421 11.632,5.680 C11.632,5.939 11.405,6.148 11.125,6.148 ZM11.125,3.492 L8.471,3.492 C8.191,3.492 7.964,3.282 7.964,3.023 C7.964,2.765 8.191,2.555 8.471,2.555 L11.125,2.555 C11.405,2.555 11.632,2.765 11.632,3.023 C11.632,3.282 11.405,3.492 11.125,3.492 ZM4.347,6.773 C4.005,7.011 3.516,6.773 3.535,6.377 L3.585,5.346 L2.724,4.576 C2.500,4.376 2.522,4.038 2.771,3.865 L4.952,2.344 C5.290,2.109 5.774,2.338 5.764,2.730 L5.737,3.808 L6.571,4.538 C6.799,4.737 6.778,5.078 6.528,5.252 L4.347,6.773 ZM4.876,4.346 C4.772,4.255 4.715,4.128 4.718,3.995 L4.726,3.676 L3.855,4.283 L4.455,4.819 C4.559,4.913 4.615,5.043 4.609,5.177 L4.597,5.424 L5.438,4.838 L4.876,4.346 Z"/>
+</svg>

src/assets/icons/svgIcon/站点分布.svg

@@ -0,0 +1,7 @@
+<svg 
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="14px" height="14px">
+<path fill-rule="evenodd"  
+ d="M7.373,11.511 L7.002,11.924 L6.630,11.510 C5.910,10.699 5.231,9.853 4.595,8.975 C4.250,8.502 3.925,8.015 3.619,7.515 C2.903,6.330 2.501,5.334 2.501,4.544 C2.464,2.071 4.448,0.036 6.934,-0.001 C9.420,-0.038 11.465,1.937 11.502,4.410 C11.503,4.455 11.503,4.499 11.502,4.544 C11.502,5.334 11.100,6.329 10.383,7.515 C10.078,8.015 9.753,8.502 9.407,8.975 C8.771,9.853 8.092,10.700 7.373,11.511 ZM7.241,10.133 C7.712,9.569 8.165,8.989 8.596,8.395 C8.924,7.943 9.235,7.479 9.527,7.001 C10.157,5.960 10.502,5.103 10.502,4.544 C10.502,2.620 8.935,1.060 7.001,1.060 C5.068,1.060 3.500,2.620 3.500,4.544 C3.500,5.103 3.847,5.960 4.477,7.002 C4.767,7.478 5.077,7.943 5.408,8.395 C5.912,9.090 6.443,9.765 7.001,10.418 L7.241,10.132 L7.241,10.133 ZM12.392,8.358 L12.002,8.358 C11.726,8.358 11.502,8.135 11.502,7.860 C11.502,7.585 11.726,7.362 12.002,7.362 L12.836,7.362 C13.090,7.362 13.304,7.552 13.333,7.803 L14.000,13.442 C14.032,13.715 13.835,13.962 13.561,13.994 C13.541,13.996 13.522,13.998 13.502,13.998 L0.500,13.998 C0.224,13.998 -0.000,13.775 -0.001,13.500 C-0.001,13.481 0.001,13.461 0.003,13.442 L0.670,7.803 C0.700,7.552 0.913,7.364 1.167,7.363 L2.000,7.363 C2.277,7.363 2.501,7.586 2.501,7.861 C2.501,8.136 2.277,8.359 2.000,8.359 L1.611,8.359 L1.063,13.003 L12.941,13.003 L12.391,8.358 L12.392,8.358 ZM7.001,6.203 C5.988,6.203 5.167,5.386 5.167,4.378 C5.167,3.370 5.988,2.553 7.001,2.553 C8.014,2.553 8.835,3.370 8.835,4.378 C8.835,5.386 8.014,6.203 7.001,6.203 ZM7.001,5.207 C7.461,5.207 7.835,4.836 7.835,4.378 C7.835,3.920 7.462,3.548 7.001,3.548 C7.001,3.548 7.001,3.548 7.001,3.548 C6.540,3.548 6.167,3.920 6.168,4.378 C6.168,4.836 6.541,5.207 7.001,5.207 Z"/>
+</svg>

src/assets/icons/svgIcon/负载分析.svg

@@ -0,0 +1,7 @@
+<svg 
+ xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink"
+ width="14px" height="14px">
+<path fill-rule="evenodd"  
+ d="M12.809,14.001 L1.194,14.001 C0.538,14.001 0.005,13.466 0.005,12.807 L0.005,1.192 C0.005,0.533 0.538,-0.003 1.194,-0.003 L12.811,-0.003 C13.467,-0.003 14.000,0.533 14.000,1.192 L14.000,12.803 C13.998,13.464 13.467,14.001 12.809,14.001 ZM12.982,1.192 C12.982,1.096 12.906,1.020 12.811,1.020 L1.194,1.020 L1.194,1.022 C1.098,1.022 1.023,1.097 1.023,1.193 L1.023,12.805 C1.023,12.901 1.098,12.976 1.194,12.976 L12.811,12.976 C12.906,12.976 12.982,12.901 12.982,12.805 L12.982,1.192 ZM9.074,9.382 C8.874,9.583 8.551,9.583 8.355,9.382 L6.012,7.028 L3.486,9.566 C3.385,9.663 3.257,9.715 3.126,9.715 C2.994,9.715 2.866,9.667 2.765,9.566 C2.565,9.365 2.565,9.040 2.765,8.843 L5.651,5.943 C5.851,5.743 6.174,5.743 6.371,5.943 L8.714,8.297 L10.517,6.486 C10.717,6.285 11.040,6.285 11.236,6.486 C11.436,6.687 11.436,7.011 11.236,7.209 L9.074,9.382 Z"/>
+</svg>

src/views/electricFire/components/chart.vue

@@ -0,0 +1,98 @@
+<template>
+  <div v-loading="loading" style="width:100%">
+    <div class="chart" ref="lineChartBanlance" />
+  </div>
+</template>
+<script setup>
+/*----------------------------------组件引入-----------------------------------*/
+/*----------------------------------接口引入-----------------------------------*/
+import {  defineComponent, onMounted, ref, watch } from 'vue'
+import * as echarts from 'echarts'
+/*----------------------------------store引入-----------------------------------*/
+/*----------------------------------公共方法引入-----------------------------------*/
+const props = defineProps({
+  data: {
+    type: Object,
+    default: null,
+  },
+});
+/*----------------------------------常量声明-----------------------------------*/
+/*----------------------------------变量声明-----------------------------------*/
+let lineChartBanlance = ref(null)
+// 读取数据 func
+const loading = ref(true)
+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'
+      }
+    }
+  },
+  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: 'line',
+    stack: 'Total',
+    barWidth: 25,
+    data: props.data.data[i],
+  })
+}
+option.series = series
+/*----------------------------------方法声明-----------------------------------*/
+function initChart(){
+  let myChart = echarts.init(lineChartBanlance.value)
+  // 绘制图表
+  myChart.setOption(option)
+  loading.value = false
+  window.addEventListener('resize', () => {
+    myChart.resize()
+  })
+}
+onMounted(() => {
+  setTimeout(() => {
+    initChart()
+  })
+})
+</script>
+<style lang="scss" scoped>
+.chart{
+  width:100% !important;
+  height:306px;
+}
+</style>

src/views/electricFire/components/dialog copy.vue

@@ -0,0 +1,47 @@
+<template>
+  <el-dialog :title="title" v-model="visible" width="640px" @close="closeDialog()">
+    
+  </el-dialog>
+</template>
+
+<script setup>
+/*----------------------------------组件引入-----------------------------------*/
+/*----------------------------------接口引入-----------------------------------*/
+import { ref, onMounted, watch, getCurrentInstance, reactive, toRefs } from 'vue'
+/*----------------------------------store引入----------------------------------*/
+/*----------------------------------公共方法引入--------------------------------*/
+/*----------------------------------常量声明-----------------------------------*/
+/*----------------------------------变量声明-----------------------------------*/
+const props = defineProps({
+  data: {
+    type: Object,
+    default: null,
+  },
+});
+const emit = defineEmits(['handleSelect']);
+
+/*----------------------------------方法声明-----------------------------------*/
+const title = ref(null) // 弹窗标题
+const visible = ref(false) // 弹窗显示状态
+
+// 弹窗打开
+function openDialog(event) {
+  title.value = event.title
+  visible.value = true
+}
+
+// 关闭弹框
+function closeDialog() {
+  visible.value = false
+}
+
+
+// 暴露变量
+defineExpose({
+  openDialog,
+});
+</script>
+ 
+<style scoped lang="scss">
+
+</style>

src/views/electricFire/components/dialog.vue

@@ -0,0 +1,150 @@
+<template>
+  <el-dialog :title="title" v-model="visible" width="850px" @close="closeDialog()">
+    <el-row>
+      <el-col :span="24">
+        <el-date-picker
+          v-model="day"
+          type="day"
+          :disabled-date="disabledDate"
+          :clearable="false"
+          class="date-picker"
+        />
+        <div class="modeSwitching">
+          <div @click="switchMode(1)" :class="{ active: mode == 1 }">
+            <span>平铺</span>
+          </div>
+          <div @click="switchMode(2)" :class="{ active: mode == 2 }">
+            <span>表格</span>
+          </div>
+        </div>
+      </el-col>
+      <el-col :span="24">
+        <div class="content" v-if="mode == 1">
+          <chart :data="chartData"/>
+          <chart :data="chartData2"/>
+        </div>
+        <div class="content" v-if="mode == 2">
+          <tableC :data="tableData"  :type="1"/>
+        </div>
+      </el-col>
+    </el-row>
+  </el-dialog>
+</template>
+
+<script setup>
+/*----------------------------------依赖引入-----------------------------------*/
+import { ref, onMounted, watch, getCurrentInstance, reactive, toRefs } from 'vue'
+/*----------------------------------接口引入-----------------------------------*/
+/*----------------------------------组件引入-----------------------------------*/
+import chart from './chart'
+import tableC from './table'
+/*----------------------------------store引入-----------------------------------*/
+/*----------------------------------公共方法引入-----------------------------------*/
+import dayjs from 'dayjs'
+const emit = defineEmits(['handleSelect']);
+/*----------------------------------常量声明-----------------------------------*/
+/*----------------------------------变量声明-----------------------------------*/
+const props = defineProps({
+  data: {
+    type: Object,
+    default: null,
+  },
+});
+const title = ref(null) // 弹窗标题
+const visible = ref(false) // 弹窗显示状态
+const day = ref(dayjs().format('YYYY-MM-DD'))
+const mode = ref(1) // 1图表 2表格
+const chartData = 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:["A相", "B相", "C相"],
+  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:"",
+  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:["A相", "B相", "C相"],
+  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:"",
+  title:"电流A"
+})
+const tableData = ref([]) //表格数据
+/*----------------------------------方法声明-----------------------------------*/
+function disabledDate(time) {
+  // 禁止选择今天之后的日子
+  return time.getTime() > Date.now();
+}
+// 弹窗打开
+function openDialog(event) {
+  title.value = event.title
+  visible.value = true
+}
+
+// 关闭弹框
+function closeDialog() {
+  visible.value = false
+}
+
+function switchMode(val){
+  mode.value = val
+}
+
+// 暴露变量
+defineExpose({
+  openDialog,
+});
+</script>
+ 
+<style scoped lang="scss">
+.modeSwitching{
+  height: 30px;
+  display: inline-block;
+  cursor: pointer;
+  >div{
+    width:50px;
+    height:100%;
+    line-height: 26px;
+    display: inline-block;
+    background: #fff;
+    text-align: center;
+    color:#333;
+    span{
+      vertical-align: middle;
+      font-size: 14px;
+    }
+  }
+  .active{
+    background: #6c7fff;
+    color:#fff;
+  }
+}
+.content{
+  margin-top:20px;
+}
+</style>
+<style>
+.el-dialog .el-dialog__header{
+  background: #fff !important;
+}
+.el-dialog__body{
+  background: #F2F3F8 !important;
+}
+.date-picker{
+  width:120px !important;
+  margin-right:20px;
+  display: inline-block;
+}
+
+</style>

src/views/electricFire/components/list.vue

@@ -0,0 +1,171 @@
+<template>
+    <div class="listWrap">
+      <div class="listItem" v-for="(item, index) in deviceData" :key="index">
+        <div class="header">
+          <div class="name">
+            {{ item.name }}
+          </div>
+          <div class="data" @click="() => {emit('change', { type:'list',name: item.name, id: item.devicedId } )}">
+            <el-icon :size="14"> 
+              <Operation />        
+            </el-icon>
+            <span>历史数据</span>
+          </div>
+        </div>
+        <div class="content">
+          <div class="content_wrap">
+            <div class="content_top" >
+              <p>剩余电流</p>
+              <img :src="ok" alt="">
+            </div>
+            <div class="content_middle">
+              <div class="item" v-if="item.temperature" :style="{width:item.electricCurrent ? 'calc(50% - 5px)' : '100%'}">
+                <p>线缆温度</p>
+                <div class="list">
+                  <div class="data" v-for="(item2, index2) in item.temperature" :key="index2">
+                    <span class="name">{{ item2.name }}</span>
+                    <div>
+                      <span class="value">{{ item2.value }}{{ item2.unit }}</span>
+                      <img :src="ok" alt="">
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="item" v-if="item.electricCurrent" :style="{width:item.temperature ? 'calc(50% - 5px)' : '100%'}">
+                <p>电流</p>
+                <div class="list">
+                  <div class="data" v-for="(item2, index2) in item.electricCurrent" :key="index2">
+                    <span class="name">{{ item2.name }}</span>
+                    <div>
+                      <span class="value">{{ item2.value }}{{ item2.unit }}</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="content_bottom">
+              安装位置：{{ item.installPosition }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+</template>
+<script setup>
+/*----------------------------------组件引入-----------------------------------*/
+import { Operation } from '@element-plus/icons-vue'
+import ok from '@/assets/images/value-normal.png'
+/*----------------------------------接口引入-----------------------------------*/
+import {  defineComponent, onMounted, ref, watch } from 'vue'
+/*----------------------------------store引入-----------------------------------*/
+/*----------------------------------公共方法引入-----------------------------------*/
+const emit = defineEmits(['dialogChange']);
+/*----------------------------------常量声明-----------------------------------*/
+/*----------------------------------变量声明-----------------------------------*/
+const props = defineProps({
+  data: {
+    type: Object,
+    default: null,
+  },
+});
+const deviceData = ref(props.data)
+/*----------------------------------方法声明-----------------------------------*/
+</script>
+<style lang="scss" scoped>
+.listWrap{
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  .listItem{
+    border: 1px solid #00a854;
+    width: 267px;
+    background-color: #fff;
+    float: left;
+    margin-bottom: 20px;
+    margin-right: 8px;
+    .header{
+      height: 32px;
+      line-height: 32px;
+      color: #fff;
+      padding: 0 12px;
+      background: linear-gradient(180deg, rgba(0, 168, 84, 0.7) 0, #00a854 100%);
+      .name{
+        display: inline-block;
+      }
+      .data{
+        float: right;
+        font-size: 12px;
+        color: #fff;
+        margin-top:-2px;
+        cursor: pointer;
+        i{
+          margin-right:6px;
+          vertical-align: middle;
+        }
+        span{
+          vertical-align: middle;
+          text-decoration: underline;
+        }
+      }
+    }
+    .content{
+      padding:10px;
+      color:#333;
+      .content_wrap{
+        .content_top{
+          padding: 0 6px 0 10px;
+          background-color: rgba(245,245,245,0.4);
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          height: 20px;
+          font-size: 12px;
+          p{
+            margin-top:10px;
+          }
+        }
+        .content_middle{
+          .item{
+            width:calc(50% - 5px);
+            display: inline-block;
+            color:#333;
+            font-size: 12px;
+            margin-top:10px;
+            .list{
+              background: rgba(245,245,245,0.4);
+              margin-top:-10px;
+              .data{
+                vertical-align: middle;
+                padding:4px 6px;
+                cursor: pointer;
+                >span{
+                  width:30%;
+                  display: inline-block;
+                }
+                >div{
+                  width:70%;
+                  text-align: right;
+                  display: inline-block;
+                  img{
+                    margin:-2px 0 0 4px;
+                  }
+                  
+                }
+                
+              }
+            }
+          }
+          >div:nth-child(2){
+            margin-left:10px;
+          }
+        }
+        .content_bottom{
+          font-size: 12px;
+          margin-top:10px;
+        }
+      }
+      
+    }
+  }
+}
+</style>

src/views/electricFire/components/table.vue

@@ -0,0 +1,160 @@
+<template>
+  <div>
+    <el-table :data="tableData" border stripe :header-cell-style="headClass">
+      <el-table-column v-if="!type"
+        fixed
+        prop="platformAreaName"
+        label="设备名称"
+        width=""
+      ></el-table-column>
+      <el-table-column v-if="!type"
+        prop="platformAreaCode"
+        label="安装位置"
+        width=""
+      ></el-table-column>
+      <el-table-column v-if="!type"
+        prop="platformAreaAddress"
+        label="剩余电流"
+        width=""
+      ></el-table-column>
+      <el-table-column v-if="type"
+        prop="platformAreaAddress"
+        label="时间"
+        width=""
+      ></el-table-column>
+
+      <el-table-column label="线缆温度(℃)" align="center">
+        <el-table-column prop="siteCount" label="A相" width="">
+          <template #default="scope">
+            <span
+              @click="goSiteList(scope.row)"
+              v-if="scope.row.siteCount"
+              style="cursor: pointer; color: #0284e8"
+            >
+              {{ scope.row.siteCount }}
+            </span>
+            <span v-else>{{ scope.row.siteCount }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="siteCount" label="B相" width="">
+          <template #default="scope">
+            <span
+              @click="goSiteList(scope.row)"
+              v-if="scope.row.siteCount"
+              style="cursor: pointer; color: #0284e8"
+            >
+              {{ scope.row.siteCount }}
+            </span>
+            <span v-else>{{ scope.row.siteCount }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="siteCount" label="C相" width="">
+          <template #default="scope">
+            <span
+              @click="goSiteList(scope.row)"
+              v-if="scope.row.siteCount"
+              style="cursor: pointer; color: #0284e8"
+            >
+              {{ scope.row.siteCount }}
+            </span>
+            <span v-else>{{ scope.row.siteCount }}</span>
+          </template>
+        </el-table-column>
+      </el-table-column>
+      <el-table-column label="电流(A)" align="center" width="">
+        <el-table-column prop="siteCount" label="A相" width="">
+          <template #default="scope">
+            <span
+              @click="goSiteList(scope.row)"
+              v-if="scope.row.siteCount"
+              style="cursor: pointer; color: #0284e8"
+            >
+              {{ scope.row.siteCount }}
+            </span>
+            <span v-else>{{ scope.row.siteCount }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="siteCount" label="B相" width="">
+          <template #default="scope">
+            <span
+              @click="goSiteList(scope.row)"
+              v-if="scope.row.siteCount"
+              style="cursor: pointer; color: #0284e8"
+            >
+              {{ scope.row.siteCount }}
+            </span>
+            <span v-else>{{ scope.row.siteCount }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="siteCount" label="C相" width="">
+          <template #default="scope">
+            <span
+              @click="goSiteList(scope.row)"
+              v-if="scope.row.siteCount"
+              style="cursor: pointer; color: #0284e8"
+            >
+              {{ scope.row.siteCount }}
+            </span>
+            <span v-else>{{ scope.row.siteCount }}</span>
+          </template>
+        </el-table-column>
+      </el-table-column>
+      <el-table-column  label="历史数据" width="250" v-if="!type">
+        <template #default="scope">
+          <el-button
+            type="text"
+            size="small"
+            @click="() => {emit('change', { type:'table',name: '设备1', id: 2 } )}"
+          >
+            查看
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    <div class="paginationBlock">
+      <el-pagination
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="currentPage"
+        :page-sizes="[15, 20, 25, 30]"
+        :page-size="pageSize"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="total"
+      ></el-pagination>
+    </div>
+  </div>
+</template>
+<script setup>
+/*----------------------------------组件引入-----------------------------------*/
+/*----------------------------------接口引入-----------------------------------*/
+import { defineComponent, onMounted, ref, watch } from 'vue'
+/*----------------------------------store引入-----------------------------------*/
+/*----------------------------------公共方法引入-----------------------------------*/
+const emit = defineEmits(['dialogChange']);
+/*----------------------------------变量声明-----------------------------------*/
+const props = defineProps({
+  data: {
+    type: Object,
+    default: null,
+  },
+  type: {
+    type: String,
+    default: null,
+  },
+})
+const total = ref(100)
+const pageSize = ref(15)
+const currentPage = ref(1)
+const tableData = ref(props.data)
+const type = ref(props.type)
+/*----------------------------------方法声明-----------------------------------*/
+function handleSizeChange(){
+
+}
+</script>
+<style lang="scss" scoped>
+.paginationBlock{
+  display: flex; 
+  justify-content: flex-end;
+}
+</style>

src/views/electricFire/dialogComponent.vue

@@ -1,248 +0,0 @@
-<template>
-  <div class="parentBlock">
-    <el-dialog
-      :title="dialogTitle"
-      v-model="dialogVisible"
-      width="640px"
-      @close="closeDialog()"
-      @open="open"
-    >
-      <el-form
-        ref="formInfo"
-        :model="form"
-        class="demo-form-inline"
-        label-width="100px"
-        :rules="rules"
-      >
-        <el-form-item label="台区名称：" prop="platformAreaName">
-          <el-input v-model="form.platformAreaName"></el-input>
-        </el-form-item>
-        <el-form-item label="台区编号：" prop="platformAreaCode">
-          <el-input v-model="form.platformAreaCode"></el-input>
-        </el-form-item>
-        <el-form-item label="台区地址：" prop="platformAreaAddress">
-          <el-input v-model="form.platformAreaAddress"></el-input>
-        </el-form-item>
-        <!-- <el-form-item label="站点列表:" prop="siteList">
-          <el-select
-            v-model="form.siteList"
-            multiple
-            filterable
-            collapse-tags
-            placeholder="请选择"
-          >
-            <el-option
-              v-for="item in options"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-            ></el-option>
-          </el-select>
-        </el-form-item> -->
-
-        <el-form-item
-          label="已勾选："
-          prop="siteCount"
-          v-if="dialogTitle == '编辑'"
-        >
-          <el-input
-            v-model="form.siteCount"
-            style="width: 200px"
-            disabled
-          ></el-input>
-          个站点
-        </el-form-item>
-        <el-form-item
-          label="共挂载："
-          prop="deviceCount"
-          v-if="dialogTitle == '编辑'"
-        >
-          <el-input
-            v-model="form.deviceCount"
-            style="width: 200px"
-            disabled
-          ></el-input>
-          个设备
-        </el-form-item>
-        <br />
-        <br />
-        <br />
-        <div style="text-align: right">
-          <el-button @click="closeDialog()">取消</el-button>
-          <el-button type="primary" @click="submitForm()">保存</el-button>
-        </div>
-      </el-form>
-    </el-dialog>
-  </div>
-</template>
-
-<script>
-import { defineComponent, ref, watchEffect } from 'vue'
-import * as api from '@/api/stationManage/index.js'
-import { ElMessage } from 'element-plus'
-
-export default defineComponent({
-  name: 'DialogComponent',
-  emits: ['closeDialog'],
-  props: {
-    flag: Boolean,
-    dialogTitle: String,
-    itemInfo: Object,
-  },
-  setup(props, context) {
-    context
-
-    const dialogVisible = ref(false)
-    const formInfo = ref(null)
-
-    const form = ref([])
-
-    // open(): Dialog弹窗打开之前做的事
-    const open = () => {
-      console.log(form.value)
-      form.value = props.itemInfo.value
-       console.log(form.value)
-    }
-
-    const options = [
-      {
-        value: '选项1',
-        label: '站点一',
-      },
-      {
-        value: '选项2',
-        label: '站点二',
-      },
-      {
-        value: '选项3',
-        label: '站点三',
-      },
-      {
-        value: '选项4',
-        label: '站点四',
-      },
-      {
-        value: '选项5',
-        label: '站点五',
-      },
-    ]
-
-    // 关闭弹框
-    const closeDialog = () => {
-      resetForm()
-      context.emit('closeDialog', false)
-      dialogVisible.value = false
-    }
-    function resetForm() {
-      formInfo.value.resetFields()
-    }
-
-    watchEffect((fn, options) => {
-      fn, options
-      dialogVisible.value = props.flag
-    })
-
-    const roleValid = (rule, value, callback) => {
-      rule
-      if (value.length === 0) {
-        callback(new Error('角色不能为空'))
-      } else {
-        callback()
-      }
-    }
-
-    // 保存-修改操作
-    const submitForm = () => {
-      formInfo.value.validate((valid) => {
-        if (valid) {
-          if (props.dialogTitle === '新增') {
-            console.log(form.value)
-            api.platformAreaAdd(form.value).then((requset) => {
-              if (requset.status === 'SUCCESS') {
-                ElMessage.success({
-                  message: '新增成功',
-                  type: 'success',
-                })
-                closeDialog()
-              } else {
-                ElMessage.error(requset.msg)
-              }
-            })
-          } else {
-            api.platformAreaUpdate(form.value).then((requset) => {
-              if (requset.status === 'SUCCESS') {
-                ElMessage.success({
-                  message: '修改成功',
-                  type: 'success',
-                })
-                closeDialog()
-              } else {
-                ElMessage.error(requset.msg)
-              }
-            })
-          }
-        } else {
-          console.log('error submit!!')
-          return false
-        }
-      })
-    }
-
-    return {
-      closeDialog,
-      dialogVisible,
-      options,
-      roleValid,
-      formInfo,
-      form,
-      open,
-      submitForm,
-      rules: {
-        platformAreaName: [
-          // required  是否为必填项， trigger:表单验证的触发时机，失去焦点进行验证
-          { required: true, message: '请输入台区名称', trigger: 'blur' },
-          {
-            max: 15,
-            message: '台区名称最多输入15个字符',
-            trigger: 'blur',
-          },
-        ],
-        platformAreaCode: [
-          { required: true, message: '请输入台区编号', trigger: 'blur' },
-          {
-            max: 15,
-            message: '台区编号最多输入15个字符',
-            trigger: 'blur',
-          },
-        ],
-        platformAreaAddress: [
-          { required: true, message: '请输入台区地址', trigger: 'blur' },
-          {
-            max: 15,
-            message: '台区地址最多输入15个字符',
-            trigger: 'blur',
-          },
-        ],
-        // siteList: [
-        //   { required: true, message: '请选择站点列表', trigger: 'change' },
-        // ],
-        // siteCount: [
-        //   { required: true, message: '请输入已选站点个数', trigger: 'blur' },
-        //   { trigger: 'blur' },
-        // ],
-        // deviceCount: [
-        //   { required: true, message: '请输入挂载设备个数', trigger: 'blur' },
-        //   { trigger: 'blur' },
-        // ],
-      },
-    }
-  },
-})
-</script>
- 
-<style scoped lang="scss">
-.el-input,
-.el-select {
-  width: 240px;
-}
-</style>

src/views/electricFire/index.vue

@@ -3,388 +3,111 @@
     <div class="top">
       <div class="modeSwitching">
         <div @click="switchMode(1)" :class="{ active: mode == 1 }">
-          <i class="el-icon-menu" ></i>
+          <el-icon :size="16"> 
+            <Menu />        
+          </el-icon>
           <span>平铺</span>
         </div>
         <div @click="switchMode(2)" :class="{ active: mode == 2 }">
-          <i class="el-icon-place"></i>
+          <el-icon :size="16"> 
+            <Document />        
+          </el-icon>
           <span>表格</span>
         </div>
       </div>
       <div class="time">
-        数据刷新时间：2025-07-08 11:00:00
+        数据刷新时间：{{ refresh }}
       </div>
       <div class="statistics">
-        <div>
-          <img src="http://yun1.ewoogi.com:15001/img/fire-monitor/device.png" alt="">
-          <span>总设备数：13</span>
-        </div>
-        <div>
-          <img src="http://yun1.ewoogi.com:15001/img/fire-monitor/device.png" alt="">
-          <span>告警设备数：0</span>
+        <div v-for="(item, index) in equipmentStatistics" :key="index">
+          <img :src="item.icon" alt="">
+          <span>{{ item.name }}：{{ item.num }}</span>
         </div>
       </div>
     </div>
     <div class="middle">
       <div class="square" v-if="mode == 1">
-        <div class="listWrap">
-          <div class="listItem">
-            <div class="header">
-              <div class="name">
-                设备名称
-              </div>
-              <div class="data">
-                <i class="el-icon-menu" ></i>
-                <span>历史数据</span>
-              </div>
-            </div>
-            <div class="content">
-              <div class="content_wrap">
-                <div class="content_top">
-                  <p>剩余电流</p>
-                  <img src="http://yun1.ewoogi.com:15001/img/fire-monitor/value-normal.png" alt="">
-                </div>
-                <div class="content_middle">
-                  <div class="item">
-                    <p>线缆温度</p>
-                    <div class="list">
-                      <div class="data">
-                        <span class="name">A项</span>
-                        <div>
-                          <span class="value">31.3℃</span>
-                          <img src="http://yun1.ewoogi.com:15001/img/fire-monitor/value-normal.png" alt="">
-                        </div>
-                      </div>
-                      <div class="data">
-                        <span class="name">A项</span>
-                        <div>
-                          <span class="value">31.3℃</span>
-                          <img src="http://yun1.ewoogi.com:15001/img/fire-monitor/value-normal.png" alt="">
-                        </div>
-                      </div>
-                      <div class="data">
-                        <span class="name">A项</span>
-                        <div>
-                          <span class="value">31.3℃</span>
-                          <img src="http://yun1.ewoogi.com:15001/img/fire-monitor/value-normal.png" alt="">
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                  <div class="item">
-                    <p>电流</p>
-                    <div class="list">
-                      <div class="data">
-                        <span class="name">A项</span>
-                        <div>
-                          <span class="value">31.3℃</span>
-                        </div>
-                      </div>
-                      <div class="data">
-                        <span class="name">A项</span>
-                        <div>
-                          <span class="value">31.3℃</span>
-                        </div>
-                      </div>
-                      <div class="data">
-                        <span class="name">A项</span>
-                        <div>
-                          <span class="value">31.3℃</span>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div class="content_bottom">
-                  安装位置
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="listItem">
-            <div class="header">
-              <div class="name">
-                设备名称
-              </div>
-              <div class="data">
-                <i class="el-icon-menu" ></i>
-                <span>历史数据</span>
-              </div>
-            </div>
-            <div class="content">
-              <div class="content_wrap">
-                <div class="content_top">
-                  <p>剩余电流</p>
-                  <img src="http://yun1.ewoogi.com:15001/img/fire-monitor/value-normal.png" alt="">
-                </div>
-                <div class="content_middle">
-                  <div class="item">
-                    <p>线缆温度</p>
-                    <div class="list">
-                      <div class="data">
-                        <span class="name">A项</span>
-                        <div>
-                          <span class="value">31.3℃</span>
-                          <img src="http://yun1.ewoogi.com:15001/img/fire-monitor/value-normal.png" alt="">
-                        </div>
-                      </div>
-                      <div class="data">
-                        <span class="name">A项</span>
-                        <div>
-                          <span class="value">31.3℃</span>
-                          <img src="http://yun1.ewoogi.com:15001/img/fire-monitor/value-normal.png" alt="">
-                        </div>
-                      </div>
-                      <div class="data">
-                        <span class="name">A项</span>
-                        <div>
-                          <span class="value">31.3℃</span>
-                          <img src="http://yun1.ewoogi.com:15001/img/fire-monitor/value-normal.png" alt="">
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                  <div class="item">
-                    <p>电流</p>
-                    <div class="list">
-                      <div class="data">
-                        <span class="name">A项</span>
-                        <div>
-                          <span class="value">31.3℃</span>
-                        </div>
-                      </div>
-                      <div class="data">
-                        <span class="name">A项</span>
-                        <div>
-                          <span class="value">31.3℃</span>
-                        </div>
-                      </div>
-                      <div class="data">
-                        <span class="name">A项</span>
-                        <div>
-                          <span class="value">31.3℃</span>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div class="content_bottom">
-                  安装位置
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class="listItem">
-            <div class="header">
-              <div class="name">
-                设备名称
-              </div>
-              <div class="data">
-                <i class="el-icon-menu" ></i>
-                <span>历史数据</span>
-              </div>
-            </div>
-            <div class="content">
-              <div class="content_wrap">
-                <div class="content_top">
-                  <p>剩余电流</p>
-                  <img src="http://yun1.ewoogi.com:15001/img/fire-monitor/value-normal.png" alt="">
-                </div>
-                <div class="content_middle">
-                  <div class="item">
-                    <p>线缆温度</p>
-                    <div class="list">
-                      <div class="data">
-                        <span class="name">A项</span>
-                        <div>
-                          <span class="value">31.3℃</span>
-                          <img src="http://yun1.ewoogi.com:15001/img/fire-monitor/value-normal.png" alt="">
-                        </div>
-                      </div>
-                      <div class="data">
-                        <span class="name">A项</span>
-                        <div>
-                          <span class="value">31.3℃</span>
-                          <img src="http://yun1.ewoogi.com:15001/img/fire-monitor/value-normal.png" alt="">
-                        </div>
-                      </div>
-                      <div class="data">
-                        <span class="name">A项</span>
-                        <div>
-                          <span class="value">31.3℃</span>
-                          <img src="http://yun1.ewoogi.com:15001/img/fire-monitor/value-normal.png" alt="">
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                  <div class="item">
-                    <p>电流</p>
-                    <div class="list">
-                      <div class="data">
-                        <span class="name">A项</span>
-                        <div>
-                          <span class="value">31.3℃</span>
-                        </div>
-                      </div>
-                      <div class="data">
-                        <span class="name">A项</span>
-                        <div>
-                          <span class="value">31.3℃</span>
-                        </div>
-                      </div>
-                      <div class="data">
-                        <span class="name">A项</span>
-                        <div>
-                          <span class="value">31.3℃</span>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div class="content_bottom">
-                  安装位置
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
+        <list :data="deviceData" @change="dialogChange" />
       </div>
       <div class="table" v-if="mode == 2">
-        <el-table :data="tableData" border stripe :header-cell-style="headClass">
-          <el-table-column
-            fixed
-            prop="platformAreaName"
-            label="设备名称"
-            width=""
-          ></el-table-column>
-          <el-table-column
-            prop="platformAreaCode"
-            label="安装位置"
-            width=""
-          ></el-table-column>
-          <el-table-column
-            prop="platformAreaAddress"
-            label="剩余电流"
-            width=""
-          ></el-table-column>
-          <el-table-column  label="线缆温度(℃)" align="center">
-            <el-table-column prop="siteCount" label="A相" width="">
-              <template #default="scope">
-                <span
-                  @click="goSiteList(scope.row)"
-                  v-if="scope.row.siteCount"
-                  style="cursor: pointer; color: #0284e8"
-                >
-                  {{ scope.row.siteCount }}
-                </span>
-                <span v-else>{{ scope.row.siteCount }}</span>
-              </template>
-            </el-table-column>
-            <el-table-column prop="siteCount" label="B相" width="">
-              <template #default="scope">
-                <span
-                  @click="goSiteList(scope.row)"
-                  v-if="scope.row.siteCount"
-                  style="cursor: pointer; color: #0284e8"
-                >
-                  {{ scope.row.siteCount }}
-                </span>
-                <span v-else>{{ scope.row.siteCount }}</span>
-              </template>
-            </el-table-column>
-            <el-table-column prop="siteCount" label="C相" width="">
-              <template #default="scope">
-                <span
-                  @click="goSiteList(scope.row)"
-                  v-if="scope.row.siteCount"
-                  style="cursor: pointer; color: #0284e8"
-                >
-                  {{ scope.row.siteCount }}
-                </span>
-                <span v-else>{{ scope.row.siteCount }}</span>
-              </template>
-            </el-table-column>
-          </el-table-column>
-          <el-table-column  label="电流(A)" align="center" width="">
-            <el-table-column prop="siteCount" label="A相" width="">
-              <template #default="scope">
-                <span
-                  @click="goSiteList(scope.row)"
-                  v-if="scope.row.siteCount"
-                  style="cursor: pointer; color: #0284e8"
-                >
-                  {{ scope.row.siteCount }}
-                </span>
-                <span v-else>{{ scope.row.siteCount }}</span>
-              </template>
-            </el-table-column>
-            <el-table-column prop="siteCount" label="B相" width="">
-              <template #default="scope">
-                <span
-                  @click="goSiteList(scope.row)"
-                  v-if="scope.row.siteCount"
-                  style="cursor: pointer; color: #0284e8"
-                >
-                  {{ scope.row.siteCount }}
-                </span>
-                <span v-else>{{ scope.row.siteCount }}</span>
-              </template>
-            </el-table-column>
-            <el-table-column prop="siteCount" label="C相" width="">
-              <template #default="scope">
-                <span
-                  @click="goSiteList(scope.row)"
-                  v-if="scope.row.siteCount"
-                  style="cursor: pointer; color: #0284e8"
-                >
-                  {{ scope.row.siteCount }}
-                </span>
-                <span v-else>{{ scope.row.siteCount }}</span>
-              </template>
-            </el-table-column>
-          </el-table-column>
-          <el-table-column fixed="right" label="历史数据" width="250">
-            <template #default="scope">
-              <el-button
-                type="text"
-                size="small"
-                @click.prevent="editRow(scope.row)"
-                :disabled="store.state.authorities.indexOf('修改')==-1"
-              >
-                编辑
-              </el-button>
-              <el-popconfirm
-                confirm-button-text="是"
-                cancel-button-text="否"
-                icon="el-icon-info"
-                icon-color="red"
-                title="确定删除?"
-                @confirm="handleDelete(scope.row)"
-                @cancel="cancelEvent"
-              >
-                <template #reference>
-                  <el-button type="text" size="small" class="delete-text" :disabled="store.state.authorities.indexOf('删除')==-1">
-                    
-                    删除
-                  </el-button>
-                </template>
-              </el-popconfirm>
-            </template>
-          </el-table-column>
-        </el-table>
+        <tableC :data="tableData" @change="dialogChange"/>
       </div>
     </div>
+    <dialogC ref="dialogCRef" @change="dialogChange"/>
   </div>
 </template>
 
 <script setup>
-import { ref } from 'vue'
+/*----------------------------------组件引入-----------------------------------*/
+import list from "./components/list"
+import tableC from "./components/table"
+import dialogC from './components/dialog'
+/*----------------------------------接口引入-----------------------------------*/
+import { ref, getCurrentInstance } from 'vue'
+/*----------------------------------store引入-----------------------------------*/
+/*----------------------------------公共方法引入---------------------------------*/
+/*----------------------------------常量声明-----------------------------------*/
+import { Menu, Document } from '@element-plus/icons-vue'
+import device from '@/assets/images/device.png'
+import deviceWarning from '@/assets/images/deviceWarning.png'
+/*----------------------------------变量声明-----------------------------------*/
+const { proxy } = getCurrentInstance();
 const mode = ref(1) // 1平铺 2表格
-
-
+const refresh = ref(new Date().toLocaleString()) // 数据刷新时间
+const equipmentStatistics = ref([
+  { name:"总设备数", num: 13, icon: device },
+  { name:"告警设备数", num: 5, icon: deviceWarning },
+]) //设备统计
+const deviceData = ref([
+  { 
+    name:"一楼电表", devicedId:"1", installPosition:"华徐公路永天科技",
+    // temperature:[
+    //   { name:"A相", value:31.3, unit:"℃" },
+    //   { name:"B相", value:31.3, unit:"℃" },
+    //   { name:"C相", value:31.3, unit:"℃" },
+    // ],
+    electricCurrent:[
+      { name:"A相", value:12.147, unit:"A" },
+      { name:"B相", value:12.147, unit:"A" },
+      { name:"C相", value:12.147, unit:"A" },
+    ]
+  },
+  
+  { 
+    name:"二楼电表", devicedId:"1", installPosition:"华徐公路永天科技2",
+    temperature:[
+      { name:"A相", value:31.3, unit:"℃" },
+      { name:"B相", value:31.3, unit:"℃" },
+      { name:"C相", value:31.3, unit:"℃" },
+    ],
+    electricCurrent:[
+      { name:"A相", value:12.147, unit:"A" },
+      { name:"B相", value:12.147, unit:"A" },
+      { name:"C相", value:12.147, unit:"A" },
+    ]
+  }
+])//设备信息
+const tableData = ref([
+  { siteCount: 1}
+]) //表格数据
+/*----------------------------------方法声明-----------------------------------*/
+/**
+ * 
+ * @param val 切换模式
+ */
 function switchMode(val){
   mode.value = val
 }
+/**
+ * 弹框改变
+ * @param val 
+ */
+function dialogChange(val){
+  proxy.$refs['dialogCRef'].openDialog({
+    title: val.name,
+    id:val.id
+  })
+}
 
 </script>
 <style lang="scss" scoped>
@@ -402,14 +125,13 @@ function switchMode(val){
     >div{
       width:70px;
       height:100%;
-      line-height: 28px;
+      line-height: 26px;
       margin-right:10px;
       display: inline-block;
       background: #fff;
       text-align: center;
       color:#333;
       i{
-        font-size:16px;
         vertical-align: middle;
         margin-right:4px;
       }
@@ -425,11 +147,10 @@ function switchMode(val){
   }
   .time{
     line-height: 28px;
-    margin-left:14px;
+    margin-left:10px;
   }
   .statistics{
-    line-height: 28px;
-    height:30px;
+    line-height: 24px;
     >div{
       margin-left:20px;
       display: inline-block;
@@ -438,8 +159,8 @@ function switchMode(val){
         margin:0 4px;
         vertical-align: middle;
       }
-      img:nth{
-        margin-left:10px !important;
+      img:nth-child(1){
+        margin-left:0px !important;
       }
       span{
         vertical-align: middle;
@@ -450,94 +171,6 @@ function switchMode(val){
 .middle{
   width:100%;
   margin-top:20px;
-  .listWrap{
-    display: flex;
-    flex-direction: row;
-    .listItem{
-      border: 1px solid #00a854;
-      width: 280px;
-      background-color: #fff;
-      float: left;
-      margin-bottom: 20px;
-      margin-right: 8px;
-      .header{
-        height: 32px;
-        line-height: 32px;
-        color: #fff;
-        padding: 0 12px;
-        background: linear-gradient(180deg, rgba(0, 168, 84, 0.7) 0, #00a854 100%);
-        .name{
-          display: inline-block;
-        }
-        .data{
-          float: right;
-          font-size: 12px;
-          color: #fff;
-          text-decoration: underline;
-          i{
-            margin-right:6px;
-          }
-        }
-      }
-      .content{
-        padding:10px;
-        color:#333;
-        .content_wrap{
-          .content_top{
-            padding: 0 6px 0 10px;
-            background-color: rgba(245,245,245,0.4);
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            height: 20px;
-            font-size: 12px;
-            p{
-              margin-top:10px;
-            }
-          }
-          .content_middle{
-            .item{
-              width:calc(50% - 5px);
-              display: inline-block;
-              color:#333;
-              font-size: 12px;
-              margin-top:10px;
-              .list{
-                background: rgba(245,245,245,0.4);
-                margin-top:-10px;
-                .data{
-                  vertical-align: middle;
-                  padding:4px 6px;
-                  >span{
-                    width:30%;
-                    display: inline-block;
-                  }
-                  >div{
-                    width:70%;
-                    text-align: right;
-                    display: inline-block;
-                    img{
-                      margin:-2px 0 0 4px;
-                    }
-                    
-                  }
-                  
-                }
-              }
-            }
-            >div:nth-child(2){
-              margin-left:10px;
-            }
-          }
-          .content_bottom{
-            font-size: 12px;
-            margin-top:10px;
-          }
-        }
-        
-      }
-    }
-  }
 }
 </style>
 

src/views/electricFire/siteList.vue

@@ -1,155 +0,0 @@
-<template>
-  <div class="app-container">
-    <!-- 返回start -->
-    <div class="siteTitle">
-      <el-button class="goBack" @click="goBack">返回</el-button>
-      台区1-站点列表
-    </div>
-    <!-- 返回end -->
-
-    <!-- 表格start -->
-    <el-table
-      :data="tableData"
-      border
-      stripe
-      :header-cell-style="headClass"
-      :cell-style="cellStyle"
-    >
-      <el-table-column
-        fixed
-        prop="siteName"
-        label="站点名称"
-        width=""
-      ></el-table-column>
-      <!-- <el-table-column prop="stationStatus" label="状态" width="">
-        <template #default="scope">
-          <el-avatar
-            class="status"
-            :class="[scope.row.deviceStatusr == '离线' ? 'offline' : 'online']"
-          ></el-avatar>
-        </template>
-      </el-table-column> -->
-      <el-table-column
-        prop="siteAddress"
-        label="站点位置"
-        width=""
-      ></el-table-column>
-      <el-table-column
-        prop="userName"
-        label="联系人"
-        width=""
-      >
-        <template #default="scope">
-          <span>
-            {{
-              scope.row.userName
-                ? scope.row.userName
-                : '--'
-            }}
-          </span>
-        </template>
-      </el-table-column>
-      <el-table-column
-        prop="phone"
-        label="手机号码"
-        width=""
-      ></el-table-column>
-      <el-table-column
-        prop="installedCapacity"
-        label="装机容量"
-        width=""
-      ></el-table-column>
-      <el-table-column
-        prop="rheologicalChange"
-        label="流变变比"
-        width=""
-      ></el-table-column>
-      <el-table-column
-        prop="routeName"
-        label="线路名称"
-        width=""
-      ></el-table-column>
-      <!-- <el-table-column fixed="right" label="操作" width="250">
-        <template #default="scope">
-          <el-button @click="handleClick(scope.row)" type="text" size="small">
-            查看
-          </el-button>
-        </template>
-      </el-table-column> -->
-    </el-table>
-    <!-- 表格end -->
-  </div>
-</template>
-
-<script>
-import { defineComponent, ref, onMounted } from 'vue'
-import * as api from '@/api/stationManage/index.js'
-import { ElMessage } from 'element-plus'
-
-export default defineComponent({
-  name: 'SiteList',
-  props: ['pageShow', 'goSiteListParam'],
-
-  setup(props, context) {
-    const showDialog = ref(false)
-    const input = ref('请输入台区名称')
-    const tableData = ref([])
-    const goBack = () => {
-      context.emit('func')
-    }
-    // 表头样式设置
-    const headClass = () => {
-      return 'background:#FAFAFA;'
-    }
-
-    //自定义列样式
-    const cellStyle = ({ row, column, rowIndex, columnIndex }) => {
-      row, column, rowIndex,columnIndex
-      // if (columnIndex === 1) {
-      //   return `color:#04F21C`
-      // } else {
-      //   return ''
-      // }
-    }
-
-    //查看
-    // const handleClick = (row) => {
-    //   alert('查看对应站点（页面跳转）')
-    //   console.log(row)
-    // }
-
-    //站点设备列表
-    function siteDeviceList() {
-      api
-        .siteDeviceList({ stationAreaId: props.goSiteListParam })
-        .then((requset) => {
-          if (requset.status === 'SUCCESS') {
-            // console.log(requset.data)
-            tableData.value = requset.data
-          } else {
-            ElMessage.error(requset.msg)
-          }
-        })
-    }
-
-    onMounted(() => {
-      siteDeviceList()
-    })
-
-    return {
-      tableData,
-      input,
-      showDialog,
-
-      headClass,
-      cellStyle,
-      goBack,
-      // handleClick,
-    }
-  },
-})
-</script>
-
-
-<style lang='scss' scoped>
-</style>

src/views/electricityFeeAnalysis/components/chart.vue

@@ -14,7 +14,6 @@ const props = defineProps({
 });
 
     let lineChartBanlance = ref(null)
-    const electricChart=ref({})
     // 读取数据 func
     const loading = ref(true)
     function echarts2(){
@@ -29,6 +28,7 @@ const props = defineProps({
     
     var option 
     option = {
+      color:props.data.color,
       title: {
         text: props.data.title,
         left: 'center',
@@ -51,11 +51,6 @@ const props = defineProps({
         data: props.data.type,
         bottom:"0"
       },
-      toolbox: {
-        feature: {
-          saveAsImage: {}
-        }
-      },
       grid: {
         top:'14%',
         left: '3%',
@@ -66,7 +61,6 @@ const props = defineProps({
       xAxis: [
         {
           type: 'category',
-          // boundaryGap: false,
           data: props.data.xAxis,
         }
       ],
@@ -92,7 +86,6 @@ const props = defineProps({
         type: 'bar',
         stack: 'Total',
         barWidth: 25,
-        // areaStyle: {},
         data: props.data.data[i],
       })
     }

src/views/electricityFeeAnalysis/components/tableD.vue

@@ -1,27 +1,29 @@
 <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 :data="tableData" border stripe :header-cell-style="headClass"   height="calc(50vh - 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="尖电量占比" align="center" />
+      <el-table-column prop="a" label="峰电量占比" align="center" />
+      <el-table-column prop="a" label="平电量占比" align="center" />
+      <el-table-column prop="a" label="谷电量占比" align="center" />
+      <el-table-column prop="a" label="电费（元）" 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  label="基本电费" align="center">
+      <el-table-column prop="a" label="最大需量（kW）" align="center" />
+      <el-table-column prop="a" label="申报需量（kW））" align="center" />
+      <el-table-column prop="a" label="电费（元）" 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  label="力调电费" align="center">
+      <el-table-column prop="a" label="功率因数" align="center" />
+      <el-table-column prop="a" label="标准值" align="center" />
+      <el-table-column prop="a" label="电费（元）" align="center" />
     </el-table-column>
-    <el-table-column prop="a" label="谷电量占比" align="center" />
+    <el-table-column prop="a" label="总电费（元）" align="center" />
+    <el-table-column prop="a" label="平均电价（元/kWh）" align="center" />
+    <el-table-column prop="a" label="可省电费（元）" align="center" />
+    <el-table-column prop="a" label="操作" align="center" />
   </el-table>
 </template>
 <script setup>

src/views/electricityFeeAnalysis/index.vue

@@ -1,55 +1,44 @@
 <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 class="app-container electricityFeeAnalysis">
+      <div class="top">
+        <div class="search">
+          <div :class="['switch',dateType == '1' ? 'active': '']" @click="dateSwitch(1)">年度</div>
+          <div :class="['switch',dateType == '2' ? 'active': '']" @click="dateSwitch(2)">任意时段</div>
+          <div class="date">
+            <el-date-picker
+              v-model="year"
+              type="year"
+              v-if="dateType == 1"
+              :picker-options="pickerOptions"
+              :disabled-date="disabledDate"
+              style="width:100px;margin-top:-4px;display: inline-block;"
+            />
+            <el-date-picker
+              v-model="day"
+              type="datetimerange"
+              v-if="dateType == 2"
+              range-separator="至"
+              start-placeholder="开始时间"
+              end-placeholder="结束时间"
+              style="width:350px;margin-top:-4px;display: inline-block;"
+            />
+          </div>
+          <div style="display: inline-block;">
+            <el-button type="primary" @click="search" style="margin-top:-4px;">查询</el-button>
+            <el-button type="warning" @click="export" style="margin-top:-4px;">导出</el-button>
           </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 class="content">
+        <div class="chart">
+          <div class="top">
+            <img src="@/assets/images/logo1.png" alt="">
+            <span>每日总电费趋势</span>
           </div>
+          <chart :data="dfqs"/>
+        </div>
+        <div class="table">
+          <tableD :data="tableData"/>
         </div>
       </div>
   </div>
@@ -63,73 +52,41 @@ 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）"],
+const dateType = ref(1) //日期类型 1:年度 2:任意时段
+const year = ref(new Date().getFullYear().toString()) //年份
+const day = ref() //日期
+const pickerOptions = {
+  disabledDate(time) {
+    return time.getFullYear() > new Date().getFullYear();  // 禁止选择当前年份之后的年份
+  }
+}
+const dfqs = ref({
+  xAxis:["2025-1", "2025-2", "2025-3", "2025-4", "2025-5", "2025-6", "2025-7", "2025-8", "2025-9", "2025-10", "2025-11", "2025-12"],
+  type:["电度电费","基本电费","力调电费"],
   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:"每日电费趋势"
+  unit:"元",
+  color:["#41BED8","#FCD011","#9283EA"]
 })
 
+const tableData = ref([
+  { a: 1000 },
+  { a: 1000 },
+]) //列表数据
+function dateSwitch(val){
+  dateType.value = val
+}
+
+
+
+
+
+
+
 function init(){
 
 }
@@ -185,79 +142,46 @@ function siteClick(val){
 
 </script>
 <style lang="scss" scoped>
-.fsyd{
-  height:100%;
-  background: #F2F3F8;
-    >div{
-      padding:10px;
+.electricityFeeAnalysis{
+  background: none !important;
+  padding:0 !important;
+}
+.search{
+  .switch{
+    text-align: center;
+    margin-right:16px;
+    padding:6px 8px;
+    background: #fff;
+    color:rgba(0,0,0,0.65);
+    border: 1px solid #d9d9d9;
+    display: inline-block;
+    cursor: pointer;
+  }
+  .active{
+    background: #6c7fff;
+    color:#fff;
+  }
+  .date{
+    display: inline-block;
+    margin-right:16px;
+    >span{
+      vertical-align: middle;
       display: inline-block;
-      vertical-align: top;
+      margin-top:-5px;
     }
-    .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;
-      }
+    >div:first-child{
+      width:60px;
     }
-    >.right{
-      width:calc(80% - 10px);
-      .top{
-        margin-top:-10px;
-        font-size: 12px;
-      }
-      .comtent{
-        height:calc(100% - 50px);
-        background: #fff;
-      }
+    >div:last-child{
+      width:calc(100% - 70px);
     }
-    .content{
-     margin-top:20px;
-     background: #fff;
-     border-radius: 4px;
-     .echartWrap{
-      .pie{
-        width:50%;
-        display: inline-block;
-      }
-      .chart{
-        width:100%;
-      }
-     }
-     .top{
+  }
+}
+.content{
+  margin-top:16px;
+  background: #fff;
+  .chart{
+    .top{
         background: #fafafa;
         padding:8px;
         img{
@@ -271,39 +195,10 @@ function siteClick(val){
           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;
+  .table{
+    padding:10px;
   }
 }
 </style>

src/views/electronicArchives/components/tableD.vue

@@ -0,0 +1,54 @@
+<template>
+  <el-table :data="tableData" border stripe :header-cell-style="headClass"    style="overflow-y: auto;">
+    <el-table-column prop="a" label="文件名称" align="center" />
+    <el-table-column prop="a" label="上传时间" align="center" />
+    <el-table-column prop="a" label="上传人" align="center" />
+    <el-table-column prop="url" label="文件链接" align="center" >
+      <template #default="scope">
+        <el-button type="text">{{ scope.row.url }}</el-button>
+      </template>
+    </el-table-column>
+    <el-table-column prop="type" label="操作" align="center" >
+      <template #default="scope">
+        <el-image
+              v-if="
+                scope.row.type == 'jpg' ||
+                scope.row.type == 'png' ||
+                scope.row.type == 'jpeg' ||
+                scope.row.type == 'gif' ||
+                scope.row.type == 'JPEG' ||
+                scope.row.type == 'svg' ||
+                scope.row.type == 'webp' ||
+                scope.row.type == 'bmp' ||
+                scope.row.type == 'ico'
+              "
+              style="width: 40px; margin: 10px auto"
+              :src="scope.row.url"
+              :preview-src-list="[scope.row.url]"
+              :preview-teleported="true"
+              fit="contain"
+            />
+            <video
+              v-else-if="scope.row.type == 'mp4' || scope.row.type == 'ogg' || scope.row.type == 'webm' || scope.row.type == 'mov' || scope.row.type == 'wmv' || scope.row.type == 'avi'"
+              :src="scope.row.url"
+              style="width: 60px; margin: 10px auto"
+              controls
+            />
+            <a :href="scope.row.url" target="_blank" style=" color: rgb(1, 143, 251)" v-else>下载</a>
+      </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/electronicArchives/index.vue

@@ -0,0 +1,256 @@
+<template>
+  <div class="app-container fsyd">
+    <div class="item">
+      <div class="left">
+        <div class="top">
+          <el-button type="primary" icon="plus" size="small" @click="add" style="margin:20px 20px 0;">分组</el-button>
+          <el-row class="mytree">
+            <el-tree
+              :data="treeData"        
+              :default-expand-all="true" 
+              node-key="label"         
+              :indent="16"     
+              :props="defaultProps"   
+              empty-text="暂无分组数据"
+              @node-click="handleNodeClick"
+            >
+              <template #default="{ node }" >
+                <el-icon :size="18"> 
+                  <Folder />        
+                </el-icon>
+                <span style="margin-left:8px;">{{ node.label }}</span> 
+                <div class="button" style="margin-left:20px;">
+                  <el-icon size="16" color="#409eff"  @click="edit(node)" style="margin:0 10px" v-if="node?.level == 1">
+                    <Edit />
+                  </el-icon>
+                  <el-icon size="16" color="#c45656" @click="remove(node)" style="margin:0 10px;" v-if="node?.level == 1">
+                    <Delete />
+                  </el-icon>
+                </div>
+              </template>
+            </el-tree>
+          </el-row>
+        </div>
+      </div>
+      <div class="right">
+        <p>{{ siteName }}</p>
+        <el-button type="primary" icon="upload" size="small">上传</el-button>
+        <div class="content">
+          <tableD :data="tableData"  style="padding:10px;"/>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+
+import { ref,onMounted } from "vue";
+import { Folder } from '@element-plus/icons-vue'
+import tableD from "./components/tableD";
+import { ElMessageBox, ElMessage } from 'element-plus'
+onMounted(() => {
+  init()
+})
+const treeData = ref([
+  {
+    label: '上海永天科技股份有限公司',
+    id:1,
+    level:1,
+    children: [
+      { label: '图纸', id:"1-1" }, 
+      { label: '文档',id:"1-2" },
+      { label: '设计稿',id:"1-3" }
+    ]
+  },
+])
+const siteName = ref(treeData.value[0].label)
+const tableData = ref([
+  { a: 1000,url:"https://img1.baidu.com/it/u=2172818577,3783888802&fm=253&app=138&f=JPEG?w=800&h=1422",type:"jpg" },
+  { a: 1000,url: "http://file.usky.cn/statics/202503/20250320131547A0149.pdf",type:"pdf" },
+  { a: 1000,url: "http://file.usky.cn/statics/202408/20240830162008A883.mp4",type:"mp4" },
+]) //列表数据
+
+function init(){
+
+}
+
+function add(){
+  var maxId  = 1
+  if(treeData.value.length){
+    maxId = treeData.value.reduce((max, item) => Math.max(max, item.id), Number.MIN_SAFE_INTEGER) + 1
+  }
+  treeData.value.push({
+    label: `分组${maxId}`,
+    id:maxId,
+    level:1,
+    children: [
+      { label: '图纸', id: `${maxId}-1` }, 
+      { label: '文档',id: `${maxId}-2` },
+      { label: '设计稿',id: `${maxId}-3` }
+    ]
+  })
+}
+//站点点击事件
+function handleNodeClick(data){
+    for(let i=0;i<treeData.value.length;i++){
+      if(data.id.toString().indexOf("-") > -1){
+        if(treeData.value[i].id == data.id.split("-")[0]){
+          siteName.value = treeData.value[i].label
+          break
+        }
+      }else{
+        if(treeData.value[i].id == data.id){
+          siteName.value = treeData.value[i].label
+          break
+        }
+      }
+    }
+}
+ 
+// 站点分组删除
+function remove(data) {
+  ElMessageBox.alert(`确定删除名为“${data.data.label}”的分组吗？`, '删除', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+  }).then(({ value }) => {
+    for(let i=0;i<treeData.value.length;i++){
+      if(JSON.stringify(data.data) == JSON.stringify(treeData.value[i])){
+        treeData.value.splice(i, 1)
+      }
+    }
+  })
+}
+ 
+// 站点分组编辑
+function edit(data) {
+  ElMessageBox.prompt('请输入分组名称', '编辑', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+  }).then(({ value }) => {
+    if (value != null) {
+      data.data.label = value
+    }else{
+      ElMessage.error("分组名称不能为空")
+    }
+  })
+}
+
+/**
+ * 全选事件
+ */
+function siteAllChange(){
+  if(selectAll.value[0]){
+    siteSelectArray.value = [1,2,3,4]
+  }else{
+    siteSelectArray.value = []
+  }
+}
+</script>
+<style lang="scss" scoped>
+.fsyd{
+  height:100%;
+  background: #F2F3F8;
+  padding:0 !important;
+  .item{
+    .left{
+      width:25%;
+      height:calc(100vh - 120px);
+      margin-right:10px;
+      font-size: 14px;
+      background: #fff;
+      border-radius: 4px;
+      display: inline-block;
+      vertical-align: top;
+      .mytree{
+        .el-tree{
+          height:80vh !important;
+          overflow: auto;
+        }
+      }
+    }
+    >.right{
+      width:calc(75% - 10px);
+      display: inline-block;
+      vertical-align: top;
+      >p{
+        font-size: 16px;
+      }
+      >button{
+        margin:-10px 0 10px 0;
+      }
+      .content{
+        height:calc(100vh - 178px) !important;
+        background: #fff;
+        border-radius: 4px;
+      }
+    }
+  }
+}
+
+
+
+// 下拉树虚线
+::v-deep .mytree {
+  .el-tree > .el-tree-node:after {
+    border-top: none;
+  }
+  .el-tree-node {
+    position: relative;
+    padding-left: 16px;
+  }
+  //节点有间隙，隐藏掉展开按钮就好了,如果觉得空隙没事可以删掉
+  .el-tree-node__expand-icon.is-leaf{
+    display: none;
+  }
+  .el-tree-node__children {
+    padding-left: 16px;
+  }
+  .el-tree-node :last-child:before {
+    height: 38px;
+  }
+  .el-tree > .el-tree-node:before {
+    border-left: none;
+  }
+  .el-tree > .el-tree-node:after {
+    border-top: none;
+  }
+  .el-tree-node:before {
+    content: "";
+    left: -4px;
+    position: absolute;
+    right: auto;
+    border-width: 1px;
+  }
+  .el-tree-node:after {
+    content: "";
+    left: -4px;
+    position: absolute;
+    right: auto;
+    border-width: 1px;
+  }
+  .el-tree-node:before {
+    border-left: 1px dashed #ccc;
+    bottom: 0px;
+    height: 130%;
+    top: -26px;
+    width: 1px;
+  }
+  .el-tree-node:after {
+    border-top: 1px dashed #ccc;
+    height: 30px;
+    top: 12px;
+    width: 24px;
+  }
+}
+
+</style>
+<style>
+.mytree .el-tree-node {
+  margin-top:10px;
+}
+.mytree .el-tree{
+  width:100%;
+}
+
+</style>

src/views/index/components/tableD.vue

@@ -5,7 +5,7 @@
               {{ 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="name" label="事件" width="150"></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">

src/views/siteDistribution/alarmTotal.vue

@@ -1,242 +0,0 @@
-<template>
-  <div class="app-container">
-    <!-- 返回start -->
-    <div class="siteTitle">
-      <el-button class="goBack" @click="goBack">返回</el-button>
-      站点【{{alarmGradeList.siteName}}】{{
-        alarmGradeList.type == 0
-          ? '总数'
-          : alarmGradeList.type == 1
-          ? '一级告警'
-          : alarmGradeList.type == 2
-          ? '二级告警'
-          : alarmGradeList.type == 3
-          ? '其它'
-          : ''
-      }}
-    </div>
-    <!-- 返回end -->
-
-    <!-- 表格start -->
-    <el-table
-      :data="tableData"
-      border
-      stripe
-      :header-cell-style="headClass"
-      :cell-style="cellStyle"
-    >
-      <el-table-column
-        fixed
-        prop="soeTime"
-        label="发生时间"
-        width=""
-      ></el-table-column>
-      <el-table-column
-        prop="measDesc"
-        label="测点描述"
-        width=""
-      ></el-table-column>
-      <el-table-column
-        prop="alarmName"
-        label="告警名称"
-        width=""
-      ></el-table-column>
-      <el-table-column
-        prop="alarmType"
-        label="告警类型"
-        width=""
-      ></el-table-column>
-      <el-table-column prop="check" label="详情" width="">
-        <template #default="scope">
-          <span v-if="scope.row.handlingStatus!=1&&store.state.authorities.indexOf('修改')==-1" style="cursor:default;color:#ccc">查看</span>
-                    <span @click="checkItem_addItem(scope.row)" v-else>查看</span>
-
-        </template>
-      </el-table-column>
-      <el-table-column prop="eddl" label="状态" width="">
-        <template #default="scope">
-          <span
-            :style="{
-              color:
-                scope.row.handlingStatus == 1
-                  ? '#8DCF6E'
-                  : scope.row.handlingStatus == 2
-                  ? '#FF747B'
-                  : '#5c88fa',
-            }"
-          >
-            {{
-              scope.row.handlingStatus == 0
-                ? '未处理'
-                : scope.row.handlingStatus == 1
-                ? '已处理'
-                : scope.row.handlingStatus == 2
-                ? '待确认'
-                : scope.row.handlingStatus == 3
-                ? '自动恢复'
-                : '过期失效'
-            }}
-          </span>
-        </template>
-      </el-table-column>
-    </el-table>
-    <!-- 表格end -->
-
-    <!-- 分页start -->
-    <div class="paginationBlock">
-      <el-pagination
-        @size-change="handleSizeChange"
-        @current-change="handleCurrentChange"
-        :current-page="currentPage"
-        :page-sizes="[15, 20, 25, 30]"
-        :page-size="pageSize"
-        layout="total, sizes, prev, pager, next, jumper"
-        :total="total"
-      ></el-pagination>
-    </div>
-    <!-- 分页end -->
-
-    <!--弹框组件开始-----------------------start-->
-    <dialog-component
-      :show_Dialog="showDialog"
-      :dialog-title="dialogTitle"
-      :item-info="tableItem"
-      @closeDialog="closeDialog"
-      @listSelect="listSelect"
-    ></dialog-component>
-    <!--弹框组件开始-----------------------end-->
-  </div>
-</template>
-
-<script>
-import dialogComponent from './dialogComponent'
-import { useStore } from 'vuex'
-import { defineComponent, onMounted, ref } from 'vue'
-import * as api from '@/api/alarmManage/index'
-import { ElMessage } from 'element-plus'
-
-export default defineComponent({
-  name: 'AlarmTotal',
-  props: {
-    pageShow: Boolean,
-    alarmGradeList: Object,
-  }, 
-  components: { dialogComponent },
-  setup(props, { emit }) {
-    const store = useStore()
-
-    const total = ref(0)
-    const pageSize = ref(15)
-    const currentPage = ref(1)
-    const tableData = ref([])
-    const showDialog = ref(false)
-
-    const dialogTitle = ref('')
-    const tableItem = ref([])
-
-    //查询
-    function listSelect() {
-      api
-        .alarmGradeList({
-          // siteId: store.state.siteId,
-          siteId:props.alarmGradeList.siteId,
-          startTime: props.alarmGradeList.startTime,
-          endTime: props.alarmGradeList.endTime,
-          size: pageSize.value,
-          current: currentPage.value,
-          type: props.alarmGradeList.type,
-        })
-        .then((requset) => {
-          if (requset.status === 'SUCCESS') {
-            total.value = requset.data.total
-            tableData.value = requset.data.records
-          } else {
-            ElMessage.error(requset.msg)
-          }
-        })
-    }
-
-    // 查看操作
-    const checkItem_addItem = (row) => {
-      //如果没有修改权限,并且不是已处理
-      if(row.handlingStatus!=1&&store.state.authorities.indexOf('修改')==-1){
-       return
-      }
-
-      tableItem.value = row
-      dialogTitle.value = '告警详情'
-      showDialog.value = true
-    }
-
-    //查看///添加操作
-    const handleClick = (row) => {
-      alert('查看对应站点（页面跳转）')
-      console.log(row)
-    }
-
-    onMounted(() => {
-      listSelect()
-    })
-
-    //关闭弹窗
-    const closeDialog = (flag) => {
-      showDialog.value = flag
-    }
-    
-    //返回
-    const goBack = () => {
-      emit('func')
-    }
-    //条数
-    const handleSizeChange = (val) => {
-      pageSize.value = val
-      listSelect()
-    }
-    //页数
-    const handleCurrentChange = (val) => {
-      currentPage.value = val
-      listSelect()
-    }
-    //自定义列样式
-    const cellStyle = ({ row, column, rowIndex, columnIndex }) => {
-      row, column, rowIndex
-      // console.log(row, column, rowIndex)
-      if (columnIndex === 4) {
-        return `color:#1187FF;cursor:pointer`
-      } else {
-        return ''
-      }
-    }
-    // 表头样式设置
-    const headClass = () => {
-      return 'background:#FAFAFA;'
-    }
-    return {
-      handleSizeChange,
-      handleCurrentChange,
-      goBack,
-      checkItem_addItem,
-      headClass,
-      cellStyle,
-      handleClick,
-      listSelect,
-      closeDialog,
-      store,
-
-      showDialog,
-      input: '请输入发生时间',
-
-      total,
-      pageSize,
-      currentPage,
-      tableData,
-
-      dialogTitle,
-      tableItem,
-    }
-  },
-})
-</script>
-
-<style lang='scss' scoped>
-</style>

src/views/siteDistribution/components/table.vue

@@ -0,0 +1,98 @@
+<template>
+  <div>
+    <el-table :data="tableData" border stripe :header-cell-style="headClass" height="71vh" style="overflow-y: auto;">
+      <el-table-column
+        fixed
+        prop="platformAreaName"
+        label="站点名称"
+        width=""
+      ></el-table-column>
+      <el-table-column
+        fixed
+        prop="platformAreaName"
+        label="分组名称"
+        width=""
+      ></el-table-column>
+      <el-table-column
+        fixed
+        prop="platformAreaName"
+        label="实时负荷"
+        width=""
+      ></el-table-column>
+      <el-table-column
+        fixed
+        prop="platformAreaName"
+        label="站点状态"
+        width=""
+      ></el-table-column>
+      <el-table-column
+        fixed
+        prop="platformAreaName"
+        label="设备总数"
+        width=""
+      ></el-table-column>
+      <el-table-column
+        fixed
+        prop="platformAreaName"
+        label="告警数"
+        width=""
+      ></el-table-column>
+      <el-table-column
+        fixed
+        prop="platformAreaName"
+        label="电话"
+        width=""
+      ></el-table-column>
+      <el-table-column
+        prop="platformAreaName"
+        label="地址"
+        width=""
+      ></el-table-column>
+    </el-table>
+    <div class="paginationBlock">
+      <el-pagination
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="currentPage"
+        :page-sizes="[15, 20, 25, 30]"
+        :page-size="pageSize"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="total"
+      ></el-pagination>
+    </div>
+  </div>
+</template>
+<script setup>
+/*----------------------------------组件引入-----------------------------------*/
+/*----------------------------------接口引入-----------------------------------*/
+import { defineComponent, onMounted, ref, watch } from 'vue'
+/*----------------------------------store引入-----------------------------------*/
+/*----------------------------------公共方法引入-----------------------------------*/
+const emit = defineEmits(['dialogChange']);
+/*----------------------------------变量声明-----------------------------------*/
+const props = defineProps({
+  data: {
+    type: Object,
+    default: null,
+  },
+  type: {
+    type: String,
+    default: null,
+  },
+})
+const total = ref(100)
+const pageSize = ref(15)
+const currentPage = ref(1)
+const tableData = ref(props.data)
+const type = ref(props.type)
+/*----------------------------------方法声明-----------------------------------*/
+function handleSizeChange(){
+
+}
+</script>
+<style lang="scss" scoped>
+.paginationBlock{
+  display: flex; 
+  justify-content: flex-end;
+}
+</style>

src/views/siteDistribution/dialogComponent.vue

@@ -1,337 +0,0 @@
-<template>
-  <el-dialog
-    :title="dialogTitle"
-    v-model="showDialog"
-    width="640px"
-    @close="closeDialog"
-    @open="open"
-  >
-    <el-form
-      ref="formInfo"
-      :model="form"
-      class="demo-form-inline alarmStatusDialog"
-      label-width="100px"
-    >
-      <div class="topInfo underline">
-        <el-form-item label="告警时间：" prop="soeTime">
-          {{ itemInfo.soeTime }}
-        </el-form-item>
-        <!-- <el-form-item label="告警历时：" prop="stationCode">3分钟</el-form-item> -->
-        <!-- <el-form-item label="关联告警：" prop="stationAddress">
-          2021-09-14 14:54:59
-        </el-form-item> -->
-        <!-- <div class="deviceTit"></div> -->
-        <el-button type="success" class="lubo" style="margin-bottom: 15px">
-          {{ itemInfo.measDesc }}
-        </el-button>
-        <div
-          class="handleStatus"
-          :style="{
-            color:
-              itemInfo.handlingStatus == 1
-                ? '#8DCF6E'
-                : itemInfo.handlingStatus == 2
-                ? '#FF747B'
-                : '#5c88fa',
-          }"
-        >
-          {{
-            itemInfo.handlingStatus == 0
-              ? '未处理'
-              : itemInfo.handlingStatus == 1
-              ? '已处理'
-              : itemInfo.handlingStatus == 2
-              ? '待确认'
-              : itemInfo.handlingStatus == 3
-              ? '自动恢复'
-              : '过期失效'
-          }}
-        </div>
-      </div>
-
-      <div class="basicTit">基本信息</div>
-
-      <el-form-item label="站点名称：" prop="pointNum">
-        {{ form.siteName }}
-      </el-form-item>
-      <el-form-item label="台区展示：" prop="deviceNum">
-        {{ form.stationArea }}
-      </el-form-item>
-      <el-form-item label="线路：" prop="deviceNum">
-        {{ form.route }}
-      </el-form-item>
-      <el-form-item label="告警信息：" prop="deviceNum">
-        {{ itemInfo.measDesc.split(itemInfo.measDesc.slice(-2))[0] }}
-      </el-form-item>
-      <el-form-item label="告警状态：" prop="deviceNum">
-        {{ itemInfo.measDesc.slice(-2) }}
-      </el-form-item>
-      <el-form-item label="采集终端：" prop="deviceNum">
-        {{ form.deviceCode }}
-      </el-form-item>
-      <el-form-item label="站点地址：" prop="deviceNum">
-        {{ form.siteAddress }}
-      </el-form-item>
-      <el-form-item label="联系人：" prop="deviceNum">
-        {{ form.sparUserName }}
-      </el-form-item>
-      <el-form-item label="联系方式：" prop="deviceNum">
-        {{ form.handlerPhone }}
-      </el-form-item>
-
-      <div class="basicTit">处理信息</div>
-
-      <el-form-item
-        label="处理内容："
-        prop="handlingContent"
-        style="margin-bottom: 20px"
-      >
-        <el-input
-          v-model="textarea"
-          :rows="2"
-          type="textarea"
-          placeholder="请输入..."
-          v-if="itemInfo.handlingStatus != 1"
-        />
-        <span v-if="itemInfo.handlingStatus == 1">
-          {{
-            itemInfo.handlingContent === '' ? '无' : itemInfo.handlingContent
-          }}
-        </span>
-      </el-form-item>
-
-      <el-form-item label="现场照片：" prop="deviceNum">
-        <el-upload
-          :action="uploadUrl"
-          :on-success="handleUpAvatar"
-          :on-remove="handleRemove"
-          :show-file-list="true"
-          list-type="picture-card"
-          :limit="3"
-          :on-preview="handlePictureCardPreview"
-          :headers="{ accessToken: [accessToken] }"
-          v-if="itemInfo.handlingStatus != 1"
-        >
-          <i class="el-icon-plus"></i>
-        </el-upload>
-        <el-dialog title="查看图片" v-model="dialogVisible" width="400px">
-          <img
-            style="width: 100%"
-            :src="
-              itemInfo.handlingStatus == 1
-                ? fileImages + form.image
-                : dialogImageUrl
-            "
-            alt=""
-          />
-        </el-dialog>
-        <img
-          @click="handlePictureCardPreview"
-          v-if="itemInfo.handlingStatus == 1"
-          style="width: 90px"
-          :src="fileImages + form.image"
-          alt=""
-        />
-      </el-form-item>
-      <br />
-      <br />
-      <br />
-      <div style="text-align: right" v-if="itemInfo.handlingStatus != 1">
-        <el-button @click="closeDialog()">取消</el-button>
-        <el-button type="primary" @click="submitForm()">确定</el-button>
-      </div>
-    </el-form>
-  </el-dialog>
-</template>
-
-<script>
-import { useStore } from 'vuex'
-import { defineComponent, ref, watchEffect, reactive, toRefs } from 'vue'
-import * as api from '@/api/alarmManage/index'
-import { ElMessage } from 'element-plus'
-
-export default defineComponent({
-  name: 'DialogComponent',
-  emits: ['closeDialog', 'listSelect'],
-  props: {
-    show_Dialog: Boolean,
-    dialogTitle: {
-      type: String,
-      default: '告警详情',
-    },
-    itemInfo: {
-      type: Object,
-      default: function () {
-        return {}
-      },
-    },
-  },
-  setup(props, { emit }) {
-    const store = useStore()
-    const showDialog = ref(false)
-    const formInfo = ref(null)
-    const form = ref([])
-    const textarea = ref('')
-    const dialogVisible = ref(false)
-    const accessToken = ref(store.state.user.accessToken)
-    const dialogImageUrl = ref('')
-    const fileImages = ref(window.PLATFROM_CONFIG.images)
-    const image = ref('')
-    const imageFile = ref([])
-
-    const dataSet = reactive({
-      uploadUrl:
-        window.PLATFROM_CONFIG.baseUrl +
-        '/patrolInspectionDevice/pictureUpload',
-      fileList: [],
-    })
-
-    //删除照片
-    function handleRemove(res) {
-      Array.prototype.indexOf = function (val) {
-        for (var i = 0; i < this.length; i++) {
-          if (this[i] == val) return i
-        }
-        return -1
-      }
-      Array.prototype.remove = function (val) {
-        var index = this.indexOf(val)
-        if (index > -1) {
-          this.splice(index, 1)
-        }
-      }
-      dataSet.fileList.remove(res.name)
-    }
-
-    const handleUpAvatar = (res, file) => {
-      image.value = res.data
-      imageFile.value = file
-    }
-
-    const handlePictureCardPreview = (file) => {
-      dialogImageUrl.value = file.url
-      dialogVisible.value = true
-    }
-
-    const resetForm = () => {
-      formInfo.value.resetFields()
-    }
-
-    const roleValid = (rule, value, callback) => {
-      if (value.length === 0) {
-        callback(new Error('角色不能为空'))
-      } else {
-        callback()
-      }
-    }
-
-    // onSelectedDrug(event) {
-    //   this.siteList = event;
-    //   console.log(this.siteList);
-    // },
-    // 保存操作
-    const submitForm = () => {
-      api
-        .alarmPower({
-          id: props.itemInfo.id,
-          handlingContent: textarea.value,
-          image: image.value,
-          handlingStatus: 1,
-        })
-        .then((requset) => {
-          if (requset.status === 'SUCCESS') {
-            ElMessage({
-              message: '操作成功！',
-              type: 'success',
-            })
-            textarea.value = ''
-            closeDialog()
-            emit('listSelect')
-          } else {
-            ElMessage.error(requset.msg)
-          }
-        })
-    }
-
-    const open = () => {
-      api.alarmPower1(props.itemInfo.id).then((requset) => {
-        if (requset.status === 'SUCCESS') {
-          form.value = requset.data
-        } else {
-          ElMessage.error(requset.msg)
-        }
-      })
-    }
-    // 关闭弹框
-    const closeDialog = () => {
-      showDialog.value = false
-      emit('closeDialog', false)
-    }
-
-    watchEffect((fn, options) => {
-      fn, options
-      showDialog.value = props.show_Dialog
-    })
-
-    return {
-      open,
-      handleUpAvatar,
-      handleRemove,
-      handlePictureCardPreview,
-      resetForm,
-      roleValid,
-      submitForm,
-      closeDialog,
-
-      ...toRefs(dataSet),
-      accessToken,
-      dialogImageUrl,
-      fileImages,
-      image,
-      disabled: false,
-      dialogVisible,
-      textarea,
-      showDialog,
-      form,
-      formInfo,
-      options: [
-        {
-          value: '选项1',
-          label: '站点一',
-        },
-        {
-          value: '选项2',
-          label: '站点二',
-        },
-        {
-          value: '选项3',
-          label: '站点三',
-        },
-        {
-          value: '选项4',
-          label: '站点四',
-        },
-        {
-          value: '选项5',
-          label: '站点五',
-        },
-      ],
-    }
-  },
-})
-</script>
- 
-<style scoped lang="scss">
-.el-input,
-.el-select {
-  width: 240px;
-}
-
-.el-form-item {
-  margin-left: 0 !important;
-}
-</style>
-<style>
-.alarmStatusDialog .el-form-item:not(.user-layout .el-form-item) {
-}
-</style>

src/views/siteDistribution/index.vue

@@ -51,67 +51,7 @@
     <div class="middle">
       <div  id="map" ref="map" style="width:100%;height:100%;" v-if="mode == 1"></div>
       <div class="table" v-if="mode == 2">
-        <el-table :data="tableData" border stripe :header-cell-style="headClass" height="71vh" style="overflow-y: auto;">
-          <el-table-column
-            fixed
-            prop="platformAreaName"
-            label="站点名称"
-            width=""
-          ></el-table-column>
-          <el-table-column
-            fixed
-            prop="platformAreaName"
-            label="分组名称"
-            width=""
-          ></el-table-column>
-          <el-table-column
-            fixed
-            prop="platformAreaName"
-            label="实时负荷"
-            width=""
-          ></el-table-column>
-          <el-table-column
-            fixed
-            prop="platformAreaName"
-            label="站点状态"
-            width=""
-          ></el-table-column>
-          <el-table-column
-            fixed
-            prop="platformAreaName"
-            label="设备总数"
-            width=""
-          ></el-table-column>
-          <el-table-column
-            fixed
-            prop="platformAreaName"
-            label="告警数"
-            width=""
-          ></el-table-column>
-          <el-table-column
-            fixed
-            prop="platformAreaName"
-            label="电话"
-            width=""
-          ></el-table-column>
-          <el-table-column
-            fixed
-            prop="platformAreaName"
-            label="地址"
-            width=""
-          ></el-table-column>
-        </el-table>
-        <div class="paginationBlock">
-          <el-pagination
-            @size-change="handleSizeChange"
-            @current-change="handleCurrentChange"
-            :current-page="currentPage"
-            :page-sizes="[15, 20, 25, 30]"
-            :page-size="pageSize"
-            layout="total, sizes, prev, pager, next, jumper"
-            :total="total"
-          ></el-pagination>
-        </div>
+        <tableC :data="tableData" />
       </div>
     </div>
     <div class="bottom" v-if="mode == 1">
@@ -138,21 +78,19 @@
 </template>
 
 <script setup>
-// import alarmTotal from './alarmTotal'
-// import { useStore } from 'vuex'
-// import { computed, defineComponent, onMounted, ref } from 'vue'
-// import * as api from '@/api/alarmManage/index'
-// import { ElMessage } from 'element-plus'
-// import { useRouter } from 'vue-router'
+/*----------------------------------组件引入-----------------------------------*/
+import tableC from "./components/table"
+/*----------------------------------接口引入-----------------------------------*/
+import { ref,onMounted } from "vue";
+/*----------------------------------store引入----------------------------------*/
+/*----------------------------------公共方法引入--------------------------------*/
+import { initMap, markers, labelState } from "@/assets/js/baiduMap.js";
+/*----------------------------------常量声明-----------------------------------*/
 import zhanDian from "@/assets/images/zhanDian.png";
 import liXian from "@/assets/images/liXian.png";
 import weiChuLi from "@/assets/images/weiChuLi.png";
 import sheBei from "@/assets/images/sheBei.png";
-import { initMap, markers, labelState } from "@/assets/js/baiduMap.js";
-import { ref,onMounted } from "vue";
-onMounted(() => {
-  init()
-})
+/*----------------------------------变量声明-----------------------------------*/
 const mode = ref(1)//1:列表模式 2:地图模式
 const siteState = ref([]) //true:站点显示 false:站点隐藏
 const statistics = ref([
@@ -198,9 +136,6 @@ const siteArray = ref([
   { value:"0", label:"离线" },
 ])
 const siteName = ref("")
-
-
-
 const total = ref(100)
 const pageSize = ref(15)
 const currentPage = ref(1)
@@ -216,26 +151,11 @@ const tableData = ref([
   { platformAreaName: "名称"},
   { platformAreaName: "名称"},
   { platformAreaName: "名称"},
-  { platformAreaName: "名称"},
-  { platformAreaName: "名称"},
-  { platformAreaName: "名称"},
-  { platformAreaName: "名称"},
-  { platformAreaName: "名称"},
-  { platformAreaName: "名称"},
-  { platformAreaName: "名称"},
-  { platformAreaName: "名称"},
-  { platformAreaName: "名称"},
-  { platformAreaName: "名称"},
-  { platformAreaName: "名称"},
-  { platformAreaName: "名称"},
-  { platformAreaName: "名称"},
-  // { platformAreaName: "名称"},
-  // { platformAreaName: "名称"},
-  // { platformAreaName: "名称"},
-  // { platformAreaName: "名称"},
-  // { platformAreaName: "名称"},
-  // { platformAreaName: "名称"},
 ])
+/*----------------------------------方法声明-----------------------------------*/
+onMounted(() => {
+  init()
+})
 
 //初始化
 function init(){

src/views/starMarkingEquipment/components/electron.vue

@@ -36,7 +36,13 @@
   </div>
 </template>
 <script setup>
+/*----------------------------------组件引入-----------------------------------*/
+/*----------------------------------接口引入-----------------------------------*/
 import { ref } from 'vue'
+/*----------------------------------store引入----------------------------------*/
+/*----------------------------------公共方法引入------------------------------*/
+/*----------------------------------常量声明-----------------------------------*/
+/*----------------------------------变量声明-----------------------------------*/
 const total = ref(100)
 const pageSize = ref(15)
 const currentPage = ref(1)
@@ -64,13 +70,18 @@ const tableData = ref([
   { platformAreaName: "名称"},
   { platformAreaName: "名称"}
 ])
+/*----------------------------------方法声明-----------------------------------*/
 
 </script>
 <style lang="scss" scoped>
 .filter-container{
   margin-top:-10px;
 }
- .content{
+.content{
   margin-top:-10px;
- }
+}
+.paginationBlock{
+  display: flex; 
+  justify-content: flex-end;
+}
 </style>

src/views/starMarkingEquipment/components/overview.vue

@@ -57,12 +57,13 @@
                 <div :class="['switch',dateType == '1' ? 'active': '']" @click="dateSwitch(1)">日</div>
                 <div :class="['switch',dateType == '2' ? 'active': '']" @click="dateSwitch(2)">月</div>
                 <div class="date">
-                  <el-select v-model="monthType" placeholder="" style="width: 100px;margin-right:10px;" v-if="dateType == 2">
+                  <el-select v-model="monthType" placeholder="" style="width: 100px;margin-right:10px;margin-top:-4px;" v-if="dateType == 2">
                     <el-option
                       v-for="item in monthDate"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value"
+
                     />
                   </el-select>
                     <span>日期：</span>
@@ -72,7 +73,7 @@
                       placeholder=""
                       :disabled-date="disabledDate"
                       v-if="dateType == 1"
-                      style="width:140px;margin-top:-5px;display: inline-block;"
+                      style="width:140px;margin-top:-4px;display: inline-block;"
                     />
                     <el-date-picker
                       v-model="month"
@@ -80,7 +81,7 @@
                       placeholder=""
                       :disabled-date="disabledDate"
                       v-if="dateType == 2"
-                      style="width:140px;display: inline-block;"
+                      style="width:140px;margin-top:-4px;display: inline-block;"
                     />
                 </div>
               </div>
@@ -88,7 +89,6 @@
         </div>
       </div>
     </div>
-    <div class="line"></div>
     <div class="useElectricity">
       <div class="top">
         <span>用电</span>
@@ -134,10 +134,15 @@
   </div>
 </template>
 <script setup>
-import { ref } from 'vue'
-import dayjs from 'dayjs'
+/*----------------------------------组件引入-----------------------------------*/
 import chart from './chart'
 import pie from './pie'
+/*----------------------------------接口引入-----------------------------------*/
+import { ref } from 'vue'
+/*----------------------------------store引入----------------------------------*/
+/*----------------------------------公共方法引入------------------------------*/
+import dayjs from 'dayjs'
+/*----------------------------------常量声明-----------------------------------*/
 import running from '@/assets/images/running.png'
 import a from '@/assets/images/a.png'
 import b from '@/assets/images/b.png'
@@ -150,6 +155,7 @@ 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: temperature },
@@ -268,11 +274,11 @@ const electricityBill = ref({
   color:["#FE8B6A","#BB7582","#F54C5E","#8AD4C7"],
   type:"3"
 })
+/*----------------------------------方法声明-----------------------------------*/
 function disabledDate(time) {
   // 禁止选择今天之后的日子
   return time.getTime() > Date.now();
 }
-
 function dateSwitch(type){
   dateType.value = type
 }
@@ -280,7 +286,6 @@ function dateSwitch(type){
 <style lang="scss" scoped>
 .container{
   .overview{
-    background: #ffff;
     border-radius: 4px;
     .top{
       span{
@@ -409,7 +414,7 @@ function dateSwitch(type){
             display: inline-block;
             .switch{
               width:40px;
-              height:30px;
+              height:32px;
               line-height: 26px;
               text-align: center;
               margin-right:10px;
@@ -447,7 +452,6 @@ function dateSwitch(type){
   .useElectricity{
     margin-top:10px;
     border-radius: 4px;
-    background: #fff;
     .top{
       span{
         font-size: 14px;
@@ -567,9 +571,4 @@ function dateSwitch(type){
     }
   }
 }
-.line{
-  height:10px;
-  width:100%;
-  background: #fafafa;
-}
 </style>

src/views/starMarkingEquipment/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="app-container">
+  <div class="starMarkingEquipment">
     <!-- 筛选start -->
     <div class="filter-container">
       <div class="left">
@@ -29,7 +29,7 @@
       </div>
     </div>
     <div class="content">
-      <a-tabs v-model:activeKey="activePage">
+      <a-tabs v-model="activePage">
         <a-tab-pane :tab="item.name" v-for="item in activeList" :key="item.key">
           <overview v-if="item.key === '1'"/>
           <electron v-if="item.key === '2'"/>
@@ -39,26 +39,37 @@
   </div>
 </template>
 <script setup>
+/*----------------------------------组件引入-----------------------------------*/
+/*----------------------------------接口引入-----------------------------------*/
+import { ref } from 'vue'
+/*----------------------------------store引入----------------------------------*/
+/*----------------------------------公共方法引入------------------------------*/
+/*----------------------------------常量声明-----------------------------------*/
 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:'概览' },
   { key:"2", name:'电子资料' },
 ])
+/*----------------------------------方法声明-----------------------------------*/
 </script>
 <style lang="scss" scoped>
+.starMarkingEquipment{
+  background: #fff;
+  padding:20px 15px;
+}
 .filter-container{
   margin-top:-10px;
 }
- .content{
+.content{
   margin-top:-10px;
- }
- .filter-item{
+}
+.filter-item{
   p{
     margin:6px 4px 0 0;
   }
- }
-</style>
+}
+</style>

src/views/useElectricity/components/chart.vue

@@ -4,103 +4,108 @@
   </div>
 </template>
 <script setup>
+/*----------------------------------组件引入-----------------------------------*/
+/*----------------------------------接口引入-----------------------------------*/
 import {  defineComponent, onMounted, ref, watch } from 'vue'
-import * as echarts from 'echarts'
+/*----------------------------------store引入----------------------------------*/
+/*----------------------------------公共方法引入------------------------------*/
+/*----------------------------------常量声明-----------------------------------*/
+/*----------------------------------变量声明-----------------------------------*/
 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()
-      })
+let lineChartBanlance = ref(null)
+const electricChart=ref({})
+// 读取数据 func
+const loading = ref(true)
+var option 
+option = {
+  title: {
+    text: props.data.title,
+    left: 'center',
+    top: '10px',
+    textStyle: {
+      fontSize: 16,
+      color: '#333'
     }
-    
-    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: {}
+  },
+  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
         }
       },
-      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()
-    })
+  ],
+  
+};
+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
+/*----------------------------------方法声明-----------------------------------*/
+import * as echarts from 'echarts'
+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{

src/views/useElectricity/components/tableD.vue

@@ -25,7 +25,13 @@
   </el-table>
 </template>
 <script setup>
+/*----------------------------------组件引入-----------------------------------*/
 import {  defineComponent, onMounted, ref, watch } from 'vue'
+/*----------------------------------接口引入-----------------------------------*/
+/*----------------------------------store引入----------------------------------*/
+/*----------------------------------公共方法引入------------------------------*/
+/*----------------------------------常量声明-----------------------------------*/
+/*----------------------------------变量声明-----------------------------------*/
 const props = defineProps({
   data: {
     type: Object,
@@ -33,6 +39,7 @@ const props = defineProps({
   },
 });
 const tableData = ref(props.data)
+/*----------------------------------方法声明-----------------------------------*/
 </script>
 <style lang="scss" scoped>
 

src/views/useElectricity/index.vue

@@ -83,14 +83,16 @@
 </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()
-})
+/*----------------------------------接口引入-----------------------------------*/
+import { ref,onMounted } from "vue";
+/*----------------------------------store引入----------------------------------*/
+/*----------------------------------公共方法引入------------------------------*/
+/*----------------------------------常量声明-----------------------------------*/
+/*----------------------------------变量声明-----------------------------------*/
 const selectAll = ref([]) //站点全选
 const siteSelectArray = ref([]) //站点选中列表
 const siteList = ref([
@@ -158,6 +160,11 @@ const chartData2 = ref({
   title:"每日电费趋势"
 })
 
+/*----------------------------------方法声明-----------------------------------*/
+onMounted(() => {
+  init()
+})
+
 function init(){
 
 }
@@ -168,12 +175,6 @@ function init(){
  */
 function switchMode(val) {
   mode.value = val
-  // if(val == 1){
-  //   setTimeout(() => {
-  //     init()
-  //     site(1)
-  //   })
-  // }
 }
 
 /**
@@ -182,11 +183,7 @@ function switchMode(val) {
  */
  function switchMode2(val) {
   mode2.value = val
-
 }
-
-
-
 /**
  * 全选事件
  */
@@ -210,7 +207,6 @@ function siteClick(val){
     selectAll.value = []
   }
 }
-
 </script>
 <style lang="scss" scoped>
 .fsyd{
@@ -265,6 +261,7 @@ function siteClick(val){
     }
     >.right{
       width:calc(80% - 10px);
+      position: relative;
       .top{
         margin-top:-10px;
         font-size: 12px;
@@ -308,8 +305,8 @@ function siteClick(val){
 .pob{
   position: absolute;
   z-index: 1;
-  top:20px;
-  right:20px;
+  top:0px;
+  right:10px;
   background: #fff !important;
 }
 .modeSwitching{

vue.config.js

@@ -133,7 +133,7 @@ module.exports = {
             config.devtool('source-map')
         })
 
-        config.when(process.env.NODE_ENV !== 'production', (config) => {
+        config.when(process.env.NODE_ENV !== 'development', (config) => {
             config.performance.set('hints', false)
             config.devtool('none')
             config.optimization.splitChunks({