6.5

src/main.js

@@ -11,13 +11,14 @@ import './style/index.css' // 引入整个Element样式
 import '@/utils/flexible'
 import "normalize.css/normalize.css";//重置样式
 import directive from '@/utils/directive'
-
+import {registerEcharts} from "@/plugins/echarts"
 
 // import mitt from 'mitt'
 
 //import '"element-plus/dist/index.css'
 //创建一个路由.user(router)
 createApp(App)
+registerEcharts(app)
     .use(router)
     .use(ElementUI)
     .use(createPinia)

src/plugins/echarts.ts

@@ -0,0 +1,36 @@
+// vue-echarts
+import ECharts from 'echarts'
+import { use } from "echarts/core"
+import {
+    CanvasRenderer
+  } from 'echarts/renderers'
+  import {
+    BarChart,PieChart,MapChart,EffectScatterChart,LineChart 
+  } from 'echarts/charts'
+  import {
+    GridComponent,
+    TitleComponent,
+    TooltipComponent,
+    LegendComponent,
+    DatasetComponent,
+    VisualMapComponent,
+    GeoComponent,
+    MarkPointComponent
+  } from 'echarts/components'
+
+  use([
+    CanvasRenderer,
+    BarChart,PieChart,MapChart,EffectScatterChart,LineChart,
+    GridComponent,
+    LegendComponent,
+    TooltipComponent,
+    TitleComponent,
+    DatasetComponent,
+    VisualMapComponent,
+    GeoComponent,
+    MarkPointComponent
+  ])
+
+  export const registerEcharts= (app:any)=>{
+    app.component('v-chart', ECharts)
+  }

src/style/index.css

@@ -236,4 +236,55 @@ text-transform: none;
     top: -20px;
     left: 20px
 
+  }
+  .threelist{
+    display: flex;
+  }
+  .floatitem .el-image{
+   margin: 0 10px !important;
+  }
+  .heder_tabs .el-tab-pane{
+    border-bottom: 1px solid #7BB0E8;
+  }
+  .opt_moitor{
+    width: 340px;
+    height: calc(100vh - 184px);
+    background: #FFFFFF;
+    box-shadow: 2px 0px 11px 0px rgba(0,0,0,0.12);
+    border-radius: 10px 10px 10px 10px;
+    float: right;
+    padding: 12px;
+  }
+  .echartitem{
+    width: 100%;
+    height: auto;
+    background: #FFFFFF;
+border-radius: 0px 0px 0px 0px;
+border: 1px solid rgba(0,0,0,0.3);
+position: relative;
+  }
+  .sev{
+    margin-top: 50px;
+  }
+  .magright{
+    margin-right: 40px !important;
+  }
+  .disflex{
+    display: flex;
+  }
+  .sev_ruwu .el-input{
+    width: 100%;
+    height: 31px;
+    padding:0 10px;
+  }
+  .sev_ruwu .el-select{
+    width: 236px;
+  }
+  .sev_ruwu .el-button+.el-button {
+    background-color: #F5FAFF !important;
+    border-radius: 4px 4px 4px 4px;
+  }
+  .btncolor{
+    background-color: #F5FAFF !important;
+    width: 150px !important;
   }

src/views/echart/index.vue

@@ -0,0 +1,24 @@
+<template>
+    <!-- 优化监控 -->
+<h3 class="opt_tltie">时间历程曲线</h3>
+<!-- 折线图 -->
+  <div>
+  <div class="echartitem">
+      <div id="line" style="width: 340px;height:.9375rem;"></div>
+  </div>
+  </div>
+</template>
+<script setup>
+import { ref, onMounted, reactive, } from "vue";
+import { RouterView, RouterLink } from "vue-router"
+import { request, uploadFile } from "@/utils/request";
+import { ElMessage, ElButton, ElDialog, ElSelect } from 'element-plus'
+import * as echarts from 'echarts'
+let emit = defineEmits(['',])
+
+
+</script>
+<style lang="scss" scoped>
+
+</style>
+

src/views/echart/optimize_monitor.vue

@@ -0,0 +1,83 @@
+<template>
+      <!-- 优化监控 -->
+<h3 class="opt_tltie">时间历程曲线</h3>
+<!-- 折线图 -->
+    <div>
+    <div class="echartitem">
+        <div id="line" style="width: 100%;height:170px;"></div>
+    </div>
+    </div>
+  </template>
+  <script setup>
+  import { ref, onMounted, reactive, } from "vue";
+import { RouterView, RouterLink } from "vue-router"
+import { request, uploadFile } from "@/utils/request";
+import { ElMessage, ElButton, ElDialog, ElSelect } from 'element-plus'
+import * as echarts from 'echarts'
+  let emit = defineEmits(['',])
+onMounted(() => {
+    linechart()
+  })
+  const linechart= ()=>{
+    var chartDom = document.getElementById('line');
+   let myChart = echarts.init(chartDom);
+ let  option = {
+        title: {
+        //  text: 'Stacked Line'
+        },
+        tooltip: {
+            trigger: 'axis'
+        },
+        legend: {
+            data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
+        },
+        grid: {
+            show: false,
+            left: '3%',
+            right: '4%',
+            bottom: '3%',
+            containLabel: true
+        },
+        toolbox: {
+            feature: {
+            saveAsImage: {}
+            }
+        },
+        xAxis: {
+            type: 'category',
+            boundaryGap: false,
+            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
+        },
+        yAxis: {
+            type: 'value'
+        },
+        series: [
+            {
+            name: 'Email',
+            type: 'line',
+            stack: 'Total',
+            data: [120, 132, 101, 134, 90, 230, 210]
+            },
+            {
+            name: 'Union Ads',
+            type: 'line',
+            stack: 'Total',
+            data: [220, 182, 191, 234, 290, 330, 310]
+            }
+        
+        ]
+        };
+        option && myChart.setOption(option);
+
+        window.onresize = function() {
+            myChart.resize()
+
+      }
+    }
+    
+  </script>
+  <style lang="scss" scoped>
+ 
+  </style>
+ 
+  

src/views/echart/six_bottom.vue

@@ -0,0 +1,110 @@
+<template>
+    <!-- 优化监控 -->
+<h3 class="opt_tltie">散点图</h3>
+<!-- 折线图 -->
+  <div>
+  <div class="echartitem">
+    <div id="linesan" style="width: 100%;height:240px;"></div>
+  </div>
+  </div>
+</template>
+<script setup>
+import { ref, onMounted, reactive, } from "vue";
+import { RouterView, RouterLink } from "vue-router"
+import { request, uploadFile } from "@/utils/request";
+import { ElMessage, ElButton, ElDialog, ElSelect } from 'element-plus'
+import * as echarts from 'echarts'
+import {graphic} from "echarts/core"
+let emit = defineEmits(['',])
+const option = ref({});
+let dateList=ref(['01:10:00', '03:10:33', '06:00:00', '12:25:00', '21:36:00', '23:00']);
+let dataSource1 = ref([[10, 20], [15, 35], [20, 50], [25, 65]]);
+let dataSource2 = ref([[10, 40], [35, 80], [40, 75], [45, 85]]);
+const getData = () => {
+  setOption(dateList.value, numList.value, numList2.value);
+};
+onMounted(() => {
+  setOptionfunc()
+})
+
+const setOptionfunc =async () => {
+    var chartDom = document.getElementById('linesan');
+   let myChart = echarts.init(chartDom);
+ option.value = {
+    legend: {
+        // 开启图例
+        show: true,
+        // 图例的位置
+        data: ['数据源1', '数据源2']
+    },
+    xAxis: {
+        splitLine: {//去掉网格线
+            show: false,
+            lineStyle: {
+              color: "rgba(31,99,163,.2)",
+            },
+          }, 
+          axisLine: {//Y轴线
+            show: true, 
+            lineStyle: {
+                color: 'rgba(31,99,163,.3)', // 线的颜色
+                width: 2, // 线宽
+                type: 'solid' // 线的类型，默认为实线，可选：'solid', 'dashed', 'dotted'
+            }
+            },
+            axisLabel: {
+            color: "#7EB7FD",
+            fontWeight: "500",
+          },
+    },
+    yAxis: {
+        axisTick: {
+            show: false,
+        },
+        axisLabel: {
+            color: "#7EB7FD",
+            fontWeight: "500",
+          },
+        splitLine: {//去掉网格线
+            show: false,
+            lineStyle: {
+              color: "rgba(31,99,163,.2)",
+            },
+          }, 
+          axisLine: {//Y轴线
+            show: true, 
+            lineStyle: {
+                color: 'rgba(31,99,163,.3)', // 线的颜色
+                width: 2, // 线宽
+                type: 'solid' // 线的类型，默认为实线，可选：'solid', 'dashed', 'dotted'
+            }
+},
+    },
+    series: [
+        {
+            name: '数据源1',
+            type: 'scatter',
+            data: dataSource1.value,
+            itemStyle: {color: '#2267B1'}
+        },
+        {
+            name: '数据源2',
+            type: 'scatter',
+            data: dataSource2.value,
+            itemStyle: {color: '#FEA800 '}
+        }
+    ]
+}
+      option.value && myChart.setOption(option.value);
+
+      window.onresize = function() {
+          myChart.resize()
+
+    }
+  }
+  
+</script>
+<style lang="scss" scoped>
+
+</style>
+

src/views/echart/six_top.vue

@@ -0,0 +1,286 @@
+<template>
+    <!-- 优化监控 -->
+<h3 class="opt_tltie">变量关系图</h3>
+<!-- 折线图 -->
+  <div>
+  <div class="echartitem">
+    <div id="line" style="width: 100%;height:240px;"></div>
+    <!-- <div ref="EcharRef" :option="option" style="width: 300px; height: 300px"></div> -->
+      <!-- <div id="crosschart" style="width: 100%;height:170px;"></div> -->
+   
+  </div>
+  </div>
+</template>
+<script setup>
+import { ref, onMounted, reactive, } from "vue";
+import { RouterView, RouterLink } from "vue-router"
+import { request, uploadFile } from "@/utils/request";
+import { ElMessage, ElButton, ElDialog, ElSelect } from 'element-plus'
+import * as echarts from 'echarts'
+import {graphic} from "echarts/core"
+let emit = defineEmits(['',])
+const option = ref({});
+let dateList=ref(['01:10:00', '03:10:33', '06:00:00', '12:25:00', '21:36:00', '23:00']);
+let numList=ref([202, 890, 15, 370, 134, 670]);
+let numList2=ref([680, 466, 826, 849, 670, 398]);
+const getData = () => {
+  setOption(dateList.value, numList.value, numList2.value);
+   
+//   currentGET("rightTop", {}).then((res) => {
+//     console.log("报警次数 ", res);
+//     if (res.success) {
+//       setOption(res.data.dateList, res.data.numList, res.data.numList2);
+//     } else {
+//       window["$message"]({
+//         text: res.msg,
+//         type: "warning",
+//       });
+//     }
+//   });
+};
+onMounted(() => {
+  setOptionfunc()
+})
+
+const setOptionfunc =async () => {
+    var chartDom = document.getElementById('line');
+   let myChart = echarts.init(chartDom);
+ option.value = {
+    legend: {
+        // 开启图例
+        show: true,
+        // 图例的位置
+        data: ['变量1', '变量2']
+    },
+        xAxis: {
+          type: "category",
+          data: dateList.value,
+          boundaryGap: false, // 不留白，从原点开始
+          splitLine: {
+            show: false,
+            lineStyle: {
+              color: "rgba(31,99,163,.2)",
+            },
+          },
+          axisLine: {
+            // lineStyle: {
+            //   color: "rgba(31,99,163,.1)",
+            // },
+            show: true, 
+            lineStyle: {
+                color: 'rgba(31,99,163,.3)', // 线的颜色
+                width: 2, // 线宽
+                type: 'solid' // 线的类型，默认为实线，可选：'solid', 'dashed', 'dotted'
+            }
+          },
+        //   axisLine: {
+        //     show:true,
+        //     lineStyle: {
+        //       color: "rgba(31,99,163,.1)",
+        //     },
+        //   },
+          axisLabel: {
+            color: "#7EB7FD",
+            fontWeight: "500",
+          },
+        },
+        yAxis: {
+          type: "value",
+          axisTick: {
+            show: false,
+            // lineStyle: {
+            //     color: 'red', // 设置刻度线颜色
+            //     width: 2      // 设置刻度线宽度
+            // }
+        },
+          splitLine: {
+            show: false,
+            lineStyle: {
+              color: "rgba(31,99,163,.2)",
+            },
+          },
+          axisLine: {
+            // lineStyle: {
+            //   color: "rgba(31,99,163,.1)",
+            // },
+            show: true, 
+            lineStyle: {
+                color: 'rgba(31,99,163,.3)', // 线的颜色
+                width: 2, // 线宽
+                type: 'solid' // 线的类型，默认为实线，可选：'solid', 'dashed', 'dotted'
+            }
+          },
+          axisLabel: {
+            color: "#7EB7FD",
+            fontWeight: "500",
+          },
+        },
+        tooltip: {
+          trigger: "axis",
+          backgroundColor: "rgba(0,0,0,.6)",
+          borderColor: "rgba(147, 235, 248, .8)",
+          textStyle: {
+            color: "#FFF",
+          },
+        },
+        grid: {
+          //布局
+          show: false,
+          left: "10px",
+          right: "30px",
+          bottom: "10px",
+          top: "32px",
+          containLabel: true,
+        //  borderColor: "#1F63A3",
+        },
+        series: [
+          {
+            data: numList.value,
+            type: "line",
+            smooth: true,
+            symbol: "none", //去除点
+            name: "变量1",
+            color: "rgba(252,144,16,.7)",
+            areaStyle: {
+                //右，下，左，上
+                color: new graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(252,144,16,.7)",
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(252,144,16,.0)",
+                    },
+                  ],
+                  false
+                ),
+            },
+            // markPoint: {
+            //   data: [
+            //     {
+            //       name: "最大值",
+            //       type: "max",
+            //       valueDim: "y",
+            //       symbol: "rect",
+            //       symbolSize: [60, 26],
+            //       symbolOffset: [0, -20],
+            //       itemStyle: {
+            //         color: "rgba(0,0,0,0)",
+            //       },
+            //       label: {
+            //         color: "#FC9010",
+            //         backgroundColor: "rgba(252,144,16,0.1)",
+            //         borderRadius: 6,
+            //         padding: [7, 14],
+            //         borderWidth: 0.5,
+            //         borderColor: "rgba(252,144,16,.5)",
+            //         formatter: "报警1：{c}",
+            //       },
+            //     },
+            //     {
+            //       name: "最大值",
+            //       type: "max",
+            //       valueDim: "y",
+            //       symbol: "circle",
+            //       symbolSize: 6,
+            //       itemStyle: {
+            //         color: "#FC9010",
+            //         shadowColor: "#FC9010",
+            //         shadowBlur: 8,
+            //       },
+            //       label: {
+            //         formatter: "",
+            //       },
+            //     },
+            //   ],
+            // },
+          },
+          {
+            data: numList2.value,
+            type: "line",
+            smooth: true,
+            symbol: "none", //去除点
+            name: "变量2",
+            color: "rgba(34,103,177,1)",
+            areaStyle: {
+                //右，下，左，上
+                color: new graphic.LinearGradient(
+                  0,
+                  0,
+                  0,
+                  1,
+                  [
+                    {
+                      offset: 0,
+                      color: "rgba(34,103,177,1)",
+                    },
+                    {
+                      offset: 1,
+                      color: "rgba(34,103,177,.0)",
+                    },
+                  ],
+                  false
+                ),
+            },
+            // markPoint: {
+            //   data: [
+            //     {
+            //       name: "最大值",
+            //       type: "max",
+            //       valueDim: "y",
+            //       symbol: "rect",
+            //       symbolSize: [60, 26],
+            //       symbolOffset: [0, -20],
+            //       itemStyle: {
+            //         color: "rgba(0,0,0,0)",
+            //       },
+            //       label: {
+            //         color: "#09CAF3",
+            //         backgroundColor: "rgba(9,202,243,0.1)",
+
+            //         borderRadius: 6,
+            //         borderColor: "rgba(9,202,243,.5)",
+            //         padding: [7, 14],
+            //          formatter: "报警2：{c}",
+            //         borderWidth: 0.5,
+            //       },
+            //     },
+            //     {
+            //       name: "最大值",
+            //       type: "max",
+            //       valueDim: "y",
+            //       symbol: "circle",
+            //       symbolSize: 6,
+            //       itemStyle: {
+            //         color: "#09CAF3",
+            //         shadowColor: "#09CAF3",
+            //         shadowBlur: 8,
+            //       },
+            //       label: {
+            //         formatter: "",
+            //       },
+            //     },
+            //   ],
+            // },
+          },
+        ],
+      };
+      option.value && myChart.setOption(option.value);
+
+      window.onresize = function() {
+          myChart.resize()
+
+    }
+  }
+  
+</script>
+<style lang="scss" scoped>
+
+</style>
+

src/views/index.vue

@@ -111,10 +111,64 @@
                   </div>
                 </div>
               </el-tab-pane>
-              <el-tab-pane label="优化运行" name="Three">优化运行</el-tab-pane>
-              <el-tab-pane label="优化结果" name="Six">优化结果</el-tab-pane>
-              <el-tab-pane label="数据库管理" name="Seven">数据库管理</el-tab-pane>
-              <el-tab-pane label="帮助" name="eight">帮助</el-tab-pane>
+              <el-tab-pane label="优化运行" name="Three">
+                <div class="imgzong">
+                  <div class="listitem lbg_color3 bkcolor3 threelist" >
+                    <div class="item2 floatitem" v-for="(item, index) in Threelist" :key="'Three-' + index"
+                    :class="{ activeOrange: active == 'Three-' + index }"
+                    @click="clickgeometry($event, index, 'Three-' + index)">
+                      <el-image :src="getImgPath(item.url)" fit="cover" />
+                      <span>{{ item.titlie }}</span>
+                    </div>
+                  </div>
+                  <div class="listitem lbg_color3 bkcolor3" v-for="(item, index) in Threelist1" :key="'Three1-' + index"
+                    :class="{ activeOrange: active == 'Three1' + index }"
+                    @click="clickgeometry($event, index, 'Three1' + index)">
+                    <div class="item2 ">
+                      <el-image :src="getImgPath(item.url)" fit="cover" />
+                      <span>{{ item.titlie }}</span>
+                    </div>
+                  </div>
+                </div>
+              
+              </el-tab-pane>
+              <el-tab-pane label="优化结果" name="Six">
+                <div class="imgzong">
+                  <!-- <button @click="etImgPath()"></button> -->
+                  <div class="listitem lbg_color3 bkcolor3" v-for="(item, index) in Sixlist" :key="'Six' + index"
+                    :class="{ activeOrange: active == 'Six' + index }"
+                    @click="clickgeometry($event, index, 'Six' + index)">
+                    <div class="item2 ">
+                      <el-image :src="getImgPath(item.url)" fit="cover" />
+                      <span>{{ item.titlie }}</span>
+                    </div>
+                  </div>
+                </div>
+              </el-tab-pane>
+              <el-tab-pane label="数据库管理" name="Seven">
+                <div class="imgzong">
+                  <div class="listitem lbg_color3 bkcolor3" v-for="(item, index) in Sevenlist" :key="'Seven' + index"
+                    :class="{ activeOrange: active == 'Seven' + index }"
+                    @click="clickgeometry($event, index, 'Seven' + index)">
+                    <div class="item2 ">
+                      <el-image :src="getImgPath(item.url)" fit="cover" />
+                      <span>{{ item.titlie }}</span>
+                    </div>
+                  </div>
+                </div>
+              </el-tab-pane>
+              <el-tab-pane label="帮助" name="eight">
+                <div class="imgzong">
+                  <div class="listitem lbg_color3 bkcolor3" v-for="(item, index) in eightlist" :key="'eight' + index"
+                    :class="{ activeOrange: active == 'eight' + index }"
+                    @click="clickgeometry($event, index, 'eight' + index)">
+                    <div class="item2 ">
+                      <el-image :src="getImgPath(item.url)" fit="cover" />
+                      <span>{{ item.titlie }}</span>
+                    </div>
+                  </div>
+                </div>
+              </el-tab-pane>
             </el-tabs>
           </div>
           <!-- 新建任务 -->
@@ -591,6 +645,121 @@
               </div>
             </template>
           </el-dialog>
+          <!-- 任务管理 -->
+          <el-dialog v-model="dialog.task" align-center :modal="false" :close-on-click-modal="true"
+            :append-to-body="true" draggable :fullscreen="false" :modal-append-to-body="false" modal-class="summary-dlg"
+            :before-close="handleClose" width="800px" class="dialog_class bgcolor tianjia">
+
+            <template #header="{ titleId, titleClass }">
+              <div class="my-header ">
+                <el-image :src="getImgPath('s11.png')" fit="contain"></el-image>
+                <h4 :id="titleId" :class="titleClass">任务管理</h4>
+              </div>
+            </template>
+            <div>
+              
+              <el-table :data="tasktable" stripe style="width: 100%">
+                  <el-table-column prop="id" label="任务编号"  />
+                  <el-table-column prop="name" label="任务名称" />
+                  <el-table-column prop="state" label="任务类型"/>
+                  <el-table-column prop="time" label="备注" />
+                </el-table>
+                <div class="sev_ruwu sev">
+                  <div class="disflex"> 
+                  <el-form-item label="关键字：">
+                  <el-select   v-model="seval4" :suffix-icon="CaretBottom" placeholder="请选择">
+                          <el-option
+                            v-for="item in sevlist"
+                            :key="item.value"
+                            :label="item.label"
+                            :value="item.value">
+                          </el-option>
+                        </el-select>
+                </el-form-item>
+                <el-input v-model="name" maxlength="18"
+                    oninput="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,'')" class="w-50 m-2"
+                    placeholder="请输入关键字" />
+                    <el-button class="btncolor">查询</el-button>
+                    <el-button class="btncolor">添加</el-button>
+                    <el-button class="btncolor">删除</el-button>
+                    <el-button class="btncolor">提交</el-button>
+                </div>
+              </div>
+            </div>
+            <template #footer>
+              <div class="dialog-footer">
+                <el-button @click="dialog.task = false">取消</el-button>
+                <el-button type="primary" @click="dialog.task = false">
+                  确定
+                </el-button>
+              </div>
+            </template>
+          </el-dialog>
+           <!-- 任务管理 -->
+           <el-dialog v-model="dialog.guanli" align-center :modal="false" :close-on-click-modal="true"
+            :append-to-body="true" draggable :fullscreen="false" :modal-append-to-body="false" modal-class="summary-dlg"
+            :before-close="handleClose" width="800px" class="dialog_class bgcolor tianjia">
+
+            <template #header="{ titleId, titleClass }">
+              <div class="my-header ">
+                <el-image :src="getImgPath('s11.png')" fit="contain"></el-image>
+                <h4 :id="titleId" :class="titleClass">任务管理</h4>
+              </div>
+            </template>
+            <div>
+              <div class="sev_ruwu">
+                  <div class="disflex"> 
+                  <el-form-item label="关键字：">
+                  <el-select   v-model="seval4" :suffix-icon="CaretBottom" placeholder="请选择">
+                          <el-option
+                            v-for="item in sevlist"
+                            :key="item.value"
+                            :label="item.label"
+                            :value="item.value">
+                          </el-option>
+                        </el-select>
+                </el-form-item>
+                <el-input v-model="name" maxlength="18"
+                    oninput="value=value.replace(/[^\a-\z\A-\Z0-9\u4E00-\u9FA5]/g,'')" class="w-50 m-2"
+                    placeholder="请输入关键字" />
+                    <el-checkbox class="magright" label="范围"  v-model="checkbox" />
+                    <el-button class="btncolor">查询</el-button>
+                </div>
+              </div>
+              <el-table :data="tasktable" stripe style="width: 100%">
+                  <el-table-column prop="id" label="任务编号"  />
+                  <el-table-column prop="name" label="任务名称" />
+                  <el-table-column prop="state" label="任务类型"/>
+                  <el-table-column prop="time" label="备注" />
+                </el-table>
+               
+            </div>
+            <template #footer>
+              <div class="dialog-footer">
+                <el-button @click="dialog.guanli = false">取消</el-button>
+                <el-button type="primary" @click="dialog.guanli = false">
+                  确定
+                </el-button>
+              </div>
+            </template>
+          </el-dialog>
+          <!-- 内容区 -->
+          <div>
+            <!--left菜单栏  -->
+            <div class="left_main"></div>
+          <!-- 放图形 -->
+            <div class="main"></div>
+             <!-- 优化监控 -->
+             <div class="opt_moitor" v-if="tabactive=='Three10'">
+            <optmonitor />
+          </div>
+          <div class="opt_moitor" v-if="tabactive=='Six0'">
+            <sixtop />
+            <sixbottom/>
+          </div>
+          </div>
+       
+         
         </div>
       </el-main>
 
@@ -604,8 +773,13 @@ import { ElMessage, ElButton, ElDialog, ElSelect } from 'element-plus'
 import { Edit,CaretBottom } from '@element-plus/icons-vue'
 import '@/utils/flexible'
 import s0 from "@/assets/img/s0.png"
+import optmonitor from './echart/optimize_monitor.vue'
+import sixtop from './echart/six_top.vue'
+import sixbottom from './echart/six_bottom.vue'
 const activeName = ref('User')
 let active = ref('');
+let tabactive=ref("");
+let checkbox=ref(false)
 let formLabelWidth6 = ref(100)
 let formLabelWidth1 = ref(200)
 let formLabelWidth2 = ref(130)
@@ -637,10 +811,40 @@ let tasktion2 = ref([
   { url: 't3.png', titlie: "加点方法" },
   { url: 't4.png', titlie: "终止条件" },
 ])
+let Threelist = ref([
+  { url: 'tt.png', titlie: "开始" },
+  { url: 'tt1.png', titlie: "暂停" },
+  { url: 'tt2.png', titlie: "结束" },
+])
+let Threelist1 = ref([
+  { url: 'tt3.png', titlie: "优化监控" },
+])
+let Sixlist = ref([
+{ url: 'ss.png', titlie: '可视化' },
+{ url: 'ss1.png', titlie: '查看报告' },
+{ url: 'ss2.png', titlie: '导出报告' },
+])
+let Sevenlist = ref([
+{ url: 's11.png', titlie: '任务管理' },
+{ url: 's12.png', titlie: '任务检索' },
+{ url: 's13.png', titlie: '备份与恢复' },
+])
+let eightlist = ref([
+{ url: 'e1.png', titlie: '快速入门' },
+{ url: 'e2.png', titlie: '帮助文档' },
+{ url: 'e3.png', titlie: '关于软件' },
+])
 let canshulist = ref([
 { label: 'CST参数化', value: 'CST参数化' },
 { label: 'FFD参数化', value: 'FFD参数化' },
 ])
+let sevlist = ref([
+{ label: '任务编号', value: '任务编号' },
+{ label: '任务名称', value: '任务名称' },
+{ label: '任务类型', value: '任务类型' },
+{ label: '创建时间', value: '创建时间' },
+])
+let seval4=ref('任务名称');
 let agelist = ref([
 { label: 'Kriging模型', value: 'Kriging模型' },
 { label: '相关函数类型', value: '相关函数类型' },
@@ -683,6 +887,8 @@ let dialog = ref({
   agency:false,
   enddialog:false,
   addfun:false,
+  task:false,
+  guanli:false,
 })
 let options=ref([
 { label: '升阻比', value: '升阻比' },
@@ -815,6 +1021,24 @@ const designtable = ref([
     
   },
 ])
+const tasktable = ref([
+{
+    id:"01",
+    time: '2016-05-03',
+    name: '升阻比',
+    state: '增大',
+
+    
+  }, 
+  {
+    id:"02",
+    time: '2016-05-03',
+    name: '升阻比',
+    state: '增大',
+
+    
+  }, 
+])
 
 let name = ref("1")
 let num = ref(1)
@@ -822,12 +1046,30 @@ const getImgPath = (url) => {
   return new URL(`../assets/img/${url}`, import.meta.url).href
 }
 const handleClick = (tab, event) => {
-  // console.log(tab, event)
+
+  console.log(tab.props.name);
+  tabactive.value=tab.props.name;
+  dialogcolse()
+}
+// 关闭所有弹窗
+const  dialogcolse=()=>{
+  dialog.value.newdialog = false;
+  dialog.value.setdialog = false;
+  dialog.value.targetdialog = false;
+  dialog.value.design = false;
+  dialog.value.constraint = false;
+  dialog.value.parameter = false;
+  dialog.value.agency = false;
+  dialog.value.addfun = false;
+  dialog.value.enddialog = false;
+  dialog.value.task = false;
+  dialog.value.guanli = false;
 }
 // 模块选择
 const clickgeometry = (e, index, key) => {
   console.log(key);
-  switch (key) {
+  tabactive.value=key;
+  switch (tabactive.value) {
     case "one0-0":
       dialog.value.newdialog = true;
       break;
@@ -855,6 +1097,15 @@ const clickgeometry = (e, index, key) => {
       case "Task-2":
       dialog.value.enddialog = true;
       break;
+      case "Seven0":
+      dialog.value.task = true;
+      break;
+      case "Seven1":
+      dialog.value.guanli  = true;
+      break;
+    default: 
+      console.log(1111)
+
      
       
   }