|
|
@@ -1,248 +1,528 @@
|
|
|
<template>
|
|
|
- <div class="dataAccess">
|
|
|
- <PublicPageHeader class="dataAccess_title" page-title="数据接入管理" />
|
|
|
- <div class="dataAccess_content flex-wrap">
|
|
|
- <div class="dataAccess_content_left">
|
|
|
- <div class="flex dataAccess_content_left_title title">
|
|
|
- <div class="dataAccess_content_left_title_text">接入服务列表</div>
|
|
|
- <el-button size="small" type="primary">新增</el-button>
|
|
|
+ <div class="newService">
|
|
|
+ <div class="newService-head flex-wrap">
|
|
|
+ <div class="manageTitle">{{ title }}</div>
|
|
|
+ <div class="icons flex-wrap">
|
|
|
+ <div class="icons-list start">
|
|
|
+ <span class="icons-list-box"></span>
|
|
|
+ <span class="icons-list-text">启用</span>
|
|
|
</div>
|
|
|
- <div class="dataAccess_content_left_search">
|
|
|
- <el-input size="small" placeholder="输入关键字进行过滤" clearable v-model="filterText"></el-input>
|
|
|
+ <div class="icons-list stop">
|
|
|
+ <span class="icons-list-box"></span>
|
|
|
+ <span class="icons-list-text">停用</span>
|
|
|
</div>
|
|
|
- <div class="dataAccess_content_left_status flex-wrap">
|
|
|
- <div class="dataAccess_content_left_status_list">
|
|
|
- <span class="icon status1"></span>
|
|
|
- <span>正常</span>
|
|
|
- </div>
|
|
|
- <div class="dataAccess_content_left_status_list">
|
|
|
- <span class="icon status2"></span>
|
|
|
- <span>停止</span>
|
|
|
+ <div class="icons-list error">
|
|
|
+ <span class="icons-list-box"></span>
|
|
|
+ <span class="icons-list-text">异常</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="newService-content flex-wrap">
|
|
|
+ <div class="newService-content-left">
|
|
|
+ <div class="newService-content-left-top">
|
|
|
+ <div class="flex head">
|
|
|
+ <div class="title">服务列表</div>
|
|
|
+ <el-button @click="handleAdd" type="primary" size="small">新增</el-button>
|
|
|
</div>
|
|
|
- <div class="dataAccess_content_left_status_list">
|
|
|
- <span class="icon status3"></span>
|
|
|
- <span>异常</span>
|
|
|
+ <div class="search">
|
|
|
+ <el-input size="small" placeholder="请输入内容" clearable prefix-icon="el-icon-search" v-model="search">
|
|
|
+ </el-input>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="dataAccess_content_left_tree">
|
|
|
- <el-scrollbar style="height: 100%" :horizontal="false">
|
|
|
- <el-tree class="filter-tree" :data="data" :props="defaultProps" default-expand-all :filter-node-method="filterNode" ref="tree">
|
|
|
- <span style="width: 100%;line-height:28px;" class="custom-tree-node flex" slot-scope="{ node, data }">
|
|
|
- <span class="custom-tree-node-label">{{ node.label }}</span>
|
|
|
- <span class="custom-tree-node-btn">
|
|
|
- <el-button type="text" size="mini" @click="() => stop(data)">停止</el-button>
|
|
|
- <el-button style="color:#f00;" type="text" size="mini" @click="() => remove(node, data)">删除</el-button>
|
|
|
- </span>
|
|
|
- </span>
|
|
|
- </el-tree>
|
|
|
- </el-scrollbar>
|
|
|
+ <div class="newService-content-left-bottom">
|
|
|
+ <template v-if="dataList.length">
|
|
|
+ <el-scrollbar ref="scroll" style="height: 100%">
|
|
|
+ <div v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)">
|
|
|
+ <div v-for="(item,index) in dataList" :key="index" @click.stop="handleClick(item,index)" :class="index == activeIndex ? 'active':''" class="contents flex">
|
|
|
+ <div class="left">
|
|
|
+ <span :class="item.runstate ? 'success' : 'error'" class="box"></span>
|
|
|
+ <el-tooltip class="item" effect="dark" :content="item.servicename" placement="top">
|
|
|
+ <span class="txt">{{ item.servicename }}</span>
|
|
|
+ </el-tooltip>
|
|
|
+ </div>
|
|
|
+ <div v-show="activeIndex == index" class="right">
|
|
|
+ <template v-if="!flag && item.serviceid">
|
|
|
+ <template v-if="item.servicetype == 4">
|
|
|
+ <span @click.stop="handleStart" v-if="!item.runstate" class="start">启用</span>
|
|
|
+ <span @click.stop="handleStop" v-else class="stop">停用</span>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <span @click.stop="handleRest(item)" class="rest">重置</span>
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+ <span @click.stop="handleError" class="error">删除</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-scrollbar>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <el-empty description="暂无数据"></el-empty>
|
|
|
+ </template>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="dataAccess_content_right">
|
|
|
- <div class="dataAccess_content_right_top flex-wrap">
|
|
|
- <div class="dataAccess_content_right_top_left">
|
|
|
- <div class="title">服务详情</div>
|
|
|
+ <div class="newService-content-right">
|
|
|
+ <div class="newService-content-right-top">
|
|
|
+ <div class="flex">
|
|
|
+ <div class="title">服务配置 {{ dataObj.servicename }}</div>
|
|
|
+ <el-button type="primary" @click="handleSave" :disabled="flag" class="bcButton" size="small">保存</el-button>
|
|
|
</div>
|
|
|
- <div class="dataAccess_content_right_top_right">
|
|
|
- <div class="title flex">
|
|
|
- <div class="dataAccess_content_left_title_text">采集数据源</div>
|
|
|
- <el-button size="small" @click="onSubmit" type="primary">保存</el-button>
|
|
|
- </div>
|
|
|
- <el-form style="margin-top:20px;" ref="form" :model="form" label-width="100px">
|
|
|
- <el-form-item label="数据源类型">
|
|
|
- <el-select size="small" v-model="form.region" clearable placeholder="请选择数据源类型">
|
|
|
- <el-option label="区域一" value="shanghai"></el-option>
|
|
|
- <el-option label="区域二" value="beijing"></el-option>
|
|
|
- </el-select>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="详细配置">
|
|
|
- <el-input size="small" :rows="5" type="textarea" v-model="form.desc"></el-input>
|
|
|
- </el-form-item>
|
|
|
+ <div class="demo-form">
|
|
|
+ <el-form :model="formInline" label-width="80px">
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="12">
|
|
|
+ <el-form-item label="服务名称">
|
|
|
+ <el-input clearable v-model="formInline.servicename" :disabled="activeIndex == null" size="small" placeholder="请输入服务名称"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-form-item label="服务类型">
|
|
|
+ <el-select style="width:100%" clearable v-model="formInline.servicetypeid" :disabled="activeIndex == null" size="small" placeholder="请选择服务类型">
|
|
|
+ <el-option v-for="(item,index) in servicetype" :key="index" :label="item.label" :value="item.value"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-form-item label="容器ID">
|
|
|
+ <el-select style="width:100%" :disabled="activeIndex == null" clearable size="small" v-model="formInline.containerid" placeholder="请选择容器ID">
|
|
|
+ <el-option v-for="(item,index) in jqList" :key="index" :label="item.containername" :value="item.containerid"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
</el-form>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="dataAccess_content_right_bottom">
|
|
|
- <div class="title">采集日志</div>
|
|
|
- <div class="dataAccess_content_right_bottom_table">
|
|
|
- <el-table :data="tableData" stripe style="width: 100%;margin-top:20px;">
|
|
|
- <el-table-column prop="date" label="日期" width="180">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="name" label="姓名" width="180">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column prop="address" label="地址">
|
|
|
- </el-table-column>
|
|
|
- <el-table-column fixed="right" label="操作" width="100">
|
|
|
- <template slot-scope="scope">
|
|
|
- <el-button @click="handleDetails(scope.row)" type="text" size="small">查看详情</el-button>
|
|
|
+ <div class="cj-form">
|
|
|
+ <el-form :model="formInline" label-width="80px">
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-form-item label="采集类型">
|
|
|
+ <el-select style="width:100%" size="small" :disabled="formInline.servicetype == 1 || activeIndex == null" v-model="formInline.tasktype" placeholder="请选择采集类型">
|
|
|
+ <el-option label="CRON表达式" :value="0"></el-option>
|
|
|
+ <el-option label="轮询方式" :value="1"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-form-item label="循环次数 ">
|
|
|
+ <el-input style="width: 100%;" :disabled="checkStatus(formInline)" clearable v-model="formInline.loopcount" size="small" placeholder="循环次数"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <template v-if="formInline.tasktype == 0">
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-form-item label-width="100px" label="CRON表达式">
|
|
|
+ <el-input :disabled="checkStatus(formInline)" clearable v-model="formInline.cronexpress" size="small" placeholder="请输入CRON表达式"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-form-item label="有效时间" prop="startTime">
|
|
|
+ <el-date-picker :disabled="checkStatus(formInline)" style="width: 100%;" size="small" v-model="formInline.taskValid" type="datetime" format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm" placeholder="有效时间" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
</template>
|
|
|
- </el-table-column>
|
|
|
- </el-table>
|
|
|
+ <template v-else>
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-form-item label="采集频率">
|
|
|
+ <el-input :disabled="checkStatus(formInline)" style="width: 100%;" clearable v-model="formInline.frequencyCount" size="small" placeholder="请输入采集频率"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-form-item label="频率单位">
|
|
|
+ <el-select :disabled="checkStatus(formInline)" style="width: 100%;" clearable size="small" v-model="formInline.frequencyUnit" placeholder="请选择频率单位">
|
|
|
+ <el-option label="毫秒" :value="1"></el-option>
|
|
|
+ <el-option label="秒" :value="1000"></el-option>
|
|
|
+ <el-option label="分钟" :value="60000"></el-option>
|
|
|
+ <el-option label="小时" :value="3600000"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </template>
|
|
|
+ </el-row>
|
|
|
+ <el-row :gutter="20">
|
|
|
+ <el-col v-if="formInline.tasktype == 1" :span="6"><el-form-item label="有效时间" prop="starttime">
|
|
|
+ <el-date-picker :disabled="checkStatus(formInline)" style="width: 100%;" size="small" v-model="formInline.taskValid" type="datetime" format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm" placeholder="有效时间" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-form-item label="失效时间" prop="stoptime">
|
|
|
+ <el-date-picker :disabled="checkStatus(formInline)" style="width: 100%;" size="small" v-model="formInline.taskInvalid" type="datetime" format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm" placeholder="有效时间" />
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </el-form>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <div style="height: calc(100% - 280px);overflow: hidden;" class="newService-content-right-bottom">
|
|
|
+ <Table :dataId="dataId" :msgContent="msgContent" dataTitle="算法配置" />
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <Dialog :flag="rmFlag">
|
|
|
+ <div class="airportInfoDialog">
|
|
|
+ <div class="title del-title">删除</div>
|
|
|
+ <div class="content del-content">
|
|
|
+ <span class="el-icon-error error r10"></span>您是否确认删除<span class="error l10">{{ dataObj.serviceName }}</span>
|
|
|
+ ？
|
|
|
+ </div>
|
|
|
+ <div class="foot right Delfoot">
|
|
|
+ <el-button size="medium" class="r24" @click="tableRemove" type="danger">删除</el-button>
|
|
|
+ <el-button size="medium" @click="rmFlag = false">取消</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </Dialog>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import PublicPageHeader from '@/components/PublicPageHeader'
|
|
|
+import Table from '@/views/tablePage/index.vue'
|
|
|
+import Dialog from "@/layout/components/Dialog/index.vue"
|
|
|
+import { Query, newData, modifyData, moveData, start, stop } from "@/api/webApi"
|
|
|
+import pf from '@/layout/mixin/publicFunc'
|
|
|
+import * as _ from 'lodash'
|
|
|
export default {
|
|
|
- name: 'DataAccess',
|
|
|
- components: { PublicPageHeader },
|
|
|
+ name: 'NewService',
|
|
|
+ mixins: [pf],
|
|
|
+ components: { Table, Dialog },
|
|
|
data () {
|
|
|
return {
|
|
|
- filterText: '',
|
|
|
- data: [{
|
|
|
- id: 1,
|
|
|
- label: '一级 1',
|
|
|
- children: [
|
|
|
- {
|
|
|
- id: 4,
|
|
|
- label: '二级 1-1',
|
|
|
- children: [{
|
|
|
- id: 9,
|
|
|
- label: '三级 1-1-1'
|
|
|
- }, {
|
|
|
- id: 10,
|
|
|
- label: '三级 1-1-2'
|
|
|
- }]
|
|
|
- },
|
|
|
- ]
|
|
|
- }],
|
|
|
- defaultProps: {
|
|
|
- children: 'children',
|
|
|
- label: 'label'
|
|
|
+ title: '服务设置',
|
|
|
+ search: '',
|
|
|
+ arrs: [],
|
|
|
+ flag: true,
|
|
|
+ rmFlag: false,
|
|
|
+ formInline: {
|
|
|
+ servicename: '',
|
|
|
+ servicetype: '',
|
|
|
+ workid: '',
|
|
|
+ loopCount: '',
|
|
|
+ frequencyCount: '',
|
|
|
+ frequencyUnit: '',
|
|
|
+ taskValid: '',
|
|
|
+ taskInvalid: '',
|
|
|
+ taskType: '',
|
|
|
+ cronExpress: ''
|
|
|
},
|
|
|
- form: {
|
|
|
- region: '',
|
|
|
- desc: ''
|
|
|
+ servicetype: [
|
|
|
+ {
|
|
|
+ label: '接收',
|
|
|
+ value: 1
|
|
|
+ },
|
|
|
+ {
|
|
|
+ label: '采集',
|
|
|
+ value: 4
|
|
|
+ }
|
|
|
+ ],
|
|
|
+ activeIndex: null,
|
|
|
+ pageIndex: 0,
|
|
|
+ pageSize: 9999,
|
|
|
+ dataContent: { filter: { 1: 1 } },
|
|
|
+ queryId: '',
|
|
|
+ dataObj: {},
|
|
|
+ dataType: 'edit',
|
|
|
+ noMore: false,
|
|
|
+ loading: false,
|
|
|
+ dataId: 15,
|
|
|
+ msgContent: {
|
|
|
+ serviceid: '15',
|
|
|
+ pagecode: 'algorithmlibraryManagementTable'
|
|
|
},
|
|
|
- tableData: [{
|
|
|
- date: '2016-05-02',
|
|
|
- name: '王小虎',
|
|
|
- address: '上海市普陀区金沙江路 1518 弄'
|
|
|
- }, {
|
|
|
- date: '2016-05-04',
|
|
|
- name: '王小虎',
|
|
|
- address: '上海市普陀区金沙江路 1517 弄'
|
|
|
- }, {
|
|
|
- date: '2016-05-01',
|
|
|
- name: '王小虎',
|
|
|
- address: '上海市普陀区金沙江路 1519 弄'
|
|
|
- }, {
|
|
|
- date: '2016-05-03',
|
|
|
- name: '王小虎',
|
|
|
- address: '上海市普陀区金沙江路 1516 弄'
|
|
|
- }]
|
|
|
- };
|
|
|
- },
|
|
|
- watch: {
|
|
|
- filterText (val) {
|
|
|
- this.$refs.tree.filter(val);
|
|
|
+ jqList: []
|
|
|
}
|
|
|
},
|
|
|
- methods: {
|
|
|
- filterNode (value, data) {
|
|
|
- if (!value) return true;
|
|
|
- return data.label.indexOf(value) !== -1;
|
|
|
- },
|
|
|
- stop (row) { },
|
|
|
- remove (node, data) {
|
|
|
- const parent = node.parent;
|
|
|
- const children = parent.data.children || parent.data;
|
|
|
- const index = children.findIndex(d => d.id === data.id);
|
|
|
- children.splice(index, 1);
|
|
|
- },
|
|
|
- onSubmit () { },
|
|
|
- handleDetails (row) {
|
|
|
- console.log(row)
|
|
|
+ computed: {
|
|
|
+ dataList () {
|
|
|
+ return this.arrs.filter(data => !this.search || data.serviceName.toLowerCase().includes(this.search.toLowerCase()))
|
|
|
+ },
|
|
|
+ checkStatus () {
|
|
|
+ return function (formInline) {
|
|
|
+ return (formInline.serviceType && formInline.taskType) || (formInline.serviceType && formInline.taskType == 0) ? false : true
|
|
|
+ }
|
|
|
}
|
|
|
},
|
|
|
-}
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="scss" scoped>
|
|
|
-.dataAccess {
|
|
|
- padding: 20px;
|
|
|
- &_content {
|
|
|
- height: calc(100vh - 180px);
|
|
|
- margin-top: 20px;
|
|
|
- position: relative;
|
|
|
- &_left {
|
|
|
- width: 360px;
|
|
|
- height: 100%;
|
|
|
- background: #fff;
|
|
|
- padding: 20px;
|
|
|
- margin-right: 20px;
|
|
|
- &_search {
|
|
|
- margin: 20px 0 40px 0;
|
|
|
- }
|
|
|
- &_status {
|
|
|
- margin-bottom: 40px;
|
|
|
- &_list {
|
|
|
- margin-right: 30px;
|
|
|
- &:last-child {
|
|
|
- margin-right: 0;
|
|
|
- }
|
|
|
- .icon {
|
|
|
- display: inline-block;
|
|
|
- width: 14px;
|
|
|
- height: 14px;
|
|
|
- vertical-align: middle;
|
|
|
- margin-right: 6px;
|
|
|
- position: relative;
|
|
|
- top: -2px;
|
|
|
- }
|
|
|
- .status1 {
|
|
|
- background-color: #72e6bf;
|
|
|
- }
|
|
|
- .status2 {
|
|
|
- background-color: #bdbbbb;
|
|
|
+ created () {
|
|
|
+ const { title, qid } = this.$route.meta
|
|
|
+ this.title = title
|
|
|
+ this.queryId = qid
|
|
|
+ this.getQuery(qid)
|
|
|
+ this.getMsgList(11)
|
|
|
+ },
|
|
|
+ updated () {
|
|
|
+ this.scrollDown()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ async getQuery (id) {
|
|
|
+ try {
|
|
|
+ this.loading = true;
|
|
|
+ const { code, returnData } = await Query({
|
|
|
+ serviceid: id,
|
|
|
+ datacontent: this.dataContent,
|
|
|
+ event: '0'
|
|
|
+ })
|
|
|
+ if (code == 0) {
|
|
|
+ if (returnData.length === 0) {
|
|
|
+ this.pageIndex--;
|
|
|
+ this.noMore = true;
|
|
|
}
|
|
|
- .status3 {
|
|
|
- background-color: #f00;
|
|
|
+ this.arrs.push(...returnData)
|
|
|
+ if (this.dataType == 'add') {
|
|
|
+ const item = this.arrs[this.arrs.length - 1]
|
|
|
+ if (Object.keys(item).length) {
|
|
|
+ this.dataObj = item
|
|
|
+ this.flag = false
|
|
|
+ this.msgContent = {
|
|
|
+ service_id: item.serviceID
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
+ this.loading = false;
|
|
|
+ } else {
|
|
|
+ this.pageIndex--;
|
|
|
+ this.loading = false;
|
|
|
}
|
|
|
+ } catch (error) {
|
|
|
+ this.pageIndex--;
|
|
|
+ this.loading = false;
|
|
|
}
|
|
|
- ::v-deep &_tree {
|
|
|
- height: calc(100% - 180px);
|
|
|
- .el-scrollbar__wrap {
|
|
|
- overflow-x: hidden;
|
|
|
+ },
|
|
|
+ async getMsgList (id) {
|
|
|
+ try {
|
|
|
+ const { code, returnData } = await Query({
|
|
|
+ serviceid: id,
|
|
|
+ page: 1,
|
|
|
+ datacontent: { filter: { 1: 1 } },
|
|
|
+ event: '0'
|
|
|
+ })
|
|
|
+ if (code == 0) {
|
|
|
+ this.jqList = returnData
|
|
|
}
|
|
|
- .is-horizontal {
|
|
|
- display: none;
|
|
|
+ } catch (error) {
|
|
|
+ this.jqList = []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ load () {
|
|
|
+ if (!this.noMore) {
|
|
|
+ this.getQuery(this.queryId);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ scrollDown () {
|
|
|
+ if (this.$refs['scroll'] && this.dataType == 'add') {
|
|
|
+ this.$refs['scroll'].wrap.scrollTop = this.$refs['scroll'].wrap.scrollHeight
|
|
|
+ }
|
|
|
+ },
|
|
|
+ resetTable () {
|
|
|
+ this.pageIndex = 0;
|
|
|
+ this.noMore = false;
|
|
|
+ this.arrs = [];
|
|
|
+ },
|
|
|
+ //服务列表-新增
|
|
|
+ handleAdd () {
|
|
|
+ const datas = this.arrs.filter(item => item.serviceName == '新建服务')
|
|
|
+ if (datas && datas.length) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ this.dataType = 'add'
|
|
|
+ this.flag = false
|
|
|
+ this.dataObj.serviceName = '新建服务'
|
|
|
+ this.arrs.push({ serviceName: '新建服务' })
|
|
|
+ this.activeIndex = this.arrs.length - 1
|
|
|
+ for (const key in this.formInline) {
|
|
|
+ if (Object.hasOwnProperty.call(this.formInline, key)) {
|
|
|
+ this.formInline[key] = null
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
- &_right {
|
|
|
- width: calc(100% - 380px);
|
|
|
- &_top {
|
|
|
- height: 290px;
|
|
|
- &_left {
|
|
|
- width: calc(100% - 520px);
|
|
|
- background-color: #fff;
|
|
|
- padding: 20px;
|
|
|
- margin-right: 20px;
|
|
|
+ this.msgContent = {
|
|
|
+ service_id: ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //服务列表-点击
|
|
|
+ handleClick (item, index) {
|
|
|
+ this.dataType = 'edit'
|
|
|
+ this.dataObj = _.cloneDeep(item)
|
|
|
+ this.formInline = _.cloneDeep(item)
|
|
|
+ this.activeIndex = index
|
|
|
+ this.flag = false
|
|
|
+ this.msgContent = {
|
|
|
+ serviceid: '15',
|
|
|
+ pagecode: 'algorithmlibraryManagementTable'
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //服务列表-启用
|
|
|
+ handleStart () {
|
|
|
+ if (this.dataObj.serviceID && this.dataType == 'edit') {
|
|
|
+ this.dataObj.runState = 1
|
|
|
+ this.controlService(1, this.dataObj)
|
|
|
+ } else if (this.dataType == 'add' && this.arrs[this.arrs.length - 1].serviceID) {
|
|
|
+ this.arrs[this.arrs.length - 1].runState = 1
|
|
|
+ this.controlService(1, this.arrs[this.arrs.length - 1])
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ this.$message.error('请先添加当前服务后再操作')
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //服务列表-停用
|
|
|
+ handleStop () {
|
|
|
+ if (this.dataObj.serviceID && this.dataType == 'edit') {
|
|
|
+ this.dataObj.runState = 0
|
|
|
+ this.controlService(0, this.dataObj)
|
|
|
+ } else if (this.dataType == 'add' && this.arrs[this.arrs.length - 1].serviceID) {
|
|
|
+ this.arrs[this.arrs.length - 1].runState = 0
|
|
|
+ this.controlService(0, this.arrs[this.arrs.length - 1])
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ this.$message.error('请先添加当前服务后再操作')
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //服务列表-重置
|
|
|
+ handleRest (item) {
|
|
|
+ this.controlService(0, item)
|
|
|
+ },
|
|
|
+ //服务列表-保存
|
|
|
+ handleSave () {
|
|
|
+ if (this.dataObj.serviceID && this.dataType == 'edit') {
|
|
|
+ const obj = {}
|
|
|
+ obj.Value = this.formInline
|
|
|
+ obj.filter = {
|
|
|
+ serviceID: this.dataObj.serviceID
|
|
|
+ }
|
|
|
+ if (obj.Value.serviceID) {
|
|
|
+ delete obj.Value.serviceID
|
|
|
}
|
|
|
- &_right {
|
|
|
- width: 500px;
|
|
|
- background-color: #fff;
|
|
|
- padding: 20px;
|
|
|
+ this.generalDataReception(2, [obj])
|
|
|
+ } else if (this.dataType == 'add' && this.arrs[this.arrs.length - 1].serviceID) {
|
|
|
+ this.formInline.serviceID = this.arrs[this.arrs.length - 1].serviceID
|
|
|
+ const obj = {}
|
|
|
+ obj.Value = this.formInline
|
|
|
+ obj.filter = [{
|
|
|
+ "left": "(",
|
|
|
+ "column": `serviceID`,
|
|
|
+ "comparator": "=",
|
|
|
+ "value": `${this.formInline.serviceID}`,
|
|
|
+ "right": ")",
|
|
|
+ "connector": "and"
|
|
|
+ }]
|
|
|
+ if (obj.Value.serviceID) {
|
|
|
+ delete obj.Value.serviceID
|
|
|
}
|
|
|
+ this.generalDataReception(2, [obj])
|
|
|
+ } else if (this.dataType == 'add') {
|
|
|
+ const obj = {}
|
|
|
+ obj.Value = this.formInline
|
|
|
+ this.generalDataReception(1, [obj])
|
|
|
}
|
|
|
- &_bottom {
|
|
|
- margin-top: 20px;
|
|
|
- height: calc(100% - 310px);
|
|
|
- background-color: #fff;
|
|
|
- width: 100%;
|
|
|
- padding: 20px;
|
|
|
+ else {
|
|
|
+ this.$message.error('请先选中服务后再操作')
|
|
|
}
|
|
|
- }
|
|
|
- .title {
|
|
|
- line-height: 32px;
|
|
|
- font-size: 16px;
|
|
|
- font-weight: 600;
|
|
|
- }
|
|
|
+ },
|
|
|
+ tableRemove () {
|
|
|
+ if (this.dataObj.serviceID && this.dataType == 'edit') {
|
|
|
+ // const obj = {}
|
|
|
+ // obj.filter = this.dataObj
|
|
|
+ this.generalDataReception(3, [this.dataObj])
|
|
|
+ this.msgContent = {
|
|
|
+ service_id: ''
|
|
|
+ }
|
|
|
+ this.activeIndex = null;
|
|
|
+ this.dataObj = {};
|
|
|
+ for (const key in this.formInline) {
|
|
|
+ if (Object.hasOwnProperty.call(this.formInline, key)) {
|
|
|
+ this.formInline[key] = null
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.flag = true
|
|
|
+ } else if (this.dataType == 'add' && this.arrs[this.arrs.length - 1].serviceID) {
|
|
|
+ // const obj = {}
|
|
|
+ // obj.filter = this.arrs[this.arrs.length - 1]
|
|
|
+ this.generalDataReception(3, [this.arrs[this.arrs.length - 1]])
|
|
|
+ this.msgContent = {
|
|
|
+ service_id: ''
|
|
|
+ }
|
|
|
+ this.activeIndex = null;
|
|
|
+ this.dataObj = {};
|
|
|
+ for (const key in this.formInline) {
|
|
|
+ if (Object.hasOwnProperty.call(this.formInline, key)) {
|
|
|
+ this.formInline[key] = null
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.flag = true
|
|
|
+ this.dataType = 'edit'
|
|
|
+ }
|
|
|
+ else {
|
|
|
+ this.arrs.splice(this.activeIndex, 1)
|
|
|
+ this.activeIndex = null
|
|
|
+ this.flag = true
|
|
|
+ this.dataObj = {}
|
|
|
+ for (const key in this.formInline) {
|
|
|
+ if (Object.hasOwnProperty.call(this.formInline, key)) {
|
|
|
+ this.formInline[key] = null
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ this.rmFlag = false
|
|
|
+ },
|
|
|
+ //服务列表-删除
|
|
|
+ handleError () {
|
|
|
+ this.rmFlag = true
|
|
|
+ },
|
|
|
+ //服务列表-增/删/改
|
|
|
+ async generalDataReception (event, data) {
|
|
|
+ try {
|
|
|
+ const params = {
|
|
|
+ serviceId: this.queryId,
|
|
|
+ dataContent: data,
|
|
|
+ event: `${event}`,
|
|
|
+ };
|
|
|
+ const { code } =
|
|
|
+ event == 1
|
|
|
+ ? await newData(params)
|
|
|
+ : event == 2
|
|
|
+ ? await modifyData(params)
|
|
|
+ : await moveData(params);
|
|
|
+ if (code == 0) {
|
|
|
+ this.$message.success("操作成功");
|
|
|
+ this.resetTable();
|
|
|
+ this.getQuery(this.queryId);
|
|
|
+ } else {
|
|
|
+ this.$message.error("操作失败");
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ this.$message.error("操作失败");
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ //服务启停
|
|
|
+ async controlService (event, data) {
|
|
|
+ try {
|
|
|
+ const params = {
|
|
|
+ serviceId: data.serviceID
|
|
|
+ };
|
|
|
+ const { code } =
|
|
|
+ event == 1
|
|
|
+ ? await start(params)
|
|
|
+ : await stop(params);
|
|
|
+ if (code == 0) {
|
|
|
+ this.resetTable()
|
|
|
+ this.getQuery(this.queryId)
|
|
|
+ this.$message.success("操作成功")
|
|
|
+ // const obj = {}
|
|
|
+ // obj.Value = data
|
|
|
+ // obj.filter = {
|
|
|
+ // serviceID: data.serviceID
|
|
|
+ // }
|
|
|
+ // if (obj.Value.serviceID) {
|
|
|
+ // delete obj.Value.serviceID
|
|
|
+ // }
|
|
|
+ // this.generalDataReception(2, [obj])
|
|
|
+ } else {
|
|
|
+ this.$message.error("操作失败");
|
|
|
+ }
|
|
|
+ } catch (error) {
|
|
|
+ this.$message.error("操作失败");
|
|
|
+ }
|
|
|
+ },
|
|
|
}
|
|
|
}
|
|
|
-</style>
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+@import "./css/index.scss";
|
|
|
+</style>
|
