index.vue 57 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416
  1. <template>
  2. <div style="width: 100%;padding-top: 1%;" :style="{'height':heightAll+'px'}">
  3. <div style="display: flex;width: 100%;margin-left: 1%;justify-content: space-between;">
  4. <div style="display: flex;width: 35%;">
  5. <div style="display: flex;width: 100%;align-items: center;">
  6. <div>
  7. 模型名称:
  8. </div>
  9. <el-input v-model="name" style="width:50%;margin-left: 1%;" placeholder="" />
  10. </div>
  11. <div style="display: flex;width: 100%;align-items: center;margin-left:-15%;">
  12. <div>
  13. 模型归属单位:
  14. </div>
  15. <el-input v-model="mdUnit" style="width: 50%;margin-left: 1%;" placeholder="" />
  16. </div>
  17. <el-button type="primary" style="margin-left: -10%;" @click="getModelListTable" :icon="Search">查询</el-button>
  18. </div>
  19. <div style="display: flex;align-items: center;margin-right: 3%;">
  20. <el-button type="primary" style="margin-left:5%;" @click="reg" icon="Plus">注册</el-button>
  21. </div>
  22. </div>
  23. <div style="margin-top: 0%;margin-left: 0%;width: 100%;">
  24. <el-table
  25. :data="tableData"
  26. height="80vh"
  27. style="width: 98%;margin-left: 1%;margin-top: 0.5%;"
  28. :cell-style="{ padding:'5px' }"
  29. :header-cell-style="{height: heightAll*0.01+'px',}"
  30. :row-style="{ fontSize: '16px',textAlign:'center'}"
  31. border >
  32. <el-table-column type="index" label="序号" width="80">
  33. <template #default="{ $index }">
  34. <div style="text-align: center;">
  35. {{ $index + 1 }}
  36. </div>
  37. </template>
  38. </el-table-column>
  39. <el-table-column prop="name" label="模型名称">
  40. </el-table-column>
  41. <el-table-column prop="enname" label="英文名称">
  42. </el-table-column>
  43. <el-table-column prop="type" label="模型类型" width="160"/>
  44. <el-table-column prop="mdUnit" label="模型单位" width="200"/>
  45. <el-table-column prop="mdContact" label="联系方式" width="100"/>
  46. <el-table-column prop="status" label="模型状态" width="140">
  47. </el-table-column>
  48. <el-table-column prop="modifyBy" label="发布时间" width="170"/>
  49. <el-table-column prop="version" label="版本" width="120"/>
  50. <el-table-column prop="address" label="操作" width="270">
  51. <template #default="scope">
  52. <div style="display: flex;justify-content: space-between;width: 100%;">
  53. <el-button type="primary" @click="showEdit(scope.row)" size="mini" text style="margin-left: 0%;">编辑</el-button>
  54. <!-- <el-button type="danger" text size="mini" style="margin-left: -5%;" @click="handleDelete(scope.row)">注销</el-button> -->
  55. <el-button @click="showDe(scope.row)" type="primary" text size="mini" style="margin-left: -5%;">查看</el-button>
  56. <el-button @click="showPei(scope.row)" type="warning" text size="mini" style="margin-left: -5%;">配置</el-button>
  57. <el-button type="danger" @click="delModel(scope.row)" text size="mini" style="margin-left: -5%;">删除</el-button>
  58. <el-button type="danger" @click="shenhe(scope.row)" text size="mini" style="margin-left: -5%;">审核</el-button>
  59. </div>
  60. </template>
  61. </el-table-column>
  62. </el-table>
  63. <el-dialog v-model="dialogVisible" title="" width="60%" @close="clearForm" destroy-on-close>
  64. <div class="card-header">
  65. <span style="font-size: 20px;margin-left: 1%;">基本信息</span>
  66. <el-divider style="margin-top: 1%;"/>
  67. </div>
  68. <div>
  69. <el-form size="mini" style="margin-top: 0%;width: 98%;" :model="formJi" label-position="right" ref="formRefJi" label-width="120px" :rules="rulesJi">
  70. <el-row :gutter="40">
  71. <el-col :span="8">
  72. <el-form-item label="模型名称:" prop="name" style="">
  73. <div style="display: flex;width: 120%;justify-content: space-between;">
  74. <el-input v-model="formJi.name" style="width: 100%;"/>
  75. </div>
  76. </el-form-item>
  77. </el-col>
  78. <el-col :span="8">
  79. <el-form-item label="英文名:" prop="enname" style="">
  80. <div style="display: flex;width: 100%;justify-content: space-between;">
  81. <el-input v-model="formJi.enname" style="width: 100%;"/>
  82. </div>
  83. </el-form-item>
  84. </el-col>
  85. <el-col :span="6">
  86. <el-form-item label="版本号:" prop="" style="">
  87. <div style="display: flex;width: 100%;justify-content: space-between;">
  88. <el-input v-model="formJi.version" style="width: 100%;"/>
  89. </div>
  90. </el-form-item>
  91. </el-col>
  92. </el-row>
  93. <el-row :gutter="48">
  94. <el-col :span="8">
  95. <el-form-item label="模型类型:" prop="" style="">
  96. <div style="display: flex;width: 100%;justify-content: space-between;">
  97. <el-input placeholder="如水利模型、排水模型、供水模型、海洋模型" v-model="formJi.type" style="width: 100%;" resize="none"/>
  98. </div>
  99. </el-form-item>
  100. </el-col>
  101. </el-row>
  102. <el-form-item label="排序:" prop="" style="">
  103. <div style="display: flex;width: 100%;justify-content: space-between;">
  104. <el-input-number v-model="formJi.sort" :min="1" style="width: 22%;"/>
  105. </div>
  106. </el-form-item>
  107. <el-row :gutter="48">
  108. <el-col :span="24">
  109. <el-form-item label="开发语言:">
  110. <el-radio-group v-model="formJi.devlang" class="custom-radio-group" style="width: 100%;">
  111. <el-radio label="java" size="large">java</el-radio>
  112. <el-radio label="nodeJs" size="large">nodeJs</el-radio>
  113. <el-radio label="python" size="large">python</el-radio>
  114. <el-radio label="c/c++" size="large">c/c++</el-radio>
  115. <el-radio label="1" size="large">
  116. <div class="custom-input-wrapper">
  117. <span>其它</span>
  118. <el-input
  119. v-model="elseLan"
  120. class="underline-input"
  121. v-show="isElse"
  122. />
  123. </div>
  124. </el-radio>
  125. </el-radio-group>
  126. </el-form-item>
  127. </el-col>
  128. </el-row>
  129. <el-row :gutter="48">
  130. <el-col :span="16">
  131. <el-form-item label="简介:">
  132. <el-input v-model="formJi.intro" style="width: 100%;" :rows="3" resize="none" type="textarea"/>
  133. </el-form-item>
  134. </el-col>
  135. </el-row>
  136. </el-form>
  137. </div>
  138. <div class="card-header">
  139. <span style="font-size: 20px;margin-left: 1%;">单位</span>
  140. <el-divider style="margin-top: 1%;"/>
  141. </div>
  142. <div style="margin-top: 0%;">
  143. <el-form size="mini" :key="tableKey" style="margin-top: 0%;width: 98%;" :model="formJi" label-position="right" label-width="120px" :rules="rulesJi">
  144. <el-row :gutter="48">
  145. <el-col :span="11">
  146. <el-form-item label="模型归属单位:" prop="" style="">
  147. <div style="display: flex;width: 100%;justify-content: space-between;">
  148. <el-input v-model="formJi.mdUnit" style="width: 100%;"/>
  149. </div>
  150. </el-form-item>
  151. </el-col>
  152. <el-col :span="11">
  153. <el-form-item label="联系方式:" prop="" style="">
  154. <div style="display: flex;width: 100%;justify-content: space-between;">
  155. <el-input v-model="formJi.mdContact" style="width: 100%;"/>
  156. </div>
  157. </el-form-item>
  158. </el-col>
  159. </el-row>
  160. <el-row :gutter="48">
  161. <el-col :span="11">
  162. <el-form-item label="技术支持单位:" prop="" style="">
  163. <div style="display: flex;width: 100%;justify-content: space-between;">
  164. <el-input v-model="formJi.devUnit" style="width: 100%;"/>
  165. </div>
  166. </el-form-item>
  167. </el-col>
  168. <el-col :span="11">
  169. <el-form-item label="联系方式:" prop="" style="">
  170. <div style="display: flex;width: 100%;justify-content: space-between;">
  171. <el-input v-model="formJi.devContact" style="width: 100%;"/>
  172. </div>
  173. </el-form-item>
  174. </el-col>
  175. </el-row>
  176. </el-form>
  177. </div>
  178. <el-tabs
  179. v-model="activeName"
  180. type="card"
  181. style="margin-top: 1%;"
  182. >
  183. <el-tab-pane label="部署情况" name="first">
  184. <el-form size="mini" :key="tableKey" style="margin-top: 0%;width: 98%;" :model="formJi" label-position="right" label-width="120px" :rules="rulesJi">
  185. <el-row :gutter="48">
  186. <el-col :span="11">
  187. <el-form-item label="服务器IP:" prop="" style="">
  188. <div style="display: flex;width: 100%;justify-content: space-between;">
  189. <el-input v-model="formJi.deployIp" style="width: 100%;"/>
  190. </div>
  191. </el-form-item>
  192. </el-col>
  193. <el-col :span="11">
  194. <el-form-item label="端口:" prop="" style="">
  195. <div style="display: flex;width: 100%;justify-content: space-between;">
  196. <el-input placeholder="可填写多个端口,以“,”分隔" v-model="formJi.deployPort" style="width: 100%;"/>
  197. </div>
  198. </el-form-item>
  199. </el-col>
  200. </el-row>
  201. <el-row :gutter="48">
  202. <el-col :span="15">
  203. <el-form-item label="部署位置:" prop="" style="">
  204. <div style="display: flex;width: 100%;justify-content: space-between;">
  205. <el-input v-model="formJi.deployDir" style="width: 100%;"/>
  206. </div>
  207. </el-form-item>
  208. </el-col>
  209. <el-col :span="10">
  210. </el-col>
  211. </el-row>
  212. <el-row :gutter="48">
  213. <el-col :span="15">
  214. <el-form-item label="服务访问地址:" prop="" style="">
  215. <div style="display: flex;width: 100%;justify-content: space-between;">
  216. <el-input v-model="formJi.mirrorImageUrl" style="width: 100%;"/>
  217. </div>
  218. </el-form-item>
  219. </el-col>
  220. </el-row>
  221. <el-row :gutter="48">
  222. <el-col :span="15">
  223. <el-form-item label="服务器运行命令:" prop="" style="">
  224. <div style="display: flex;width: 100%;justify-content: space-between;">
  225. <el-input v-model="formJi.mdRunCmd" style="width: 100%;"/>
  226. </div>
  227. </el-form-item>
  228. </el-col>
  229. </el-row>
  230. </el-form>
  231. <div style="display: flex;margin-top: -5%;">
  232. <div class="card-header" style="margin-top: 5%;display: flex;justify-content: inherit;margin-left: 2%">
  233. <span style="font-size: 20px;margin-top: 5%; writing-mode: vertical-rl;position: relative;top: 15%;">运行环境</span>
  234. </div>
  235. <el-form size="mini" :key="tableKey" style="margin-top: 5%;width: 85%;" :model="formJi" label-position="right" label-width="120px" :rules="rulesJi">
  236. <el-row :gutter="48">
  237. <el-col :span="12">
  238. <el-form-item label="操作系统:" prop="" style="">
  239. <div style="display: flex;width: 100%;justify-content: space-between;">
  240. <el-select
  241. v-model="formJi.envOs"
  242. style="width: 75%;margin-left: 0%;"
  243. >
  244. <el-option
  245. v-for="item in optionsEnv"
  246. :key="item.value"
  247. :label="item.label"
  248. :value="item.value"
  249. />
  250. </el-select>
  251. </div>
  252. </el-form-item>
  253. </el-col>
  254. <el-col :span="12">
  255. <el-form-item label="运行架构:" prop="" style="">
  256. <div style="display: flex;width: 100%;justify-content: space-between;">
  257. <el-radio-group v-model="formJi.evnArmX86" class="ml-4" size="small" style="" >
  258. <el-radio label="X86" size="large">X86</el-radio>
  259. <el-radio label="ARM" size="large">ARM</el-radio>
  260. </el-radio-group>
  261. </div>
  262. </el-form-item>
  263. </el-col>
  264. </el-row>
  265. <el-row :gutter="24">
  266. <el-col :span="8">
  267. <el-form-item label="硬盘:" prop="" style="">
  268. <div style="display: flex;width: 100%;" >
  269. <el-input-number
  270. v-model="formJi.envDisk"
  271. :min="100"
  272. :max="2048"
  273. size="mini"
  274. controls-position="right"
  275. @change="handleChange"
  276. />
  277. <div style="margin-left: 4%;font-size: 15px;">
  278. G
  279. </div>
  280. </div>
  281. </el-form-item>
  282. </el-col>
  283. <el-col :span="8">
  284. <el-form-item label="CPU核数:" prop="" style="">
  285. <div style="display: flex;width: 100%;" >
  286. <el-input-number
  287. v-model="formJi.envCpuNum"
  288. :max="64"
  289. :min="2"
  290. size="mini"
  291. controls-position="right"
  292. @change="handleChange"
  293. />
  294. <div style="margin-left: 4%;font-size: 15px;">
  295. </div>
  296. </div>
  297. </el-form-item>
  298. </el-col>
  299. <el-col :span="8">
  300. <el-form-item label="内存:" prop="" style="">
  301. <div style="display: flex;width: 100%;" >
  302. <el-input-number
  303. v-model="formJi.envMem"
  304. :max="512"
  305. :min="1"
  306. size="mini"
  307. controls-position="right"
  308. @change="handleChange"
  309. />
  310. <div style="margin-left: 4%;font-size: 15px;">
  311. G
  312. </div>
  313. </div>
  314. </el-form-item>
  315. </el-col>
  316. </el-row>
  317. <el-row :gutter="24">
  318. <el-col :span="8">
  319. <el-form-item label="GPU型号:" prop="" style="">
  320. <div style="display: flex;width: 100%;">
  321. <el-input v-model="formJi.envGpuType" style="width: 100%;"/>
  322. </div>
  323. </el-form-item>
  324. </el-col>
  325. <el-col :span="8">
  326. <el-form-item label="GPU数量:" prop="" style="">
  327. <div style="display: flex;width: 100%;" >
  328. <el-input-number
  329. v-model="formJi.envGpuNum"
  330. :min="1"
  331. :max="64"
  332. size="mini"
  333. controls-position="right"
  334. @change="handleChange"
  335. />
  336. <div style="margin-left: 4%;font-size: 15px;">
  337. </div>
  338. </div>
  339. </el-form-item>
  340. </el-col>
  341. <el-col :span="8">
  342. <el-form-item label="GUP显存:" prop="" style="">
  343. <div style="display: flex;width: 100%;" >
  344. <el-input-number
  345. v-model="formJi.envGpuMem"
  346. :min="1"
  347. size="mini"
  348. :max="512"
  349. controls-position="right"
  350. @change="handleChange"
  351. />
  352. <div style="margin-left: 4%;font-size: 15px;">
  353. G
  354. </div>
  355. </div>
  356. </el-form-item>
  357. </el-col>
  358. </el-row>
  359. </el-form>
  360. </div>
  361. </el-tab-pane>
  362. <el-tab-pane label="输入" name="second">
  363. <el-form style="margin-left: 5%;margin-top: 2%;" label-position="right" label-width="120px" :model="formZu" class="demo-form-inline" ref="formRefZu" :rules="rulesZu">
  364. <el-form-item label="输入文档:" prop="">
  365. <div style="width: 75%;">
  366. <el-upload
  367. ref="uploadRef"
  368. :limit="1"
  369. accept=".xlsx, .xls"
  370. :headers="upload.headers"
  371. :on-change="handleChange"
  372. :file-list="fileList"
  373. :action="upload.url + '?file=' + upload.updateSupport"
  374. :on-progress="handleFileUploadProgress"
  375. :on-success="handleFileSuccess"
  376. :auto-upload="false"
  377. drag
  378. >
  379. <el-icon class="el-icon--upload"><upload-filled /></el-icon>
  380. <div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
  381. </el-upload>
  382. </div>
  383. <div style="color: #b1b3b8;width: 100%;">
  384. 注:请上传后缀名为.docx .pdf .txt的文件
  385. </div>
  386. <el-link type="primary" @click="downIn">{{formJi.mdInName}}</el-link>
  387. </el-form-item>
  388. <el-form-item label="说明:" prop="" style="margin-left: -1%;">
  389. <el-input v-model="formJi.mdInNote" style="width: 75%;" placeholder="请输入组件执行路径" :rows="2" type="textarea" resize="none"/>
  390. </el-form-item>
  391. </el-form>
  392. </el-tab-pane>
  393. <el-tab-pane label="输出" name="third">
  394. <el-form style="margin-left: 5%;margin-top: 2%;" label-position="right" label-width="120px" :model="formZu" class="demo-form-inline" ref="formRefZu" :rules="rulesZu">
  395. <el-form-item label="输出文档:" prop="">
  396. <div style="width: 75%;">
  397. <el-upload
  398. ref="uploadRef1"
  399. :limit="1"
  400. accept=".xlsx, .xls"
  401. :headers="upload.headers"
  402. :on-change="handleChange1"
  403. :file-list="fileList1"
  404. :action="upload.url + '?file=' + upload.updateSupport"
  405. :on-progress="handleFileUploadProgress"
  406. :on-success="handleFileSuccess1"
  407. :auto-upload="false"
  408. drag
  409. >
  410. <el-icon class="el-icon--upload"><upload-filled /></el-icon>
  411. <div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
  412. </el-upload>
  413. </div>
  414. <div style="color: #b1b3b8;width: 100%;">
  415. 注:请上传后缀名为.docx .pdf .txt的文件
  416. </div>
  417. <el-link type="primary" @click="downOut">{{formJi.mdOutName}}</el-link>
  418. </el-form-item>
  419. <el-form-item label="说明:" prop="" style="margin-left: -1%;">
  420. <el-input v-model="formJi.mdOutNote" style="width: 75%;" placeholder="请输入组件执行路径" :rows="2" type="textarea" resize="none"/>
  421. </el-form-item>
  422. </el-form>
  423. </el-tab-pane>
  424. </el-tabs>
  425. <template #footer>
  426. <span class="dialog-footer">
  427. <el-button @click="dialogVisible = false">取消</el-button>
  428. <el-button type="primary" @click="submit" v-if="!isEdit">
  429. 提交
  430. </el-button>
  431. <el-button type="primary" @click="subEdit" v-if="isEdit">
  432. 提交
  433. </el-button>
  434. </span>
  435. </template>
  436. </el-dialog>
  437. <el-dialog v-model="dialogVisibleDe" title="" width="50%" @close="" destroy-on-close class="custom-dialog-bg">
  438. <el-descriptions title="基本信息" :column="3" style="margin-top: 0%;margin-left: 1%;background: transparent;">
  439. <el-descriptions-item label="模型名称:">{{formJi.name}}</el-descriptions-item>
  440. <el-descriptions-item label="英文名:">{{formJi.enname}}</el-descriptions-item>
  441. <el-descriptions-item label="版本号:">{{formJi.version}}</el-descriptions-item>
  442. <el-descriptions-item label="接口分类:">{{formJi.type}}</el-descriptions-item>
  443. <el-descriptions-item label="开发语言:" span="2">{{formJi.devlang}}</el-descriptions-item>
  444. <el-descriptions-item label="简介:" span="3">{{formJi.intro}}</el-descriptions-item>
  445. </el-descriptions>
  446. <el-divider style="margin-top: 0%;"/>
  447. <el-descriptions title="单位" :column="2" style="margin-top: 1%;margin-left: 1%;background-color: transparent;">
  448. <el-descriptions-item label="模型归属单位:">{{formJi.mdUnit}}</el-descriptions-item>
  449. <el-descriptions-item label="联系方式:">{{formJi.mdContact}}</el-descriptions-item>
  450. <el-descriptions-item label="技术支持单位:">{{formJi.devUnit}}</el-descriptions-item>
  451. <el-descriptions-item label="联系方式:">{{formJi.devContact}}</el-descriptions-item>
  452. </el-descriptions>
  453. <el-tabs
  454. v-model="activeName"
  455. type="card"
  456. style="margin-top: 1%;background-color: transparent;"
  457. >
  458. <el-tab-pane label="部署情况" name="first" style="background-color: transparent;">
  459. <el-descriptions title="" :column="3" style="margin-top: 0%;margin-left: 1%;background-color: transparent;">
  460. <el-descriptions-item label="服务器IP:" span="2">{{formJi.deployIp}}</el-descriptions-item>
  461. <el-descriptions-item label="端口:">{{formJi.deployPort}}</el-descriptions-item>
  462. <el-descriptions-item label="部署位置:" span="2">{{formJi.deployDir}}</el-descriptions-item>
  463. <el-descriptions-item label="服务访问地址:">{{formJi.mirrorImageUrl}}</el-descriptions-item>
  464. <el-descriptions-item label="服务器运行命令:" span="3">{{formJi.mdRunCmd}}</el-descriptions-item>
  465. <el-descriptions-item label="操作系统:" span="2">{{formJi.envOs}}</el-descriptions-item>
  466. <el-descriptions-item label="运行架构:" span="3">{{formJi.evnArmX86}}</el-descriptions-item>
  467. <el-descriptions-item label="硬盘:" span="">
  468. {{formJi.envDisk + 'G'}}
  469. </el-descriptions-item>
  470. <el-descriptions-item label="CPU核心数:">
  471. {{formJi.envCpuNum + '个'}}
  472. </el-descriptions-item>
  473. <el-descriptions-item label="内存:">
  474. {{formJi.envMem + 'G'}}
  475. </el-descriptions-item>
  476. <el-descriptions-item label="GPU型号:">{{formJi.envGpuType}}</el-descriptions-item>
  477. <el-descriptions-item label="GPU数量:">
  478. {{formJi.envGpuNum + '个'}}
  479. </el-descriptions-item>
  480. <el-descriptions-item label="GUP显存:">
  481. {{formJi.envGpuMem + 'G'}}
  482. </el-descriptions-item>
  483. </el-descriptions>
  484. </el-tab-pane>
  485. <el-tab-pane label="输入" name="second">
  486. <el-descriptions title="" :column="2" style="margin-top: 0%;margin-left: 1%;">
  487. <el-descriptions-item label="输入文档:" span="2">
  488. <el-link type="primary" @click="downIn">{{formJi.mdInName}}</el-link>
  489. </el-descriptions-item>
  490. <el-descriptions-item label="说明:">{{formJi.mdInNote}}</el-descriptions-item>
  491. </el-descriptions>
  492. </el-tab-pane>
  493. <el-tab-pane label="输出" name="third">
  494. <el-descriptions title="" :column="2" style="margin-top: 0%;margin-left: 1%;">
  495. <el-descriptions-item label="输出文档:" span="2">
  496. <el-link type="primary" @click="downOut">{{formJi.mdOutName}}</el-link>
  497. </el-descriptions-item>
  498. <el-descriptions-item label="说明:">{{formJi.mdOutNote}}</el-descriptions-item>
  499. </el-descriptions>
  500. </el-tab-pane>
  501. </el-tabs>
  502. </el-dialog>
  503. <el-dialog @close="clearForm" v-model="dialogVisiblePei" width="70%" title="参数配置">
  504. <el-tabs v-model="activeName" type="border-card">
  505. <el-tab-pane label="基本信息" name="first">
  506. <el-descriptions title="" :column="3" style="margin-top: 0%;margin-left: 1%;background: transparent;">
  507. <el-descriptions-item label="模型名称:">{{formJi.name}}</el-descriptions-item>
  508. <el-descriptions-item label="英文名:">{{formJi.enname}}</el-descriptions-item>
  509. <el-descriptions-item label="版本号:">{{formJi.version}}</el-descriptions-item>
  510. <el-descriptions-item label="接口分类:">{{formJi.type}}</el-descriptions-item>
  511. <el-descriptions-item label="开发语言:" span="2">{{formJi.devlang}}</el-descriptions-item>
  512. <el-descriptions-item label="简介:" span="3">{{formJi.intro}}</el-descriptions-item>
  513. </el-descriptions>
  514. <el-divider style="margin-top: 0%;"/>
  515. <el-descriptions title="" :column="2" style="margin-top: 1%;margin-left: 1%;background-color: transparent;">
  516. <el-descriptions-item label="模型归属单位:">{{formJi.mdUnit}}</el-descriptions-item>
  517. <el-descriptions-item label="联系方式:">{{formJi.mdContact}}</el-descriptions-item>
  518. <el-descriptions-item label="技术支持单位:">{{formJi.devUnit}}</el-descriptions-item>
  519. <el-descriptions-item label="联系方式:">{{formJi.devContact}}</el-descriptions-item>
  520. </el-descriptions>
  521. </el-tab-pane>
  522. <el-tab-pane label="模型参数" style="height: 50vh;" :key="activeTabKey">
  523. <div style="display: flex;justify-content: space-between;margin-right: 2%;align-items: center;background-color: #e9e9eb;;width: 100%;">
  524. <div style="display: flex;align-items: center;margin-left: 1%;">
  525. <el-checkbox v-model="checked1" label="参数是否分组" size="large" @change="gatherTable"/>
  526. <el-button @click="showAddFenzu" style="margin-left: 10%;" type="success" size="mini" plain v-if="checked1">新增分组</el-button>
  527. </div>
  528. <div style="display: flex;justify-content: flex-end;margin-right: 1%;">
  529. <el-button @click="addCan" style="margin-left: 5%;" type="success" size="mini" plain :disabled="selFen">新增参数</el-button>
  530. <el-button @click="delAllCan" style="margin-top: 0%;" type="danger" size="mini" plain>删除</el-button>
  531. </div>
  532. </div>
  533. <div style="display: flex;">
  534. <div v-if="checked1" style="margin-top:1%;width: 10%;background-color: #F2F6FC;height:45vh;">
  535. <el-tree :expand-on-click-node="false" ref="treeRef" :filter-node-method="filterNode" :current-node-key="currentNodeKey" class="treeLeft"
  536. :data="groupTreeData" @node-click="handleNodeClick" node-key="id" style="margin-left: 0%;margin-top: 1%;width: 100%;background-color: transparent;" default-expand-all :key="valueKet">
  537. <template #default="{ node, data }">
  538. <span style="justify-content: space-between;display: flex;width: 100%;align-items: center;margin-left: -10%;">
  539. <div class="custom-tree-node" style="align-items: center;line-height: 1.5;">
  540. <span style="">{{ node.label }}</span>
  541. </div>
  542. <div style="margin-right: 1%;position: absolute;left:78%;">
  543. <el-dropdown trigger="hover" @click.stop v-if="currentNodeKey === data.mgid">
  544. <el-icon><MoreFilled /></el-icon>
  545. <!-- <svg-icon icon-class="zhankai"/> -->
  546. <template #dropdown>
  547. <el-dropdown-menu>
  548. <el-dropdown-item style="display: flex;" @click="showEditFen">
  549. <el-icon class="el-icon--right" style="color: black;">
  550. <Connection />
  551. </el-icon>
  552. <div>
  553. 编辑分组
  554. </div>
  555. </el-dropdown-item>
  556. <divider/>
  557. <el-dropdown-item style="display: flex;" @click="delFenZu" divided>
  558. <el-icon class="el-icon--right" style="color: black;">
  559. <CircleClose />
  560. </el-icon>
  561. <div>
  562. 删除分组
  563. </div>
  564. </el-dropdown-item>
  565. </el-dropdown-menu>
  566. </template>
  567. </el-dropdown>
  568. </div>
  569. </span>
  570. </template>
  571. </el-tree>
  572. </div>
  573. <div style="width: 90%;flex: 1;">
  574. <el-table
  575. style="margin-top: 1%;width: 100%;margin-left: 1%;overflow: auto;"
  576. :data="tableDataCan"
  577. :cell-style="{ textAlign: 'center',padding:'3px 0px' }"
  578. :header-cell-style="{ textAlign: 'center', }"
  579. max-height="45vh"
  580. :row-style="{ height: heightAll*0.01+'px',fontSize: '16px',textAlign:'center' }"
  581. border>
  582. <el-table-column prop="parName" label="*参数英文名">
  583. <template #default="scope" style="width: 120%;">
  584. <el-input v-model="scope.row.parEnname" style="width: 120%;margin-left: -10%;"/>
  585. </template>
  586. </el-table-column>
  587. <el-table-column prop="parName" label="*参数名称">
  588. <template #default="scope">
  589. <el-input v-model="scope.row.parName" style="width: 120%;margin-left: -10%;"/>
  590. </template>
  591. </el-table-column>
  592. <el-table-column prop="parType" label="*参数类型" >
  593. <template #default="scope">
  594. <el-input v-model="scope.row.parType" style="width: 120%;margin-left: -10%;"/>
  595. </template>
  596. </el-table-column>
  597. <el-table-column prop="parLine" label="行号">
  598. <template #default="scope">
  599. <el-input v-model="scope.row.parLine" style="width: 120%;margin-left: -10%;"/>
  600. </template>
  601. </el-table-column>
  602. <el-table-column prop="parNote" label="维度">
  603. <template #default="scope">
  604. <el-input v-model="scope.row.parDimen" style="width: 120%;margin-left: -10%;"/>
  605. </template>
  606. </el-table-column>
  607. <el-table-column prop="parNote" label="表达式">
  608. <template #default="scope">
  609. <el-input v-model="scope.row.parExpr" style="width: 120%;margin-left: -10%;"/>
  610. </template>
  611. </el-table-column>
  612. <el-table-column prop="parNote" label="*默认值">
  613. <template #default="scope">
  614. <el-input v-model="scope.row.parDefVal" style="width: 120%;margin-left: -10%;"/>
  615. </template>
  616. </el-table-column>
  617. <el-table-column prop="parNote" label="参数范围">
  618. <template #default="scope">
  619. <el-input v-model="scope.row.parRange" style="width: 120%;margin-left: -10%;"/>
  620. </template>
  621. </el-table-column>
  622. <el-table-column prop="parNote" label="版本号">
  623. <template #default="scope">
  624. <el-input v-model="scope.row.parVersion" style="width: 120%;margin-left: -10%;"/>
  625. </template>
  626. </el-table-column>
  627. <el-table-column prop="parNote" label="操作" width="85">
  628. <template #default="scope">
  629. <el-button type="danger" @click="delCan(scope.$index, scope.row)" text size="mini" style="margin-left: 0%;">删除</el-button>
  630. </template>
  631. </el-table-column>
  632. </el-table>
  633. </div>
  634. </div>
  635. </el-tab-pane>
  636. <el-tab-pane label="模型状态">Role</el-tab-pane>
  637. </el-tabs>
  638. <template #footer>
  639. <span class="dialog-footer">
  640. <el-button @click="dialogVisiblePei = false">取消</el-button>
  641. <el-button type="primary" @click="saveChangePar">
  642. 提交
  643. </el-button>
  644. </span>
  645. </template>
  646. </el-dialog >
  647. <el-dialog v-model="dialogVisibleFen" :title="titleFen" width="30%" @close="clearFromTree" destroy-on-close :key="tableKey">
  648. <el-form :label-width="100" label-position="right" style="margin-left: 5%;margin-top: 2%;" :model="formTree" class="demo-form-inline" ref="formRefTree" :rules="rulesTree">
  649. <el-form-item label="名称:" prop="parGroupName" style="">
  650. <el-input v-model="formTree.parGroupName" @blur="handleBlur" style="width: 75%;" placeholder="" resize="none"/>
  651. </el-form-item>
  652. <el-form-item label="组编码:" prop="parGroupCode" style="">
  653. <el-input v-model="formTree.parGroupCode" style="width: 75%;" placeholder="" resize="none"/>
  654. </el-form-item>
  655. <el-form-item label="说明:" prop="parGroupNote">
  656. <el-input v-model="formTree.parGroupNote" style="width: 75%;" placeholder="" type="textarea" resize="none"/>
  657. </el-form-item>
  658. <el-form-item label="排序:" prop="parGroupSort">
  659. <el-input-number v-model="formTree.parGroupSort" :min="1" style="width: 50%;"/>
  660. </el-form-item>
  661. </el-form>
  662. <template #footer>
  663. <span class="dialog-footer">
  664. <el-button size="mini" @click="dialogVisibleFen = false">取消</el-button>
  665. <el-button type="primary" @click="submitFen" size="mini">
  666. 提交
  667. </el-button>
  668. </span>
  669. </template>
  670. </el-dialog>
  671. </div>
  672. </div>
  673. </template>
  674. <script setup>
  675. import { getModelList,addModel,delMdid,getModelDetail,updateModel,addGroup,getParamsList,changePar,delAllPar,getModelParList,delFen,changeShenhe } from "@/api/register/regCom";
  676. import { ref, onMounted, onUnmounted, nextTick } from 'vue';
  677. import { Search } from '@element-plus/icons-vue'
  678. import {
  679. ArrowLeft,
  680. Plus
  681. } from '@element-plus/icons-vue'
  682. import { reactive } from 'vue'
  683. import { forwardRefProps } from 'element-plus/es/components/tooltip-v2/src/forward-ref.mjs';
  684. import { getToken } from "@/utils/auth";
  685. import { fa } from "element-plus/es/locales.mjs";
  686. import { column } from "element-plus/es/components/table-v2/src/common.mjs";
  687. import { TRUE } from "sass";
  688. import { editGroup } from "../../../api/register/regCom";
  689. import pinyin from 'pinyin';
  690. const { proxy } = getCurrentInstance();
  691. const dialogVisibleFen = ref(false)
  692. const dragTableRef = ref()
  693. const isaddFen = ref(false)
  694. const dialogVisible = ref(false)
  695. const dialogVisibleDe = ref(false)
  696. const dialogVisiblePei = ref(false)
  697. const active = ref(0)
  698. const isEdit = ref(true)
  699. const name = ref('')
  700. const isAdd = ref(true)
  701. const mdUnit = ref('')
  702. const isElse = ref(false)
  703. const elseLan = ref('')
  704. const tableDataCan = ref([])
  705. const selFen = ref(true)
  706. const groupTreeData = ref([])
  707. const parRow = ref({})
  708. const formJi = ref({
  709. name:'',
  710. version:'',
  711. enname:'',
  712. devlang:'',
  713. intro:'',
  714. type:'',
  715. mdContact:'',
  716. mdUnit:'',
  717. devUnit:'',
  718. devContact:'',
  719. deployDir:'',
  720. deployIp:'',
  721. deployPort:'',
  722. mirrorImageUrl:'',
  723. mdRunCmd:'',
  724. envOs:'',
  725. envDisk:'',
  726. envGpuMem:'11',
  727. evnArmX86:'',
  728. envCpuNum:'',
  729. envGpuType:'',
  730. envGpuNum:'2',
  731. envMem:'',
  732. mdInNote:'',
  733. mdOutNote:''
  734. });
  735. const activeTabKey = ref(0)
  736. const rulesJi = reactive({
  737. name: [{ required: true, message: '必填', trigger: 'blur' }],
  738. enname: [{ required: true, message: '必填', trigger: 'blur' }],
  739. });
  740. const formRefJi = ref();
  741. const formZu = ref({
  742. mirrorImageEurl:'',
  743. mdCPU:'',
  744. mdGPU:''
  745. });
  746. const rulesZu = reactive({
  747. mirrorImageEurl: [{ required: true, message: '必填', trigger: 'blur' }],
  748. mdCPU: [{ required: true, message: '必填', trigger: 'blur' }],
  749. });
  750. const formRefZu = ref();
  751. const formTree = ref({
  752. parGroupSort:1,
  753. parGroupNote:'',
  754. parGroupName:'',
  755. parGroupCode:''
  756. });
  757. const rulesTree = reactive({
  758. parGroupName: [{ required: true, message: '必填', trigger: 'blur' }],
  759. parGroupSort: [{ required: true, message: '必填', trigger: 'blur' }],
  760. parGroupCode: [{ required: true, message: '必填', trigger: 'blur' }],
  761. });
  762. const formRefTree = ref();
  763. const activeName = ref('first')
  764. const titleFen = ref('');
  765. const upload = reactive({
  766. // 是否显示弹出层(用户导入)
  767. open: false,
  768. // 弹出层标题(用户导入)
  769. title: "",
  770. // 是否禁用上传
  771. isUploading: false,
  772. // 是否更新已经存在的用户数据
  773. updateSupport: '',
  774. // 设置上传的请求头部
  775. headers: { Authorization: "Bearer " + getToken() },
  776. // 上传的地址
  777. url: import.meta.env.VITE_APP_BASE_API + "/common/upload"
  778. });
  779. const downUrl = ref(import.meta.env.VITE_APP_BASE_API)
  780. const tableKey = ref(0);
  781. const totalComReg = ref()
  782. const currentPage = ref(1)
  783. const tableData2 = ref([
  784. { date1:'流域拓扑', date2:'', date3:'single', date4:'基于水文响应' },
  785. { date1:'雨量站', date2:'', date3:'single', date4:'基于水文响应' },
  786. { date1:'水库', date2:'', date3:'single', date4:'基于水文响应' }
  787. ]);
  788. const tableData3 = ref([
  789. { date1:'流域拓扑', date2:'', date3:'single', date4:'基于水文响应' },
  790. { date1:'水库', date2:'', date3:'single', date4:'基于水文响应' },
  791. { date1:'雨量站', date2:'', date3:'single', date4:'基于水文响应' }
  792. ]);
  793. const checked1 = ref(false)
  794. const tableData1= [{date1:'初始状态',
  795. date2:'sts',
  796. date3:'数据项',
  797. date4:'初始状态',
  798. date5:'是',
  799. date6:'否',
  800. date7:'2023-09-08'
  801. }]
  802. const checkGroup = [
  803. {label:'水文预报'},
  804. {label:'维水动力'},
  805. {label:'二维水动力'},
  806. {label:'机器学习'},
  807. ]
  808. let tableData = ref([{name:'1'}])
  809. const heightAll = window.innerHeight
  810. const valueHelpSel = '';
  811. const tableheight = window.innerHeight*0.8
  812. const optionsType = [
  813. {
  814. value: '1',
  815. label: '水利专业模型',
  816. },
  817. {
  818. value: '2',
  819. label: '排水专业模型',
  820. },
  821. {
  822. value: '3',
  823. label: '供水专业模型',
  824. },
  825. {
  826. value: '4',
  827. label: '海洋专业模型',
  828. },
  829. ]
  830. const optionsEnv = ref([
  831. {
  832. value: 'windwos',
  833. label: 'windwos',
  834. },
  835. {
  836. value: 'Linux',
  837. label: 'Linux',
  838. },
  839. {
  840. value: 'Ubuntu',
  841. label: 'Ubuntu',
  842. },
  843. {
  844. value: 'CentOS',
  845. label: 'CentOS',
  846. },
  847. {
  848. value: 'Debian',
  849. label: 'Debian',
  850. },
  851. {
  852. value: 'RedHat',
  853. label: 'RedHat',
  854. },
  855. {
  856. value: '统信',
  857. label: '统信',
  858. },
  859. {
  860. value: '麒麟',
  861. label: '麒麟',
  862. },
  863. {
  864. value: '欧拉',
  865. label: '欧拉',
  866. },
  867. ])
  868. const uploadRef = ref(null);
  869. const fileList = ref([]);
  870. const fileList1 = ref([]);
  871. const tableDataCanAll = ref([]);
  872. const parForm = ref('')
  873. const currentNodeKey = ref('')
  874. const parTree = ref({})
  875. onMounted(() => {
  876. getModelListTable()
  877. // addNewModel()
  878. });
  879. const handleChange = (file, files) => {
  880. fileList.value = files;
  881. };
  882. const handleChange1 = (file, files) => {
  883. fileList1.value = files;
  884. };
  885. function getChineseInitials(str) {
  886. if (!str || typeof str !== 'string') return '';
  887. // 拆分字符串为字符数组
  888. const chars = str.split('');
  889. const result = chars.map(char => {
  890. // 判断是否为中文(Unicode范围:\u4e00-\u9fa5)
  891. if (/[\u4e00-\u9fa5]/.test(char)) {
  892. // 获取中文首字母拼音(忽略多音字)
  893. const pinyinArr = pinyin(char, {
  894. style: pinyin.STYLE_FIRST_LETTER,
  895. heteronym: false
  896. });
  897. return pinyinArr[0][0]; // 返回首字母
  898. }
  899. return char; // 非中文字符直接保留(若需忽略英文可改为空字符串)
  900. });
  901. return result.join('');
  902. }
  903. function shenhe(row){
  904. var par = {
  905. srvIds:row.mdid,
  906. audit:'2',
  907. devkind:'SYS'
  908. }
  909. changeShenhe(par).then(res=>{
  910. if(res.code===200){
  911. proxy.$modal.msgSuccess("已可测试!");
  912. }
  913. })
  914. }
  915. function handleBlur(){
  916. formTree.value.parGroupCode = getChineseInitials(formTree.value.parGroupName)
  917. }
  918. function gatherTable(){
  919. if(checked1.value===false){
  920. var keyArray = []
  921. tableDataCanAll.value.forEach(item=>{
  922. keyArray.push(item.key)
  923. })
  924. tableDataCanAll.value.forEach(item=>{
  925. tableDataCan.value.forEach(item2=>{
  926. if(item2.key===item.key){
  927. item = item2
  928. }
  929. })
  930. })
  931. tableDataCan.value.forEach(item=>{
  932. if(!keyArray.includes(item.key)){
  933. tableDataCanAll.value.push(item)
  934. }
  935. })
  936. currentNodeKey.value = null
  937. selFen.value = true
  938. tableDataCan.value = tableDataCanAll.value
  939. }
  940. }
  941. function handleNodeClick(node, data){
  942. var keyArray = []
  943. selFen.value = false
  944. tableDataCanAll.value.forEach(item=>{
  945. keyArray.push(item.key)
  946. })
  947. tableDataCanAll.value.forEach(item=>{
  948. tableDataCan.value.forEach(item2=>{
  949. if(item2.key===item.key){
  950. item = item2
  951. }
  952. })
  953. })
  954. tableDataCan.value.forEach(item=>{
  955. if(!keyArray.includes(item.key)){
  956. tableDataCanAll.value.push(item)
  957. }
  958. })
  959. parTree.value = data.data
  960. tableDataCan.value = []
  961. tableDataCanAll.value.forEach(item=>{
  962. if(item.parGroup==data.data.parGroupCode){
  963. tableDataCan.value.push(item)
  964. }
  965. })
  966. currentNodeKey.value = data.data.mgid
  967. }
  968. function submitFen(){
  969. formTree.value.mdid = parForm.value.mdid
  970. console.log(isaddFen.value)
  971. if(isaddFen.value===true){
  972. addGroup(formTree.value).then(res=>{
  973. if(res.code===200){
  974. var par = {
  975. mdid:parForm.value.mdid
  976. }
  977. getModelParList(par).then(res1=>{
  978. proxy.$modal.msgSuccess("新增成功");
  979. groupTreeData.value = res1.data
  980. groupTreeData.value.forEach((item, index, array) => {
  981. item.label = item.parGroupName
  982. item.value = item.parGroupCode
  983. dialogVisibleFen.value = false
  984. })
  985. })
  986. }
  987. })
  988. }
  989. else{
  990. editGroup(formTree.value).then(res=>{
  991. if(res.code===200){
  992. var par = {
  993. mdid:parForm.value.mdid
  994. }
  995. getModelParList(par).then(res1=>{
  996. proxy.$modal.msgSuccess("修改成功");
  997. groupTreeData.value = res1.data
  998. groupTreeData.value.forEach((item, index, array) => {
  999. item.label = item.parGroupName
  1000. item.value = item.parGroupCode
  1001. dialogVisibleFen.value = false
  1002. })
  1003. })
  1004. }
  1005. })
  1006. }
  1007. }
  1008. function showEditFen(){
  1009. isaddFen.value = false
  1010. dialogVisibleFen.value = true
  1011. formTree.value = parTree.value
  1012. }
  1013. function showAddFenzu(){
  1014. isaddFen.value = true
  1015. dialogVisibleFen.value = true
  1016. }
  1017. function delFenZu(){
  1018. proxy.$modal.confirm('是否确认删除所有参数?').then(function () {
  1019. return delFen(parTree.value.mgid);
  1020. }).then(() => {
  1021. var par = {
  1022. mdid:parForm.value.mdid
  1023. }
  1024. getModelParList(par).then(res1=>{
  1025. groupTreeData.value = res1.data
  1026. groupTreeData.value.forEach((item, index, array) => {
  1027. item.label = item.parGroupName
  1028. item.value = item.parGroupCode
  1029. dialogVisibleFen.value = false
  1030. })
  1031. })
  1032. proxy.$modal.msgSuccess("删除成功");
  1033. }).catch(() => {});
  1034. }
  1035. function delAllCan(){
  1036. proxy.$modal.confirm('是否确认删除所有参数?').then(function () {
  1037. return delAllPar(parForm.value.mdid);
  1038. }).then(() => {
  1039. tableDataCan.value = []
  1040. proxy.$modal.msgSuccess("删除成功");
  1041. }).catch(() => {});
  1042. }
  1043. function saveChangePar(){
  1044. tableDataCanAll.value.forEach((item, index, array) => {
  1045. item.mdid = parForm.value.mdid
  1046. item.parCate = 'int'
  1047. })
  1048. changePar(tableDataCanAll.value).then(res=>{
  1049. if(res.code===200){
  1050. proxy.$modal.msgSuccess("修改成功");
  1051. dialogVisiblePei.value = false
  1052. getModelListTable()
  1053. }
  1054. })
  1055. }
  1056. async function showPei(row){
  1057. dialogVisiblePei.value = true
  1058. parRow.value = row
  1059. var par = {
  1060. mdid:row.mdid
  1061. }
  1062. await getModelParList(par).then(res=>{
  1063. groupTreeData.value = res.data
  1064. groupTreeData.value.forEach((item, index, array) => {
  1065. item.label = item.parGroupName
  1066. item.value = item.parGroupCode
  1067. })
  1068. })
  1069. await getModelDetail(row.mdid).then(res=>{
  1070. parForm.value = res.data
  1071. formJi.value = res.data
  1072. })
  1073. await getParamsList(par).then(res=>{
  1074. tableDataCan.value = res.data
  1075. tableDataCan.value.forEach(item=>{
  1076. item.key = Math.random()
  1077. })
  1078. })
  1079. tableDataCanAll.value = JSON.parse(JSON.stringify(tableDataCan.value))
  1080. }
  1081. function delCan(index,row){
  1082. tableDataCan.value.splice(index, 1)
  1083. tableDataCanAll.value.forEach((item,index,array)=>{
  1084. if(item.key===row.key){
  1085. array.splice(index,1)
  1086. }
  1087. })
  1088. }
  1089. function showDe(row){
  1090. dialogVisibleDe.value = true
  1091. getModelDetail(row.mdid).then(res=>{
  1092. parForm.value = res.data
  1093. formJi.value = res.data
  1094. if(formJi.value.devlang!=='java'&&formJi.value.devlang!=='nodeJs'&&formJi.value.devlang!=='python'&&formJi.value.devlang!=='c/c++'){
  1095. isElse.value = true
  1096. formJi.value.devlang = 1
  1097. }
  1098. })
  1099. }
  1100. function addCan(){
  1101. tableDataCan.value.push({
  1102. key:Math.random(),
  1103. mdid:parForm.value.mdid,
  1104. parGroup:parTree.value.parGroupCode
  1105. })
  1106. console.log(tableDataCan.value)
  1107. }
  1108. function downOut(){
  1109. var url = window.location.host + formJi.value.mdOutFile
  1110. console.log(url)
  1111. const link = document.createElement('a');
  1112. link.href = 'http://' + url.toString();
  1113. link.download = formJi.value.mdOutName; // 自定义文件名(可选)
  1114. document.body.appendChild(link);
  1115. link.click();
  1116. document.body.removeChild(link);
  1117. }
  1118. function downIn(){
  1119. var url = window.location.host + formJi.value.mdInFile
  1120. console.log(url)
  1121. const link = document.createElement('a');
  1122. link.href = 'http://' + url.toString();
  1123. link.download = formJi.value.mdInName; // 自定义文件名(可选)
  1124. document.body.appendChild(link);
  1125. link.click();
  1126. document.body.removeChild(link);
  1127. }
  1128. function delModel(row){
  1129. proxy.$modal.confirm('是否确认删除?').then(function () {
  1130. return delMdid(row.mdid);
  1131. }).then(() => {
  1132. getModelListTable();
  1133. proxy.$modal.msgSuccess("删除成功");
  1134. }).catch(() => {});
  1135. }
  1136. async function showEdit(row){
  1137. dialogVisible.value = true
  1138. isEdit.value = true
  1139. await nextTick()
  1140. getModelDetail(row.mdid).then(res=>{
  1141. formJi.value = res.data
  1142. if(formJi.value.devlang!=='java'&&formJi.value.devlang!=='nodeJs'&&formJi.value.devlang!=='python'&&formJi.value.devlang!=='c/c++'){
  1143. console.log(formJi.value.devlang)
  1144. isElse.value = true
  1145. formJi.value.devlang = '1'
  1146. }
  1147. })
  1148. }
  1149. async function subEdit(){
  1150. if(fileList.value.length>0&&fileList1.value.length===0){
  1151. await proxy.$refs["uploadRef"].submit();
  1152. }
  1153. else if(fileList.value.length>0&&fileList.value.length===0){
  1154. await proxy.$refs["uploadRef1"].submit();
  1155. }
  1156. else if(fileList.value.length>0&&fileList.value.length>0){
  1157. await proxy.$refs["uploadRef1"].submit();
  1158. await proxy.$refs["uploadRef"].submit();
  1159. }
  1160. else{
  1161. await formRefJi.value.validate((valid) => {
  1162. if(valid){
  1163. if(formJi.value.devlang==='1'){
  1164. formJi.value.devlang = elseLan.value
  1165. }
  1166. delete formJi.value.msort
  1167. formJi.value.devkind = 'SYS'
  1168. updateModel(formJi.value).then(res=>{
  1169. if(res.code===200){
  1170. proxy.$modal.msgSuccess("修改成功");
  1171. dialogVisible.value = false
  1172. getModelListTable()
  1173. }
  1174. })
  1175. }
  1176. });
  1177. }
  1178. }
  1179. async function submit(){
  1180. formRefJi.value.validate((valid) => {
  1181. console.log(formJi.value,valid)
  1182. if(valid){
  1183. if(formJi.value.devlang==='1'){
  1184. formJi.value.devlang = elseLan.value
  1185. }
  1186. delete formJi.value.msort
  1187. formJi.value.devkind = 'SYS'
  1188. formJi.value.cateid = 'eec8aee5-d859-4b44-b0a1-56a22e0c29bb'
  1189. addModel(formJi.value).then(res=>{
  1190. if(res.code===200){
  1191. proxy.$modal.msgSuccess("新增成功");
  1192. dialogVisible.value = false
  1193. getModelListTable()
  1194. }
  1195. })
  1196. }
  1197. })
  1198. }
  1199. async function handleFileSuccess1(response, file, fileList){
  1200. formJi.value.mdOutFile = response.originalFilename
  1201. formJi.value.mdOutName = response.fileName
  1202. await formRefJi.value.validate((valid) => {
  1203. if(valid){
  1204. if(formJi.value.devlang==='1'){
  1205. formJi.value.devlang = elseLan.value
  1206. }
  1207. delete formJi.value.msort
  1208. formJi.value.devkind = 'SYS'
  1209. updateModel(formJi.value).then(res=>{
  1210. if(res.code===200){
  1211. proxy.$modal.msgSuccess("修改成功");
  1212. dialogVisible.value = false
  1213. getModelListTable()
  1214. }
  1215. })
  1216. }
  1217. });
  1218. };
  1219. async function handleFileSuccess(response, file, fileList){
  1220. formJi.value.mdInFile = response.originalFilename
  1221. formJi.value.mdInName = response.fileName
  1222. await formRefJi.value.validate((valid) => {
  1223. if(valid){
  1224. if(formJi.value.devlang==='1'){
  1225. formJi.value.devlang = elseLan.value
  1226. }
  1227. delete formJi.value.msort
  1228. formJi.value.devkind = 'SYS'
  1229. updateModel(formJi.value).then(res=>{
  1230. if(res.code===200){
  1231. proxy.$modal.msgSuccess("修改成功");
  1232. dialogVisible.value = false
  1233. getModelListTable()
  1234. }
  1235. })
  1236. }
  1237. });
  1238. };
  1239. function clearFromTree(){
  1240. formTree.value = {}
  1241. }
  1242. function clearForm(){
  1243. tableDataCan.value = []
  1244. activeName.value = 'first'
  1245. fileList.value = []
  1246. fileList1.value = []
  1247. formJi.value = {
  1248. name:'',
  1249. version:'',
  1250. enname:'',
  1251. devlang:'',
  1252. intro:'',
  1253. type:'',
  1254. mdContact:'',
  1255. mdUnit:'',
  1256. devUnit:'',
  1257. devContact:'',
  1258. deployDir:'',
  1259. deployIp:'',
  1260. deployPort:'',
  1261. mirrorImageUrl:'',
  1262. mdRunCmd:'',
  1263. envOs:'',
  1264. envDisk:'',
  1265. envGpuMem:'',
  1266. evnArmX86:'',
  1267. envCpuNum:'',
  1268. envGpuType:'',
  1269. envGpuNum:'',
  1270. envMem:'',
  1271. mdInNote:'',
  1272. mdOutNote:''
  1273. }
  1274. }
  1275. function reg(){
  1276. isEdit.value = false
  1277. dialogVisible.value = true
  1278. }
  1279. function getModelListTable(){
  1280. tableData.value = []
  1281. var par = {
  1282. pageNum:1,
  1283. pageSize:20,
  1284. name:name.value,
  1285. mdUnit:mdUnit.value,
  1286. devkind:'SYS'
  1287. }
  1288. getModelList(par).then(res=>{
  1289. tableData.value = res.rows
  1290. totalComReg.value = res.total
  1291. console.log(tableData)
  1292. })
  1293. }
  1294. const seledMo = ['primary','plain','plain','plain','plain','plain','plain']
  1295. </script>
  1296. <style scoped>
  1297. :deep(.treeLeft) .el-tree-node__content {
  1298. display: flex !important;
  1299. height: 28px; /* 按设计稿调整高度 */
  1300. align-items: center;
  1301. padding-top: 0 !important;
  1302. }
  1303. :deep(.treeLeft) .el-tree-node__content:hover {
  1304. background-color: #e9e9eb;
  1305. }
  1306. :deep(.treeLeft) .el-tree-node__content:active {
  1307. background-color: rgka(69,157,255,0.1) !important;
  1308. }
  1309. /* 选中态(Active) */
  1310. :deep(.treeLeft) .el-tree-node.is-current > .el-tree-node__content {
  1311. background-color: #c6e2ff !important;
  1312. }
  1313. .tabs-wrapper {
  1314. position: relative; /* 确保内容层在伪元素上方 */
  1315. z-index: 1; /* 关键:高于背景图 */
  1316. }
  1317. .tabs-wrapper :deep(.el-tabs),
  1318. .tabs-wrapper :deep(.el-tabs__content) {
  1319. background-color: red !important;
  1320. }
  1321. :deep(.el-tabs){
  1322. background-color: transparent !important;
  1323. }
  1324. :deep(.el-tabs__content){
  1325. background-color: transparent !important;
  1326. }
  1327. :deep(.custom-dialog-bg) {
  1328. z-index: 1000;
  1329. background-image: url('@/assets/images/backDia.jpg') !important;
  1330. background-position-x: left;
  1331. background-position-y: bottom;
  1332. background-size: initial;
  1333. background-repeat: repeat-x;
  1334. background-attachment: initial;
  1335. background-origin: initial;
  1336. background-clip: initial;
  1337. background-color: rgb(255, 255, 255);
  1338. }
  1339. :deep(.custom-dialog-bg .el-dialog__header) {
  1340. }
  1341. :deep(.custom-dialog-bg .el-dialog__body) {
  1342. color: #ecf0f1 !important; ; /* 内容文字颜色 */
  1343. }
  1344. /* 横向排列单选框标签和输入框 */
  1345. .custom-input-wrapper {
  1346. display: flex;
  1347. align-items: center;
  1348. gap: 10px; /* 调整间距 */
  1349. }
  1350. /* 输入框仅显示底部横线 */
  1351. .underline-input :deep(.el-input__wrapper) {
  1352. padding: 0;
  1353. box-shadow: none !important;
  1354. border-bottom: 1px solid #dcdfe6; /* 横线颜色 */
  1355. border-radius: 0;
  1356. background: transparent;
  1357. }
  1358. .underline-input :deep(.el-input__inner) {
  1359. height: 24px;
  1360. padding: 0 5px;
  1361. }
  1362. :deep(.el-table__body tr:hover > td) {
  1363. background-color: #eaf7ff !important;
  1364. }
  1365. .drag-handle {
  1366. cursor: move;
  1367. }
  1368. .ghost {
  1369. opacity: 0.5;
  1370. background: #c8ebfb;
  1371. }
  1372. /* 防止文字选中 */
  1373. :deep(.el-table__row) {
  1374. user-select: none;
  1375. -webkit-user-select: none;
  1376. }
  1377. </style>
  1378. <style scoped lang="scss">
  1379. .el-table .el-table__row td {
  1380. height: 60px !important; /* 行高 */
  1381. }
  1382. .custom-tree-node {
  1383. display: flex; /* 启用 Flex 布局 */
  1384. align-items: center; /* 垂直居中 */
  1385. gap: 8px; /* 图标与文字间距 */
  1386. }
  1387. :deep(.svg-icon) {
  1388. outline: none;
  1389. }
  1390. :deep(.svg-icon svg) {
  1391. stroke: none;
  1392. }
  1393. </style>