TBA_GXPT/ruoyi-ui/src/views/dpp/calculateDev/index.vue

<template>
    <!-- 测试devkind = 'SYS' -->
  <div style="width: 100%;;display: flex;">
    <div style="width: 15%;;background-color: #F2F6FC;max-height: 85vh;overflow: auto;">
      <div style="display: flex;padding-top: 1%;padding-top: 5%;">
        <el-input
          v-model="inputNode"
          style="width:90%;margin-left: 5%;background-color: #ebeef5;"
          class="w-50 m-2"
          :prefix-icon="Search" 
        />
        <!-- <el-button style="margin-left: 2%;width: 10%;background-color: #F7F7F7" :icon="Filter"/> -->
        <!-- <el-button type="primary" @click="showAdd" style="margin-left: 5%;width: 10%;" :icon="Plus"/> -->
      </div>
      <!-- <Plus style="width: 1em; height: 1em; margin-left:90%;cursor: pointer;color: #337ecc;" @click="showAddTree"/> -->
      <el-tree :expand-on-click-node="false" ref="treeRef" :filter-node-method="filterNode" :current-node-key="currentNodeKey" class="treeLeft" :data="data" @node-click="handleNodeClick" node-key="id" style="margin-left: 5%;margin-top: 5%;width: 90%;background-color: transparent;" default-expand-all :key="valueKet">
          <template #default="{ node, data }">
            <span  style="justify-content: space-between;display: flex;width: 100%;align-items: center;">
              <div class="custom-tree-node">
                   <svg-icon icon-class="model2" style="color: #eebe77;" v-if="data.nodeType=='MODEL'"/>
                  <svg-icon icon-class="model" dstyle="color: #13E03B;" v-if="data.nodeType=='SERVICE'"/>
                  <svg-icon svg-icon icon-class="cate" style="color: red;" v-if="data.nodeType=='TREE'"/>
                <span>{{ node.label }}</span>
              </div>
              <!-- <div style="margin-right: 1%;position: absolute;margin-left: 75%;">
                <el-dropdown trigger="hover" @click.stop v-if="currentNodeKey === data.id&&data.nodeType!=='SERVICE'">
                    <el-icon class="el-icon--right" style="color: black;">
                      <plus />
                    </el-icon>
                  <template #dropdown>
                    <el-dropdown-menu>
                      <el-dropdown-item style="display: flex;" @click="add1Level">
                        <el-icon class="el-icon--right" style="color: black;">
                          <CirclePlus />
                        </el-icon>
                        <div>
                          添加同级
                        </div>
                      </el-dropdown-item>
                      <el-dropdown-item style="display: flex;"  @click="addNextLevel">
                        <el-icon class="el-icon--right" style="color: black;">
                          <Connection />
                        </el-icon>
                        <div>
                          新建下级
                        </div>
                      </el-dropdown-item>
                      <divider/>
                      <el-dropdown-item style="display: flex;"  @click="delAll" divided>
                        <el-icon class="el-icon--right" style="color: black;">
                          <CircleClose />
                        </el-icon>
                        <div>
                          删除节点
                        </div>
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </template>
                </el-dropdown>
              </div> -->
            </span>
          </template>
        </el-tree>
    </div>
    <el-tabs
      v-model="activeName"
      type="card"
      
      class="demo-tabs"
      style="margin-left: 1%;width: 84%;"
      @tab-click="getTaskReturn"
    >
      <el-tab-pane :disabled="!parMdid" label="任务详情" name="first">
        <el-button :disabled="!parMdid" @click="addTask" style="margin-top: 0%;margin-right: 1%;float:right;" type="primary" size="mini" plain>新增</el-button>
        <div style="width: 100%;margin-left: 0%;padding-top: 0%;" class="tab-container">
        <div>
          <el-table 
            :data="tableData" 
            style="width: 98%;margin-left: 1%;margin-top: 0.5%;height: 73vh;"
            :cell-style="{ padding:'5px' }"
            :header-cell-style="{height: heightAll*0.01+'px',}"
            :row-style="{ fontSize: '16px',textAlign:'center'}"
            border >
            <el-table-column type="index" label="序号" width="80">
              <template #default="{ $index }">
                <div style="text-align: center;">
                  {{ $index + 1 }}
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="flowJobName" label="任务名称"  width="200">
            </el-table-column>
            <el-table-column prop="type" label="建模方案"  width="300">
            </el-table-column>
            <el-table-column prop="chargeBy" label="责任人" width="200"  show-overflow-tooltip/>
            <el-table-column prop="chargePhone" label="联系方式" />
            <el-table-column prop="jobStatus" label="任务状态" width="170">
              <template #default="scope">
                  <el-switch @change="changejobStatus(scope.row)" v-model="scope.row.jobStatus"/>
              </template>
            </el-table-column>
            <el-table-column prop="address" label="操作" width="150">
                <template #default="scope">
                    <div style="display: flex;">
                      <el-button @click="getEdit(scope.row)" type="primary" text size="mini" style="margin-left: 0%;">编辑</el-button>
                      <el-button @click="delTaskDe(scope.row)" type="danger" text size="mini" style="margin-left: 0%;">删除</el-button>
                    </div>
                </template>
            </el-table-column>
          </el-table>
          <el-pagination
            v-if="total>20"
            small
            background
            style="margin-top: 0.8%;float: right;margin-right: 1%;"
            layout="prev, pager, next"
            :total="total"
            v-model="pageNum"
            @change="changePage"
            class="mt-4"
          />
        </div>
        <el-dialog @close="clearAdd" v-model="dialogVisible" title="" width="60%" destroy-on-close :key="tableKey">
          <div style="display: flex;align-items: center;">
            <div v-if="detailJson.rqtype==='GET'">
              <el-tag class="ml-2" type="warning">GET</el-tag>
            </div>
            <div v-if="detailJson.rqtype==='POST'">
              <el-tag class="ml-2" type="warning">POST</el-tag>
            </div>
            <div style="margin-left: 1%;">
              {{ detailJson.name }}:
            </div>
            <div style="margin-left: 1%;">
              {{ detailJson.url }}
            </div>
          </div>
          <el-descriptions style="margin-top: 1%;" :column="3" border>
            <el-descriptions-item label="接口类型">{{ detailJson.type }}</el-descriptions-item>
            <el-descriptions-item label="请求方式">{{ detailJson.rqtype }}</el-descriptions-item>
            <el-descriptions-item label="响应类型">{{ detailJson.rptype }}</el-descriptions-item>
            <el-descriptions-item label="服务分类">{{ detailJson.cateCode }}</el-descriptions-item>
          </el-descriptions>
          <div style="margin-top:4%;font-size: 18px;">
            请求参数
          </div>
           <el-table 
            style="margin-top: 1%;width: 98%;"
            :data="tableDataCan" 
            :cell-style="{ textAlign: 'center',padding:'2px 0' }"
            :header-cell-style="{ textAlign: 'center'}"
            :row-style="{ height: heightAll*0.01+'px',fontSize: '16px',textAlign:'center'  }"
            border >
                <el-table-column prop="paramCode" label="参数字段">
                </el-table-column>
                <el-table-column prop="paramName" label="参数名称">
                </el-table-column>
                <el-table-column prop="paramType" label="参数类型" width="200">
                </el-table-column>
                <el-table-column prop="paramValue" label="参数示例">
                  
                </el-table-column>
                <el-table-column prop="paramNote" label="参数说明" show-overflow-tooltip>
                </el-table-column>
            </el-table>
            <div style="margin-top:4%;font-size: 18px;">
              返回参数
            </div>
            <el-input readonly  placeholder="" :rows="8" type="textarea" v-model="dataJsonXiang" size="mini" text style="margin-top: 1%;width: 98%;" ></el-input>
          <template #footer>
            <span class="dialog-footer">
              <el-button type="primary" @click="dialogVisible = false" size="mini">
                确定
              </el-button>
            </span>
          </template>
        </el-dialog>
        <el-dialog @close="clearAdd" v-model="dialogVisibleTest" draggable :title="titleDe" width="60%" destroy-on-close :key="tableKey">
          <el-form  size="mini"  style="margin-top: 0%;width: 98%;"  :model="formJi" label-position="right" ref="formRefJi" label-width="120px" :rules="rulesJi">
            <el-row :gutter="48">
                    <el-col :span="8">
                    <el-form-item label="任务名称:" prop="flowJobName" style="">
                        <div style="display: flex;width: 100%;justify-content: space-between;">
                            <el-input  v-model="formJi.flowJobName" style="width: 100%;"/>
                        </div>
                    </el-form-item>
                    </el-col>
                    <el-col :span="8">
                    </el-col>
                    
            </el-row>
            <el-form-item label="状态:" prop="jobStatus" v-if="isAdd">
                <el-radio-group v-model="formJi.jobStatus" class="custom-radio-group" style="width: 100%;margin-top: -1%;">
                    <el-radio :label=1 size="large">启用</el-radio>
                    <el-radio :label=0 size="large">禁用</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-row :gutter="48">
                <el-col :span="15">
                </el-col>
            </el-row>
            <el-row :gutter="48">
                <el-col :span="8">
                    <el-form-item label="负责人:" prop="chargeBy" style="">
                        <div style="display: flex;width: 100%;justify-content: space-between;">
                            <el-input  v-model="formJi.chargeBy" style="width: 100%;"/>
                        </div>
                    </el-form-item>
                    </el-col>
                <el-col :span="8">
                  <el-form-item label="联系方式" prop="chargePhone" style="">
                      <div style="display: flex;width: 100%;justify-content: space-between;">
                          <el-input  v-model="formJi.chargePhone" style="width: 100%;"/>
                      </div>
                  </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="48">
                <el-col :span="8">
                    <el-form-item label="任务类型:" prop="taskType">
                        <el-select
                        v-model="formJi.taskType"
                        class=""
                        placeholder=""
                        style="width: 100%;margin-left: 0%;"
                        >
                            <el-option
                            v-for="item in optionsTaskType"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                            />
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <div style="margin-top: 0%;">
                <el-row :gutter="48">
                    <el-col :span="8">
                        <el-form-item label="路由策略:" prop="routeKey">
                            <el-select
                            v-model="formJi.routeKey"
                            class=""
                            placeholder=""
                            style="width: 100%;margin-left: 0%;"
                            >
                              <el-option label="Hash" :value="1" />
                              <el-option label="随机" :value="2" />
                              <el-option label="LRU" :value="3" />
                              <el-option label="轮询" :value="4" />
                              <el-option label="匹配第一个" :value="5" />
                              <el-option label="匹配最后一个" :value="6" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="阻塞策略:" prop="blockStrategy">
                            <el-select
                            v-model="formJi.blockStrategy"
                            class=""
                            placeholder=""
                            style="width: 100%;margin-left: 0%;"
                            >
                              <el-option label="丢弃" :value="1" />
                              <el-option label="覆盖" :value="2" />
                              <el-option label="并行" :value="3" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="48">
                    <el-col :span="8">
                        <el-form-item label="触发类型:" prop="triggerType">
                            <el-select
                            v-model="formJi.triggerType"
                            class=""
                            placeholder=""
                            style="width: 100%;margin-left: 0%;"
                            >
                              <el-option label="固定时间" :value="2" />
                              <el-option label="CRON 表达式" :value="3" />
                              <el-option label="工作流" :value="99" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="间隔时长:" prop="triggerInterval">
                            <el-input-number
                                v-model="formJi.triggerInterval"
                                v-if="formJi.triggerType==2"
                                style="width: 100%;"
                                class="mx-4"
                                :min="1"
                                :max="10"
                                controls-position="right"
                                @CHANGE="handleChange"
                            />
                            <el-input v-if="formJi.triggerType==3" v-model="formJi.triggerInterval" placeholder="请输入cron执行表达式">
                                <template #append>
                                  <el-button type="primary" @click="handleShowCron">
                                      生成表达式
                                      <i class="el-icon-time el-icon--right"></i>
                                  </el-button>
                                </template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="48">
                    <el-col :span="8">
                        <el-form-item label="超时时间(秒):" prop="executorTimeout">
                            <el-input-number
                                v-model="formJi.executorTimeout"
                                style="width: 100%;"
                                class="mx-4"
                                :min="1"
                                :max="10"
                                controls-position="right"
                                @change="handleChange"
                            />
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="最大重试次数:" prop="maxRetryTimes">
                            <el-input-number
                                v-model="formJi.maxRetryTimes"
                                style="width: 100%;"
                                class="mx-4"
                                :min="1"
                                :max="10"
                                controls-position="right"
                                @change="handleChange"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="48">
                    <el-col :span="8">
                        <el-form-item label="重试间隔:" prop="retryInterval">
                            <el-input-number
                                v-model="formJi.retryInterval"
                                style="width: 100%;"
                                class="mx-4"
                                :min="1"
                                :max="10"
                                controls-position="right"
                                @change="handleChange"
                            />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="描述:" >
                    <el-input v-model="formJi.description" style="width: 75%;" placeholder="" type="textarea" :row="2" resize="none"/>
                </el-form-item>
            </div>
        </el-form>
        <div style="display: flex;align-items: center;line-height: 1.5;margin-top: 1%;">
          <el-button  @click="addStart" style="margin-top: 0%;margin-left: 1%;" type="success" size="mini" plain>新增参数</el-button>
          <!-- <div style="margin-left: 1%;color: #909399;">需要至少一条输入参数</div> -->
        </div>
        <el-table 
        style="margin-top: 1%;width: 100%;"
        :data="tableDataCanStart" 
        :cell-style="{ textAlign: 'center',padding:'2px 0' }"
        :header-cell-style="{ textAlign: 'center'}"
        :row-style="{ height: heightAll*0.01+'px',fontSize: '16px',textAlign:'center'  }"
        border >
            <el-table-column prop="itemName" label="参数名称">
                <template #default="scope">
                    <div style="width: 100%;">
                        <el-input  placeholder="请填写参数名称" type="primary" class="noBor" v-model="scope.row.name" size="mini" text style="margin-left: 0%;"></el-input>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="itemName" label="参数值" >
                <template #default="scope">
                    <div style="width: 100%;">
                        <el-input type="primary"  class="noBor" v-model="scope.row.value" size="mini" text style="margin-left: 0%;"></el-input>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="address" label="操作" width="100">
                <template #default="scope">
                    <div style="width: 100%;">
                        <el-button type="danger" @click="delCanStart(scope.$index)" size="mini" text style="margin-left: 0%;">删除</el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <template #footer>
            <span class="dialog-footer">
              <el-button size="mini" @click="dialogVisibleTest = false">取消</el-button>
              <el-button type="primary" @click="addRen" size="mini" v-if="isAdd">
                提交
              </el-button>
              <el-button type="primary" @click="saveEdit" size="mini" v-if="!isAdd">
                提交
              </el-button>
          </span>
        </template>
        </el-dialog>
        <el-dialog title="Cron表达式生成器" v-model="openCron" append-to-body destroy-on-close>
          <crontab ref="crontabRef" @hide="openCron=false" @fill="crontabFill" :expression="expression"></crontab>
        </el-dialog>
        <el-dialog  v-model="dialogVisibleDe" title="" width="50%" @close="" destroy-on-close class="custom-dialog-bg">
          <el-form size="mini" :key="tableKey" style="margin-top:1%;width: 100%;" :model="formJi" label-position="right">
            <el-row :gutter="48">
              <el-col :span="10">
                <el-form-item label="服务名称:" prop="name" style="">
                  {{formJi.name}}
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item label="接口类型:" prop="" style="">
                  <div style="display: flex;width: 100%;justify-content: space-between;">
                    {{formJi.type}}
                  </div>

                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="48">
              <el-col :span="20">
                <el-form-item label="接口地址:" prop="url" style="">
                  {{formJi.url}}
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item label="请求方式:" prop="" style="">
                  {{formJi.rqtype}}
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="48">
              <el-col :span="10">
                <el-form-item label="响应类型:" prop="" style="display: flex; align-items: center;">
                  {{formJi.rptype}}
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item label="服务分类:" prop="cateCode" style="">
                  {{formJi.cateCode}}
                  <!-- <el-cascader :disabled="isEdit" v-model="formJi.cateCode" :options="cascaderOptions" clearable
                              style="width: 100%;"></el-cascader> -->
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="48">
              <el-col :span="13">
                <el-form-item label="服务说明:">
                  {{formJi.intro}}
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-dialog>
    </div>
      </el-tab-pane>
      <el-tab-pane label="执行结果" name="second" :disabled="!parMdid">
        <div style="display: flex;width: 98%;align-items: center;margin-left: 1%;">
            <!-- <div>
                组名称
            </div>
            <el-input size="mini" v-model="groupName" style="width: 10%;margin-left: 1%;" placeholder="" /> -->
            <div style="margin-left: 0%;">
                任务名称
            </div>
            <el-input size="mini" v-model="jobName" style="width: 10%;margin-left: 1%;" placeholder="" />
            <div style="margin-left: 2%;">
                创建时间
            </div>
            <div style="width:15%;margin-left: 1%;">
              <el-date-picker
                v-model="createTime"
                type="datetimerange"
                format="YYYY-MM-DD HH:mm:ss"
                style="width:100%;margin-left: 1%;"
                value-format="YYYY-MM-DD"
              />
            </div>
            <div style="margin-left: 2%;">
                状态
            </div>
            <el-select
            v-model="taskBatchStatus"
            class="noBorSel"
            placeholder=""
            style="width: 10%;margin-left: 1%;"
            >
                <el-option label="待处理" :value="1" />
                <el-option label="运行中" :value="2" />
                <el-option label="处理成功" :value="3" />
                <el-option label="处理失败" :value="4" />
                <el-option label="任务停止" :value="5" />
                <el-option label="取消" :value="6" />

            </el-select>
            <!-- <el-button type="" @click="" size="mini" style="margin-left:auto;" :icon="RefreshRight">重置 </el-button> -->
            <el-button type="primary" @click="getTaskReturn" size="mini" style="margin-left:auto;" :icon="Search">搜索 </el-button>
        </div>
        <el-table 
          :data="tableDataDatareturn" 
          style="width: 98%;margin-left: 1%;margin-top: 1.5%;;height: 73vh;"
          :cell-style="{ padding:'5px' }"
          :header-cell-style="{height: heightAll*0.01+'px',}"
          :row-style="{ fontSize: '16px',textAlign:'center'}"
          border >
          <el-table-column type="index" label="序号" width="80">
            <template #default="{ $index }">
              <div style="text-align: center;">
                {{ $index + 1 }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="jobName" label="任务名称"  width="200">
          </el-table-column>
          <el-table-column prop="chargeBy" label="责任人" >
          </el-table-column>
          <el-table-column prop="taskType" label="任务类型" >
            <template #default="scope">
                <div style="display: flex;">
                  <div v-if="scope.row.taskType===1">集群</div>
                  <div v-else-if="scope.row.taskType===2">广播</div>
                  <div v-else-if="scope.row.taskType===3">Sharding</div>
                  <div v-else-if="scope.row.taskType===4">Map</div>
                  <div v-else-if="scope.row.taskType===5">MapReduce</div>
                </div>
            </template>
          </el-table-column>
          <el-table-column prop="createDt" label="开始执行时间" width="220">
          </el-table-column>
          <el-table-column prop="executionAt" label="执行时长(秒)"  >
          </el-table-column>
          <el-table-column prop="taskBatchStatus" label="状态">
            <template #default="scope">
                <div style="display: flex;">
                  <div v-if="scope.row.taskBatchStatus===1" style="color: #E6A23C;">待处理</div>
                  <div v-else-if="scope.row.taskBatchStatus===2" style="color: #409EFF;">运行中</div>
                  <div v-else-if="scope.row.taskBatchStatus===3" style="color: #67C23A;">处理成功</div>
                  <div v-else-if="scope.row.taskBatchStatus===4" style="color: red;">处理失败</div>
                  <div v-else-if="scope.row.taskBatchStatus===5" style="color: red;">任务停止</div>
                  <div v-else-if="scope.row.taskBatchStatus===6" style="color: red;">取消</div>
                </div>
            </template>
          </el-table-column>
          <el-table-column prop="operationReason" label="操作原因"  >
            <template #default="scope">
                <div style="display: flex;">
                  <div v-if="scope.row.operationReason===0" style="color: red;">无</div>
                  <div v-else-if="scope.row.operationReason===1" style="color: #409EFF;">有</div>
                </div>
            </template>
          </el-table-column>
          <el-table-column prop="address" label="操作" width="150">
              <template #default="scope">
                  <div style="display: flex;">
                    <el-button @click="getLog(scope.row)" type="primary" text size="mini" style="margin-left: 0%;">日志</el-button>
                  </div>
              </template>
          </el-table-column>
        </el-table>
        <el-pagination
          v-if="total1>20"
          small
          background
          style="margin-top: 0.4%;float: right;margin-right: 1%;"
          layout="prev, pager, next"
          :total="total1"
          v-model="pageNum1"
          @change="changePage1"
          class="mt-4"
        />
      </el-tab-pane>
    </el-tabs>
    <el-dialog @close="clearAdd" v-model="dialogVisibleLog" title="" width="60%" destroy-on-close :key="tableKey">
      <el-table 
      :data="tableDataLogRes" 
      style="width: 98%;margin-left: 1%;margin-top: 0.5%;height: 73vh;"
      :cell-style="{ padding:'5px' }"
      :header-cell-style="{height: heightAll*0.01+'px',}"
      :row-style="{ fontSize: '16px',textAlign:'center'}"
      border >
          <el-table-column prop="taskStatus" label="状态">
            <template #default="scope">
                <div style="display: flex;">
                  <div v-if="scope.row.taskStatus===1" style="color: #E6A23C;">待处理</div>
                  <div v-else-if="scope.row.taskStatus===2" style="color: #409EFF;">运行中</div>
                  <div v-else-if="scope.row.taskStatus===3" style="color: #67C23A;">处理成功</div>
                  <div v-else-if="scope.row.taskStatus===4" style="color: red;">处理失败</div>
                  <div v-else-if="scope.row.taskStatus===5" style="color: red;">任务停止</div>
                  <div v-else-if="scope.row.taskStatus===6" style="color: red;">取消</div>
                </div>
            </template>
          </el-table-column>
          <el-table-column prop="taskName" label="参数名称">
          </el-table-column>
          <el-table-column prop="resultMessage" label="结果" width="200" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="retryCount" label="重试次数" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="createDt" label="开始执行时间" show-overflow-tooltip>
          </el-table-column>
      </el-table>
      <el-pagination
          v-if="total2>10"
          small
          background
          style="margin-top: 0.4%;float: right;margin-right: 1%;"
          layout="prev, pager, next"
          :total="total2"
          v-model="pageNum2"
          @change="changePage2"
          class="mt-4"
        />
    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="dialogVisibleLog = false" size="mini">
          确定
        </el-button>
      </span>
    </template>
  </el-dialog>
  </div>
</template>
<script   setup>
import {getCatalog} from "@/api/service/catalog";
import { Plus,Search,Filter,Promotion,Check  } from '@element-plus/icons-vue'
import { reactive } from 'vue'
import {getModellist} from '@/api/standardization/modeling'
import { modelTreeSelect,getSerDe,addService,addServiceParam,getJobTaskPageLog,getBatchDataTable,editTask,getDataRen,getTaskDe,delTask,flowDispatch } from "@/api/service/info";
import { ref, onMounted, onUnmounted, nextTick,onBeforeMount } from 'vue';
import JsonViewer from 'vue-json-viewer'
import 'vue-json-viewer/style.css' 
import  JsonEditorVue from 'json-editor-vue3'
import { cloneDeep } from 'lodash'
import { useClipboard } from "@vueuse/core";
import Crontab from '@/components/Crontab'
import { routerKey } from "vue-router";
import {snailSta } from "@/api/service/timing";
const titleTest = ref('')
const tableDataLogRes = ref([])
const { proxy } = getCurrentInstance();
const JsonAdd= ref(JSON.stringify({ data: "初始值1" }))
const exampleAdd = ref('')
const dialogVisibleLevel = ref(false)
const dialogVisibleDe = ref(false)
const total1 = ref(0)
const pageNum1 = ref(1)
const detail = ref({
  name:'',
  rqtype:'',
  rptype:''
})
const createTime = ref([])
const taskBatchStatus = ref('')
const jobName = ref('')
const tableDataLog = ref([])
const show1Lev = ref(true)
const inputNode =ref('')
const isEdit = ref(true)
const dataReturn = ref('')

const optionsCan = ref([
  {
    label:"string",
    value:'string'
  },
  {
    label:"int",
    value:'int'
  },
  {
    label:"boolean",
    value:'boolean'
  },
  {
    label:"array",
    value:'array'
  },
  {
    label:"object",
    value:'object'
  },
  {
    label:"number",
    value:'number'
  },
  {
    label:"null",
    value:'null'
  },
  {
    label:"any",
    value:'any'
  },
  
])
const currentNodeKey = ref('')
const options =  ref([
    {label:'开发中',
    value:'1'
    },
    {label:'运行中',
    value:'2'
    },
])
const dataJsonXiang = ref([])
const parTree = ref({})
const valueKet = ref(0)
const tableDataCan = ref([
    {
      itemName:'',
      itemCode:'',
      paramType:'',
      paramNote:''
    }
])
const dialogVisibleTest = ref(false)
const optionsMdid = ref([])
const optionsRqtype = ref([
    {label:'GET',
    value:'GET'
    },
    {label:'POST',
    value:'POST'
    },
])
const tableDataDatareturn = ref([])
const optionsType=  ref([
    {label:'RESTful',
    value:'RESTful'
    },
    {label:'WebService',
    value:'WebService'
    },
    {label:'HTTP',
    value:'HTTP'
    },
    {label:'WebSocket',
    value:'WebSocket'
    },
])
const optionsTaskType = ref([
  {
    label:'集群',
    value:1
  },
  {
    label:'广播',
    value:2
  },
  {
    label:'Sharding',
    value:3
  },
  {
    label:'Map',
    value:4
  },
  {
    label:'MapReduce',
    value:5
  },
])
const data =  ref([])
const select =  ref('1')
const activeName =  ref('first')
const title =  ref('')
const titleTree =  ref('')
const currentPage =  ref(1)
const total =  ref(1)
const pageNum =  ref(1)
const tableData = ref([])
const tableheight = window.innerHeight*0.7
const heightAll = window.innerHeight
const dialogVisible = ref(false)
const dialogVisibleTree = ref(false)
const isAdd = ref(false)
const isAddTa = ref(false)
const treeId = ref('');
const valueSta = ref('1');
const parMdid = ref('')
const example = ref('');
const tableDataCanAdd = ref([
  {
      itemName:'',
      itemCode:'',
      paramType:'',
      paramNote:''
    }
])
const formZu = ref({
  itemName:'',
  itemTp:'',
  itemEn:'',
  itemTp:'',
  itemDataTp:'',
  itemDefaultVal:'',
  itemUnit:'',
  itemNotes:'',
});
const parId= ref('')
const formJi = ref({
  routeKey:4,
  blockStrategy:1,
  triggerType:2,
  triggerInterval:10,
  executorTimeout:10,
  maxRetryTimes:3,
  retryInterval:1,
  jobStatus:1,
});
const rulesJi = reactive({
  flowJobName: [{ required: true, message: '必填', trigger: 'blur' }],
  routeKey: [{ required: true, message: '必填', trigger: 'blur' }],
  triggerType: [{ required: true, message: '必填', trigger: 'blur' }],
  triggerInterval: [{ required: true, message: '必填', trigger: 'blur' }],
  executorTimeout: [{ required: true, message: '必填', trigger: 'blur' }],
  maxRetryTimes: [{ required: true, message: '必填', trigger: 'blur' }],
  retryInterval: [{ required: true, message: '必填', trigger: 'blur' }],
  chargeBy: [{ required: true, message: '必填', trigger: 'blur' }],
  chargePhone: [{ required: true, message: '必填', trigger: 'blur' }],
  taskType: [{ required: true, message: '必填', trigger: 'blur' }],
  blockStrategy: [{ required: true, message: '必填', trigger: 'blur' }],
  jobStatus: [{ required: true, message: '必填', trigger: 'blur' }]
});
const formRefJi = ref();
const titleDe = ref('')
const formAdd = ref({
  name:'',
  cateCode:'',
  type:'',
  url:'',
  rqtype:'',
  rptype:'',
  intro:'',
  mdid:''
});
const rulesAdd = reactive({
  mdid: [{ required: true, message: '必填', trigger: 'blur' }],
  name: [{ required: true, message: '必填', trigger: 'blur' }],
  url: [{ required: true, message: '必填', trigger: 'blur' }],
  cateCode: [{ required: true, message: '必填', trigger: 'blur' }],
});
const formRefAdd = ref();
const treeRef = ref(null);
const formTree = ref({
  itemName:'',
  catePid:'',
  itemNo:'',
  itemNotes:''
});
const rulesTree = reactive({
  itemNo: [{ required: true, message: '必填', trigger: 'blur' }],
  catePid: [{ required: true, message: '必填', trigger: 'blur' }],
  itemName: [{ required: true, message: '必填', trigger: 'blur' }],
});
const formRefTree = ref();
const formLev = ref({
  itemName:'',
  itemNo:'',
  itemNotes:'',
});
const rulesLev = reactive({
  itemNotes: [{ required: true, message: '必填', trigger: 'blur' }],
  itemNo: [{ required: true, message: '必填', trigger: 'blur' }],
  itemName: [{ required: true, message: '必填', trigger: 'blur' }],
});
const formRefLev = ref();
const cascaderOptions = ref([])
const props1 = ref({
  checkStrictly: true,
})
const detailJson = ref('')
const parOptions = ref([])
const openCron = ref(false)
const tableDataCanStart = ref([
])
const expression = ref('')
watch(inputNode, (val) => {
  treeRef.value?.filter(val); // 调用树的过滤方法
});
const filterNode = (value, data) => {
  if (!value) return true; // 空搜索时显示所有节点
  return data.label.includes(value); // 检查节点标签是否包含关键字
};

const copied = ref(false);
function changePage(val){
  pageNum.value = val
  getDataRen()
}
async function changejobStatus(row){
  var par = {
    jobId:row.id,
    status:row.jobStatus===true?1:0
  }
  await snailSta(par).then(res=>{
    if(res.code===200){
      proxy.$modal.msgSuccess("修改成功");
    }
  })
}
function changePage1(val){
  pageNum1.value = val
  getTaskReturn()
}
function changePage2(val){
  pageNum2.value = val
  getLog()
}
function getLog(row){
  dialogVisibleLog.value = true
  var par = {
    taskBatchId:row.id,
    pageNum:pageNum2.value,
    pageSize:10
  }
  getJobTaskPageLog(par).then(res=>{
    if(res.rows){
      tableDataLogRes.value = res.rows
      total2.value = res.total
      
    }
  })
}
const total2 = ref(0)
const pageNum2 = ref(1)
const dialogVisibleLog = ref(false)
function saveEdit(){
  formRefJi.value.validate((valid) => {
    if (valid) {
      formJi.value.appId = parMdid.value
      formJi.value.flowParam = {}
      if(tableDataCanStart.value.length>0){
        tableDataCanStart.value.forEach(item=>{
          formJi.value.flowParam[item.name] = item.value
        })
      }
      editTask(formJi.value).then(res=>{
        if(res.code===200){
          proxy.$message({
            message: '操作成功',
            type: 'success'
          });
          dialogVisibleTest.value = false
          getDataRen({
            appId:parMdid.value,
            pageNum:pageNum.value,
            pageSize:20
          }).then(res=>{
          if(res.rows){
            tableData.value = res.rows
            tableData.value.forEach(item=>{ 
              item.type = titleTest.value
            })
            total.value = res.total
          }
        })
        }else{
          proxy.$message({
            message: res.message,
            type: 'error'
          });
        }
      })
    }
  })
}
function addRen() {
  formRefJi.value.validate((valid) => {
    if (valid) {
      formJi.value.appId = parMdid.value
      formJi.value.flowParam = {}
      if(tableDataCanStart.value.length>0){
        tableDataCanStart.value.forEach(item=>{
          formJi.value.flowParam[item.name] = item.value
        })
      }
      flowDispatch(formJi.value).then(res=>{
        if(res.code===200){
          proxy.$message({
            message: '操作成功',
            type: 'success'
          });
          dialogVisibleTest.value = false
          getDataRen({
            appId:parMdid.value,
            pageNum:pageNum.value,
            pageSize:20
          }).then(res=>{
          if(res.rows){
            tableData.value = res.rows
            tableData.value.forEach(item=>{ 
              item.type = titleTest.value
            })
            total.value = res.total
          }
        })
        }else{
          proxy.$message({
            message: res.message,
            type: 'error'
          });
        }
      })
    }
  })
}
function addStart(){
  tableDataCanStart.value.push({})
}
function delCanStart(index){
  tableDataCanStart.value.splice(index,1)
}
function delTaskDe(row){
  proxy.$modal.confirm('是否确认删除？').then(function () {
    return delTask(row.flowJobId);
  }).then(() => {
    getDataRen({
        appId:parMdid.value,
        pageNum:pageNum.value,
        pageSize:20
      }).then(res=>{
      if(res.rows){
        tableData.value = res.rows
        tableData.value.forEach(item=>{ 
          item.type = titleTest.value
        })
        total.value = res.total
      }
    })
    proxy.$modal.msgSuccess("删除成功");
  }).catch(() => {});
}
function handleShowCron() {
  expression.value = formJi.value.triggerInterval;
  openCron.value = true;
}
function crontabFill(value) {
  formJi.value.triggerInterval = value;
}
function addTask(row){
  isAdd.value = true
  dialogVisibleTest.value = true
  getSerDe(row.srvId).then(res=>{
    if(res.code===200){
      detailJson.value = res.data.ptService
      console.log(detailJson.value)
      tableDataCan.value = res.data.list
    }
  })
}
function getEdit(row){
  isAdd.value = false
  titleDe.value = '编辑任务-'+row.flowJobName
  dialogVisibleTest.value = true
  tableDataCanStart.value = []
  getTaskDe(row.flowJobId).then(res=>{
    formJi.value = res.data
    const keys = Object.keys(res.data.flowParam)
    keys.forEach(key => {
      var par = {
        name:key,
        value:res.data.flowParam[key]
      }
      tableDataCanStart.value.push(par)
    });
  })
}
function showDe(row){
  getSerDe(row.srvId).then(res=>{
    if(res.code===200){
      dialogVisibleDe.value = true
      parOptions.value.forEach(item=>{
        if(res.data.ptService.cateCode === item.cateCode){
          res.data.ptService.cateCode = item.cateName
        }
      })
      if(res.data.ptService.rptype === '1'){
        res.data.ptService.rptype = 'JSON'
      }
      if(res.data.ptService.rptype === '2'){
        res.data.ptService.rptype = 'XML'
      }
      if(res.data.ptService.rptype === '3'){
        res.data.ptService.rptype = 'HTML'
      }
      formJi.value = res.data.ptService
    }
  })
}
function filterModelNodes(nodes) {
  if (!Array.isArray(nodes)) return [];
  
  const result = [];
  for (const node of nodes) {
    // 递归处理子节点（如果有）
    const filteredChildren = node.children ? filterModelNodes(node.children) : [];
    
    if (node.nodeType === 'MODEL') {
      // 保留当前节点，并更新其子节点
      node.value = node.id
      result.push({
        ...node,
        children: filteredChildren
      });
    } else {
      // 删除当前节点，将其子节点提升到当前层级
      result.push(...filteredChildren);
    }
  }
  return result;
}
function clearAdd(){
  formJi.value = {
    routeKey:4,
    blockStrategy:1,
    triggerType:2,
    triggerInterval:10,
    executorTimeout:10,
    maxRetryTimes:3,
    retryInterval:1,
    jobStatus:1,
  }
  tableDataCanStart.value = []
}
function clearFromLev(){
  tableDataLog.value = []
}
async function handleNodeClick(node,data,event){
  console.log(data)
  titleTest.value = data.data.label
  parMdid.value = data.data.appId
  var par = {
    appId:data.data.appId,
    pageNum:1,
    pageSize:20
  }
  await getDataRen(par).then(res=>{
    if(res.rows){
      tableData.value = res.rows
      tableData.value.forEach(item=>{
        item.type = titleTest.value
        if(item.jobStatus===1){
          item.jobStatus = true
        }else{
          item.jobStatus = false
        }
      })
      
      total.value = res.total
    }
  })
  
}
function getAbsoluteTimeDifference(dateTimeString, otherTimestamp) {
  // 将日期字符串转换为毫秒时间戳
  const targetTimestamp = new Date(dateTimeString).getTime();
  
  // 计算与另一个时间戳的绝对差值
  return Math.abs(targetTimestamp - otherTimestamp);
}
function getTaskReturn(){
    var par = {
      appId:parMdid.value,
      pageNum:pageNum1.value,
      pageSize:20,
      jobName:jobName.value,
      taskBatchStatus:taskBatchStatus.value,
      beginTime:createTime.value.length>1?createTime.value[0]:'',
      endTime:createTime.value.length>1?createTime.value[1]:''
    }
    getBatchDataTable(par).then(res=>{
      if(res.rows){
        tableDataDatareturn.value = res.rows
        tableDataDatareturn.value.forEach(item=>{
          item.type = titleTest.value
          item.executionAt = getAbsoluteTimeDifference(item.createDt, item.executionAt)*0.001
        })
        total1.value = res.total
      }
    })
}
async function getTreeLeft(){
  var par = {
    params:{
      level:'2',
      devkind:'SYS'
    }
  }
  await modelTreeSelect(par).then(res=>{
    par = res.data
    data.value = res.data
    
  })
  optionsMdid.value = filterModelNodes(par)
  console.log(optionsMdid.value)
}
function renameTreeProperties(tree) {
  // 深拷贝避免修改原始数据（可选，根据需求）
  const newTree = cloneDeep(tree); // 使用 lodash
  // 或：const newTree = JSON.parse(JSON.stringify(tree)); // 原生方法（不兼容函数等）

  // 递归处理函数
  const processNode = (node) => {
    // 重命名属性
    if ('cateName' in node) {
      node.label = node.cateName;
      delete node.cateName;
    }
    if ('cateCode' in node) {
      node.value = node.cateCode;
      delete node.cateCode;
    }

    // 递归处理子节点
    if (node.children && node.children.length > 0) {
      node.children.forEach(child => processNode(child));
    }
  };

  // 遍历根节点
  newTree.forEach(rootNode => processNode(rootNode));
  return newTree;
}
function fetchData() {
  getCatalog().then((r) => {
    parOptions.value = r.data
    cascaderOptions.value = renameTreeProperties(buildTree(r.data))
    console.log(parOptions.value)
  });
}
function buildTree(flatData, rootValue = '0') {
      const nodeMap = new Map();
      const tree = [];
      flatData.forEach(item => {
        nodeMap.set(item.cateCode, { ...item, children: [] });
      });
      for (const [code, node] of nodeMap) {
        const parentCode = node.catePcode;
        if (parentCode === rootValue || !parentCode) {
          tree.push(node);
          continue;
        }
        const parent = nodeMap.get(parentCode);
        if (parent) {
          parent.children.push(node);
        } else {
          console.warn(`Orphan node detected: ${code}. Parent ${parentCode} not found`);
        }
      }

      return tree;
    }
function addPa(){
    var par = {
        itemName:''
    }
    tableDataCan.value.push(par)
}
function delCan(index){
  tableDataCan.value.splice(index, 1)
}
function addCanAdd(){
    var par = {
        parName:''
    }
    tableDataCanAdd.value.push(par)
}
function delCanAdd(index){
  tableDataCanAdd.value.splice(index, 1)
}
function getList() {
  getModellist().then(res => {
    data.value = res.rows
    data.value.forEach(item=>{
      item.label = item.appTitle
      item.value = item.appId
    })
  })
}
onMounted(() => {
  getList()
});

</script>
<style scoped>

. :deep(.el-select__wrapper){
  box-shadow: none !important; /* 去除阴影边框 */
  border: 1px solid transparent !important; /* 设置透明边框 */
  background-color: transparent !important; /* 可选：透明背景 */
}
.noBor :deep(.el-input__wrapper) {
  box-shadow: none !important; /* 去除阴影边框 */
  border: 1px solid transparent !important; /* 设置透明边框 */
  background-color: transparent !important; /* 可选：透明背景 */
}
/* 节点垂直间距 */
:deep(.el-tree-node) {
  margin-bottom:5px !important; /* 增大节点间距 */
}
.el-popover.custom-popover {
  min-width: 50px;
  padding: 8px; /* 可选：调整内边距 */
}
</style>
<style>
.dot {
  width: 20px;          /* 控制圆点直径 */
  height: 20px;
  background-color: #333; /* 实心颜色 */
  border-radius: 50%;    /* 关键属性 */
  display: inline-block; /* 确保与其他元素并排 */
}
/* 全局透明样式（不使用 scoped） */
.transparent-select .el-select__wrapper {
  background-color: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.transparent-select .el-select__selection {
  background-color: transparent;
}

/* 处理悬停和聚焦状态 */
.transparent-select .el-select__wrapper:hover,
.transparent-select .el-select__wrapper.is-focused {
  border-color: transparent !important;
  box-shadow: none !important;
}

/* 下拉箭头图标 */
.transparent-select .el-select__caret {
  color: rgba(0, 0, 0, 0.5); /* 半透明图标 */
}
</style>
<style scoped>
:deep(.treeLeft) .el-tree-node__content {
  display: flex !important;
  height: 28px;                  /* 按设计稿调整高度 */
  align-items: center;
  padding-top: 0 !important;
}
:deep(.treeLeft) .el-tree-node__content:hover {
  background-color: #e9e9eb;
}
:deep(.treeLeft) .el-tree-node__content:active {
    background-color: rgka(69,157,255,0.1) !important;
  }

  /* 选中态（Active） */
:deep(.treeLeft) .el-tree-node.is-current > .el-tree-node__content {
    background-color: #c6e2ff !important;
  }

.tab-container {
  height: 100vh; /* 关键：父容器明确高度 */
  display: flex;
  flex-direction: column;
}
.drag-handle {
  cursor: move;
}

.ghost {
  opacity: 0.5;
  background: #c8ebfb;
}

/* 防止文字选中 */
:deep(.el-table__row) {
  user-select: none;
  -webkit-user-select: none;
}
</style>
<style scoped lang="scss">

.custom-tree-node {
  display: flex;       /* 启用 Flex 布局 */
  align-items: center; /* 垂直居中 */
  gap: 8px;            /* 图标与文字间距 */
  justify-content: space-between;
}
.el-table .el-table__row td {
  height: 60px !important; /* 行高 */
}
.custom-tree-node {
  display: flex;       /* 启用 Flex 布局 */
  align-items: center; /* 垂直居中 */
  gap: 8px;            /* 图标与文字间距 */
}
</style>