Просмотр исходного кода

散点图、折线图、帕累托图、云图相关弹窗制作

tangjunhao 6 месяцев назад
Родитель
Сommit
2d3c763488
3 измененных файлов с 733 добавлено и 17 удалено
  1. 258 4
      src/views/home.vue
  2. 36 13
      src/views/titlecomponent/ADflow.vue
  3. 439 0
      src/views/titlecomponent/Cloudsecond.vue

+ 258 - 4
src/views/home.vue

@@ -1037,6 +1037,10 @@
               </div>
             </template>
             <div>
+              <!-- <ListSE :selectValue="listval" :options="listoptions"
+                      :checkboxValue="Listcheckboxvalue"
+                      :checkboxOptions="Listcheckbox" 
+              /> -->
               <el-form>
                 <el-form-item label="设计集:" >
                   <el-select v-model="listval" :suffix-icon="CaretBottom" placeholder="请选择">
@@ -1047,7 +1051,7 @@
                 <el-form-item label="选择要在表中显示的一个或者多个变量和响应" >
                 </el-form-item>
                 <el-card shadow="hover" style="width: 100%">
-                  <el-checkbox-group v-model="Listcheckboxvalue">
+                  <el-checkbox-group v-model="listcbval">
                     <el-checkbox v-for="item in Listcheckbox" :key="item.value" :label="item.value" style="display: block">{{ item.label }}</el-checkbox>
                   </el-checkbox-group>
                 </el-card>
@@ -1055,6 +1059,7 @@
             </div>
             <template #footer>
               <div class="dialog-footer">
+                
                 <el-button @click="dialog.listdialog = false">取消</el-button>
                 <el-button type="primary" @click="dialog.listdialog = false">
                   确定
@@ -1062,6 +1067,175 @@
               </div>
             </template>
           </el-dialog>
+          <!-- 散点图 -->
+          <el-dialog v-model="dialog.scatterdialog" align-center :modal="false" :close-on-click-modal="false"
+            :append-to-body="true" draggable :fullscreen="false" :modal-append-to-body="false" modal-class="summary-dlg"
+            :before-close="handleClose" width="500" class="dialog_class bgcolor tianjia sel" style="max-height: 70%;">
+
+            <template #header="{ titleId, titleClass }">
+              <div class="my-header ">
+                <h4 :id="titleId" :class="titleClass">散点图</h4>
+              </div>
+            </template>
+            <div>
+              <el-form>
+                <el-form-item label="设计集:" >
+                  <el-select v-model="scatterval" :suffix-icon="CaretBottom" placeholder="请选择">
+                    <el-option v-for="item in listoptions" :key="item.value" :label="item.label" :value="item.value">
+                    </el-option>
+                  </el-select>
+                </el-form-item>
+                <el-form-item label="选择要在表中显示的一个或者多个变量和响应" >
+                </el-form-item>
+                <el-card shadow="hover" style="width: 100%">
+                  <el-checkbox-group v-model="scattercbval">
+                    <el-checkbox v-for="item in Listcheckbox" :key="item.value" :label="item.value" style="display: block">{{ item.label }}</el-checkbox>
+                  </el-checkbox-group>
+                </el-card>
+              </el-form>
+            </div>
+            <template #footer>
+              <div class="dialog-footer">
+                
+                <el-button @click="dialog.scatterdialog = false">取消</el-button>
+                <el-button type="primary" @click="dialog.scatterdialog = false">
+                  确定
+                </el-button>
+              </div>
+            </template>
+          </el-dialog>
+          <!-- 折线图 -->
+          <el-dialog v-model="dialog.echartLinedialog" align-center :modal="false" :close-on-click-modal="false"
+            :append-to-body="true" draggable :fullscreen="false" :modal-append-to-body="false" modal-class="summary-dlg"
+            :before-close="handleClose" width="500" class="dialog_class bgcolor tianjia sel" style="max-height: 70%;">
+
+            <template #header="{ titleId, titleClass }">
+              <div class="my-header ">
+                <h4 :id="titleId" :class="titleClass">折线图</h4>
+              </div>
+            </template>
+            <div>
+              <el-form>
+                <el-form-item label="设计集:" >
+                  <el-select v-model="echartLineval" :suffix-icon="CaretBottom" placeholder="请选择">
+                    <el-option v-for="item in listoptions" :key="item.value" :label="item.label" :value="item.value">
+                    </el-option>
+                  </el-select>
+                </el-form-item>
+                <el-form-item label="选择要在表中显示的一个或者多个变量和响应" >
+                </el-form-item>
+                <el-card shadow="hover" style="width: 100%">
+                  <el-checkbox-group v-model="echartLinecbval">
+                    <el-checkbox v-for="item in Listcheckbox" :key="item.value" :label="item.value" style="display: block">{{ item.label }}</el-checkbox>
+                  </el-checkbox-group>
+                </el-card>
+              </el-form>
+            </div>
+            <template #footer>
+              <div class="dialog-footer">
+                
+                <el-button @click="dialog.echartLinedialog = false">取消</el-button>
+                <el-button type="primary" @click="dialog.echartLinedialog = false">
+                  确定
+                </el-button>
+              </div>
+            </template>
+          </el-dialog>
+          <!-- 帕雷托图 -->
+          <el-dialog v-model="dialog.paretodialog" align-center :modal="false" :close-on-click-modal="false"
+            :append-to-body="true" draggable :fullscreen="false" :modal-append-to-body="false" modal-class="summary-dlg"
+            :before-close="handleClose" width="500" class="dialog_class bgcolor tianjia sel" style="max-height: 70%;">
+
+            <template #header="{ titleId, titleClass }">
+              <div class="my-header ">
+                <h4 :id="titleId" :class="titleClass">帕雷托图</h4>
+              </div>
+            </template>
+            <div>
+              <el-form>
+                <el-form-item label="选择在X轴显示的一个变量和响应" >
+                </el-form-item>
+                <el-card>
+                  <el-checkbox-group v-model="paretocbval">
+                    <el-checkbox v-for="item in paretocheckbox" :key="item.value" :label="item.value" style="display: block">{{ item.label }}</el-checkbox>
+                  </el-checkbox-group>
+                </el-card>
+                <el-form-item label="选择在Y轴显示的一个变量和响应" >
+                </el-form-item>
+                <el-card shadow="hover" style="width: 100%">
+                  <el-checkbox-group v-model="paretocbval">
+                    <el-checkbox v-for="item in paretocheckbox" :key="item.value" :label="item.value" style="display: block">{{ item.label }}</el-checkbox>
+                  </el-checkbox-group>
+                </el-card>
+              </el-form>
+            </div>
+            <template #footer>
+              <div class="dialog-footer">
+                
+                <el-button @click="dialog.paretodialog = false">取消</el-button>
+                <el-button type="primary" @click="dialog.paretodialog = false">
+                  确定
+                </el-button>
+              </div>
+            </template>
+          </el-dialog>
+          <!-- 云图/等值线图 -->
+          <el-dialog v-model="dialog.clouddialog" align-center :modal="false" :close-on-click-modal="false"
+            :append-to-body="true" draggable :fullscreen="false" :modal-append-to-body="false" modal-class="summary-dlg"
+            :before-close="handleClose" width="800" class="dialog_class bgcolor tianjia sel" style="max-height: 70%;">
+
+            <template #header="{ titleId, titleClass }">
+              <div class="my-header ">
+                <h4 :id="titleId" :class="titleClass">云图/等值线显示</h4>
+              </div>
+            </template>
+            <div>
+              <div>
+                <el-row gutter="20">
+                  <el-col :span="2"></el-col>
+                  <el-col v-for="(item,index) in cloudbtnbox" :key="index" :span="4">
+                    <el-button style="width: 100%;" @click="openSeconddialog(item.btnname)">
+                      <!-- <el-image :src="getImgPath(item.url)" alt="img" fit="cover"  /> -->
+                      {{ item.btnname }}
+                    </el-button>
+                  </el-col>
+                </el-row>
+              </div>
+              <div style="height: 300px;">
+
+              </div>
+            </div>
+          </el-dialog>
+          <!-- 云图二级弹窗 -->
+          <el-dialog v-model="seconddialogshow"
+          align-center
+          :modal="false"
+          :close-on-click-modal="false"
+          :append-to-body="true"
+          draggable
+          :fullscreen="false"
+          :modal-append-to-body="false"
+          modal-class="summary-dlg"
+          :before-close="handleClose"
+          width="500"
+          class="dialog_class bgcolor tianjia sel"
+          
+          >
+            <template #header="{ titleId, titleClass }">
+              <div class="my-header">
+                <h4 :id="titleId" :class="titleClass">{{ cloudsedtitle }}</h4>
+              </div>
+            </template>
+            <cloudsecond  :activesd="activesd"/>
+            <template #footer>
+              <div class="dialog-footer">
+                <el-button @click="seconddialogshow = false">取消</el-button>
+                <el-button type="primary" @click="seconddialogshow = false">
+                确定
+                </el-button>
+            </div>
+            </template>
+          </el-dialog>
           <!-- 查看报告 -->
           <el-dialog v-model="dialog.lookover" align-center :modal="false" :close-on-click-modal="false"
             :append-to-body="true" draggable :fullscreen="false" :modal-append-to-body="false" modal-class="summary-dlg"
@@ -1090,7 +1264,7 @@
           <!-- 气动分析Xfoil、ADflow -->
           <el-dialog v-model="dialog.XfAD" align-center :modal="false" :close-on-click-modal="false"
             :append-to-body="true" draggable :fullscreen="false" :modal-append-to-body="false" modal-class="summary-dlg"
-            :before-close="handleClose" width="700" class="dialog_class bgcolor tianjia sel colortext">
+            :before-close="handleClose" width="800" class="dialog_class bgcolor tianjia sel colortext">
 
             <template #header="{ titleId, titleClass }">
               <div class="my-header ">
@@ -1818,6 +1992,8 @@ import ADflow from './titlecomponent/ADflow.vue'
 import Xfoil from './titlecomponent/Xfoil.vue'
 import csts from './titlecomponent/csts.vue'
 import ffds from './titlecomponent/ffds.vue'
+import cloudsecond from "./titlecomponent/Cloudsecond.vue";
+
 let Sidebarref = ref();
 let resource=ref(0);
 let cstnum=ref('');
@@ -2108,7 +2284,7 @@ let question = ref([
   { url: 'kk6.png', titlie: "横条图" },
   { url: 'kk7.png', titlie: "雷达图" },
   { url: 'kk8.png', titlie: "帕雷托图" },
-  { url: 'kk9.png', titlie: "云图" },
+  { url: 'kk9.png', titlie: "云图/等值线" },
   { url: 'kk10.png', titlie: "查看报告" },
   { url: 'kk11.png', titlie: "导出报告" },
 ])
@@ -2220,6 +2396,8 @@ let addlist8 = ref([
 ])
 
 let listval = ref('全部设计')
+let scatterval = ref('全部设计')
+let echartLineval = ref('全部设计')
 let listoptions = ref([
   { label: '全部设计', value: '全部设计' },
   { label: '可行设计', value: '可行设计' },
@@ -2229,7 +2407,9 @@ let listoptions = ref([
   { label: '改进设计', value: '改进设计' },
   { label: '错误设计', value: '错误设计' },
 ])
-let Listcheckboxvalue = ref([])
+let listcbval = ref([])
+let scattercbval = ref([])
+let echartLinecbval = ref([])
 let Listcheckbox = ref([
   {label:'x1',value:'x1'},
   {label:'x2',value:'x2'},
@@ -2237,6 +2417,20 @@ let Listcheckbox = ref([
   {label:'x4',value:'x4'},
 ])
 
+let paretocbval = ref([])
+let paretocheckbox = ref([
+  {label:'-cl',value:'-cl'},
+  {label:'cd',value:'cd'},
+])
+
+let cloudbtnbox = ref([
+  {url:'',btnname:'文件选择'},
+  {url:'',btnname:'域'},
+  {url:'',btnname:'云图'},
+  {url:'',btnname:'色卡'},
+  {url:'',btnname:'等值线'},
+])
+
 let dialog = ref({
   newdialog: false,
   setdialog: false,
@@ -2266,6 +2460,10 @@ let dialog = ref({
   optgroup:false,
   Pythonshow:false,
   listdialog:false,
+  scatterdialog:false,
+  echartLinedialog:false,
+  paretodialog:false,
+  clouddialog:false,
 })
 
 // let columns=ref[{
@@ -2782,10 +2980,12 @@ const dialogbolen = () => {
       echatsfunc();
       break;
     case "折线图":
+      dialog.value.echartLinedialog = true;
       echatsfunc();
       break;
     case "散点图":
       // logsget();
+      dialog.value.scatterdialog = true;
       echatsfunc();
       break;
     case "横条图":
@@ -2795,6 +2995,13 @@ const dialogbolen = () => {
       //logsget();
       echatsfunc();
       break;
+    case "帕雷托图":
+      dialog.value.paretodialog = true;
+      // echatsfunc();
+      break;
+    case "云图/等值线":
+      dialog.value.clouddialog = true;
+      break;  
     case "查看报告":
       echatsfunc();
       dialog.value.lookover = true;
@@ -3905,6 +4112,53 @@ const getXfoilAdflowsave = (activeadf) => {
 }
 
 
+// 云图打开二级弹窗
+let seconddialogshow = ref(false)
+let activesd = ref ({
+  fileselect:false,
+  domain:false,
+  cloud:false,
+  colorchart:false,
+  isoline:false
+})
+let cloudsedtitle = ref('')
+const openSeconddialog = (name) => {
+  // 设置 activesd 中的值来控制不同内容的显示
+  activesd.value.fileselect = false;
+  activesd.value.domain = false;
+  activesd.value.cloud = false;
+  activesd.value.colorchart = false;
+  activesd.value.isoline = false;
+
+  switch (name) {
+    case '文件选择':
+      activesd.value.fileselect = true;
+      cloudsedtitle.value = "文件选择";
+      break;
+    case '域':
+      activesd.value.domain = true;
+      cloudsedtitle.value = "域";
+      break;
+    case '云图':
+      activesd.value.cloud = true;
+      cloudsedtitle.value = "云图";
+      break;
+    case '色卡':
+      activesd.value.colorchart = true;
+      cloudsedtitle.value = "色卡";
+      break;
+    case '等值线':
+      activesd.value.isoline = true;
+      cloudsedtitle.value = "等值线";
+      break;
+    default:
+      break;
+  }
+  seconddialogshow.value = true
+};
+
+
+
 </script>
 <style lang="scss" scoped>
 .conter_flex {

+ 36 - 13
src/views/titlecomponent/ADflow.vue

@@ -24,7 +24,7 @@
           <el-row style="width: 100%">
             <el-col :span="23">
               <el-input
-                v-model="meshFileName"
+                v-model="adflowvalue.gridfile"
                 readonly
                 :step="100"
                 :min="0"
@@ -84,7 +84,7 @@
           <el-table-column prop="flag" label="启用" width="100">
             <template v-slot="scope">
               <el-checkbox
-                :false-label="-1"
+                :false-label="0"
                 :true-label="1"
                 :label="false"
                 v-model="scope.row.flag"
@@ -238,13 +238,17 @@
       <el-form-item label="监控变量:" :label-width="formLabelWidth1">
         <el-row>
         <el-col :span="12">
-          <el-checkbox v-model="cl" label="升力系数Cl" size="large" />
-          <el-checkbox v-model="resrho" label="密度残差Resrho" size="large" />
+          <el-checkbox v-model="cl" :false-label="0"
+          :true-label="1" label="升力系数Cl" size="large" />
+          <el-checkbox v-model="resrho" :false-label="0"
+          :true-label="1" label="密度残差Resrho" size="large" />
       
         </el-col>
         <el-col :span="12">
-          <el-checkbox v-model="cd" label="阻力系数Cd" size="large" />
-          <el-checkbox v-model="cmz" label="力矩系数Cm" size="large" />
+          <el-checkbox v-model="cd" :false-label="0"
+          :true-label="1" label="阻力系数Cd" size="large" />
+          <el-checkbox v-model="cmz" :false-label="0"
+          :true-label="1" label="力矩系数Cm" size="large" />
         </el-col>
       </el-row>
       </el-form-item>
@@ -275,7 +279,7 @@
       <el-form-item label="输出切面信息:" :label-width="formLabelWidth1">
           <el-radio-group v-model="radioq">
             <el-radio :value="1" :label="1">是</el-radio>
-            <el-radio :value="-1" :label="-1">否</el-radio>
+            <el-radio :value="0" :label="0">否</el-radio>
           </el-radio-group>  
       </el-form-item>
     </div>
@@ -297,7 +301,7 @@
           <el-table-column prop="flag" label="启用" width="100">
             <template v-slot="scope">
               <el-checkbox
-                :false-label="-1"
+                :false-label="0"
                 :true-label="1"
                 :label="false"
                 v-model="scope.row.flag"
@@ -319,6 +323,7 @@ import meshFile from "@/assets/img/meshFile.png";
 import inputParams from "@/assets/img/inputParams.png";
 import configParams from "@/assets/img/configParams.png";
 import analysisParams from "@/assets/img/analysisParams.png";
+import { da } from "element-plus/es/locale/index.mjs";
 const meshFileImgSrc = new URL("@/assets/img/open.png", import.meta.url).href;
 let meshFileName = ref('');
 let percentage = ref(0);
@@ -328,9 +333,9 @@ let formLabelWidth3 = ref(100)
 let formLabelWidth1 = ref(170)
 let formLabelWidth200 = ref(200)
 let currentTab1 = ref(0)
-let resrho = ref(1)
 let pid = ref()
 let adid = ref()
+let resrho = ref(1)
 let cl = ref(1)
 let cd = ref(1)
 let cmz = ref(1)
@@ -409,8 +414,8 @@ let outParams = ref([
 
 let adflowvalue = ref({
   gridfile: "",
+  fid:'',
   proname: "巡航工况",
-  isairfoil: 1,
   temperature: 288.15,
   length: 1,
   area: 1,
@@ -480,9 +485,17 @@ const getadflow = (id) => {
 const getadflowAssign = (data) => {
   pid.value = data.pid
   adflowvalue.value.gridfile = data.gridfile
+  adflowvalue.value.fid = data.fid
   adflowvalue.value.proname = data.proname
-  adflowvalue.value.isairfoil = data.isairfoil
+  isairfoil.value = data.isairfoil
+  writetecplotsurfacesolution.value = data.writetecplotsurfacesolution
+  equationtype.value = data.equationtype
+  liftindex.value = data.liftindex
   adflowvalue.value.temperature = data.temperature
+  adflowvalue.value.cl = data.cl
+  adflowvalue.value.cd = data.cd
+  adflowvalue.value.cmz = data.cmz
+  adflowvalue.value.resrho = data.resrho
   adflowvalue.value.length = data.length
   adflowvalue.value.area = data.area
   adflowvalue.value.momx = data.momx
@@ -501,10 +514,17 @@ const getadflowsave = () => {
     transCode: "MDO0050",
     pid: pid.value,
     gridfile: adflowvalue.value.gridfile,
-    fid: "",
+    fid: adflowvalue.value.fid,
     proname: adflowvalue.value.proname,
-    isairfoil: adflowvalue.value.isairfoil,
+    isairfoil: isairfoil.value,
+    writetecplotsurfacesolution: writetecplotsurfacesolution.value,
+    equationtype: equationtype.value,
+    liftindex: liftindex.value,
     temperature: adflowvalue.value.temperature,
+    cl:cl.value,
+    resrho:resrho.value,
+    cd:cd.value,
+    cmz:cmz.value,
     length: adflowvalue.value.length,
     area: adflowvalue.value.area,
     momx: adflowvalue.value.momx,
@@ -548,6 +568,9 @@ const handleFileUploadSuccess = (newValue) => {
   setTimeout(() => {
     percentage.value = 0;
   }, 1000);
+
+  adflowvalue.value.gridfile = newValue.fname;
+  adflowvalue.value.fid = newValue.bfid;
 }
 
 // 更新上传状态

+ 439 - 0
src/views/titlecomponent/Cloudsecond.vue

@@ -0,0 +1,439 @@
+<template>
+  <div class="cloudsecond">
+    <!-- 文件选择 -->
+    <div v-show="activesd.fileselect">
+      <el-form-item label="添加文件:" :label-width="formLabelWidth1" >
+        <el-row style="width: 100%">
+            <el-col :span="23">
+              <el-input
+               
+                readonly
+                :step="100"
+                :min="0"
+                :max="1000"
+                controls-position="right"
+              />
+            </el-col>
+            <!-- 文件上传按钮部分 -->
+            <el-col :span="1" style="display: flex; align-items: center; margin-left: -35px">
+              <fileUploads
+                :projectId="123" 
+                solverType="exampleSolver" 
+                accept=".cgns" 
+                upId="uniqueId1" 
+                name="点击选择文件"
+                :imgSrc="meshFileImgSrc"
+                
+              />
+            </el-col>
+          </el-row>
+      </el-form-item>
+      <div style="display: flex;flex-direction: row;">
+        <el-card shadow="hover" style="width: 70%">
+          <el-checkbox-group v-model="fileselectval">
+            <el-checkbox v-for="item in filecheckbox" :key="item.value" :label="item.value" style="display: block">{{ item.label }}</el-checkbox>
+          </el-checkbox-group>
+        </el-card>
+        <div style="width: 30%;">
+          <el-button >删除选中文件</el-button>
+          <el-button style="background-color: transparent;margin-left: 0;">删除全部文件</el-button>
+        </div>
+      </div>
+    </div>
+    <!-- 域 -->
+    <div v-show="activesd.domain">
+      <div>
+        <el-row style="margin-bottom: 10px;">
+          <el-col v-for="(item,index) in domainbtnbox1" :key="index" :span="8">
+            <el-button>{{ item }}</el-button>
+          </el-col>
+        </el-row>
+        <el-row style="margin-bottom: 10px;">
+          <el-col v-for="(item,index) in domainbtnbox2" :key="index" :span="8">
+            <el-button>{{ item }}</el-button>
+          </el-col>
+        </el-row>
+      </div>
+      <div class="classtable">
+        <el-table :data="tableDatadomain" style="width: 100%" border="true">
+            <el-table-column prop="rowname" label="域名称"  />
+            <el-table-column
+              v-for="(item, index) in tabledomainColumns"
+              :key="index"
+              :prop="item.prop"
+              :label="item.label"
+            >
+              <template #default="{ row }">
+                <el-input v-model="row[item.prop]" />
+              </template>
+            </el-table-column>
+          </el-table>
+      </div>
+    </div>
+    <!-- 云图 -->
+    <div v-show="activesd.cloud">
+      <div>
+        <el-collapse v-model="activeNames">
+          <el-collapse-item title="标量" name="1">
+            <el-form>
+              <el-form-item label="名称:" label-width="formLabelWidth1">
+                <el-input></el-input>
+              </el-form-item>
+              <el-form-item label="类型:" label-width="formLabelWidth1">
+                <el-input></el-input>
+              </el-form-item>
+              <el-form-item label="标量名:" label-width="formLabelWidth1">
+                <el-select v-model="scalarname">
+                  <el-option 
+                  v-for=" item in scalarnameoptions" :key="item.value" :label="item.label" :value="item.value"
+                  />
+                </el-select>
+              </el-form-item>
+              <el-form-item label="" label-width="formLabelWidth1">
+                <el-row>
+                  <el-col :span="12">
+                    <el-checkbox label="极值"></el-checkbox>
+                  </el-col>
+                  <el-col :span="12">
+                    <el-checkbox label="单元值离散到点"></el-checkbox>
+                  </el-col>
+                </el-row>
+              </el-form-item>
+            </el-form>
+          </el-collapse-item>
+
+          <el-collapse-item title="云图间隔" name="2">
+            <el-form>
+              <el-form-item label="名称:" label-width="formLabelWidth1">
+                <el-input ></el-input>
+              </el-form-item>
+              <el-form-item label="" label-width="formLabelWidth1">
+                <el-row>
+                  <el-col :span="12">
+                  </el-col>
+                  <el-col :span="12">
+                    <el-checkbox label="平滑云图"></el-checkbox>
+                  </el-col>
+                </el-row>
+              </el-form-item>
+            </el-form>
+          </el-collapse-item>
+
+          <el-collapse-item title="数据范围">
+            <el-form>
+              <el-form-item label="数据范围类型:" label-width="formLabelWidth1">
+                <el-select v-model="dataAreaType">
+                  <el-option 
+                  v-for=" item in dataAreaTypeoptions" :key="item.value" :label="item.label" :value="item.value"
+                  />
+                </el-select>
+              </el-form-item>
+              <el-form-item label="最大值:" label-width="formLabelWidth1">
+                <el-input ></el-input>
+              </el-form-item>
+              <el-form-item label="最小值:" label-width="formLabelWidth1">
+                <el-input ></el-input>
+              </el-form-item>
+            </el-form>
+          </el-collapse-item>
+
+          <el-collapse-item title="色卡颜色范围">
+            <el-form>
+              <el-form-item label="最大值:" label-width="formLabelWidth1">
+                <el-row>
+                  <el-col :span="20"><el-input ></el-input></el-col>
+                  <el-col :span="4"><el-color-picker v-model="color1" /></el-col>
+                </el-row>
+              </el-form-item>
+              <el-form-item label="最小值:" label-width="formLabelWidth1">
+                <el-row>
+                  <el-col :span="20"><el-input ></el-input></el-col>
+                  <el-col :span="4"><el-color-picker v-model="color1" /></el-col>
+                </el-row>
+              </el-form-item>
+            </el-form>
+          </el-collapse-item>
+        </el-collapse>
+      </div>
+    </div>
+    <!-- 色卡 -->
+    <div v-show="activesd.colorchart">
+      <el-form>
+        <el-form-item>
+          <el-checkbox label="显示色卡"></el-checkbox>
+        </el-form-item>
+        <el-form-item label="朝向:" label-width="formLabelWidth1">
+          <el-select v-model="orientation">
+            <el-option 
+            v-for=" item in orientationoptions" :key="item.value" :label="item.label" :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+
+        <el-row :gutter="10">
+          <el-col :span="10">
+            <el-form-item label="X(0-1):">
+              <el-input></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="10">
+            <el-form-item label="Y(0-1):">
+              <el-input></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="4">
+            <el-button>更新</el-button>
+          </el-col>
+        </el-row>
+
+        <el-row :gutter="5">
+          <el-col :span="10">
+            <el-form-item label="宽度(0-1):">
+              <el-input></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="10">
+            <el-form-item label="高度(0-1):">
+              <el-input></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="4">
+            <el-button>更新</el-button>
+          </el-col>
+        </el-row>
+
+        <el-form-item label="跳过层级:" label-width="formLabelWidth1">
+          <el-input type="number"></el-input>
+        </el-form-item>
+
+        <el-form-item label="字体:" label-width="formLabelWidth1">
+          <el-row>
+            <el-col :span="18">
+              <el-select v-model="font">
+                <el-option 
+                v-for=" item in fontoptions" :key="item.value" :label="item.label" :value="item.value"
+                />
+              </el-select>
+            </el-col>
+            <el-col :span="3">
+              <el-button></el-button>
+            </el-col>
+            <el-col :span="3">
+              <el-button></el-button>
+            </el-col>
+          </el-row>
+        </el-form-item>
+
+        <el-form-item label="字体大小:" label-width="formLabelWidth1">
+          <el-select v-model="fontsize">
+            <el-option 
+            v-for=" item in fontsizeoptions" :key="item.value" :label="item.label" :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="数据格式:" label-width="formLabelWidth1">
+          <el-select v-model="dataformat">
+            <el-option 
+            v-for=" item in dataformatoptions" :key="item.value" :label="item.label" :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+
+        <el-form-item label="精度:" label-width="formLabelWidth1">
+          <el-input type="number"></el-input>
+        </el-form-item>
+
+        <el-form-item>
+          <el-checkbox label="显示标题:"></el-checkbox>
+        </el-form-item>
+
+        <el-form-item label="标题文本:" label-width="formLabelWidth1">
+          <el-row>
+            <el-col :span="12">
+              <el-select v-model="texttitle">
+                <el-option 
+                v-for=" item in texttitleoptions" :key="item.value" :label="item.label" :value="item.value"
+                />
+              </el-select>
+            </el-col>
+            <el-col :span="12">
+              <el-input></el-input>
+            </el-col>
+          </el-row>
+        </el-form-item>
+
+        <el-form-item label="标题字体:" label-width="formLabelWidth1">
+          <el-row>
+            <el-col :span="18">
+              <el-select v-model="titlefont">
+                <el-option 
+                v-for=" item in titlefontoptions" :key="item.value" :label="item.label" :value="item.value"
+                />
+              </el-select>
+            </el-col>
+            <el-col :span="3">
+              <el-button></el-button>
+            </el-col>
+            <el-col :span="3">
+              <el-button></el-button>
+            </el-col>
+          </el-row>
+        </el-form-item>
+
+        <el-form-item label="字体大小:" label-width="formLabelWidth1">
+          <el-select v-model="fontsize">
+            <el-option 
+            v-for=" item in fontsizeoptions" :key="item.value" :label="item.label" :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+
+      </el-form>
+    </div>
+    <!-- 等值线 -->
+    <div v-show="activesd.isoline">
+      <el-collapse v-model="activeNames2">
+        <el-collapse-item title="标量" name="1">
+          <el-form>
+              <el-form-item label="名称:" label-width="formLabelWidth1">
+                <el-input ></el-input>
+              </el-form-item>
+              <el-form-item label="类型:" label-width="formLabelWidth1">
+                <el-input ></el-input>
+              </el-form-item>
+              <el-form-item label="标量名:" label-width="formLabelWidth1">
+                <el-select v-model="scalarname2">
+                  <el-option 
+                  v-for=" item in scalarname2options" :key="item.value" :label="item.label" :value="item.value"
+                  />
+                </el-select>
+              </el-form-item>
+            </el-form>
+        </el-collapse-item>
+
+        <el-collapse-item title="云图间隔:" name="2">
+          <el-form>
+            <el-form-item label="层级:" label-width="formLabelWidth1">
+              <el-input ></el-input>
+            </el-form-item>
+          </el-form>
+        </el-collapse-item>
+
+        <el-collapse-item title="数据范围:" name="3">
+          <el-form>
+            <el-form-item label="最大值:" label-width="formLabelWidth1">
+              <el-input ></el-input>
+            </el-form-item>
+            <el-form-item label="最小值:" label-width="formLabelWidth1">
+              <el-input ></el-input>
+            </el-form-item>
+          </el-form>
+        </el-collapse-item>
+
+      </el-collapse>
+    </div>
+  </div>
+  
+</template>
+<script setup>
+import { el, it } from 'element-plus/es/locale/index.mjs';
+import { ref, onMounted, reactive, provide, nextTick } from "vue"
+
+import fileUploads from "../components/fileuploads.vue";
+const meshFileImgSrc = new URL("@/assets/img/open.png", import.meta.url).href;
+
+let formLabelWidth1 = ref(100)
+
+const props = defineProps({
+  activesd: {
+    type: Object,
+    required: true
+  }
+})
+
+let fileselectval = ref([])
+let filecheckbox = ref([
+  {label:'文件1',value:'x1'},
+  {label:'文件2',value:'x2'},
+  {label:'文件3',value:'x3'},
+  {label:'文件4',value:'x4'},
+])
+
+
+let domainbtnbox1 = ref(['显示全部','隐藏全部','倒转互换'])
+let domainbtnbox2 = ref(['显示','隐藏','表明绘制'])
+
+
+let tableDatadomain = ref([
+  {rowname:"Z1", state:'1', type:'2', area:'3'},
+  {rowname:"Z2", state:'1', type:'2', area:'3'},
+  {rowname:"Z3", state:'1', type:'2', area:'3'},
+  {rowname:"Z4", state:'1', type:'2', area:'3'},
+])
+let tabledomainColumns = ref([
+  {label:"状态", prop:'state'},
+  {label:"绘制类型", prop:'type'},
+  {label:"平面范围", prop:'area'},
+])
+
+let scalarname = ref('1')
+let scalarnameoptions = ref([
+  {label:'1',value:'1'}
+])
+
+let dataAreaType = ref('当前时间步')
+let dataAreaTypeoptions = ref([
+  { label:'当前时间步', value: '当前时间步'},
+  { label:'所有时间步', value: '所有时间步'},
+  { label:'固定值', value: '固定值'}
+])
+
+let orientation = ref('竖直')
+let orientationoptions = ref([
+  { label:'竖直', value: '竖直'},
+  { label:'水平', value: '水平'},
+])
+
+let font = ref('微软雅黑')
+let fontoptions = ref([
+  { label:'微软雅黑', value: '微软雅黑'},
+])
+
+let fontsize = ref('15')
+let fontsizeoptions = ref([
+  { label:'15', value: '15'},
+])
+
+let dataformat = ref('科学计数法')
+let dataformatoptions =  ref([
+  { label:'整型', value: '整型'},
+  { label:'浮点型', value: '浮点型'},
+  { label:'科学计数法', value: '科学计数法'},
+  { label:'(最适)浮点型', value: '(最适)浮点型'},
+])
+
+let texttitle = ref('使用变量名')
+let texttitleoptions = ref([
+  { label:'使用变量名', value: '使用变量名'},
+  { label:'使用文本', value: '使用文本'},
+])
+
+let titlefont = ref('Arial')
+let titlefontoptions = ref([
+  { label:'Arial', value: 'Arial'},
+])
+
+let scalarname2 = ref('1')
+let scalarname2options = ref([
+  {label:'1',value:'1'}
+])
+
+</script>
+
+<style>
+.cloudsecond {
+  font-size: 16px;
+  font-family: 'Source Sans-Regular';
+}
+</style>