feat : 新增echarts中指定日期展示及细节优化

src/views/device-manage/index.vue

@@ -8,7 +8,7 @@
       <div class="tunnel-name">
         {{ tunnelName }}
       </div>
-      <div class="tunnel-title"></div>
+      <tunnel-title/>
     </div>
     <div class="device-content">
       <div class="device-box">
@@ -49,25 +49,34 @@
                       :header-cell-style="{backgroundColor: '#064B66',color: '#fff',fontSize: '40px',borderBottom: 'none' }"
                       :cell-style="{textAlign: 'center',borderBottom: 'none'}" :data="fanData">
               <el-table-column prop="equipmentName" label="设备名称" align="center"/>
+              <el-table-column prop="ratedPower" label="额定功率" align="center">
+                <template #default="scope">
+                  <el-input placeholder="额定功率" v-model="scope.row.ratedPower"
+                            @change="changeRatedPower(scope.row)"></el-input>
+                </template>
+              </el-table-column>
               <el-table-column prop="phaseCurrentAOffset" label="A电流偏移量" align="center"/>
               <el-table-column prop="acurrentValue" label="A电流阈值" align="center">
                 <template #default="scope">
-                  <el-input placeholder="A电流" v-model="scope.row.acurrentValue" @change="changeFanData(scope.row)"></el-input>
+                  <el-input placeholder="A电流" v-model="scope.row.acurrentValue"
+                            @change="changeFanData(scope.row)"></el-input>
                 </template>
               </el-table-column>
               <el-table-column prop="phaseCurrentBOffset" label="B电流偏移量" align="center"/>
               <el-table-column prop="bcurrentValue" label="B电流阈值" align="center">
                 <template #default="scope">
-                  <el-input placeholder="B电流" v-model="scope.row.bcurrentValue"  @change="changeFanData(scope.row)"></el-input>
+                  <el-input placeholder="B电流" v-model="scope.row.bcurrentValue"
+                            @change="changeFanData(scope.row)"></el-input>
                 </template>
               </el-table-column>
               <el-table-column prop="phaseCurrentCOffset" label="C电流偏移量" align="center"/>
               <el-table-column prop="ccurrentValue" label="C电流阈值" align="center">
                 <template #default="scope">
-                  <el-input placeholder="C电流" v-model="scope.row.ccurrentValue"  @change="changeFanData(scope.row)"></el-input>
+                  <el-input placeholder="C电流" v-model="scope.row.ccurrentValue"
+                            @change="changeFanData(scope.row)"></el-input>
                 </template>
               </el-table-column>
-              <el-table-column prop="state" label="状态" align="center">
+              <el-table-column prop="state" label="状态" align="center"  min-width="86">
                 <template #default="scope">
                   <div class="switch">
                     <div
@@ -117,12 +126,13 @@
               <el-table-column prop="offset" label="偏移量" align="center"/>
               <el-table-column prop="unit" label="单位" align="center">
                 <template #default="scope">
-                  <el-input placeholder="单位" v-model="scope.row.unit"  @change="changeWindData(scope.row)"></el-input>
+                  <el-input placeholder="单位" v-model="scope.row.unit" @change="changeWindData(scope.row)"></el-input>
                 </template>
               </el-table-column>
               <el-table-column prop="alarmValue" label="阈值" align="center">
                 <template #default="scope">
-                  <el-input placeholder="阈值" v-model="scope.row.alarmValue" @change="changeWindData(scope.row)"></el-input>
+                  <el-input placeholder="阈值" v-model="scope.row.alarmValue"
+                            @change="changeWindData(scope.row)"></el-input>
                 </template>
               </el-table-column>
               <el-table-column prop="state" label="状态" align="center">
@@ -159,7 +169,7 @@
             <span>其他传感器设备管理</span>
             <div class="collection-frequency">
               <span>采集频率</span>
-              <el-input type="number" v-model="otherFrequency"  @change="changeOther">
+              <el-input type="number" v-model="otherFrequency" @change="changeOther">
                 <template #suffix>
                   <span>秒/次</span>
                 </template>
@@ -180,7 +190,8 @@
               </el-table-column>
               <el-table-column prop="alarmValue" label="阈值" align="center">
                 <template #default="scope">
-                  <el-input placeholder="阈值" v-model="scope.row.alarmValue" @change="changeOtherData(scope.row)"></el-input>
+                  <el-input placeholder="阈值" v-model="scope.row.alarmValue"
+                            @change="changeOtherData(scope.row)"></el-input>
                 </template>
               </el-table-column>
               <el-table-column prop="state" label="状态" align="center">
@@ -233,7 +244,8 @@
               <el-table-column prop="offset" label="偏移量" align="center"/>
               <el-table-column prop="thresholdValue" label="阈值" align="center">
                 <template #default="scope">
-                  <el-input placeholder="阈值" v-model="scope.row.thresholdValue"  @change="changeFenData(scope.row)"></el-input>
+                  <el-input placeholder="阈值" v-model="scope.row.thresholdValue"
+                            @change="changeFenData(scope.row)"></el-input>
                 </template>
               </el-table-column>
               <el-table-column prop="state" label="状态" align="center">
@@ -273,7 +285,7 @@
 <script setup>
 import {ElMessage} from "element-plus";
 import {getEquipmentList, editEquipment, getTunnelDetail} from "@/api/tunnelManage";
-
+import TunnelTitle from "@/components/tunnelTitle/index.vue";
 const router = useRouter()
 const tunnelId = reactive(router.currentRoute.value.params.tunnelId)
 const userId = reactive(router.currentRoute.value.params.userId)
@@ -293,43 +305,43 @@ const editFenLiuData = ref([])
 const frequencyData = ref([])
 const siteId = ref(0)
 const tunnelName = ref('')
-const changeFan=(e)=>{
-  const fanObj={
-    acquisitionPeriod: e*1000,
+const changeFan = (e) => {
+  const fanObj = {
+    acquisitionPeriod: e * 1000,
     tunnelId: tunnelId,
     typeKey: 'frequency'
   }
   frequencyData.value.push(fanObj)
 }
-const changeFanData=(row)=>{
+const changeFanData = (row) => {
   editFanData.value.push(row)
 }
-const changeWind=(e)=>{
-  const windObj={
-    acquisitionPeriod: e*1000,
+const changeWind = (e) => {
+  const windObj = {
+    acquisitionPeriod: e * 1000,
     tunnelId: tunnelId,
     typeKey: 'windPressure'
   }
   frequencyData.value.push(windObj)
 }
-const changeWindData=(row)=>{
+const changeWindData = (row) => {
   editWinData.value.push(row)
 }
-const changeOther=(e)=>{
-  const otherObj={
-    acquisitionPeriod: e*1000,
+const changeOther = (e) => {
+  const otherObj = {
+    acquisitionPeriod: e * 1000,
     tunnelId: tunnelId,
     typeKey: 'sensor'
   }
   frequencyData.value.push(otherObj)
 }
-const changeOtherData=(row)=>{
+const changeOtherData = (row) => {
   editOtherData.value.push(row)
 }
 const editEquip = () => {
-  const basicData={
-    tunnelId:tunnelId,
-    acquisitionList:frequencyData.value,
+  const basicData = {
+    tunnelId: tunnelId,
+    acquisitionList: frequencyData.value,
     frequencyChangerList: editFanData.value,
     windPressureSensorList: editWinData.value,
     sensorList: editOtherData.value,
@@ -436,7 +448,7 @@ getList()
 
     .device-box {
       display: flex;
-      width: 2194px;
+      width: 2260px;
       height: 1600px;
       background: #064B66;
       border-radius: 20px;
@@ -549,7 +561,8 @@ getList()
 
       .device-table {
         margin-top: 50px;
-        margin-left: 60px;
+        margin-left: 50px;
+        margin-right: 50px;
 
         .active {
           color: #FFFFFF;
@@ -581,7 +594,8 @@ getList()
         }
 
         :deep(.el-table--fit) {
-          width: 1780px !important;
+          //width: 1780px !important;
+          width: auto;
         }
 
         :deep(.cell) {