0619前端五个页面

ruoyi-ui/package.json

@@ -21,7 +21,7 @@
     "@vueup/vue-quill": "1.2.0",
     "@vueuse/core": "10.11.0",
     "axios": "0.28.1",
-    "echarts": "5.5.1",
+    "echarts": "^5.5.1",
     "element-plus": "2.7.6",
     "file-saver": "2.0.5",
     "fuse.js": "6.6.2",

ruoyi-ui/src/main.js

@@ -50,10 +50,12 @@ import ImagePreview from "@/components/ImagePreview";
 import TreeSelect from "@/components/TreeSelect";
 // 字典标签组件
 import DictTag from "@/components/DictTag";
+import * as echarts from 'echarts';
 
 const app = createApp(App);
 
 // 全局方法挂载
+app.config.globalProperties.$echarts = echarts
 app.config.globalProperties.useDict = useDict;
 app.config.globalProperties.download = download;
 app.config.globalProperties.parseTime = parseTime;

ruoyi-ui/src/views/developer/example/index.vue

@@ -1,10 +1,132 @@
 <template>
-  <div>
-    开发示例
+  <div style="width: 100%;background-color: #F7F7F7;padding-top: 1%;" :style="{'height':heightAll+'px'}">
+    <div style="display: flex;background-color: white;margin-left: 1%;" :style="{'height':heightAll*0.42+'px'}">
+      <div style="width: 10%;margin-left: 1%;width: 10%;background-color: white;">
+        <div style="font-size: 20px;justify-content: center;background-color: #487ACF;color: white;display: flex;align-items: center;" :style="{'height':heightAll*0.04+'px'}">
+          模型装配
+        </div>
+        <div style="margin-top: 20%;">
+          <el-radio label="1" size="large">滚子河流域分区</el-radio>
+          <el-radio label="1" size="large">西江流域分区</el-radio>
+          <el-radio label="1" size="large">分水江流域分区</el-radio>
+          <el-radio label="1" size="large">雨山流域分区</el-radio>
+        </div>
+        <div style="margin-top: 50%;">
+          <el-button plain style="width: 100%;" type="primary" :icon="Plus">新增其他分区</el-button>
+        </div>
+      </div>
+      <div style="margin-left: 1%;width: 87%;">
+        <div style="width: 100%;display: flex;justify-content:end;margin-right:2%;">
+          <el-button plain  type="primary">编辑</el-button>
+          <el-button plain  type="primary">导出</el-button>
+          <el-button  type="primary">确认</el-button>
+        </div>
+      </div>
+    </div>
+    <div style="margin-top: 1%;background-color: white;padding-top: 1%;" :style="{'height':heightAll*0.57+'px'}">
+      <div style="margin-left: 1%;width: 100%;display: flex;">
+        <div style="margin-left: 1%;width: 100%;display: flex;">
+          <el-input v-model="input" style="width: 20%;" placeholder="Please input" />
+          <el-button  type="primary">确认</el-button>
+        </div>
+        <div style="width: 100%;display: flex;justify-content:end;margin-right:2%;">
+          <el-button plain  type="primary">编辑</el-button>
+          <el-button plain  type="primary">导出</el-button>
+          <el-button  type="primary">确认</el-button>
+        </div>
+      </div>
+      <el-table 
+        :data="tableData" 
+        style="width: 98%;margin-left: 1%;margin-top: 1%;"
+        :cell-style="{ textAlign: 'center' }"
+        :header-cell-style="{ textAlign: 'center' }"
+        :row-style="{ height: heightAll*0.01+'px',fontSize: '16px',textAlign:'center'  }"
+        border 
+        :max-height="tableheight">
+        <el-table-column type="selection" width="55"></el-table-column>
+        <el-table-column prop="date" label="分区参数" />
+        <el-table-column prop="name" label="参数值" />
+        <el-table-column prop="address" label="分区参数" />
+      </el-table>
+    </div>
   </div>
 </template>
 <script setup>
+import { ref, onMounted } from 'vue';
+import {
+  ArrowLeft,
+  Plus
+} from '@element-plus/icons-vue'
+const format = (percentage) => (percentage === 100 ? 'Full' : `${percentage}%`)
+const tableData = [
+  {
+    date:'蓄水容量(WM)',
+    name:'1.33',
+    address:'上层蓄水容量(WUM)'
+  },
+  {
+    date:'下层蓄水容量(WLM)',
+    name:'55',
+    address:'蒸散发折算系数(k)'
+  },
+  {
+    date:'深层蒸散发系数(C)',
+    name:'0.14',
+    address:'地下水出流系数(KG)'
+  },
+  {
+    date:'最大自由需水量(SM)',
+    name:'16',
+    address:'初始含水量(WO)'
+  },
+  {
+    date:'初始上层含水量(WU0)',
+    name:'30',
+    address:'壤中流系数(KSS)'
+  },
+  {
+    date:'初始下层含水量(WL0)',
+    name:'38',
+    address:'汇流滞时(LAG)'
+  },
+]
+const heightAll = window.innerHeight
+const valueHelpSel = '';
+const tableheight = window.innerHeight*0.7
+const options = [
+  {
+    value: 'Option1',
+    label: 'Option1',
+  },
+  {
+    value: 'Option2',
+    label: 'Option2',
+  },
+  {
+    value: 'Option3',
+    label: 'Option3',
+  },
+  {
+    value: 'Option4',
+    label: 'Option4',
+  },
+  {
+    value: 'Option5',
+    label: 'Option5',
+  },
+]
+const seledMo = ['primary','plain','plain','plain','plain','plain','plain']
+function showNode(data, node){
+  console.log(data,node)
+}
 </script>
 <style scoped lang="scss">
-
+.el-table .el-table__row td {
+  height: 60px !important; /* 行高 */
+}
+.custom-tree-node {
+  display: flex;       /* 启用 Flex 布局 */
+  align-items: center; /* 垂直居中 */
+  gap: 8px;            /* 图标与文字间距 */
+}
 </style>

ruoyi-ui/src/views/developer/guide/index.vue

@@ -1,10 +1,192 @@
 <template>
-  <div>
-    开发指南
+  <div style="width: 100%;background-color: #F7F7F7;padding-top: 1%;display: flex;" :style="{'height':heightAll+'px'}">
+    <div style="width: 20%;background-color: white;margin-left: 1%;" :style="{'height':heightAll+'px'}">
+      <div style="padding-top: 5%;text-align: center;">
+        <el-select
+          v-model="value"
+          class="m-2"
+          placeholder="技术模型说明"
+          style="width: 90%"
+        >
+          <el-option
+            v-for="item in options"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+        <el-tree :data="treeData" @node-click="showNode" node-key="id" style="margin-left: 1%;margin-top: 5%;" default-expand-all>
+          <template #default="{ node, data }">
+            <span class="custom-tree-node">
+              <el-icon v-if="node.data.label === '前言'"><House /></el-icon>
+              <el-icon v-if="node.data.label === '模型搭建'"><User /></el-icon>
+              <el-icon v-if="node.data.label === '模型设计'"><FolderOpened /></el-icon>
+              <el-icon v-if="node.data.label === '参数说明'"><FolderOpened /></el-icon>
+              <el-icon v-if="node.data.label === '参数配置'"><FolderOpened /></el-icon>
+              <el-icon v-if="node.data.label === '模拟计算方案'"><Tools /></el-icon>
+              <span>{{ node.label }}</span>
+            </span>
+          </template>
+        </el-tree>
+      </div>
+    </div>
+    <div style="width: 77%;background-color: white;margin-left: 1%;" :style="{'height':heightAll+'px'}">
+      <div style="margin-top: 1.5%;margin-left: 1%;font-weight: bold;color: #337ecc;">一维水动力模型接口说明:</div>
+      <div style="display: flex;margin-top: 2%;align-items: center;margin-left: 1%">
+        <div style="font-weight: bold;"> 
+          接口名称:
+        </div>
+        <div>
+          2dHydrologyModelCaculation
+        </div>
+      </div>
+      <div style="display: flex;margin-top: 2%;align-items: center;margin-left: 1%">
+        <div style="font-weight: bold;"> 
+          请求方式:
+        </div>
+        <div>
+          POST
+        </div>
+      </div>
+      <div style="margin-top: 2%;width: 98%;margin-left: 1%;">
+        <el-table 
+          :data="tableData" 
+          style="width: 100%"
+          :row-style="{ height: heightAll*0.08+'px',fontSize: '16px'  }"
+          border 
+          :max-height="tableheight">
+          <el-table-column prop="date" label="参数" width="300" />
+          <el-table-column prop="name" label="意义" width="300" />
+          <el-table-column prop="address" label="类型" />
+        </el-table>
+      </div>
+    </div>
   </div>
 </template>
 <script setup>
+import { ref, onMounted } from 'vue';
+
+const format = (percentage) => (percentage === 100 ? 'Full' : `${percentage}%`)
+const tableData = [
+  {
+    date:'start',
+    name:'开始时间',
+    address:'string 示例:“2022-11-08 00:00:00'
+  },
+  {
+    date:'start',
+    name:'开始时间',
+    address:'string 示例:“2022-11-08 00:00:00'
+  },
+  {
+    date:'start',
+    name:'开始时间',
+    address:'string 示例:“2022-11-08 00:00:00'
+  },
+  {
+    date:'start',
+    name:'开始时间',
+    address:'string 示例:“2022-11-08 00:00:00'
+  },
+  {
+    date:'start',
+    name:'开始时间',
+    address:'string 示例:“2022-11-08 00:00:00'
+  },
+  {
+    date:'start',
+    name:'开始时间',
+    address:'string 示例:“2022-11-08 00:00:00'
+  },
+]
+const treeData = [
+  {
+    label: '前言',
+    children: [
+      {
+        label: '接口说明',
+      },
+      {
+        label: '新安江模型',
+      },
+      {
+        label: '陕北模型',
+      },
+      {
+        label: '马斯京根模型',
+      },
+      {
+        label: '一维水动力模型',
+      },
+      {
+        label: '二维水动力模型',
+      },
+    ],
+  },
+  {
+    label: '模型搭建',
+  },
+  {
+    label: '模型设计',
+  },
+  {
+    label: '参数说明',
+  },
+  {
+    label: '参数配置',
+    children: [
+      {
+        label: '项目1',
+      },
+      {
+        label: '项目2',
+      },
+      {
+        label: '项目3',
+      },
+    ],
+  },
+  {
+    label: '模拟计算方案',
+  },
+]
+const heightAll = window.innerHeight
+const valueHelpSel = '';
+const tableheight = window.innerHeight*0.7
+const options = [
+  {
+    value: 'Option1',
+    label: 'Option1',
+  },
+  {
+    value: 'Option2',
+    label: 'Option2',
+  },
+  {
+    value: 'Option3',
+    label: 'Option3',
+  },
+  {
+    value: 'Option4',
+    label: 'Option4',
+  },
+  {
+    value: 'Option5',
+    label: 'Option5',
+  },
+]
+const seledMo = ['primary','plain','plain','plain','plain','plain','plain']
+function showNode(data, node){
+  console.log(data,node)
+}
 </script>
 <style scoped lang="scss">
-
+.el-table .el-table__row td {
+  height: 60px !important; /* 行高 */
+}
+.custom-tree-node {
+  display: flex;       /* 启用 Flex 布局 */
+  align-items: center; /* 垂直居中 */
+  gap: 8px;            /* 图标与文字间距 */
+}
 </style>

ruoyi-ui/src/views/developer/help/index.vue

@@ -1,9 +1,134 @@
 <template>
   <div>
-    帮助文档
+    <div style="width: 100%;margin-left: 2%;margin-top: 1%;display: flex;">
+      <el-select
+        v-model="valueHelpSel"
+        class="m-2"
+        placeholder="一维水动力"
+        size="default"
+        style="width: 15%"
+      >
+        <el-option
+          v-for="item in options"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        />
+      </el-select>
+      <el-button style="width: 5%;" type="primary" size="default">搜索</el-button>
+    </div>
+    <div style="margin-top: 1%;display: flex;margin-left: 2%;width: 100%;align-items: center;">
+      <div style="font-weight: bold;">
+        模型用途:
+      </div>
+      <el-button-group style="width: 45%;">
+        <el-button :type="seledMo[0]"  style="margin-left: 1%;">降雨预报</el-button>
+        <el-button :type="seledMo[1]">产汇流预报</el-button>
+        <el-button :type="seledMo[2]">洪水演进</el-button>
+        <el-button :type="seledMo[3]">工程调度</el-button>
+        <el-button :type="seledMo[4]">水资源调度</el-button>
+        <el-button :type="seledMo[5]">大坝安全</el-button>
+        <el-button :type="seledMo[6]">多目标调度</el-button>
+      </el-button-group>
+      <div style="font-weight: bold;">
+        模型原理:
+      </div>
+      <el-button-group style="width: 20%;">
+        <el-button :type="seledMo[0]"  style="margin-left: 1%;">数学机理</el-button>
+        <el-button :type="seledMo[1]">经验模型</el-button>
+        <el-button :type="seledMo[2]">机器学习</el-button>
+      </el-button-group>
+    </div>
+    <div style="width: 96%;margin-top: 1%;margin-left: 2%;" :style="{'height':heightAll*0.7+'px'}">
+      <div  style="width: 100%;display: flex;flex-wrap: wrap;justify-content: center;">
+        <div v-for="(item, index) in listHelp" style="width: 32%;;margin-bottom: 1%;margin-left: 1%;background-color: #F7F7F7;" :style="{'height':heightAll*0.22+'px'}">
+          <div style="margin-left: 2%;margin-top: 3%;font-weight: bold;">
+            {{item.modelName}}:
+          </div>
+          <div>
+            <div style="margin-left: 2%;margin-top: 5%;white-space: pre-wrap;text-indent: 2em;width: 96%;font-size: 17px;">
+              {{item.modelContent}}
+            </div>
+          </div>
+          <div>
+            <div style="display: flex;width: 98%;margin-top: 1%;justify-content: flex-end;margin-right: 1%;">
+              <el-button type="primary" plain>导出</el-button>
+              <el-button type="primary" plain>编辑</el-button>
+              <el-button type="primary">查看</el-button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div style="margin-top: 1%;float: right;margin-right: 3%;">
+       <el-pagination
+          small
+          background
+          layout="prev, pager, next"
+          :total="50"
+          class="mt-4"
+        />
+    </div>
   </div>
 </template>
 <script setup>
+import { ref, onMounted } from 'vue';
+
+const listHelp = [
+  {
+    modelName:'马斯京根模型',
+    modelContent:'通过流量比重因素x来调节流量，使其与槽蓄量成单一关系，并以线性假定来建立槽蓄方程，演算时段确定方法一般用马斯京根分段流量演算法。但用这类方法确定的参数对于同一段河道的不同场次洪水的流量演算，往往误差较大。'
+  },{
+    modelName:'马斯京根模型',
+    modelContent:'通过流量比重因素x来调节流量，使其与槽蓄量成单一关系，并以线性假定来建立槽蓄方程，演算时段确定方法一般用马斯京根分段流量演算法。但用这类方法确定的参数对于同一段河道的不同场次洪水的流量演算，往往误差较大。'
+  },{
+    modelName:'马斯京根模型',
+    modelContent:'通过流量比重因素x来调节流量，使其与槽蓄量成单一关系，并以线性假定来建立槽蓄方程，演算时段确定方法一般用马斯京根分段流量演算法。但用这类方法确定的参数对于同一段河道的不同场次洪水的流量演算，往往误差较大。'
+  },{
+    modelName:'马斯京根模型',
+    modelContent:'通过流量比重因素x来调节流量，使其与槽蓄量成单一关系，并以线性假定来建立槽蓄方程，演算时段确定方法一般用马斯京根分段流量演算法。但用这类方法确定的参数对于同一段河道的不同场次洪水的流量演算，往往误差较大。'
+  },{
+    modelName:'马斯京根模型',
+    modelContent:'通过流量比重因素x来调节流量，使其与槽蓄量成单一关系，并以线性假定来建立槽蓄方程，演算时段确定方法一般用马斯京根分段流量演算法。但用这类方法确定的参数对于同一段河道的不同场次洪水的流量演算，往往误差较大。'
+  },{
+    modelName:'马斯京根模型',
+    modelContent:'通过流量比重因素x来调节流量，使其与槽蓄量成单一关系，并以线性假定来建立槽蓄方程，演算时段确定方法一般用马斯京根分段流量演算法。但用这类方法确定的参数对于同一段河道的不同场次洪水的流量演算，往往误差较大。'
+  },{
+    modelName:'马斯京根模型',
+    modelContent:'通过流量比重因素x来调节流量，使其与槽蓄量成单一关系，并以线性假定来建立槽蓄方程，演算时段确定方法一般用马斯京根分段流量演算法。但用这类方法确定的参数对于同一段河道的不同场次洪水的流量演算，往往误差较大。'
+  },{
+    modelName:'马斯京根模型',
+    modelContent:'通过流量比重因素x来调节流量，使其与槽蓄量成单一关系，并以线性假定来建立槽蓄方程，演算时段确定方法一般用马斯京根分段流量演算法。但用这类方法确定的参数对于同一段河道的不同场次洪水的流量演算，往往误差较大。'
+  },{
+    modelName:'马斯京根模型',
+    modelContent:'通过流量比重因素x来调节流量，使其与槽蓄量成单一关系，并以线性假定来建立槽蓄方程，演算时段确定方法一般用马斯京根分段流量演算法。但用这类方法确定的参数对于同一段河道的不同场次洪水的流量演算，往往误差较大。'
+  },
+]
+const heightAll = window.innerHeight
+const valueHelpSel = '';
+const options = [
+  {
+    value: 'Option1',
+    label: 'Option1',
+  },
+  {
+    value: 'Option2',
+    label: 'Option2',
+  },
+  {
+    value: 'Option3',
+    label: 'Option3',
+  },
+  {
+    value: 'Option4',
+    label: 'Option4',
+  },
+  {
+    value: 'Option5',
+    label: 'Option5',
+  },
+]
+const seledMo = ['primary','plain','plain','plain','plain','plain','plain']
 </script>
 <style scoped lang="scss">
 

ruoyi-ui/src/views/monitor/center/index.vue

@@ -1,10 +1,363 @@
 <template>
-<div>
-  监控中心
-</div>
+  <div style="background-color:  #F7F7F7;padding-top:1% ;">
+    <div style="margin-left: 1%;width: 98%;display: flex;" :style="{'height':heightAll*0.3+'px'}">
+      <div style="width: 40%;height: 100%;">
+        <el-card shadow="always" class="box-card" style="width:100%;height: 100%;">
+          <div style="display: flex;align-items: center;font-weight: bold;">
+            <div style="">今日模型服务调度次数</div>
+            <div style="color: #79bbff;margin-left: 1%;"> 356 </div>
+            <div style="margin-left: 1%;"> 次 </div>
+          </div>
+          <div id="top1" style="width: 98%;margin-left: 1%;margin-top: 1%;" :style="{'height':heightAll*0.23+'px'}">
+
+          </div>
+        </el-card>
+      </div>
+      <div style="width: 30%;height: 100%;margin-left: 1%;">
+        <el-card shadow="always" class="box-card" style="width:100%;height: 100%;">
+          <div style="display: flex;align-items: center;font-weight: bold;width: 100%;">
+            <div style="">模型服务调用次数</div>
+            <div style="width: 50%;margin-left: 20%;">
+              <el-select
+                v-model="value"
+                class="m-2"
+                placeholder="长江水利委员会"
+                style="width: 100%;;"
+              >
+                <el-option
+                  v-for="item in options"
+                  :key="item.value"
+                  :label="item.label"
+                  :value="item.value"
+                />
+              </el-select>
+            </div>
+          </div>
+          <div id="top2"  style="width: 98%;margin-left: 1%;margin-top: 1%;" :style="{'height':heightAll*0.23+'px'}">
+
+          </div>
+        </el-card>
+      </div>
+      <div style="width: 30%;height: 100%;;margin-left: 1%">
+        <el-card shadow="always" class="box-card" style="width:100%;height: 100%;">
+          <div style="display: flex;align-items: center;font-weight: bold;width: 100%;">
+            <div style="">模型服务类型总数 </div>
+            <div style="color: #79bbff;margin-left: 1%;"> 123 </div>
+            <div style="margin-left: 1%;"> 次 </div>
+          </div>
+          <div id="top3"  style="width: 98%;margin-left: 1%;margin-top: 1%;" :style="{'height':heightAll*0.25+'px'}">
+
+          </div>
+        </el-card>
+      </div>
+    </div>
+    <div style="margin-left: 1%;width: 98%;display: flex;margin-top: 1%;" :style="{'height':heightAll*0.13+'px'}">
+      <div shadow="always" style="width: 17%;height: 100%;;border-radius: 10px;background-color: white;" class="boxShadow">
+        <div style="width: 100%;display: flex;align-items: center;justify-content: center;font-size: 35px;font-weight: bold;color: #477ACF;;height: 70%">
+          358
+        </div>
+        <div style="display: flex;align-items: center;justify-content: center;background-color: #477ACF;font-size: 20px;width: 100%;color: white;text-align: center;border-radius: 0 0 10px 10px;height: 30%;">
+          当前服务在线总数
+        </div>
+      </div>
+      <div shadow="always" style="width: 17%;height: 100%;;border-radius: 10px;background-color: white;margin-left: 1%;" class="boxShadow">
+        <div style="width: 100%;display: flex;align-items: center;justify-content: center;font-size: 35px;font-weight: bold;color: #40B0D7;;height: 70%">
+          78%
+        </div>
+        <div style="display: flex;align-items: center;justify-content: center;background-color: #40B0D7;font-size: 20px;width: 100%;color: white;text-align: center;border-radius: 0 0 10px 10px;height: 30%;">
+          服务在线比率
+        </div>
+      </div>
+      <div shadow="always" style="width: 17%;height: 100%;;border-radius: 10px;background-color: white;margin-left: 1%;" class="boxShadow">
+        <div style="width: 100%;display: flex;align-items: center;justify-content: center;font-size: 35px;font-weight: bold;color: #2DBEA2;;height: 70%">
+          良
+        </div>
+        <div style="display: flex;align-items: center;justify-content: center;background-color: #2DBEA2;font-size: 20px;width: 100%;color: white;text-align: center;border-radius: 0 0 10px 10px;height: 30%;">
+          模型服务支撑健康指数
+        </div>
+      </div>
+      <div shadow="always" style="width: 17%;height: 100%;;border-radius: 10px;background-color: white;margin-left: 1%;" class="boxShadow">
+        <div style="width: 100%;display: flex;align-items: center;justify-content: center;font-size: 35px;font-weight: bold;color: #487ACF;;height: 70%">
+          新安江模型
+        </div>
+        <div style="display: flex;align-items: center;justify-content: center;background-color: #487ACF;font-size: 20px;width: 100%;color: white;text-align: center;border-radius: 0 0 10px 10px;height: 30%;">
+          当月热点服务
+        </div>
+      </div>
+      <div shadow="always" style="width: 17%;height: 100%;;border-radius: 10px;background-color: white;margin-left: 1%;" class="boxShadow">
+        <div style="width: 100%;display: flex;align-items: center;justify-content: center;font-size: 35px;font-weight: bold;color: #40B0D7;;height: 70%">
+          一维水动力
+        </div>
+        <div style="display: flex;align-items: center;justify-content: center;background-color: #40B0D7;font-size: 20px;width: 100%;color: white;text-align: center;border-radius: 0 0 10px 10px;height: 30%;">
+          最常配置服务
+        </div>
+      </div>
+      <div shadow="always" style="width: 17%;height: 100%;;border-radius: 10px;background-color: white;margin-left: 1%;" class="boxShadow">
+        <div style="width: 100%;display: flex;align-items: center;justify-content: center;font-size: 35px;font-weight: bold;color: #4BBA9B;;height: 70%">
+          78%
+        </div>
+        <div style="display: flex;align-items: center;justify-content: center;background-color: #4BBA9B;font-size: 20px;width: 100%;color: white;text-align: center;border-radius: 0 0 10px 10px;height: 30%;">
+          服务在线比率
+        </div>
+      </div>
+    </div>
+    <div style="margin-left: 1%;width: 98%;display: flex;margin-top: 1%" :style="{'height':heightAll*0.38+'px'}">
+      <el-card shadow="always" class="box-card" style="width:60%;height: 100%;">
+        <div style="width: 100%;display: flex;justify-content: flex-end;">
+          <el-select
+            v-model="value"
+            class="m-2"
+            placeholder="今日"
+            style="width: 20%;"
+          >
+            <el-option
+              v-for="item in options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </div>
+        <div id="bt1"  style="width: 100%;margin-left: 0%;margin-top: 1%;;" :style="{'height':heightAll*0.3+'px'}">
+
+        </div>
+      </el-card>
+      <el-card shadow="always" class="box-card" style="width:39%;height: 100%;margin-left: 1%;">
+        <div style="display: flex;align-items: center;font-weight: bold;width: 100%;">
+          <div style="">预报服务综合评价 </div>
+        </div>
+        <div id="bt2"  style="width: 98%;margin-left: 1%;margin-top: 1%;" :style="{'height':heightAll*0.3+'px'}">
+
+        </div>
+      </el-card>
+    </div>
+  </div>
 </template>
 <script setup>
+import { ref, onMounted } from 'vue';
+import * as echarts from 'echarts';
+const listHelp = [
+]
+const heightAll = window.innerHeight
+const seledMo = ['primary','plain','plain','plain','plain','plain','plain']
+
+function inintChartTop1(){
+  var chartDom = document.getElementById('top1');
+  var myChart = echarts.init(chartDom);
+  var option;
+
+  option = {
+    legend: {
+      data: ['长江委', '黄河委', '珠江委', '中国水科院', '淮河委'],
+      top:'90%'
+    },
+    xAxis: {
+      splitLine: { show: false }
+      // type: 'category',
+      // data: ['长江委 ', '黄河委', '珠江委', '中国水科院', '淮河委']
+    },
+    yAxis: {
+      type: 'value',
+      splitLine: { show: false }
+    },
+    series: [
+      {
+      name: '长江委',
+      type: 'line',
+      color:'#337ecc',
+      data: [[0,10],[2,13],[4,20],[6,12],[8,12.5],[10,18],[12,58],[14,21],[16,12]],
+      smooth: true
+    },
+    {
+      name: '黄河委',
+      type: 'line',
+      smooth: true,
+      color:'#79bbff',
+      data: [[0,10],[2,15],[4,25],[6,16],[8,18],[10,8],[12,55],[14,60],[16,54]]
+    },
+    {
+      name: '珠江委',
+      type: 'line',
+      color:'#a0cfff',
+      smooth: true,
+      data:[[0,10],[2,20],[4,20],[6,12],[8,17],[10,25],[12,15],[14,45],[16,5]]
+    },
+    {
+      name: '中国水科院',
+      type: 'line',
+      smooth: true,
+      color:"#95d475",
+      data: [[0,10],[2,44],[4,20],[6,12],[8,14],[10,10],[12,34],[14,13],[16,45]]
+    },
+    {
+      name: '淮河委',
+      smooth: true,
+      type: 'line',
+      color:'#e1f3d8',
+      data: [[0,10],[2,31],[4,20],[6,12],[8,20],[10,20],[12,45],[14,75],[16,11]]
+    }
+    ]
+  };
+  
+  option && myChart.setOption(option);
+
+}
+function initChartTop2(){
+  var chartDom = document.getElementById('top2');
+  var myChart = echarts.init(chartDom);
+  var option;
+
+  option = {
+    tooltip: {
+      trigger: 'item'
+    },
+    legend: {
+      top: '90%',
+      left: 'center'
+    },
+    series: [
+      {
+        type: 'pie',
+        radius: ['50%', '70%'],
+        avoidLabelOverlap: false,
+        label: {
+          show: true,
+          position: 'outside',
+          formatter: '{c}',
+        },  
+        labelLine: {
+          show: true
+        },
+        color:['#80D0F8','#3384C2','#14D3D4','#69F3C0'],
+        data: [
+          { value: 200, name: '新安江' },
+          { value: 250, name: '陕北模型' },
+          { value: 30, name: '需水模型' },
+          { value: 300, name: '一维水动力' },
+        ]
+      }
+    ]
+  };
+  option && myChart.setOption(option);
+}
+function initChartTop3(){
+  var chartDom = document.getElementById('top3');
+  var myChart = echarts.init(chartDom);
+  var option;
+
+  option = {
+    tooltip: {
+      trigger: 'item'
+    },
+    legend: {
+      top: '90%',
+      left: 'center'
+    },
+    series: [
+      {
+        type: 'pie',
+        radius: ['50%', '70%'],
+        avoidLabelOverlap: false,
+        label: {
+          show: true,
+          position: 'outside',
+          formatter: '{c}',
+        },  
+        labelLine: {
+          show: true
+        },
+        color:['#529b2e','#95d475','#b3e19d','#d1edc4'],
+        data: [
+          { value: 200, name: '洪水演进' },
+          { value: 250, name: '工程' },
+          { value: 30, name: '需水模型' },
+          { value: 300, name: '一维水动力' },
+        ]
+      }
+    ]
+  };
+  option && myChart.setOption(option);
+}
+function initChartBottom1(){
+  var chartDom = document.getElementById('bt1');
+  var myChart = echarts.init(chartDom);
+  var option;
+
+  option = {
+    xAxis: {
+      type: 'category',
+      splitLine: { show: false },
+      data: ['新安江模型', '一维水动力模型', '二维水动力模型', '降雨预报模型', 'API模型', '大数据洪涝预报模型']
+    },
+    yAxis: {
+      type: 'value',
+      splitLine: { show: false }
+    },
+    series: [
+      {
+        data: [123, 103, 89, 89, 56, 46],
+        type: 'bar',
+        label: { 
+      show: true,   // 启用标签
+      position: 'top' // 位置：顶部（可选 'inside'、'bottom' 等）
+    }
+      }
+    ]
+  };
+
+  option && myChart.setOption(option);
+}
+function initChartBottom2(){
+  var chartDom = document.getElementById('bt2');
+var myChart = echarts.init(chartDom);
+var option;
+
+option = {
+  radar: {
+    // shape: 'circle',
+    indicator: [
+      { name: 'Sales', max: 6500 },
+      { name: 'Administration', max: 16000 },
+      { name: 'Information Technology', max: 30000 },
+      { name: 'Customer Support', max: 38000 },
+      { name: 'Development', max: 52000 },
+      { name: 'Marketing', max: 25000 }
+    ]
+  },
+  series: [
+    {
+      name: 'Budget vs spending',
+      type: 'radar',
+      data: [
+        {
+          value: [4200, 3000, 20000, 35000, 50000, 18000],
+          name: 'Allocated Budget'
+        },
+        {
+          value: [5000, 14000, 28000, 26000, 42000, 21000],
+          name: 'Actual Spending'
+        }
+      ]
+    }
+  ]
+};
+
+option && myChart.setOption(option);
+}
+onMounted(() => {
+  inintChartTop1()
+  initChartTop2()
+  initChartTop3()
+  initChartBottom1()
+  initChartBottom2()
+});
 </script>
 <style scoped lang="scss">
+.boxShadow{
+  box-shadow: 
+    -8px 0 15px -10px rgba(0, 0, 0, 0.1), /* 左侧阴影 */
+    8px 0 15px -10px rgba(0, 0, 0, 0.1);  /* 右侧阴影 */
+  transition: box-shadow 0.3s ease;
 
+}
 </style>

ruoyi-ui/src/views/monitor/task/index.vue

@@ -1,10 +1,235 @@
 <template>
-  <div>
-    任务管理
+  <div style="width: 100%;background-color: #F7F7F7;padding-top: 1%;" :style="{'height':heightAll+'px'}">
+    <div style="width: 98%;margin-left: 1%;background-color: white;padding-top: 0.5%;" :style="{'height':heightAll*0.5+'px'}">
+      <div style="display: flex;align-items: center;margin-left: 1%">
+        <div style="width: 3px;background-color: #5B8DB6;height: 15px;"></div>
+        <div style="font-weight: bold;margin-left: 0.2%;">方案列表</div>
+      </div>
+      <div style="width: 100%;display: flex;margin-top: 1%;margin-left: 2%;">
+        <div style="width: 20%;display: flex;align-items: center;">
+          <div style="font-weight: bold;">
+            方案名称
+          </div>
+          <el-input style="width: 50%;margin-left: 1%;" v-model="input" placeholder="请输入名称" />
+        </div>
+        <div style="width: 20%;display: flex;align-items: center;margin-left: -5%;">
+          <div style="font-weight: bold;">
+            服务类型
+          </div>
+          <el-select
+            v-model="value"
+            class="m-2"
+            placeholder=""
+            style="width: 50%;margin-left: 1%;"
+          >
+            <el-option
+              v-for="item in options"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </div>
+        <div style="width: 20%;display: flex;align-items: center;margin-left: -5%;">
+          <div style="font-weight: bold;">
+            模型名称
+          </div>
+          <el-input style="width: 50%;margin-left: 1%;" v-model="input" placeholder="请输入名称" />
+        </div>
+        <div style="margin-left: -4%;">
+          <el-button type="primary" plain>重置</el-button>
+          <el-button type="primary">查询</el-button>
+        </div>
+      </div>
+      <div style="margin-left: 2%;margin-top: 1%;">
+        <el-table
+          ref="multipleTableRef"
+          :data="tableData"
+          border 
+          :cell-style="{ textAlign: 'center',backgroundcolor:'#F7F7F7' }"
+          :header-cell-style="{ textAlign: 'center' }"
+          style="width: 100%"
+          :max-height="tableheight"
+          :row-style="{ height: '45px' }"
+          @selection-change="handleSelectionChange"
+        >
+          <el-table-column type="selection" width="55" />
+          <el-table-column label="序号" type="index" width="55"/>
+          <el-table-column property="name" label="方案名称"/>
+          <el-table-column property="mom" label="模型名称"/>
+          <el-table-column property="fu" label="服务类型"/>
+          <el-table-column property="ji" label="计算进度"/>
+          <el-table-column property="ren" label="任务状态">
+            <template #default="scope">
+              <div v-if="scope.row.ren=='1'" style="color: #95d475;">正常</div>
+              <div v-if="scope.row.ren=='0'" style="color: red;">故障</div>
+            </template>
+          </el-table-column>
+        </el-table>
+        <div style="float: right;margin-top: 1%;margin-right: 1%;">
+          <el-pagination
+            small
+            background
+            layout="prev, pager, next"
+            :total="50"
+            class="mt-4"
+          />
+        </div>
+      </div>
+    </div>
+    <div style="margin-top: 1%;width: 98%;margin-left: 1%;display: flex;" :style="{'height':heightAll*0.5+'px'}">
+      <div style="background-color: white;width: 49.5%;" :style="{'height':heightAll*0.5+'px'}">
+        <div style="display: flex;align-items: center;margin-left: 1%;margin-top: 1%;">
+          <div style="width: 3px;background-color: #5B8DB6;height: 15px;"></div>
+          <div style="font-weight: bold;margin-left: 0.2%;margin-left: 1%;">模型计算进度</div>
+        </div>
+        <div style="display: flex;width: 100%;margin-top:2%;margin-left: 2%;font-size: 14.5px;">
+          <div style="display: flex;width: 30%;">
+            <div style="font-weight: bold;">
+              方案编号:
+            </div>
+            <div>
+              潢川
+            </div>
+          </div>
+          <div style="display: flex;width: 30%;">
+            <div style="font-weight: bold;">
+              模型名称:
+            </div>
+            <div>
+              新安江-二维水动力模型
+            </div>
+          </div>
+        </div>
+        <div style="display: flex;width: 100%;margin-top:3%;margin-left: 2%;font-size: 14.5px;align-items: center;">
+          <div style="display: flex;width: 30%;align-items: center;">
+            <div style="font-weight: bold;">
+              预计剩余时间:
+            </div>
+            <div style="margin-left: 5%;">
+              32 min
+            </div>
+          </div>
+          <div style="display: flex;width: 30%;align-items: center;">
+            <div style="font-weight: bold;">
+              历史调用次数:
+            </div>
+            <div style="margin-left: 5%;">
+              59 次
+            </div>
+          </div>
+          <div style="display: flex;width: 30%;align-items: center;">
+            <div style="font-weight: bold;">
+              计算准确率:
+            </div>
+            <div style="margin-left: 5%;">
+              80 %
+            </div>
+          </div>
+        </div>
+        <div style="width: 100%;display: flex;margin-left: 2%;margin-top: 6%;font-weight: bold;font-size: 14.5px;align-items: center;">
+          <div style="width: 20%">
+            新安江模型
+          </div>
+          <div style="width: 60%;">
+            <el-progress  :stroke-width="10" :percentage="50" ></el-progress>
+          </div>
+        </div>
+        <div style="width: 100%;display: flex;margin-left: 2%;margin-top: 6%;;font-size: 14.5px;align-items: center;">
+          <div style="width: 20%;font-weight: bold">
+            二维水动力模型
+          </div>
+          <div style="width: 60%;">
+            运行中...
+          </div>
+        </div>
+      </div>
+      <div style="background-color: white;width: 49.5%;margin-left: 1%;" :style="{'height':heightAll*0.5+'px'}">
+        <div style="display: flex;align-items: center;margin-left: 1%;margin-top: 1%;">
+          <div style="width: 3px;background-color: #5B8DB6;height: 15px;"></div>
+          <div style="font-weight: bold;margin-left: 0.2%;margin-left: 1%;">计算各节点进度</div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 <script setup>
+import { ref, onMounted } from 'vue';
+
+const format = (percentage) => (percentage === 100 ? 'Full' : `${percentage}%`)
+const tableData = [
+  {
+    name:'横川',
+    mom:'新安江-二维水动力模型',
+    fu:'业务流程',
+    ji:'50%',
+    ren:'1'
+  },
+  {
+    name:'北庙集',
+    mom:'新安江-二维水动力模型',
+    fu:'业务流程',
+    ji:'50%',
+    ren:'1'
+  },
+  {
+    name:'息县-王家坝河道',
+    mom:'分布式水文模型',
+    fu:'业务流程',
+    ji:'50%',
+    ren:'1'
+  },
+  {
+    name:'黄河中下游',
+    mom:'CASC2D-二维水动力模型',
+    fu:'业务流程',
+    ji:'30%(暂停)',
+    ren:'1'
+  },
+  {
+    name:'屯溪',
+    mom:'新安江-二维水动力模型',
+    fu:'业务流程',
+    ji:'65%(停用)',
+    ren:'0'
+  },
+  {
+    name:'屯溪',
+    mom:'HBV-二维水动力模型',
+    fu:'业务流程',
+    ji:'100%',
+    ren:'1'
+  },
+]
+const heightAll = window.innerHeight
+const valueHelpSel = '';
+const tableheight = window.innerHeight*0.5
+const options = [
+  {
+    value: 'Option1',
+    label: 'Option1',
+  },
+  {
+    value: 'Option2',
+    label: 'Option2',
+  },
+  {
+    value: 'Option3',
+    label: 'Option3',
+  },
+  {
+    value: 'Option4',
+    label: 'Option4',
+  },
+  {
+    value: 'Option5',
+    label: 'Option5',
+  },
+]
+const seledMo = ['primary','plain','plain','plain','plain','plain','plain']
 </script>
 <style scoped lang="scss">
-
+.el-table .el-table__row td {
+  height: 60px !important; /* 行高 */
+}
 </style>