<template>
<div class="app-container table-page-content">
<div
class="search-container filter-container-v2"
style="margin-bottom: 10px"
>
<!-- :model="formInline" -->
<el-form ref="queryForm" :inline="true" label-position="top" size="mini">
<el-form-item
v-for="(item, index) in searchItems"
:key="item.name"
:label="item.label"
:prop="item.name"
:rules="item.rules"
:class="
item.type == 'daterange'
? 'search-form-item-double search-form-item-daterange'
: 'search-form-item'
"
>
<template slot="label">
{{ item.label }}
</template>
<!-- <template v-if="item.type == 'input'">
<el-input
v-model.trim="formInline[item.name]"
:placeholder="item.placeholder"
maxlength="64"
clearable
@keyup.enter.native="() => handleFilter()"
>
<el-button
v-if="!item.hideButton"
slot="append"
icon="el-icon-search"
@click="() => handleFilter()"
/>
</el-input>
</template> -->
<!--
ip: undefined,
type: undefined,
dispatchType: undefined,
status: undefined,
-->
<template v-if="item.type == 'input'">
<el-input
v-model.trim="listQuery[item.name]"
:placeholder="item.placeholder"
maxlength="64"
clearable
>
</el-input>
</template>
<!-- <template v-if="item.type == 'select'">
<el-select
v-model="formInline[item.name]"
:placeholder="item.placeholder"
clearable
@focus="handleSelectQueue(item.name)"
:filterable="item.filterable ? true : false"
>
<template v-for="option in item.options">
<el-option
:key="option.value"
:label="option.label"
:value="option.value"
/>
</template>
</el-select>
</template> -->
<template v-if="item.type == 'select'">
<el-select
v-model.trim="listQuery[item.name]"
:placeholder="item.placeholder"
clearable
>
<template v-for="option in item.options">
<el-option
:key="option.value"
:label="option.label"
:value="option.value"
/>
</template>
</el-select>
</template>
</el-form-item>
<el-form-item class="search-btns">
<!-- <el-button type="primary" @click="() => handleFilter()"
>查询</el-button
> -->
<el-button type="primary" @click="() => handleFilterItems()"
>查询</el-button
>
<el-button plain @click="reset">重置</el-button>
</el-form-item>
</el-form>
</div>
<div class="filter-container">
<el-button
v-if="switchBtnVisiable"
v-waves
style="margin-left: 10px"
size="mini"
class="filter-item"
type="primary"
icon="el-icon-plus"
@click="handleCreate"
>添加</el-button
>
<el-popconfirm
v-if="switchBtnVisiable && startDispatchVisiable"
icon="el-icon-info"
confirm-button-text="确认"
title="请确认是否开始调度?"
@onConfirm="operate(1)"
>
<el-button
v-waves
slot="reference"
style="
margin-left: 10px;
padding-top: 7px !important;
padding-bottom: 7px !important;
"
size="mini"
class="filter-item"
icon="el-icon-video-play"
>开始调度</el-button
>
</el-popconfirm>
<el-popconfirm
v-if="switchBtnVisiable && closeDispatchVisiable"
icon="el-icon-info"
confirm-button-text="确认"
title="确认停止调度?这将停止新增任务的派发,但不会影响当前执行中的任务。"
@onConfirm="operate(2)"
>
<el-button
v-waves
slot="reference"
style="
margin-left: 10px;
padding-top: 7px !important;
padding-bottom: 7px !important;
"
size="mini"
class="filter-item"
icon="el-icon-video-pause"
type="warning"
>停止调度</el-button
>
</el-popconfirm>
<el-popconfirm
v-if="switchBtnVisiable && closeDispatchVisiable"
icon="el-icon-info"
confirm-button-text="确认"
title="确认停止调度及任务?这将停止新增任务的派发并终止当前所有执行中的任务,请谨慎操作!"
@onConfirm="operate(3)"
>
<el-button
v-waves
slot="reference"
style="
margin-left: 10px;
padding-top: 7px !important;
padding-bottom: 7px !important;
"
size="mini"
class="filter-item"
icon="el-icon-video-pause"
type="danger"
>停止调度及任务</el-button
>
</el-popconfirm>
<el-button
:disabled="refreshBtn"
style="
margin-left: 10px;
padding-top: 6px !important;
padding-bottom: 6px !important;
"
size="mini"
class="filter-item"
@click="getList"
><icon-font icon="icon-dataopsshuaxin" style="font-size: 16px"
/></el-button>
</div>
<div class="table-container">
<el-table
v-loading="listLoading"
:data="list"
size="small"
header-row-class-name="table-header"
style="width: 100%;"
height="100%"
fit
highlight-current-row
@selection-change="handleSelectionChange"
>
<el-table-column type="selection" align="center"></el-table-column>
<el-table-column
label="执行器名称"
align="center"
prop="ip"
min-width="115px"
/>
<el-table-column
label="当前任务数"
align="center"
prop="runningCount"
sortable
width="110px"
/>
<el-table-column
label="周期任务数"
align="center"
prop="cycleTaskCount"
sortable
width="110px"
/>
<el-table-column
label="补数任务数"
align="center"
prop="dataTaskCount"
sortable
width="110px"
/>
<el-table-column
label="SQL任务数"
align="center"
prop="sqlCount"
sortable
width="110px"
/>
<el-table-column
label="脚本任务数"
align="center"
prop="scriptCount"
sortable
width="110px"
/>
<!-- <el-table-column label="IP" align="center" prop="ip" />
<el-table-column label="端口号" align="center" prop="jmxPort" width="100px" /> -->
<el-table-column
label="执行器类型"
align="center"
prop="type"
width="120px"
>
<template slot-scope="scope">
{{ scope.row.type === "LT3_TASK" ? "LT3_TASK" : "" }}
</template>
</el-table-column>
<el-table-column
:filters="filters"
:filter-method="filterHandler"
label="脚本集群名称"
align="center"
prop="dispatchType"
width="140px"
>
<template slot-scope="scope">
{{ dispatchTypeMap[scope.row.dispatchType] }}
</template>
</el-table-column>
<el-table-column
label="并发数"
align="center"
prop="taskParallel"
width="140px"
>
<template slot-scope="scope">
{{ scope.row.taskParallel }}
</template>
</el-table-column>
<!-- <el-table-column label="角色" align="center" width="120px">
<template slot-scope="scope">
<el-tag
v-if="scope.row.executorState.leader === true"
type="success"
>Leader</el-tag
>
<el-tag
v-if="scope.row.executorState.leader === false"
type="success"
>Member</el-tag
>
</template>
</el-table-column> -->
<el-table-column label="角色" align="center" width="120px">
<template slot-scope="scope">
<el-tag type="success">{{ scope.row.type }}</el-tag>
</template>
</el-table-column>
<el-table-column label="运行状态" align="center" width="80px">
<template slot-scope="scope">
<el-tag v-if="scope.row.executorState.live === true" type="success"
>运行</el-tag
>
<el-tag v-if="scope.row.executorState.live === false" type="danger"
>异常</el-tag
>
</template>
</el-table-column>
<el-table-column label="是否启用" align="center" width="80px">
<template slot-scope="scope">
<el-popconfirm
v-if="switchBtnVisiable"
:title="`请确认是否${
scope.row.status ? '停用' : '启用'
}当前执行器`"
icon="el-icon-info"
confirm-button-text="确认"
@onConfirm="handleUpdateState(scope.row)"
>
<el-switch
slot="reference"
:disabled="true"
:width="30"
v-model="scope.row.status"
:active-value="true"
:inactive-value="false"
class="el-switch-mini"
/>
</el-popconfirm>
<span v-else>{{ scope.row.status ? "启用" : "停用" }}</span>
</template>
</el-table-column>
<el-table-column
label="操作"
align="center"
class-name="small-padding"
width="145px"
fixed="right"
>
<template slot-scope="scope">
<el-button
v-if="scope.row.executorState.live == true"
type="text"
size="mini"
@click="checkRunTaskList(scope.row.id, scope.row.ip)"
>详情</el-button
>
<el-button
v-if="switchBtnVisiable"
type="text"
size="mini"
@click="handleUpdate(scope.row)"
>编辑</el-button
>
<ds-pop-comfirm
v-if="switchBtnVisiable"
@on-ok="handleDelete(scope.row)"
>
<el-button type="text" style="margin-left: 10px" size="mini"
>删除</el-button
>
</ds-pop-comfirm>
</template>
</el-table-column>
</el-table>
</div>
<div class="pagination-container">
<div>
<el-button
size="mini"
type="success"
icon="el-icon-open"
@click="changeExecutorStatus(1)"
>启动</el-button
>
<el-button
size="mini"
type="danger"
icon="el-icon-open"
@click="changeExecutorStatus(0)"
>禁止</el-button
>
</div>
<el-pagination
v-show="total > 0"
:current-page="listQuery.pageNum"
:pager-count="5"
:page-sizes="[10, 20, 50, 100]"
:page-size="listQuery.pageSize"
:total="total"
layout="total, sizes, prev, pager, next, jumper"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
/>
</div>
<el-dialog
:title="textMap[dialogStatus]"
:visible.sync="dialogFormVisible"
:close-on-click-modal="false"
width="560px"
>
<el-form
ref="dataForm"
:rules="rules"
:model="temp"
label-position="left"
label-width="100px"
style="width: 400px"
>
<el-form-item label="执行器名称" prop="name">
<el-input v-model="temp.name" maxlength="30" />
</el-form-item>
<el-form-item label="IP地址" prop="ip">
<el-input v-model="temp.ip" maxlength="30" />
</el-form-item>
<el-form-item label="端口" prop="jmxPort">
<el-input v-model="temp.jmxPort" maxlength="30" />
</el-form-item>
<el-form-item label="并发数" prop="taskParallel">
<el-input-number
v-model="temp.taskParallel"
controls-position="right"
></el-input-number>
</el-form-item>
<!-- <el-form-item label="执行器类型" prop="type">
<el-select
v-model="temp.type"
placeholder="请选择执行器类型"
class="filter-item"
style="width: 200px"
>
<el-option label="TASK" value="TASK" />
<el-option label="SCRIPT" value="SCRIPT" />
<el-option label="PY_SPARK" value="PY_SPARK" />
<el-option label="LT3_TASK" value="LT3_TASK" />
<el-option label="LT3_SCRIPT" value="LT3_SCRIPT" />
<el-option label="R" value="R" />
</el-select>
</el-form-item> -->
<el-form-item label="角色" prop="type">
<el-select
v-model="temp.type"
placeholder="请选择执行器类型"
class="filter-item"
style="width: 200px"
>
<el-option label="Master" value="Master" />
<el-option label="Worker" value="Worker" />
</el-select>
</el-form-item>
<el-form-item label="脚本集群名称" prop="dispatchType">
<el-select
v-model="temp.dispatchType"
placeholder="请选择脚本集群名称"
class="filter-item"
style="width: 200px"
>
<el-option
v-for="item in dispatchTypeOptions"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item label="描述" prop="description">
<el-input v-model="temp.description" maxlength="64" />
</el-form-item>
<el-form-item label="是否启用" label-width="110px">
<el-switch
v-model="temp.status"
:active-value="true"
:inactive-value="false"
/>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取消</el-button>
<el-button
v-if="dialogStatus == 'create'"
:disabled="!submitBtn"
type="primary"
@click="createData"
>确定</el-button
>
<el-button
v-else
:disabled="!submitBtn"
type="primary"
@click="updateData"
>确定</el-button
>
</div>
</el-dialog>
<el-dialog
:visible.sync="runTaskDialogFormVisible"
:title="`正在执行的任务列表-${this.currentExecutorName}`"
width="70%"
>
<!-- <div class="count-class">
<el-tag>正在运行的任务数</el-tag>
<span>{{ runningTaskCount }}</span>
</div>
<div class="count-class">
<el-tag>节点类型统计</el-tag>
<span>{{ nodeTypeCount }}</span>
</div>
<div class="count-class">
<el-tag>实例类型统计</el-tag>
<span>{{ instanceTypeCount }}</span>
</div>
<div class="count-class">
<el-tag>计算资源统计</el-tag>
<span>{{ queueCount }}</span>
</div> -->
<div class="count-class">
<el-button
:disabled="taskRefresh"
type="primary"
@click="checkRunTaskList(currentId, currentExecutorName)"
>刷新</el-button
>
</div>
<div>
<el-table
v-loading="runTaskListLoading"
:data="runTaskList"
border
stripe
highlight-current-row
label-width="100px"
width="100%"
class="count-class"
>
<el-table-column
label="实例ID"
align="center"
prop="id"
width="90px"
/>
<el-table-column label="项目名称" align="center" prop="projectName" />
<el-table-column
label="所属环境"
align="center"
prop="envString"
:filters="[
{ text: '2016-05-01', value: '2016-05-01' },
{ text: '2016-05-02', value: '2016-05-02' },
]"
:filter-method="filterNodeTypeTag"
/>
<el-table-column label="任务名称" align="center" prop="name" />
<el-table-column
:filters="nodeTypeTags"
:filter-method="filterNodeTypeTag"
label="节点类型"
align="center"
prop="nodeTypeString"
width="100px"
/>
<el-table-column
:filters="instanceTypeTags"
:filter-method="filterInstanceTypeTag"
label="实例类型"
align="center"
prop="taskInstanceTypeString"
width="100px"
/>
<el-table-column
label="开始执行时间"
align="center"
prop="startTime"
width="150px"
/>
<el-table-column
:filters="queueTags"
:filter-method="filterQueueTag"
label="计算资源"
align="center"
prop="yarnQueueName"
width="90px"
/>
<el-table-column
label="实例状态"
align="center"
prop="statusString"
width="70px"
/>
</el-table>
<!-- <div slot="footer" class="dialog-footer">
<el-button :disabled="taskRefresh" type="primary" @click="checkRunTaskList(currentId)">刷新</el-button>
</div> -->
</div>
</el-dialog>
</div>
</template>
<script>
import {
listExecutor,
editExecutor,
delExecutor,
listRunTaskList,
operateDispatchSwitch,
setExecutorState,
dispatchSwitch,
changeStatus,
getDispatchType,
} from "@/api/ops";
import waves from "@/directive/waves"; // 水波纹指令
import { dispatchTypeMap } from "@/views/dev/utils/model";
import { accessDict } from "./access";
import buttonIsAccess from "@/mixins/buttonIsAccess.js";
export default {
name: "Executor",
mixins: [buttonIsAccess],
directives: {
waves,
},
data() {
return {
currentExecutorName: "",
currentSelectIds: [],
currentId: undefined,
submitBtn: true, // 防止重复提交
refreshBtn: true,
taskRefresh: true,
runningTaskCount: 0,
list: null,
total: null,
listLoading: true,
dialogStatus: "",
dialogFormVisible: false,
runTaskDialogFormVisible: false,
runTaskListLoading: true,
runTaskList: [],
nodeTypeTags: [],
queueTags: [],
instanceTypeTags: [],
nodeTypeCount: "",
instanceTypeCount: "",
queueCount: "",
executorDetail: undefined,
temp: {
id: undefined,
name: undefined,
type: undefined,
ip: undefined,
jmxPort: undefined,
description: undefined,
status: true,
dispatchType: undefined,
taskParallel: undefined,
},
listQuery: {
ip: undefined,
type: undefined,
dispatchType: undefined,
status: undefined,
pageNum: 1,
pageSize: 10,
},
textMap: {
update: "编辑",
create: "新增",
},
rules: {
name: [
{ required: true, message: "请输入执行器名称", trigger: "blur" },
],
ip: [{ required: true, message: "请输入IP", trigger: "blur" }],
type: [
{ required: true, message: "请选择执行器类型", trigger: "blur" },
],
description: [
{ required: true, message: "请输入执行器描述", trigger: "blur" },
],
jmxPort: [
{ required: true, message: "请输入端口号", trigger: "blur" },
{ pattern: /^[0-9]+$/, message: "请输入数字" },
],
taskParallel: [
{ required: true, message: "请选择并发数", trigger: "blur" },
],
},
switchBtnVisiable: false,
startDispatchVisiable: false,
closeDispatchVisiable: false,
dispatchTypeMap,
dispatchTypeOptions: [
// { value: 5, label: "普通脚本集群" },
// { value: 6, label: "模型脚本集群" },
// { value: 4, label: "Spark脚本集群" },
// { value: 7, label: "R脚本任务集群" },
// { value: 8, label: "Neo4j-community集群" },
// { value: 11, label: "Neo4j-relative集群" },
// { value: 9, label: "新账务核心集群" },
// { value: 10, label: "数据集成集群" },
// { value: 12, label: "AI脚本集群" },
// { value: 13, label: "风控生产模型脚本集群" },
// { value: 14, label: "风控生产Spark脚本集群" },
],
searchItems: [
{
name: "ip",
label: "ip地址",
type: "input",
placeholder: "请输入ip地址",
hideButton: true,
},
{
name: "status",
label: "状态",
type: "select",
placeholder: "请选择状态",
options: [
{
value: "1",
label: "启动",
},
{
value: "0",
label: "禁用",
},
],
},
{
name: "type",
label: "角色",
type: "select",
placeholder: "请选择角色",
options: [
{
value: "Master",
label: "Master",
},
{
value: "Worker",
label: "Worker",
},
],
},
{
name: "dispatchType",
label: "脚本集群",
type: "select",
placeholder: "请选择脚本集群",
options: this.dispatchTypeOptions,
},
],
};
},
computed: {
filters() {
const filterList = [];
if (this.list && this.list.length > 0) {
this.list.map((item) => {
if (
filterList.findIndex((a) => a.value === item.dispatchType) === -1
) {
filterList.push({
text: this.dispatchTypeMap[item.dispatchType],
value: item.dispatchType,
});
}
});
}
return filterList;
},
},
created() {
this.switchBtnVisiable = this.buttonIsAccess(accessDict.change);
getDispatchType().then((response) => {
this.dispatchTypeOptions = response.data;
console.log("response", response.data);
});
this.getList();
this.getDispatchSwitch();
},
methods: {
reset() {
this.$nextTick(() => {
this.$refs["queryForm"].resetFields();
});
},
handleFilterItems() {
this.$refs["queryForm"].validate((valid) => {
if (valid) {
console.log("valid", valid);
} else {
return;
}
});
},
changeExecutorStatus(status) {
if (this.currentSelectIds.length) {
changeStatus({ ids: this.currentSelectIds, status }).then(() => {
this.$notify({
title: "成功",
message: "操作成功",
type: "success",
duration: 2000,
});
});
} else {
this.$notify({
title: "提示",
message: "请选择执行器",
type: "warning",
duration: 2000,
});
}
},
handleSelectionChange(val) {
this.currentSelectIds = val.map((item) => {
return item.id;
});
},
filterHandler(value, row, column) {
const property = column["property"];
return row[property] === value;
},
getList() {
this.refreshBtn = true;
this.listLoading = true;
listExecutor(this.listQuery).then((response) => {
this.refreshBtn = false;
this.list = response.data.list;
console.log("res", response.data.list);
this.total = response.data.total;
this.listLoading = false;
});
},
getDispatchSwitch() {
dispatchSwitch().then((response) => {
if (response.data === true) {
this.closeDispatchVisiable = true;
this.startDispatchVisiable = false;
} else {
this.closeDispatchVisiable = false;
this.startDispatchVisiable = true;
}
});
},
checkRunTaskList(currentId, currentName) {
this.currentExecutorName = currentName;
this.taskRefresh = true;
this.currentId = currentId;
this.runTaskDialogFormVisible = true;
listRunTaskList(currentId).then((response) => {
// this.executorDetail = response.data
this.runTaskListLoading = false;
this.taskRefresh = false;
this.runTaskList = response.data.list;
this.runningTaskCount = response.data.count;
this.instanceTypeCount = JSON.stringify(
response.data.instanceTypeCount
);
this.instanceTypeCount = this.instanceTypeCount
.replace("{", "")
.replace("}", "")
.replace(/\"/g, "");
this.nodeTypeCount = JSON.stringify(response.data.typeCount);
this.nodeTypeCount = this.nodeTypeCount
.replace("{", "")
.replace("}", "")
.replace(/\"/g, "");
this.queueCount = JSON.stringify(response.data.queueCount);
this.queueCount = this.queueCount
.replace("{", "")
.replace("}", "")
.replace(/\"/g, "");
this.nodeTypeTags = response.data.nodeTypeTags;
this.queueTags = response.data.queueTags;
this.instanceTypeTags = response.data.instanceTypeTags;
});
},
operate(type) {
const stopTask = type === 3;
if (type === 3) {
type = 2;
}
operateDispatchSwitch(type, stopTask)
.then(() => {
const running = type === 1;
this.$store.dispatch("setGlobalScheduling", running);
this.$notify({
title: "成功",
message: "更新成功",
type: "success",
duration: 2000,
});
if (running === true) {
this.closeDispatchVisiable = true;
this.startDispatchVisiable = false;
} else {
this.closeDispatchVisiable = false;
this.startDispatchVisiable = true;
}
})
.catch((err) => {});
},
getSummaries(param) {
const { columns, data } = param;
const sums = [];
columns.forEach((column, index) => {
if (index === 0) {
sums[index] = "总数";
return;
}
const values = data.map((item) => Number(item[column.property]));
if (!values.every((value) => isNaN(value))) {
sums[index] = values.reduce((prev, curr) => {
const value = Number(curr);
if (!isNaN(value)) {
return prev + curr;
} else {
return prev;
}
}, 0);
sums[index] += " 个";
} else {
sums[index] = "";
}
});
return sums;
},
handleUpdateState(row) {
const params = {
id: row.id,
status: !row.status,
};
setExecutorState(params).then(() => {
row.status = !row.status;
this.$notify({
title: "成功",
message: "修改成功",
type: "success",
duration: 2000,
});
});
},
handleCurrentChange(val) {
this.listQuery.pageNum = val;
this.getList();
},
handleUpdate(row) {
this.temp = Object.assign({}, row); // copy obj
this.dialogStatus = "update";
this.dialogFormVisible = true;
this.submitBtn = true;
this.$nextTick(() => {
this.$refs["dataForm"].clearValidate();
});
},
updateData() {
this.$refs["dataForm"].validate((valid) => {
if (valid) {
this.submitBtn = false;
const tempData = Object.assign({}, this.temp);
editExecutor(tempData).then(() => {
this.handleCurrentChange(this.listQuery.pageNum);
this.dialogFormVisible = false;
this.submitBtn = true;
this.$notify({
title: "成功",
message: "更新成功",
type: "success",
duration: 2000,
}).catch((err) => {
this.submitBtn = true;
});
});
}
});
},
handleCreate() {
this.resetTemp();
this.dialogStatus = "create";
this.dialogFormVisible = true;
this.submitBtn = true;
this.$nextTick(() => {
this.$refs["dataForm"].clearValidate();
});
},
createData() {
this.$refs["dataForm"].validate((valid) => {
if (valid) {
this.submitBtn = false;
editExecutor(this.temp)
.then(() => {
this.handleFilter();
this.dialogFormVisible = false;
this.submitBtn = true;
this.$notify({
title: "成功",
message: "创建成功",
type: "success",
duration: 2000,
});
})
.catch((err) => {
this.submitBtn = true;
});
}
});
},
handleDelete(row) {
delExecutor(row.id).then(() => {
this.$notify({
title: "成功",
message: "删除成功",
type: "success",
duration: 2000,
});
this.handleCurrentChange(this.listQuery.pageNum);
});
},
resetTemp() {
this.temp = {
id: undefined,
name: undefined,
type: undefined,
ip: undefined,
jmxPort: undefined,
description: undefined,
status: true,
};
},
handleFilter() {
this.listQuery.pageNum = 1;
this.getList();
},
handleSizeChange(val) {
this.listQuery.pageSize = val;
this.getList();
},
filterNodeTypeTag(value, row) {
return row.nodeTypeString === value;
},
filterQueueTag(value, row) {
return row.yarnQueueName === value;
},
filterInstanceTypeTag(value, row) {
return row.taskInstanceTypeString === value;
},
filterHandler(value, row, column) {
const property = column["property"];
return row[property] === value;
},
},
};
</script>
<style lang="scss" scoped>
.count-class {
margin-bottom: 10px;
}
.filter-container {
text-align: right;
background: #fff;
min-height: initial !important;
padding: 5px 10px;
}
.filter-container .filter-item {
margin-bottom: 0;
}
::v-deep .el-switch.is-disabled {
opacity: 1 !important;
}
::v-deep .el-switch.is-disabled .el-switch__core,
.el-switch.is-disabled .el-switch__label {
cursor: pointer !important;
}
.pagination-container {
display: flex;
justify-content: space-between;
align-items: center;
}
//
.task-autocomplete {
width: auto !important;
min-width: 200px;
}
.el-cascader-max60-tip-text {
&::after {
content: "最大时间跨度 60天";
font-size: 12px;
color: #aaaaaa;
position: absolute;
bottom: 0px;
left: 4px;
z-index: 1;
}
}
::v-deep .el-range-editor--mini .el-range-separator {
min-width: fit-content;
width: 20px;
}
.el-range-editor--mini .el-range-separator {
width: 20px;
}
.search-form-item {
width: 12.5% !important;
margin-right: 0 !important;
padding-right: 4px;
padding-left: 4px;
}
@media (max-width: 1191px) {
.search-form-item {
width: 25% !important;
}
.search-form-item-double.search-form-item-daterange {
width: 25% !important;
}
.search-form-item-double {
width: 50% !important;
}
.search-btns {
width: 24% !important;
}
}
@media (min-width: 1192px) and (max-width: 1505px) {
.search-form-item {
width: 16.666666% !important;
}
.search-form-item-double.search-form-item-daterange {
width: 16.666666% !important;
}
.search-form-item-double {
width: 33.3333333% !important;
}
.search-btns {
width: 16% !important;
}
}
@media screen and (min-width: 2560px) and (max-width: 3071px) {
.search-form-item {
width: 10% !important;
}
.search-form-item-double.search-form-item-daterange {
width: 10% !important;
}
.search-form-item-double {
width: 20% !important;
}
.search-btns {
width: 9% !important;
}
}
@media (min-width: 3072px) {
.search-form-item {
width: 8.333333% !important;
}
.search-form-item-double.search-form-item-daterange {
width: 8.333333% !important;
}
.search-form-item-double {
width: 16.666666% !important;
}
.search-btns {
width: 8.2% !important;
}
}
</style>
这段代码中的searchItems的 {
name: "dispatchType",
label: "脚本集群",
type: "select",
placeholder: "请选择脚本集群",
options: this.dispatchTypeOptions,
},这一项数据的options的dispatchTypeOptions的值是通过接口获取的,但是接口获取了后,界面的<template v-if="item.type == 'select'">
<el-select
v-model.trim="listQuery[item.name]"
:placeholder="item.placeholder"
clearable
>
<template v-for="option in item.options">
<el-option
:key="option.value"
:label="option.label"
:value="option.value"
/>
</template>
</el-select>
</template>选择框的选项没有,是因为什么,怎么改