Merge branch 'master' of http://120.26.64.82:3000/BFFE/CABaggageData2.0

public/config.js

@@ -5,8 +5,9 @@ PLATFROM_CONFIG.appSecret = "9inu7zpllz1folzsljm498dcpi0lsog1"; //appSecret
 PLATFROM_CONFIG.appId = "q7kdjmmaf0kerwpf"; //appid
 // PLATFROM_CONFIG.baseURLCA = "http://106.14.243.117:9114";
 // PLATFROM_CONFIG.baseURLCA = "http://106.14.243.117:8093";
-PLATFROM_CONFIG.baseURLCA = "http://cssc.free.idcfengye.com";
+// PLATFROM_CONFIG.baseURLCA = "http://cssc.free.idcfengye.com";
 // PLATFROM_CONFIG.baseURLCA = "http://192.168.3.17:8080";
 // PLATFROM_CONFIG.baseURLCA = "http://192.168.3.243:8093";
 // PLATFROM_CONFIG.baseURLCA = "http://ts.free.idcfengye.com";
+PLATFROM_CONFIG.baseURLCA = "http://192.168.3.131:18064";
 

src/components/Table/index.vue

@@ -1,47 +1,17 @@
 <template>
   <div class="data-table" :style="{ marginTop: marginTop }">
-    <div
-      :style="dataTableContentStyle"
-      v-loading="loading"
-      element-loading-text="拼命加载中"
-      element-loading-spinner="el-icon-loading"
-      element-loading-background="rgba(0, 0, 0, 0.8)"
-      class="data-table-content"
-    >
-      <div v-if="isBtn" class="data-table-btn flex-end">
-        <el-button size="small" @click="handleAdd" plain type="primary"
-          >新增</el-button
-        >
+    <div :style="dataTableContentStyle" v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0.8)" class="data-table-content">
+      <div :class="isStatus ? 'flex' : 'flex-end'" class="data-table-btn">
+        <div v-if="isStatus" class="vStatus">
+          <slot />
+        </div>
+        <el-button v-if="isBtn" size="small" @click="handleAdd" plain type="primary">新增</el-button>
       </div>
       <template v-if="tableData.length">
         <div>
-          <el-table
-            v-el-table-infinite-scroll="load"
-            :data="filteredTableData"
-            :summary-method="getSummaries"
-            :span-method="tableSpanMethod"
-            stripe
-            :show-summary="showSummary"
-            border
-            ref="table"
-            :height="tableHeight ? tableHeight : minHeight - 8 + 'vh'"
-            class="table infinite-list"
-            style="width: 100%; overflow: auto"
-            @select="selectHandler"
-          >
-            <el-table-column
-              v-if="selectionEnable"
-              type="selection"
-              width="35"
-            />
-            <el-table-column
-              v-for="(item, index) in tableColsCopy"
-              :sortable="item.needSort ? true : false"
-              :key="index"
-              :prop="item.columnName"
-              :label="item.columnLabel"
-              :show-overflow-tooltip="showOverflowTooltip"
-            >
+          <el-table v-el-table-infinite-scroll="load" :data="filteredTableData" :summary-method="getSummaries" :span-method="tableSpanMethod" stripe :show-summary="showSummary" border ref="table" :height="tableHeight ? tableHeight : minHeight - 8 + 'vh'" class="table infinite-list" style="width: 100%; overflow: auto" @select="selectHandler">
+            <el-table-column v-if="selectionEnable" type="selection" width="35" />
+            <el-table-column v-for="(item, index) in tableColsCopy" :sortable="item.needSort ? true : false" :key="index" :prop="item.columnName" :label="item.columnLabel" :show-overflow-tooltip="showOverflowTooltip">
               <template #header>
                 <span class="colTips">
                   <el-tooltip :content="item.columnDescribe" placement="top">
@@ -49,38 +19,18 @@
                   </el-tooltip>
                 </span>
                 <span v-if="item.needFilters">
-                  <el-popover
-                    placement="bottom"
-                    trigger="click"
-                    @show="popoverShowHandler(item.columnName)"
-                    @hide="popoverHideHandler"
-                  >
-                    <i
-                      slot="reference"
-                      :class="[
+                  <el-popover placement="bottom" trigger="click" @show="popoverShowHandler(item.columnName)" @hide="popoverHideHandler">
+                    <i slot="reference" :class="[
                         'filter-arrow',
                         'el-icon-arrow-down',
                         arrowClass(item.columnName),
-                      ]"
-                    />
+                      ]" />
                     <el-form>
                       <el-form-item :label="item.columnLabel">
-                        <el-select
-                          v-model="filterValues[item.columnName]"
-                          size="small"
-                          placeholder="筛选"
-                          default-first-option
-                          filterable
-                          clearable
-                        >
-                          <el-option
-                            v-for="(option, optionIndex) in tableDataFilters[
+                        <el-select v-model="filterValues[item.columnName]" size="small" placeholder="筛选" default-first-option filterable clearable>
+                          <el-option v-for="(option, optionIndex) in tableDataFilters[
                               item.columnName
-                            ]"
-                            :key="option.value + optionIndex"
-                            :value="option.value"
-                            :label="option.text"
-                          />
+                            ]" :key="option.value + optionIndex" :value="option.value" :label="option.text" />
                         </el-select>
                       </el-form-item>
                     </el-form>
@@ -93,52 +43,12 @@
                 <div class="hd-td">
                   <div class="hd-tr">
                     <!-- <el-button class="hrefBtn" type="text" @click="handleHerf(scope.row)" size="small">跳转</el-button> -->
-                    <el-button
-                      type="text"
-                      @click="handleEdit(scope.row)"
-                      size="small"
-                      class="rmScs"
-                      >编辑</el-button
-                    >
-                    <el-button
-                      class="rmSc"
-                      type="text"
-                      @click="handleRemove(scope.row)"
-                      size="small"
-                      >删除</el-button
-                    >
-                    <el-button
-                      class="rmScs"
-                      v-if="withColumnSet"
-                      type="text"
-                      size="small"
-                      @click="handleColumnSet(scope.row)"
-                      >列设置</el-button
-                    >
-                    <el-button
-                      class="rmScs"
-                      v-if="withItemSet"
-                      type="text"
-                      size="small"
-                      @click="handleItemSet(scope.row)"
-                      >数据项</el-button
-                    >
-                    <el-button
-                      class="rmScser"
-                      v-if="withlodSet"
-                      type="text"
-                      size="small"
-                      @click="handlelodSet(scope.row)"
-                      >航站设置</el-button
-                    >
-                    <el-button
-                      class="rmScser"
-                      v-if="withnodeSet"
-                      type="text"
-                      size="small"
-                      @click="handlenodeSet(scope.row)"
-                      >节点设置</el-button
-                    >
+                    <el-button type="text" @click="handleEdit(scope.row)" size="small" class="rmScs">编辑</el-button>
+                    <el-button class="rmSc" type="text" @click="handleRemove(scope.row)" size="small">删除</el-button>
+                    <el-button class="rmScs" v-if="withColumnSet" type="text" size="small" @click="handleColumnSet(scope.row)">列设置</el-button>
+                    <el-button class="rmScs" v-if="withItemSet" type="text" size="small" @click="handleItemSet(scope.row)">数据项</el-button>
+                    <el-button class="rmScser" v-if="withlodSet" type="text" size="small" @click="handlelodSet(scope.row)">航站设置</el-button>
+                    <el-button class="rmScser" v-if="withnodeSet" type="text" size="small" @click="handlenodeSet(scope.row)">节点设置</el-button>
                   </div>
                 </div>
               </template>
@@ -157,38 +67,16 @@
         <div class="dialog-content">
           <div class="title">{{ tableTitle }}</div>
           <div class="content">
-            <el-form
-              ref="ruleForm"
-              :model="tableForm"
-              :label-width="labelWidth"
-            >
+            <el-form ref="ruleForm" :model="tableForm" :label-width="labelWidth">
               <el-row :gutter="20">
-                <el-col
-                  v-for="(item, index) in tableColsCopy"
-                  :key="index"
-                  :span="rows"
-                >
+                <el-col v-for="(item, index) in tableColsCopy" :key="index" :span="rows">
                   <el-form-item :label="item.columnLabel">
-                    <template
-                      v-if="
+                    <template v-if="
                         item.listqueryTemplateID ||
                         item.listqueryTemplateID == 0
-                      "
-                    >
-                      <el-select
-                        size="small"
-                        clearable
-                        style="width: 100%"
-                        v-model="tableForm[item.columnName]"
-                        @change="changeSelect(item.columnName)"
-                        placeholder="请选择"
-                      >
-                        <el-option
-                          v-for="item in tableOptions[item.columnName]"
-                          :key="item.v"
-                          :label="item.k"
-                          :value="item.v"
-                        >
+                      ">
+                      <el-select size="small" clearable style="width: 100%" v-model="tableForm[item.columnName]" @change="changeSelect(item.columnName)" placeholder="请选择">
+                        <el-option v-for="item in tableOptions[item.columnName]" :key="item.v" :label="item.k" :value="item.v">
                         </el-option>
                       </el-select>
                     </template>
@@ -196,11 +84,7 @@
                       <el-input size="small" :rows="1" type="textarea" v-model="tableForm[item.columnName]"></el-input>
                     </template> -->
                     <template v-else>
-                      <el-input
-                        size="small"
-                        v-model="tableForm[item.columnName]"
-                        @change="inputChangeHandler(item.columnName)"
-                      ></el-input>
+                      <el-input size="small" v-model="tableForm[item.columnName]" @change="inputChangeHandler(item.columnName)"></el-input>
                     </template>
                   </el-form-item>
                 </el-col>
@@ -208,13 +92,7 @@
             </el-form>
           </div>
           <div class="foot right t30">
-            <el-button
-              size="medium"
-              @click="handleOk"
-              class="r24"
-              type="primary"
-              >确定</el-button
-            >
+            <el-button size="medium" @click="handleOk" class="r24" type="primary">确定</el-button>
             <el-button @click="flag = false" size="medium">取消</el-button>
           </div>
         </div>
@@ -223,20 +101,11 @@
         <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"
-              >{{ rmTitle }}</span
-            >
+            <span class="el-icon-error error r10"></span>您是否确认删除<span class="error l10">{{ rmTitle }}</span>
             ？
           </div>
           <div class="foot right Delfoot t30">
-            <el-button
-              size="medium"
-              class="r24"
-              @click="tableRemove"
-              type="danger"
-              >删除</el-button
-            >
+            <el-button size="medium" class="r24" @click="tableRemove" type="danger">删除</el-button>
             <el-button size="medium" @click="rmFlag = false">取消</el-button>
           </div>
         </div>
@@ -270,6 +139,11 @@ export default {
       type: Object,
       default: () => ({}),
     },
+    //是否显示状态
+    isStatus: {
+      type: Boolean,
+      default: false,
+    },
     //弹框宽度
     width: {
       type: String,
@@ -306,7 +180,7 @@ export default {
     },
     marginTop: {
       type: String,
-      default: "20px",
+      default: "0px",
     },
     // 是否可选中行
     selectionEnable: {
@@ -345,7 +219,7 @@ export default {
     },
   },
   components: { Dialog, NoData },
-  data() {
+  data () {
     return {
       loading: false,
       flag: false,
@@ -375,7 +249,7 @@ export default {
     };
   },
   computed: {
-    dataTableContentStyle() {
+    dataTableContentStyle () {
       const style = {};
       if (this.minHeight) {
         style["min-height"] = this.minHeight;
@@ -386,7 +260,7 @@ export default {
       return style;
     },
     //设置表头-下拉-箭头样式
-    arrowClass() {
+    arrowClass () {
       return function (prop) {
         let classString = "";
         if (this.colShowFilter === prop) {
@@ -403,7 +277,7 @@ export default {
       };
     },
     //设置表头-下拉-选中数据
-    filteredTableData() {
+    filteredTableData () {
       return this.tableData.filter((item) => {
         let flag = true;
         Object.entries(this.filterValues).forEach(([key, value]) => {
@@ -417,7 +291,7 @@ export default {
   },
   watch: {
     dataContent: {
-      handler(val) {
+      handler (val) {
         if (val) {
           console.log(val);
           if (val.companyID) {
@@ -429,26 +303,26 @@ export default {
       deep: true,
     },
   },
-  mounted() {
+  mounted () {
     this.getQuery();
   },
-  updated() {
+  updated () {
     this.$refs["table"]?.doLayout();
   },
   methods: {
-    load() {
+    load () {
       // console.log("分页");
       if (this.noMore || this.loading) {
         return;
       }
       this.getQuery();
     },
-    resetTable() {
+    resetTable () {
       this.page = 0;
       this.noMore = false;
       this.tableData = [];
     },
-    changeSelect(data) {
+    changeSelect (data) {
       if (this.tableForm[data] === "") {
         this.tableForm[data] = null;
       }
@@ -456,13 +330,13 @@ export default {
         this.tableForm[data];
       // console.log(this.tableForm)
     },
-    inputChangeHandler(data) {
+    inputChangeHandler (data) {
       if (this.tableForm[data] === "") {
         this.tableForm[data] = null;
       }
     },
     //获取表格数据
-    async getQuery() {
+    async getQuery () {
       try {
         this.loading = true;
         const { code, returnData } = await Query({
@@ -501,7 +375,7 @@ export default {
       }
     },
     //表格-增/删/改
-    async generalDataReception(data) {
+    async generalDataReception (data) {
       try {
         data = {
           ...data,
@@ -535,17 +409,17 @@ export default {
       }
     },
     // 表格勾选
-    toggleRowSelection(row, isSelected) {
+    toggleRowSelection (row, isSelected) {
       this.$refs["table"].toggleRowSelection(row, isSelected);
     },
     // 表格初始勾选
-    selectTableRows(tableData, selectFlagName) {
+    selectTableRows (tableData, selectFlagName) {
       tableData.forEach((row) => {
         this.$refs["table"].toggleRowSelection(row, !!row[selectFlagName]);
       });
     },
     //初始化表格
-    initTableData() {
+    initTableData () {
       this.tableColsCopy = this.tableCols.filter((item) => item.needShow);
       // console.log(this.tableColsCopy);
       // debugger;
@@ -574,7 +448,7 @@ export default {
       // this.getSelectDataAll(reqUts)
     },
     //获取所有获取弹框-下拉数据-请求状态
-    getSelectDataAll(reqUts) {
+    getSelectDataAll (reqUts) {
       Promise.all(reqUts)
         .then((res) => {
           this.proAll = true;
@@ -584,7 +458,7 @@ export default {
         });
     },
     //获取弹框-下拉数据
-    async getSelectData(id) {
+    async getSelectData (id) {
       const { code, returnData } = await Query({
         id,
         dataContent: [],
@@ -596,7 +470,7 @@ export default {
       }
     },
     //重组table-显示名称
-    setTable() {
+    setTable () {
       this.tableArrs.forEach((item) => {
         this.tableOptions[item].forEach((p) => {
           this.tableDataCopy.forEach((msg) => {
@@ -615,7 +489,7 @@ export default {
       this.tableData = this.tableDataCopy;
     },
     //分组
-    tableGroup(tableData) {
+    tableGroup (tableData) {
       const spanArr = [];
       let pos = 0;
       let ifYj = this.tableGroups[0];
@@ -635,14 +509,14 @@ export default {
       this.spanArr = spanArr;
       this.pos = pos;
     },
-    popoverShowHandler(prop) {
+    popoverShowHandler (prop) {
       this.colShowFilter = prop;
     },
-    popoverHideHandler() {
+    popoverHideHandler () {
       this.colShowFilter = "";
     },
     //分组
-    tableSpanMethod({ row, column, rowIndex, columnIndex }) {
+    tableSpanMethod ({ row, column, rowIndex, columnIndex }) {
       if (this.tableGroups.includes(column["property"])) {
         const _row = this.spanArr[rowIndex];
         const _col = _row > 0 ? 1 : 0;
@@ -653,7 +527,7 @@ export default {
       }
     },
     //合计
-    getSummaries(param) {
+    getSummaries (param) {
       const { columns, data } = param;
       const sums = [];
       columns.forEach((column, index) => {
@@ -677,15 +551,15 @@ export default {
       return sums;
     },
     //弹框-确定
-    handleOk() {
+    handleOk () {
       this.submitClickHandler();
     },
     //滚动
-    tableLoad() {
+    tableLoad () {
       console.log("d");
     },
     //表格-新增
-    handleAdd() {
+    handleAdd () {
       // this.flag = true;
       //   this.tableType = "add";
       //   this.tableTitle = "新增";
@@ -721,7 +595,7 @@ export default {
       // console.log(this.tableOptions);
     },
     //表格-编辑
-    async handleEdit(row) {
+    async handleEdit (row) {
       if (this.isDialog) {
         if (this.editId) {
           let data = await this.queryOriginRow(
@@ -761,7 +635,7 @@ export default {
         this.$emit("handleEdit", row);
       }
     },
-    async queryOriginRow(editId, queryTemplateColumnSetID) {
+    async queryOriginRow (editId, queryTemplateColumnSetID) {
       try {
         const { code, returnData } = await Query({
           id: editId,
@@ -777,11 +651,11 @@ export default {
       }
     },
     //表格-跳转
-    handleHerf(row) {
+    handleHerf (row) {
       alert("跳转");
     },
     // 新增/编辑-确认
-    submitClickHandler() {
+    submitClickHandler () {
       this.$refs["ruleForm"].validate((valid) => {
         if (valid) {
           if (this.tableType == "add") {
@@ -796,19 +670,19 @@ export default {
       });
     },
     //表格-删除
-    handleRemove(row) {
+    handleRemove (row) {
       this.rmFlag = true;
       // this.rmTitle = row.className || row.username || row.serviceName || row.queryTemplateName;
       this.rmTitle = row[this.rowTitle];
       this.tableObj = row;
     },
     //表格-删除-确认
-    tableRemove() {
+    tableRemove () {
       this.tableObj.event = 3;
       this.generalDataReception(this.tableObj);
     },
     // 表格-跳转列设置页
-    handleColumnSet(row) {
+    handleColumnSet (row) {
       this.$router.push({
         path: "/systemSettings/queryTemplateChild",
         query: {
@@ -817,7 +691,7 @@ export default {
       });
     },
     // 表格-跳转数据项设置页
-    handleItemSet(row) {
+    handleItemSet (row) {
       this.$router.push({
         path: "/systemSettings/datastructureChild",
         query: {
@@ -826,7 +700,7 @@ export default {
       });
     },
     // 表格-跳转航站设置页
-    handlelodSet(row) {
+    handlelodSet (row) {
       this.$router.push({
         path: "/BasicsData/airportInfoChild",
         query: {
@@ -835,7 +709,7 @@ export default {
       });
     },
     // 表格-节点置页
-    handlenodeSet(row) {
+    handlenodeSet (row) {
       this.$router.push({
         path: "/BasicsData/deployNodeChild",
         query: {
@@ -844,7 +718,7 @@ export default {
       });
     },
     // 表格-选中行
-    selectHandler(selection, row) {
+    selectHandler (selection, row) {
       this.$emit("selection-change", selection, row);
     },
   },
@@ -854,8 +728,8 @@ export default {
 <style lang="scss" scoped>
 .data-table {
   width: 100%;
-  background-color: #fff;
-  padding: 20px;
+  // background-color: #fff;
+  // padding: 20px;
   ::v-deep .table {
     width: 100%;
     .cell {
@@ -981,6 +855,7 @@ export default {
     }
   }
   .data-table-btn {
+    line-height: 32px;
     margin-bottom: 20px;
   }
 }

src/styles/index.scss

@@ -586,3 +586,7 @@ li {
 .el-table .el-table__body-wrapper::-webkit-scrollbar {
   height: 8px;
 }
+
+input[type='number'] {
+  line-height: 1 !important;
+}

src/views/systemSettings/views/queryTemplate/queryTemplateadd.vue

@@ -247,7 +247,7 @@ export default {
           &::-webkit-inner-spin-button {
             -webkit-appearance: none !important;
           }
-          &[type='‘number’'] {
+          &[type='number'] {
             -moz-appearance: textfield !important;
           }
         }

src/views/systemSettings/views/queryTemplate/queryTemplateedit.vue

@@ -266,7 +266,7 @@ export default {
           &::-webkit-inner-spin-button {
             -webkit-appearance: none !important;
           }
-          &[type='‘number’'] {
+          &[type='number'] {
             -moz-appearance: textfield !important;
           }
         }

src/views/systemSettings/views/serviceManagement/serviceEdit.vue

@@ -1,6 +1,6 @@
 <!--
  * @Date: 2022-03-24 09:55:13
- * @LastEditTime: 2022-06-13 15:22:49
+ * @LastEditTime: 2022-06-30 16:35:44
  * @LastEditors: your name
  * @Description: 服务管理-编辑服务
  * have a nice day!
@@ -567,7 +567,7 @@ export default {
           &::-webkit-inner-spin-button {
             -webkit-appearance: none !important;
           }
-          &[type='‘number’'] {
+          &[type='number'] {
             -moz-appearance: textfield !important;
           }
         }

src/views/systemSettings/views/serviceManagement/serviceHome copy.vue

@@ -0,0 +1,363 @@
+<!--
+ * @Date: 2022-04-12 17:49:47
+ * @LastEditTime: 2022-06-13 15:22:45
+ * @LastEditors: your name
+ * @Description: 服务管理-首页
+ * have a nice day!
+-->
+
+<template>
+  <div class="service-home">
+    <div class="wrap">
+      <DataTable ref="serviceTable" data-id="2" :rows="12" width="800px" label-width="110px" :min-height="70" :is-dialog="false" @handleAdd="showCreateDialog" @handleEdit="btnEditClickHandler" />
+      <!--新增弹框-->
+      <Dialog :flag="createDialogVisible" width="878px">
+        <div class="dialog-create">
+          <div class="title">新增服务</div>
+          <main class="content">
+            <el-form ref="serviceForm" class="service-form" :model="serviceForm" :rules="serviceFormRules" label-position="right" label-width="82px" size="mini">
+              <el-row :gutter="36" type="flex">
+                <el-col :span="24">
+                  <el-form-item label="服务名称" prop="serviceName">
+                    <el-input v-model="serviceForm.serviceName" placeholder="请输入服务名称" clearable />
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item label="类型" prop="serviceType">
+                    <el-select v-model="serviceForm.serviceType" clearable>
+                      <el-option :value="1" label="管理前端" />
+                      <el-option :value="2" label="管理后端" />
+                      <el-option :value="3" label="业务前端" />
+                      <el-option :value="4" label="业务后端" />
+                    </el-select>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item label="是否异步" label-width="114px">
+                    <el-radio-group v-model="serviceForm.isAsynchronous">
+                      <el-radio :label="0">是</el-radio>
+                      <el-radio :label="1">否</el-radio>
+                    </el-radio-group>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item label="数据来源" prop="dataSourceID">
+                    <el-select v-model="serviceForm.dataSourceID" clearable>
+                      <el-option v-for="dataSource in dataSourceList" :key="dataSource.dataSourceID" :value="dataSource.dataSourceID" :label="dataSource.dataSourceName" />
+                    </el-select>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item label="生命周期ID键名" prop="lifeCycleCol" label-width="114px">
+                    <el-input v-model="serviceForm.lifeCycleCol" placeholder="请输入生命周期ID键名" clearable />
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item label="采集线程" prop="threads">
+                    <el-input v-model="serviceForm.threads" type="number" placeholder="请输入采集线程数" clearable />
+                  </el-form-item>
+                </el-col>
+                <el-col :span="12">
+                  <el-form-item label="数据类型" prop="datatype">
+                    <el-select v-model="serviceForm.datatype" clearable>
+                      <el-option label="JSON" :value="1" />
+                      <el-option label="XML" :value="2" />
+                      <el-option label="自定义" :value="3" />
+                    </el-select>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="24">
+                  <el-form-item label="取值规则" prop="computingMethod">
+                    <el-input v-model="serviceForm.computingMethod" placeholder="请输入取值规则" type="textarea" :autosize="{ minRows: 4, maxRows: 4 }" resize="none" clearable />
+                  </el-form-item>
+                </el-col>
+                <el-col :span="24">
+                  <el-form-item label="检测规则" prop="validationExpression">
+                    <el-input v-model="serviceForm.validationExpression" placeholder="请输入检测规则" type="textarea" :autosize="{ minRows: 4, maxRows: 4 }" resize="none" clearable />
+                  </el-form-item>
+                </el-col>
+                <el-col :span="8">
+                  <el-form-item label="启动时间" prop="startTime">
+                    <el-date-picker v-model="serviceForm.startTime" type="datetime" format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm" placeholder="请选择启动时间" />
+                  </el-form-item>
+                </el-col>
+                <el-col :span="8">
+                  <el-form-item label="停止时间" prop="stopTime">
+                    <el-date-picker v-model="serviceForm.stopTime" type="datetime" format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm" placeholder="请选择停止时间" />
+                  </el-form-item>
+                </el-col>
+                <el-col :span="8">
+                  <el-form-item label="失败重试次数" prop="retryCount" label-width="100px">
+                    <el-input v-model="serviceForm.retryCount" type="number" placeholder="请输入重试次数" clearable />
+                  </el-form-item>
+                </el-col>
+                <el-col :span="8">
+                  <el-form-item label="循环次数" prop="loopCount">
+                    <el-input v-model="serviceForm.loopCount" type="number" placeholder="请输入循环次数" clearable />
+                  </el-form-item>
+                </el-col>
+                <el-col :span="8">
+                  <el-form-item label="循环频率" prop="frequencyCount">
+                    <el-input v-model="serviceForm.frequencyCount" type="number" placeholder="请输入循环频率" clearable />
+                  </el-form-item>
+                </el-col>
+                <el-col :span="8">
+                  <el-form-item label="循环频率单位" prop="frequencyUnit" label-width="100px">
+                    <el-select v-model="serviceForm.frequencyUnit" clearable>
+                      <el-option label="天" :value="24 * 60 * 60 * 1000" />
+                      <el-option label="小时" :value="60 * 60 * 1000" />
+                      <el-option label="分钟" :value="60 * 1000" />
+                      <el-option label="秒" :value="1000" />
+                      <el-option label="毫秒" :value="1" />
+                    </el-select>
+                  </el-form-item>
+                </el-col>
+                <el-col :span="24">
+                  <el-form-item label="服务描述" prop="serviceDescribe">
+                    <el-input v-model="serviceForm.serviceDescribe" placeholder="请输入描述" type="textarea" :autosize="{ minRows: 4, maxRows: 4 }" resize="none" clearable />
+                  </el-form-item>
+                </el-col>
+              </el-row>
+            </el-form>
+          </main>
+          <div class="foot">
+            <el-button size="medium" type="primary" class="r25 r26" @click="createSubmitHandler">提交</el-button>
+            <el-button size="medium" class="r26" @click="hideCreateDialog">取消</el-button>
+          </div>
+        </div>
+      </Dialog>
+    </div>
+  </div>
+</template>
+
+<script>
+import Dialog from '@/layout/components/Dialog/index.vue'
+import { GeneralDataReception, Query } from '@/api/dataIntegration'
+// import { regular } from '@/utils/validate'
+import DataTable from '@/components/Table'
+export default {
+  name: 'ProtocolHome',
+  components: {
+    Dialog,
+    DataTable
+  },
+  data () {
+    return {
+      serviceList: [],
+      createDialogVisible: false,
+      serviceForm: {
+        serviceName: '',
+        serviceType: null,
+        dataSourceID: null,
+        lifeCycleCol: '',
+        isAsynchronous: 1,
+        threads: null,
+        datatype: null,
+        computingMethod: '',
+        validationExpression: '',
+        startTime: null,
+        stopTime: null,
+        retryCount: null,
+        loopCount: null,
+        frequencyCount: null,
+        frequencyUnit: null,
+        serviceDescribe: ''
+      },
+      serviceFormRules: {
+        serviceName: [{ required: true, message: '请输入服务名称', trigger: ['change', 'blur'] }]
+      },
+      dataSourceList: [],
+      deleteDialogVisible: false,
+      delObj: {}
+    }
+  },
+  methods: {
+    // 新增-弹框
+    showCreateDialog () {
+      this.getDataSourceList()
+      this.createDialogVisible = true
+    },
+    // 新增-提交
+    createSubmitHandler () {
+      this.$refs['serviceForm'].validate(valid => {
+        if (valid) {
+          this.createService()
+        }
+      })
+    },
+    // 新增-关闭
+    hideCreateDialog () {
+      this.$refs['serviceForm'].resetFields()
+      this.createDialogVisible = false
+    },
+    // 编辑-跳转
+    btnEditClickHandler (item) {
+      this.$router.push({
+        path: '/systemSettings/serviceEdit',
+        query: { serviceID: item.serviceID }
+      })
+    },
+    getServiceList () {
+      this.$refs['serviceTable'].getQuery()
+    },
+    async getDataSourceList () {
+      const dataSourceList = await this.getSelectOption(21)
+      this.dataSourceList = dataSourceList.map(item => {
+        item[item.setlabel] = item.k
+        item[item.setvalue] = item.v
+        return item
+      })
+    },
+    async getSelectOption (id) {
+      try {
+        const { code, returnData, message } = await Query({
+          id,
+          dataContent: []
+        })
+        if (Number(code) === 0) {
+          return returnData.listValues
+        } else {
+          this.$message.error(message ?? '失败')
+          return []
+        }
+      } catch (error) {
+        console.log('错误', error)
+      }
+    },
+    async createService () {
+      try {
+        this.serviceForm['event'] = 1
+        const res = await GeneralDataReception({
+          serviceId: 3,
+          dataContent: JSON.stringify(this.serviceForm)
+        })
+        if (Number(res.code) === 0) {
+          this.$message.success(res.message ?? '成功')
+          this.hideCreateDialog()
+          this.getServiceList()
+        } else {
+          this.$message.error(res.message ?? '失败')
+        }
+      } catch (error) {
+        console.log('错误', error)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.service-home {
+  .wrap {
+    padding: 16px 0;
+    .service-header {
+      line-height: 32px;
+      font-size: 14px;
+      .btn-white {
+        border: 1px solid #9ebbf7;
+        background: #f5f7fa;
+        -webkit-box-shadow: 0px 6px 7px 0px rgb(0 0 0 / 6%);
+        box-shadow: 0px 6px 7px 0px rgb(0 0 0 / 6%);
+        border-radius: 4px;
+        font-family: Microsoft YaHei;
+        font-weight: bold;
+        color: #2d67e3;
+      }
+      margin-bottom: 30px;
+    }
+    .service-content {
+      .grid-content {
+        height: 120px;
+        background: #ffffff;
+        box-shadow: 0px 3px 3px 0px rgba(0, 0, 0, 0.1);
+        border-radius: 4px;
+        padding: 25px;
+        margin-bottom: 24px;
+        .title {
+          font-size: 16px;
+          font-family: Helvetica;
+          font-weight: bold;
+          color: #101116;
+          white-space: nowrap;
+          max-width: 80%;
+          text-overflow: ellipsis;
+          overflow: hidden;
+          .name {
+            white-space: nowrap;
+            max-width: 80%;
+            text-overflow: ellipsis;
+            overflow: hidden;
+          }
+          .loger {
+            width: 14px;
+            height: 14px;
+            margin-left: 24px;
+            background: url("../../../../assets/status/ic_edit_default.png")
+              no-repeat;
+            background-size: 100% 100%;
+            cursor: pointer;
+            position: relative;
+            top: 2px;
+          }
+          .loger:hover {
+            background: url("../../../../assets/status/ic_edit_hovar.png")
+              no-repeat;
+            background-size: 100% 100%;
+          }
+        }
+        .icon {
+          cursor: pointer;
+          font-size: 16px;
+          color: #606266;
+        }
+      }
+    }
+    .dialog-create {
+      ::v-deep .service-form {
+        display: flex;
+        flex-wrap: wrap;
+        > .el-row {
+          flex-wrap: wrap;
+          > .el-col > .el-form-item {
+            margin-bottom: 20px;
+            .el-form-item__label {
+              padding-right: 16px;
+            }
+            .el-input,
+            .el-select {
+              width: 100%;
+            }
+          }
+        }
+        label,
+        span,
+        button,
+        input,
+        optgroup,
+        select,
+        textarea {
+          font-family: Helvetica, Microsoft YaHei;
+          font-size: 14px;
+          font-weight: 400;
+        }
+        label {
+          color: #303133;
+        }
+        input {
+          color: #101116;
+          &::-webkit-outer-spin-button,
+          &::-webkit-inner-spin-button {
+            -webkit-appearance: none !important;
+          }
+          &[type="‘number’"] {
+            -moz-appearance: textfield !important;
+          }
+        }
+        .el-radio {
+          font-weight: 400;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/systemSettings/views/serviceManagement/serviceHome.vue

@@ -1,6 +1,6 @@
 <!--
  * @Date: 2022-04-12 17:49:47
- * @LastEditTime: 2022-06-13 15:22:45
+ * @LastEditTime: 2022-06-30 16:36:09
  * @LastEditors: your name
  * @Description: 服务管理-首页
  * have a nice day!
@@ -9,83 +9,37 @@
 <template>
   <div class="service-home">
     <div class="wrap">
-      <DataTable
-        ref="serviceTable"
-        data-id="2"
-        :rows="12"
-        width="800px"
-        label-width="110px"
-        :min-height="70"
-        :is-dialog="false"
-        @handleAdd="showCreateDialog"
-        @handleEdit="btnEditClickHandler"
-      />
+      <DataTable ref="serviceTable" data-id="2" :rows="12" width="800px" label-width="110px" :min-height="70" :isStatus="true" :is-dialog="false" @handleAdd="showCreateDialog" @handleEdit="btnEditClickHandler">
+        <div class="status flex-wrap">
+          <div class="manageTitle">服务管理</div>
+          <div class="status0"><span class="icon"></span>启动</div>
+          <div class="status1"><span class="icon"></span>停止</div>
+        </div>
+      </DataTable>
       <!--新增弹框-->
-      <Dialog
-        :flag="createDialogVisible"
-        width="878px"
-      >
+      <Dialog :flag="createDialogVisible" width="878px">
         <div class="dialog-create">
           <div class="title">新增服务</div>
           <main class="content">
-            <el-form
-              ref="serviceForm"
-              class="service-form"
-              :model="serviceForm"
-              :rules="serviceFormRules"
-              label-position="right"
-              label-width="82px"
-              size="mini"
-            >
-              <el-row
-                :gutter="36"
-                type="flex"
-              >
+            <el-form ref="serviceForm" class="service-form" :model="serviceForm" :rules="serviceFormRules" label-position="right" label-width="82px" size="mini">
+              <el-row :gutter="36" type="flex">
                 <el-col :span="24">
-                  <el-form-item
-                    label="服务名称"
-                    prop="serviceName"
-                  >
-                    <el-input
-                      v-model="serviceForm.serviceName"
-                      placeholder="请输入服务名称"
-                      clearable
-                    />
+                  <el-form-item label="服务名称" prop="serviceName">
+                    <el-input v-model="serviceForm.serviceName" placeholder="请输入服务名称" clearable />
                   </el-form-item>
                 </el-col>
                 <el-col :span="12">
-                  <el-form-item
-                    label="类型"
-                    prop="serviceType"
-                  >
-                    <el-select
-                      v-model="serviceForm.serviceType"
-                      clearable
-                    >
-                      <el-option
-                        :value="1"
-                        label="管理前端"
-                      />
-                      <el-option
-                        :value="2"
-                        label="管理后端"
-                      />
-                      <el-option
-                        :value="3"
-                        label="业务前端"
-                      />
-                      <el-option
-                        :value="4"
-                        label="业务后端"
-                      />
+                  <el-form-item label="类型" prop="serviceType">
+                    <el-select v-model="serviceForm.serviceType" clearable>
+                      <el-option :value="1" label="管理前端" />
+                      <el-option :value="2" label="管理后端" />
+                      <el-option :value="3" label="业务前端" />
+                      <el-option :value="4" label="业务后端" />
                     </el-select>
                   </el-form-item>
                 </el-col>
                 <el-col :span="12">
-                  <el-form-item
-                    label="是否异步"
-                    label-width="114px"
-                  >
+                  <el-form-item label="是否异步" label-width="114px">
                     <el-radio-group v-model="serviceForm.isAsynchronous">
                       <el-radio :label="0">是</el-radio>
                       <el-radio :label="1">否</el-radio>
@@ -93,234 +47,88 @@
                   </el-form-item>
                 </el-col>
                 <el-col :span="12">
-                  <el-form-item
-                    label="数据来源"
-                    prop="dataSourceID"
-                  >
-                    <el-select
-                      v-model="serviceForm.dataSourceID"
-                      clearable
-                    >
-                      <el-option
-                        v-for="dataSource in dataSourceList"
-                        :key="dataSource.dataSourceID"
-                        :value="dataSource.dataSourceID"
-                        :label="dataSource.dataSourceName"
-                      />
+                  <el-form-item label="数据来源" prop="dataSourceID">
+                    <el-select v-model="serviceForm.dataSourceID" clearable>
+                      <el-option v-for="dataSource in dataSourceList" :key="dataSource.dataSourceID" :value="dataSource.dataSourceID" :label="dataSource.dataSourceName" />
                     </el-select>
                   </el-form-item>
                 </el-col>
                 <el-col :span="12">
-                  <el-form-item
-                    label="生命周期ID键名"
-                    prop="lifeCycleCol"
-                    label-width="114px"
-                  >
-                    <el-input
-                      v-model="serviceForm.lifeCycleCol"
-                      placeholder="请输入生命周期ID键名"
-                      clearable
-                    />
+                  <el-form-item label="生命周期ID键名" prop="lifeCycleCol" label-width="114px">
+                    <el-input v-model="serviceForm.lifeCycleCol" placeholder="请输入生命周期ID键名" clearable />
                   </el-form-item>
                 </el-col>
                 <el-col :span="12">
-                  <el-form-item
-                    label="采集线程"
-                    prop="threads"
-                  >
-                    <el-input
-                      v-model="serviceForm.threads"
-                      type="number"
-                      placeholder="请输入采集线程数"
-                      clearable
-                    />
+                  <el-form-item label="采集线程" prop="threads">
+                    <el-input v-model="serviceForm.threads" type="number" placeholder="请输入采集线程数" clearable />
                   </el-form-item>
                 </el-col>
                 <el-col :span="12">
-                  <el-form-item
-                    label="数据类型"
-                    prop="datatype"
-                  >
-                    <el-select
-                      v-model="serviceForm.datatype"
-                      clearable
-                    >
-                      <el-option
-                        label="JSON"
-                        :value="1"
-                      />
-                      <el-option
-                        label="XML"
-                        :value="2"
-                      />
-                      <el-option
-                        label="自定义"
-                        :value="3"
-                      />
+                  <el-form-item label="数据类型" prop="datatype" label-width="114px">
+                    <el-select v-model="serviceForm.datatype" clearable>
+                      <el-option label="JSON" :value="1" />
+                      <el-option label="XML" :value="2" />
+                      <el-option label="自定义" :value="3" />
                     </el-select>
                   </el-form-item>
                 </el-col>
                 <el-col :span="24">
-                  <el-form-item
-                    label="取值规则"
-                    prop="computingMethod"
-                  >
-                    <el-input
-                      v-model="serviceForm.computingMethod"
-                      placeholder="请输入取值规则"
-                      type="textarea"
-                      :autosize="{ minRows: 4, maxRows: 4 }"
-                      resize="none"
-                      clearable
-                    />
+                  <el-form-item label="取值规则" prop="computingMethod">
+                    <el-input v-model="serviceForm.computingMethod" placeholder="请输入取值规则" type="textarea" :autosize="{ minRows: 4, maxRows: 4 }" resize="none" clearable />
                   </el-form-item>
                 </el-col>
                 <el-col :span="24">
-                  <el-form-item
-                    label="检测规则"
-                    prop="validationExpression"
-                  >
-                    <el-input
-                      v-model="serviceForm.validationExpression"
-                      placeholder="请输入检测规则"
-                      type="textarea"
-                      :autosize="{ minRows: 4, maxRows: 4 }"
-                      resize="none"
-                      clearable
-                    />
+                  <el-form-item label="检测规则" prop="validationExpression">
+                    <el-input v-model="serviceForm.validationExpression" placeholder="请输入检测规则" type="textarea" :autosize="{ minRows: 4, maxRows: 4 }" resize="none" clearable />
                   </el-form-item>
                 </el-col>
                 <el-col :span="8">
-                  <el-form-item
-                    label="启动时间"
-                    prop="startTime"
-                  >
-                    <el-date-picker
-                      v-model="serviceForm.startTime"
-                      type="datetime"
-                      format="yyyy-MM-dd HH:mm"
-                      value-format="yyyy-MM-dd HH:mm"
-                      placeholder="请选择启动时间"
-                    />
+                  <el-form-item label="启动时间" prop="startTime">
+                    <el-date-picker v-model="serviceForm.startTime" type="datetime" format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm" placeholder="请选择启动时间" />
                   </el-form-item>
                 </el-col>
                 <el-col :span="8">
-                  <el-form-item
-                    label="停止时间"
-                    prop="stopTime"
-                  >
-                    <el-date-picker
-                      v-model="serviceForm.stopTime"
-                      type="datetime"
-                      format="yyyy-MM-dd HH:mm"
-                      value-format="yyyy-MM-dd HH:mm"
-                      placeholder="请选择停止时间"
-                    />
+                  <el-form-item label="停止时间" prop="stopTime">
+                    <el-date-picker v-model="serviceForm.stopTime" type="datetime" format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm" placeholder="请选择停止时间" />
                   </el-form-item>
                 </el-col>
                 <el-col :span="8">
-                  <el-form-item
-                    label="失败重试次数"
-                    prop="retryCount"
-                    label-width="100px"
-                  >
-                    <el-input
-                      v-model="serviceForm.retryCount"
-                      type="number"
-                      placeholder="请输入重试次数"
-                      clearable
-                    />
+                  <el-form-item label="失败重试次数" prop="retryCount" label-width="100px">
+                    <el-input v-model="serviceForm.retryCount" type="number" placeholder="请输入重试次数" clearable />
                   </el-form-item>
                 </el-col>
                 <el-col :span="8">
-                  <el-form-item
-                    label="循环次数"
-                    prop="loopCount"
-                  >
-                    <el-input
-                      v-model="serviceForm.loopCount"
-                      type="number"
-                      placeholder="请输入循环次数"
-                      clearable
-                    />
+                  <el-form-item label="循环次数" prop="loopCount">
+                    <el-input v-model="serviceForm.loopCount" type="number" placeholder="请输入循环次数" clearable />
                   </el-form-item>
                 </el-col>
                 <el-col :span="8">
-                  <el-form-item
-                    label="循环频率"
-                    prop="frequencyCount"
-                  >
-                    <el-input
-                      v-model="serviceForm.frequencyCount"
-                      type="number"
-                      placeholder="请输入循环频率"
-                      clearable
-                    />
+                  <el-form-item label="循环频率" prop="frequencyCount">
+                    <el-input v-model="serviceForm.frequencyCount" type="number" placeholder="请输入循环频率" clearable />
                   </el-form-item>
                 </el-col>
                 <el-col :span="8">
-                  <el-form-item
-                    label="循环频率单位"
-                    prop="frequencyUnit"
-                    label-width="100px"
-                  >
-                    <el-select
-                      v-model="serviceForm.frequencyUnit"
-                      clearable
-                    >
-                      <el-option
-                        label="天"
-                        :value="24 * 60 * 60 * 1000"
-                      />
-                      <el-option
-                        label="小时"
-                        :value="60 * 60 * 1000"
-                      />
-                      <el-option
-                        label="分钟"
-                        :value="60 * 1000"
-                      />
-                      <el-option
-                        label="秒"
-                        :value="1000"
-                      />
-                      <el-option
-                        label="毫秒"
-                        :value="1"
-                      />
+                  <el-form-item label="循环频率单位" prop="frequencyUnit" label-width="100px">
+                    <el-select v-model="serviceForm.frequencyUnit" clearable>
+                      <el-option label="天" :value="24 * 60 * 60 * 1000" />
+                      <el-option label="小时" :value="60 * 60 * 1000" />
+                      <el-option label="分钟" :value="60 * 1000" />
+                      <el-option label="秒" :value="1000" />
+                      <el-option label="毫秒" :value="1" />
                     </el-select>
                   </el-form-item>
                 </el-col>
                 <el-col :span="24">
-                  <el-form-item
-                    label="服务描述"
-                    prop="serviceDescribe"
-                  >
-                    <el-input
-                      v-model="serviceForm.serviceDescribe"
-                      placeholder="请输入描述"
-                      type="textarea"
-                      :autosize="{ minRows: 4, maxRows: 4 }"
-                      resize="none"
-                      clearable
-                    />
+                  <el-form-item label="服务描述" prop="serviceDescribe">
+                    <el-input v-model="serviceForm.serviceDescribe" placeholder="请输入描述" type="textarea" :autosize="{ minRows: 4, maxRows: 4 }" resize="none" clearable />
                   </el-form-item>
                 </el-col>
               </el-row>
             </el-form>
           </main>
           <div class="foot">
-            <el-button
-              size="medium"
-              type="primary"
-              class="r25 r26"
-              @click="createSubmitHandler"
-            >提交</el-button>
-            <el-button
-              size="medium"
-              class="r26"
-              @click="hideCreateDialog"
-            >取消</el-button>
+            <el-button size="medium" type="primary" class="r25 r26" @click="createSubmitHandler">提交</el-button>
+            <el-button size="medium" class="r26" @click="hideCreateDialog">取消</el-button>
           </div>
         </div>
       </Dialog>
@@ -339,7 +147,7 @@ export default {
     Dialog,
     DataTable
   },
-  data() {
+  data () {
     return {
       serviceList: [],
       createDialogVisible: false,
@@ -371,12 +179,12 @@ export default {
   },
   methods: {
     // 新增-弹框
-    showCreateDialog() {
+    showCreateDialog () {
       this.getDataSourceList()
       this.createDialogVisible = true
     },
     // 新增-提交
-    createSubmitHandler() {
+    createSubmitHandler () {
       this.$refs['serviceForm'].validate(valid => {
         if (valid) {
           this.createService()
@@ -384,21 +192,21 @@ export default {
       })
     },
     // 新增-关闭
-    hideCreateDialog() {
+    hideCreateDialog () {
       this.$refs['serviceForm'].resetFields()
       this.createDialogVisible = false
     },
     // 编辑-跳转
-    btnEditClickHandler(item) {
+    btnEditClickHandler (item) {
       this.$router.push({
         path: '/systemSettings/serviceEdit',
         query: { serviceID: item.serviceID }
       })
     },
-    getServiceList() {
+    getServiceList () {
       this.$refs['serviceTable'].getQuery()
     },
-    async getDataSourceList() {
+    async getDataSourceList () {
       const dataSourceList = await this.getSelectOption(21)
       this.dataSourceList = dataSourceList.map(item => {
         item[item.setlabel] = item.k
@@ -406,7 +214,7 @@ export default {
         return item
       })
     },
-    async getSelectOption(id) {
+    async getSelectOption (id) {
       try {
         const { code, returnData, message } = await Query({
           id,
@@ -422,7 +230,7 @@ export default {
         console.log('错误', error)
       }
     },
-    async createService() {
+    async createService () {
       try {
         this.serviceForm['event'] = 1
         const res = await GeneralDataReception({
@@ -490,14 +298,16 @@ export default {
             width: 14px;
             height: 14px;
             margin-left: 24px;
-            background: url('../../../../assets/status/ic_edit_default.png') no-repeat;
+            background: url("../../../../assets/status/ic_edit_default.png")
+              no-repeat;
             background-size: 100% 100%;
             cursor: pointer;
             position: relative;
             top: 2px;
           }
           .loger:hover {
-            background: url('../../../../assets/status/ic_edit_hovar.png') no-repeat;
+            background: url("../../../../assets/status/ic_edit_hovar.png")
+              no-repeat;
             background-size: 100% 100%;
           }
         }
@@ -523,6 +333,25 @@ export default {
             .el-select {
               width: 100%;
             }
+            .el-input__inner,
+            .el-textarea__inner {
+              padding-left: 8px;
+            }
+            .el-date-editor {
+              .el-input__prefix,
+              .el-input__suffix {
+                right: 5px;
+                left: unset;
+                font-size: 16px;
+                color: #101116;
+                .el-input__suffix-inner {
+                  font-size: 16px;
+                }
+              }
+              &.value-not-null:hover .el-input__prefix {
+                display: none;
+              }
+            }
           }
         }
         label,
@@ -544,13 +373,40 @@ export default {
           &::-webkit-outer-spin-button,
           &::-webkit-inner-spin-button {
             -webkit-appearance: none !important;
+
+            &[type="number"] {
+              -moz-appearance: textfield !important;
+            }
           }
-          &[type='‘number’'] {
-            -moz-appearance: textfield !important;
+          .el-radio {
+            font-weight: 400;
           }
         }
-        .el-radio {
-          font-weight: 400;
+      }
+    }
+    .status {
+      font-size: 14px;
+      .icon {
+        width: 14px;
+        height: 14px;
+        background: #2d67e3;
+        border-radius: 2px;
+        display: inline-block;
+        vertical-align: middle;
+        margin-right: 10px;
+        position: relative;
+        top: -2px;
+      }
+      .status0 {
+        margin-right: 28px;
+        position: relative;
+        top: 5px;
+      }
+      .status1 {
+        position: relative;
+        top: 5px;
+        .icon {
+          background-color: #afb4bf;
         }
       }
     }