天气工况管理修改,风力配置管理初次提交

package.json

@@ -20,6 +20,7 @@
     "jsencrypt": "^3.3.2",
     "less": "^4.2.0",
     "mitt": "^3.0.1",
+    "mock": "^0.1.1",
     "mockjs": "^1.1.0",
     "node-sass": "^9.0.0",
     "public-ip": "^6.0.2",

src/router/index.js

@@ -397,6 +397,14 @@ const routes = [
             meta: {
                 title: '天气工况管理'
             }
+        },
+        {
+            path: '/Scheduling/WindManage',
+            name: 'Phenomenon',
+            component: () => import('../views/SchedulingPage/WindManagePage.vue'),
+            meta: {
+                title: '风力配置管理'
+            }
         }
         ]
     },

src/views/SchedulingPage/PhenomenonPage.vue

@@ -2,7 +2,6 @@
   <!-- 条件筛选卡片 -->
   <el-card class="card-contianer">
     <div class="div-header">
-
         <el-form-item>
           <div>名称</div>
         </el-form-item>
@@ -15,7 +14,7 @@
 
     </div>
   </el-card>
-  <el-card class="moduleCard" :height="tableHeight">
+  <el-card class="moduleCard" :height="tableHeight" style="padding: 4px">
     <el-table :data="tableData" :height="tableHeight"  :cell-style="setCellStyle" id="out-table"
               border highlight-current-row :header-cell-style="setHeaderCellStyle"  :header-cell-class-name="handleHeadAddClass" >
       <el-table-column prop="index" label="序号"   fixed />
@@ -23,8 +22,12 @@
       <el-table-column prop="temperature" label="对应温度"   fixed />
       <el-table-column prop="desc" label="描述"  fixed />
       <el-table-column prop="alarmMessage" label="操作"  fixed >
-        <el-button type="primary" @click="dialogFormVisible = true">修改</el-button>
-        <el-button type="primary">删除</el-button>
+
+        <el-button link type="primary" size="small" @click="dialogFormVisible = true">
+          修改
+        </el-button>
+        <el-button link type="primary" size="small" @click="del">删除</el-button>
+
       </el-table-column>
 
     </el-table>
@@ -51,7 +54,7 @@
                   <table cellpadding="0" cellspacing="0">
                     <tr>
                       <td style="text-align: left">
-                        <el-select v-model="form.region" placeholder="please select your zone">
+                        <el-select v-model="form.region" placeholder="选择天气名称">
                           <el-option label="阴天" value="阴天" />
                           <el-option label="晴天" value="晴天" />
                           <el-option label="多云" value="多云" />
@@ -108,7 +111,7 @@
 
 <script lang="ts" setup>
 import {ref, reactive, onMounted, onUnmounted} from 'vue';
-
+import { ElMessage, ElMessageBox } from 'element-plus'
 import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
 import {useFloating} from "element-plus";
 //分页设置
@@ -187,7 +190,29 @@ const form = reactive({
   desc: '',
 })
 
-
+const del = ()=>{
+  ElMessageBox.confirm(
+      '您确定要删除此条数据吗？',
+      '警告',
+      {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+      }
+  )
+      .then(() => {
+        ElMessage({
+          type: 'success',
+          message: '删除成功',
+        })
+      })
+      .catch(() => {
+        ElMessage({
+          type: 'info',
+          message: '删除取消',
+        })
+      })
+}
 </script>
 <style lang="less" scoped>
 .moduleCard {

src/views/SchedulingPage/WindManagePage.vue

+<template>
+  <!-- 条件筛选卡片 -->
+  <el-card class="card-contianer">
+    <div class="div-header">
+      <el-form-item>
+        <div>级数</div>
+      </el-form-item>
+      <el-form-item >
+        <el-select v-model="form.region" placeholder="请选择" style="width: 200px">
+          <el-option label="一级风" value="shanghai" />
+          <el-option label="二级风" value="beijing" />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="getdata" style="min-width: 70px;">查询</el-button>
+      </el-form-item>
+
+    </div>
+  </el-card>
+  <el-card class="moduleCard" :height="tableHeight" style="padding: 4px;">
+    <el-table :data="tableData" :height="tableHeight"  :cell-style="setCellStyle" id="out-table"
+              border highlight-current-row :header-cell-style="setHeaderCellStyle"  :header-cell-class-name="handleHeadAddClass" >
+      <el-table-column prop="index" label="序号"   fixed />
+      <el-table-column prop="magnitude" label="级数"  fixed />
+      <el-table-column prop="temperature" label="对应温度"   fixed />
+      <el-table-column prop="desc" label="描述"  fixed />
+      <el-table-column prop="alarmMessage" label="操作"  fixed >
+
+        <el-button link type="primary" size="small" @click="dialogFormVisible = true">
+          修改
+        </el-button>
+        <el-button link type="primary" size="small" @click="del">删除</el-button>
+
+      </el-table-column>
+
+    </el-table>
+  </el-card>
+  <el-footer style="height: 8px;">
+    <el-config-provider :locale="zhCn">
+      <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
+                     :page-sizes="[30, 40, 50, 100, 200, 300]" :small="true" :disabled="disabled" :background="background"
+                     layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="getdata" @current-change="getdata"
+                     class="pagination" />
+    </el-config-provider>
+  </el-footer>
+  <div class="ams-dialog">
+    <el-dialog v-model="dialogFormVisible" title="天气工况设置修改" width="500">
+      <el-card>
+        <table
+            cellpadding="0"
+            cellspacing="1"
+            style="background-color: #99bbe8"
+        >
+          <tr>
+            <th style="width: 25%">名称</th>
+            <td style="width: 60%; margin:0; padding: 0">
+              <table cellpadding="0" cellspacing="0">
+                <tr>
+                  <td style="text-align: left">
+                    <el-select v-model="form.region" placeholder="选择天气名称">
+                      <el-option label="阴天" value="阴天" />
+                      <el-option label="晴天" value="晴天" />
+                      <el-option label="多云" value="多云" />
+                    </el-select>
+                  </td>
+
+                </tr>
+              </table>
+            </td>
+          </tr>
+          <tr>
+            <th style="width: 25%">对应温度</th>
+            <td style="width: 60%; margin:0; padding: 0">
+              <table cellpadding="0" cellspacing="0">
+                <tr>
+                  <td style="text-align: left">
+                    <el-input></el-input>
+                  </td>
+
+                </tr>
+              </table>
+            </td>
+          </tr>
+          <tr>
+            <th style="width: 25%">描述</th>
+            <td style="width: 60%; margin:0; padding: 0">
+              <table cellpadding="0" cellspacing="0">
+                <tr>
+                  <td style="text-align: left">
+                    <el-input></el-input>
+                  </td>
+
+                </tr>
+              </table>
+            </td>
+          </tr>
+
+        </table>
+        <template #footer>
+          <div class="dialog-footer">
+            <el-button type="primary" @click="dialogFormVisible = false">
+              保存
+            </el-button>
+            <el-button @click="dialogFormVisible = false">关闭</el-button>
+
+          </div>
+        </template>
+      </el-card>
+
+    </el-dialog>
+  </div>
+
+</template>
+
+<script lang="ts" setup>
+import {ref, reactive, onMounted, onUnmounted} from 'vue';
+import { ElMessage, ElMessageBox } from 'element-plus'
+import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
+import {useFloating} from "element-plus";
+//分页设置
+const currentPage = ref(1)
+var pageSize = ref(30)
+const disabled = ref(false)
+const background = ref(false)
+const total = ref(1)
+const tableData = ref([
+  {
+    index:1,
+    magnitude:3,
+    temperature:1.00.toFixed(2),
+    desc:'三级风'
+  },
+  {
+    index:2,
+    magnitude:8,
+    temperature:-3.00.toFixed(2),
+    desc:'八级风'
+  },
+  {
+    index:3,
+    magnitude:6,
+    temperature:-1.00.toFixed(2),
+    desc:'六级风'
+  }
+]);
+const tableHeight = ref(500);
+const sortField = reactive({});
+
+function setCellStyle({ row, column, rowIndex, columnIndex }) {
+  let css_color = {};
+  css_color['padding-left'] = '0px';
+  css_color['padding-right'] = '0px';
+  css_color['borderColor'] = '#97d5fd';
+  css_color['padding'] = '0px';
+
+  return css_color;
+}
+function setHeaderCellStyle({ row, column, rowIndex, columnIndex }) {
+  let css_color;
+  var backcolor = 'd9f1ff';
+  css_color = { 'background-color': '#' + backcolor, 'padding-left': '0px', 'padding-right': '0px', 'borderColor': '#97d5fd', 'color': '#000', 'text-align': 'center', 'vertical-align': 'top' };
+
+  var backcolor = 'd9f1ff';
+  css_color = { 'background-color': '#' + backcolor, 'padding-left': '0px', 'padding-right': '0px', 'borderColor': '#97d5fd', 'color': '#000', 'text-align': 'center', 'vertical-align': 'top' };
+
+  return css_color;
+}
+function handleHeadAddClass({ column }) {
+  if (sortField[column.property]) {
+    column.order = sortField[column.property]
+  }
+}
+
+
+function setContentHeight() {
+  tableHeight.value = window.innerHeight - 240;
+}
+onMounted(() => {
+
+  window.addEventListener('resize', setContentHeight);
+})
+onUnmounted(() => {
+  window.removeEventListener('resize', setContentHeight);
+})
+const dialogFormVisible = ref(false)
+const form = reactive({
+  name: '',
+  region: '',
+  date1: '',
+  date2: '',
+  delivery: false,
+  type: [],
+  resource: '',
+  desc: '',
+})
+
+const del = ()=>{
+  ElMessageBox.confirm(
+      '您确定要删除此条数据吗？',
+      '警告',
+      {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning',
+      }
+  )
+      .then(() => {
+        ElMessage({
+          type: 'success',
+          message: '删除成功',
+        })
+      })
+      .catch(() => {
+        ElMessage({
+          type: 'info',
+          message: '删除取消',
+        })
+      })
+}
+
+</script>
+<style lang="less" scoped>
+.moduleCard {
+  width: auto;
+  overflow: auto;
+  //max-height: 540px;
+  padding: 0px;
+
+  ::v-deep .el-card__body {
+    padding: 0px;
+  }
+}
+
+.pagination {
+  padding: 4px;
+  margin-left: 20px;
+  height: 30px;
+  //background-color: #8939cf;
+  vertical-align: middle;
+}
+
+//鼠标所在行的颜色
+::v-deep .el-table__body tr:hover>td {
+  background: linear-gradient(to top, rgb(0, 198, 255), rgb(255, 255, 255)) !important;
+}
+
+::v-deep .el-table__body tr.current-row>td {
+  background-color: #92cbf1 !important;
+}
+
+.card-contianer {
+  width: auto;
+  height: 70px;
+
+  .div-header {
+    width: 100%;
+    display: flex;
+    margin: 20px;
+  }
+}
+
+.el-form-item {
+  margin-top: -20px;
+  margin-right: 30px;
+}
+.el-tag--mini {
+  height: 21px !important
+}
+.el-cascader .el-input .el-input__inner:focus, .el-cascader .el-input.is-focus .el-input__inner{
+  height: 33px; //这里高度根据需求自己设定
+}
+.el-cascader__tags {
+  display: inline-flex;
+  margin-right: 10px;
+  flex-wrap: nowrap;
+}
+.contentBlock {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color: #ffffff;
+  overflow: auto;
+}
+table {
+  width: 100%;
+}
+table,
+tr,
+th,
+td {
+  font-size: 14px;
+  margin: 0;
+  padding: 0;
+}
+table {
+  width: 100%;
+}
+table th {
+  background-color: #dfe8f6;
+  text-align: center;
+  padding: 5px 10px;
+}
+table td {
+  text-align: center;
+  background-color: #ffffff;
+  padding: 5px 10px;
+}
+.btngrounp {
+  width: 300px;
+}
+.gc td {
+  background-color: #a6ffa6;
+}
+.gc td:first-child {
+  background-color: #ffffff;
+}
+table.botList td {
+  width: 33%;
+  text-align: left;
+  font-weight: bolder;
+}
+
+
+
+</style>
\ No newline at end of file