计划样式初步修改

husq

2023-09-13 bae07cec6cfa99cadd98fb7eb0332cbde35a921e

计划样式初步修改

 src/App.vue

@@ -1,8 +1,8 @@
<template>
  <div class="demo-app">
    <a-config-provider :locale="zhCN">
    <!-- <a-config-provider :locale="zhCN"> -->
      <router-view />
    </a-config-provider>
    <!-- </a-config-provider> -->
  </div>
</template>


 src/components/task/CreatePlan.vue

@@ -5,17 +5,14 @@
    </div>
    <div class="content">
      <a-form ref="valueRef" layout="horizontal" :hideRequiredMark="true" :rules="rules" :model="planForm"
              labelAlign="left">
        <a-form-item label="计划名称" name="name" :labelCol="{span: 23}">
          <a-input style="background: black;" placeholder="请输入计划名称" v-model:value="planForm.name"/>
        labelAlign="left">
        <a-form-item label="计划名称" name="name" :labelCol="{ span: 23 }">
          <a-input style="background: black;" placeholder="请输入计划名称" v-model:value="planForm.name" />
        </a-form-item>

        <!-- 航线 -->
        <a-form-item label="执行航线" :wrapperCol="{offset: 12}" name="fileId">
          <router-link
              :to="{name: 'select-plan'}"
              @click="selectRoute"
          >
        <a-form-item label="执行航线" :wrapperCol="{ offset: 12 }" name="fileId">
          <router-link :to="{ name: 'select-plan' }" @click="selectRoute">
            选择航线
          </router-link>
        </a-form-item>
@@ -29,21 +26,25 @@
                </div>
              </a-tooltip>
              <div class="ml10">
                <UserOutlined/>
                <UserOutlined />
              </div>
              <a-tooltip :title="wayline.user_name">
                <div class="ml5 pr10"
                     style="width: 80px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;">
                  style="width: 80px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;">
                  {{ wayline.user_name }}
                </div>
              </a-tooltip>
            </div>
            <div class="ml10 mt5" style="color: hsla(0,0%,100%,0.65);">
              <span><RocketOutlined/></span>
              <span>
                <RocketOutlined />
              </span>
              <span class="ml5">{{
                  Object.keys(EDeviceType)[Object.values(EDeviceType).indexOf(wayline.drone_model_key)]
                }}</span>
              <span class="ml10"><CameraFilled style="border-top: 1px solid; padding-top: -3px;"/></span>
                Object.keys(EDeviceType)[Object.values(EDeviceType).indexOf(wayline.drone_model_key)]
              }}</span>
              <span class="ml10">
                <CameraFilled style="border-top: 1px solid; padding-top: -3px;" />
              </span>
              <span class="ml5" v-for="payload in wayline.payload_model_keys" :key="payload.id">
                {{ Object.keys(EDeviceType)[Object.values(EDeviceType).indexOf(payload)] }}
              </span>
@@ -55,11 +56,8 @@
        </a-form-item>

        <!-- 设备 -->
        <a-form-item label="执行设备" :wrapperCol="{offset: 12}" v-model:value="planForm.dockSn" name="dockSn">
          <router-link
              :to="{name: 'select-plan'}"
              @click="selectDevice"
          >选择设备
        <a-form-item label="执行设备" :wrapperCol="{ offset: 12 }" v-model:value="planForm.dockSn" name="dockSn">
          <router-link :to="{ name: 'select-plan' }" @click="selectDevice">选择设备
          </router-link>
        </a-form-item>
        <a-form-item v-if="planForm.dockSn" style="margin-top: -15px;">
@@ -72,19 +70,22 @@
              </a-tooltip>
            </div>
            <div class="ml10 mt5" style="color: hsla(0,0%,100%,0.65);">
              <span><RocketOutlined/></span>
              <span>
                <RocketOutlined />
              </span>
              <span class="ml5">{{ dock.children?.nickname ?? 'No drone' }}</span>
            </div>
          </div>
        </a-form-item>

        <!-- 任务策略 -->
        <a-form-item label="任务策略" name="taskType" class="plan-timer-form-item" :labelCol="{span: 23}" >
        <a-form-item label="任务策略" name="taskType" class="plan-timer-form-item" :labelCol="{ span: 23 }">
          <div style="white-space: nowrap;">
            <a-radio-group v-model:value="planForm.taskType" button-style="solid" @change="taskTypeChange">
            <a-radio-group class="group_radio" v-model:value="planForm.taskType" button-style="solid"
              @change="taskTypeChange">
              <a-radio-button v-for="type in TaskTypeOptions" :value="type.value" :key="type.value">{{
                  type.label
                }}
                type.label
              }}
              </a-radio-button>
            </a-radio-group>

@@ -94,131 +95,132 @@

        <!-- 单次定时- -->
        <a-form-item label="执行时间" v-if="planForm.taskType === TaskType.Timed" name="executeSingleTime"
                     :labelCol="{span: 23}">
          <a-date-picker
              v-model:value="planForm.executeSingleTime"
              format="YYYY-MM-DD HH:mm"
              valueFormat="YYYY-MM-DD HH:mm"
              show-time
              placeholder="请选择日期"
          />
          :labelCol="{ span: 23 }">
          <a-date-picker v-model:value="planForm.executeSingleTime" format="YYYY-MM-DD HH:mm"
            valueFormat="YYYY-MM-DD HH:mm" show-time placeholder="请选择日期" />
        </a-form-item>

        <!--重复定时-->
        <!--执行日期-->
        <a-form-item v-if="planForm.taskType === TaskType.RepeatTimed || planForm.taskType === TaskType.Continuous"
                     label="执行日期" name="repeatExecuteTimeArr" :labelCol="{span: 23}">
          label="执行日期" name="repeatExecuteTimeArr" :labelCol="{ span: 23 }">
          <a-range-picker v-model:value="planForm.repeatExecuteTimeArr" format="YYYY-MM-DD" valueFormat="YYYY-MM-DD"
                          :placeholder="['开始日期','结束日期']"/>
            :placeholder="['开始日期', '结束日期']" />
        </a-form-item>

        <!--执行时间-->
        <a-form-item v-if="planForm.taskType ===TaskType.RepeatTimed" label="执行时间" name="repeatTimeArr"
                     :labelCol="{span: 23}">
          <div v-for="(item ,index) in repeatTimeArr" :key="index">
            <a-time-picker style="background: black" v-model:value="item.value" placeholder="请选择时间"
                           format="HH:mm" valueFormat="HH:mm"/>
        <a-form-item v-if="planForm.taskType === TaskType.RepeatTimed" label="执行时间" name="repeatTimeArr"
          :labelCol="{ span: 23 }">
          <div v-for="(item, index) in repeatTimeArr" :key="index">
            <a-time-picker style="background: black" v-model:value="item.value" placeholder="请选择时间" format="HH:mm"
              valueFormat="HH:mm" />

            <a-button @click="addTime" type="default" shape="circle" :size="btnSize">
              <template #icon>
                <PlusCircleOutlined/>
                <PlusCircleOutlined />
              </template>
            </a-button>

            <a-button @click="deleteTime(item)" type="default" shape="circle" :size="btnSize">
              <template #icon>
                <MinusCircleOutlined/>
                <MinusCircleOutlined />
              </template>
            </a-button>
          </div>
        </a-form-item>
        <a-form-item v-if="planForm.taskType ===TaskType.Continuous" label="执行时间" name="repeatTimeArr"
                     :labelCol="{span: 23}">
          <div v-for="(item ,index) in repeatTimeArr" :key="index">
            <a-time-picker style="background: black" v-model:value="item.value[0]" placeholder="请选择时间"
                           format="HH:mm" valueFormat="HH:mm"/>
        <a-form-item v-if="planForm.taskType === TaskType.Continuous" label="执行时间" name="repeatTimeArr"
          :labelCol="{ span: 23 }">
          <div v-for="(item, index) in repeatTimeArr" :key="index">
            <a-time-picker style="background: black" v-model:value="item.value[0]" placeholder="请选择时间" format="HH:mm"
              valueFormat="HH:mm" />
            <div style="color: white">-</div>
            <a-time-picker style="background: black" v-model:value="item.value[1]" placeholder="请选择时间"
                           format="HH:mm"  valueFormat="HH:mm"/>
            <a-time-picker style="background: black" v-model:value="item.value[1]" placeholder="请选择时间" format="HH:mm"
              valueFormat="HH:mm" />

            <a-button @click="addTime" type="default" shape="circle" :size="btnSize">
              <template #icon>
                <PlusCircleOutlined/>
                <PlusCircleOutlined />
              </template>
            </a-button>

            <a-button @click="deleteTime(item)" type="default" shape="circle" :size="btnSize">
              <template #icon>
                <MinusCircleOutlined/>
                <MinusCircleOutlined />
              </template>
            </a-button>
          </div>
        </a-form-item>

        <!-- 任务开始执行的电量 -->
        <a-form-item v-if="planForm.taskType === TaskType.Continuous" label="任务开始执行的电量" :labelCol="{span: 23}"
                     name="startPower">
          <a-input style="background: black;" placeholder="请输入计划名称" v-model:value="planForm.startPower"/>
        <a-form-item v-if="planForm.taskType === TaskType.Continuous" label="任务开始执行的电量" :labelCol="{ span: 23 }"
          name="startPower">
          <a-input style="background: black;" placeholder="请输入计划名称" v-model:value="planForm.startPower" />

        </a-form-item>

        <!--重复频率-->
        <a-form-item v-if="planForm.taskType === TaskType.RepeatTimed || planForm.taskType === TaskType.Continuous"
                     label="重复频率" name="frequencyValue" :labelCol="{span: 23}">
          label="重复频率" name="frequencyValue" :labelCol="{ span: 23 }">
          <div>
            <div style="color: white">每</div>
            <a-input style="background-color: black;" placeholder="请输入计划名称"
                     v-model:value="planForm.frequencyValue"/>
            <a-input style="background-color: black;" placeholder="请输入计划名称" v-model:value="planForm.frequencyValue" />
            <a-select v-model:value="planForm.frequencyType" style="width: 200px"
                      :options="FrequencyTypeOptions"></a-select>
              :options="FrequencyTypeOptions"></a-select>
          </div>
        </a-form-item>

        <!--重复规则-->
        <a-form-item v-if="planForm.taskType === TaskType.RepeatTimed || planForm.taskType === TaskType.Continuous"
                     label="重复规则" name="repeatRuleType" :labelCol="{span: 23}">
          label="重复规则" name="repeatRuleType" :labelCol="{ span: 23 }">
          <div>
            <a-select v-model:value="planForm.repeatRuleType" style="background-color:black;width: 200px"
                      @change="repeatRuleTypeChange" :options="RepeatRuleTypeOptions"></a-select>
              @change="repeatRuleTypeChange" :options="RepeatRuleTypeOptions"></a-select>
          </div>

          <div v-if="planForm.repeatRuleType === RepeatRuleType.day">
            <a-button class="btn" :class="[item.checked?'btn-selected':'btn-unselected'] "
                      v-for="(item,index) in dayNumArr" :key="index" size="small" @click="selectBtn(item)">
            <a-button class="btn" :class="[item.checked ? 'btn-selected' : 'btn-unselected']"
              v-for="(item, index) in dayNumArr" :key="index" size="small" @click="selectBtn(item)">
              {{ item.value }}
            </a-button>
          </div>

          <div v-if="planForm.repeatRuleType===RepeatRuleType.week">
          <div v-if="planForm.repeatRuleType === RepeatRuleType.week">
            <a-select v-model:value="planForm.repeatRuleValueWeek[0]" style="width: 200px"
                      :options="WhichWeekOptions"></a-select>
              :options="WhichWeekOptions"></a-select>
            <a-select v-model:value="planForm.repeatRuleValueWeek[1]" style="width: 200px"
                      :options="WhichDayOptions"></a-select>
              :options="WhichDayOptions"></a-select>
          </div>

        </a-form-item>

        <!-- 相对机场返航高度 -->
        <a-form-item label="相对机场返航高度（ALT）" :labelCol="{span: 23}" name="rthAltitude">
        <a-form-item label="相对机场返航高度（ALT）" :labelCol="{ span: 23 }" name="rthAltitude">
          <div class="form-alt">
            <a-button class="alt-btn" type="primary" size="small" :disabled="calculateDisabled('-',100)" @click="calculate('-',100)">-100</a-button>
            <a-button class="alt-btn" type="primary" size="small" :disabled="calculateDisabled('-',10)" @click="calculate('-',10)">-10</a-button>
            <a-button class="alt-btn" type="primary" size="small" :disabled="calculateDisabled('-',1)" @click="calculate('-',1)">-1</a-button>
            <a-button class="alt-btn" type="primary" size="small" :disabled="calculateDisabled('-', 100)"
              @click="calculate('-', 100)">-100</a-button>
            <a-button class="alt-btn" type="primary" size="small" :disabled="calculateDisabled('-', 10)"
              @click="calculate('-', 10)">-10</a-button>
            <a-button class="alt-btn" type="primary" size="small" :disabled="calculateDisabled('-', 1)"
              @click="calculate('-', 1)">-1</a-button>

            <a-input class="alt-input" v-model:value="planForm.rthAltitude" :min="20" :max="1500"  required/>
            <a-input class="alt-input" v-model:value="planForm.rthAltitude" :min="20" :max="1500" required />

            <a-button class="alt-btn" type="primary" size="small" :disabled="calculateDisabled('+',1)" @click="calculate('+',1)">+1</a-button>
            <a-button class="alt-btn" type="primary" size="small" :disabled="calculateDisabled('+',10)" @click="calculate('+',10)">+10</a-button>
            <a-button class="alt-btn" type="primary" size="small" :disabled="calculateDisabled('+',100)" @click="calculate('+',100)"> +100</a-button>
            <a-button class="alt-btn" type="primary" size="small" :disabled="calculateDisabled('+', 1)"
              @click="calculate('+', 1)">+1</a-button>
            <a-button class="alt-btn" type="primary" size="small" :disabled="calculateDisabled('+', 10)"
              @click="calculate('+', 10)">+10</a-button>
            <a-button class="alt-btn" type="primary" size="small" :disabled="calculateDisabled('+', 100)"
              @click="calculate('+', 100)"> +100</a-button>
          </div>

        </a-form-item>

        <!-- Lost Action -->
        <a-form-item label="航线飞行中失联" :labelCol="{span: 23}" name="outOfControl">
        <a-form-item label="航线飞行中失联" :labelCol="{ span: 23 }" name="outOfControl">
          <div class="form-outOfControl" style="white-space: nowrap;">
            <a-radio-group v-model:value="planForm.outOfControl" button-style="solid">
              <a-radio-button v-for="action in OutOfControlActionOptions" :value="action.value" :key="action.value">
              <a-radio-button v-for="(action, acIndex) in  OutOfControlActionOptions " :value="action.value"
                :key="action.value" :style="{ marginRight: ( acIndex === 0 ? '10px' : '0px' ) }">
                {{ action.label }}
              </a-radio-button>
            </a-radio-group>
@@ -226,14 +228,14 @@
        </a-form-item>

        <!--完成动作-->
        <a-form-item label="完成动作" :labelCol="{span: 23}" name="finishAction">
        <a-form-item label="完成动作" :labelCol="{ span: 23 }" name="finishAction">
          <a-select disabled v-model:value="planForm.finishAction" style="width: 200px"
                    :options="FinishActionOptions"></a-select>
            :options="FinishActionOptions"></a-select>
        </a-form-item>

        <!--断点续飞-->
        <a-form-item label="自动断点续飞" :labelCol="{span: 20}" name="breakContinue">
          <a-switch v-model:checked="planForm.breakContinue" :checkedValue="1" :unCheckedValue="2"/>
        <a-form-item label="自动断点续飞" :labelCol="{ span: 20 }" name="breakContinue">
          <a-switch v-model:checked="planForm.breakContinue" :checkedValue="1" :unCheckedValue="2" />
        </a-form-item>

        <!--提交，取消按钮-->
@@ -249,13 +251,13 @@
    </div>
  </div>
  <div v-if="drawerVisible"
       style="position: absolute; left: 335px; width: 280px; height: 100vh; float: right; top: 0; z-index: 1000; color: white; background: #282828;">
    style="position: absolute; left: 370px; width: 280px; height: 100vh; float: right; top: 0; z-index: 1000; color: white; background: #282828;">
    <div>
      <router-view :name="routeName"/>
      <router-view :name="routeName" />
    </div>
    <div style="position: absolute; top: 15px; right: 10px;">
      <a style="color: white;" @click="closePanel">
        <CloseOutlined/>
        <CloseOutlined />
      </a>
    </div>
  </div>
@@ -416,7 +418,7 @@

// 构建表单
function buildForm () {
  const form :any = {}
  const form: any = {}

  // 公共字段
  form.name = planForm.name
@@ -564,8 +566,13 @@
      margin: 10px;
    }

    form label, input, .ant-input, .ant-calendar-range-picker-separator,
    .ant-input:hover, .ant-time-picker .anticon, .ant-calendar-picker .anticon {
    form label,
    input,
    .ant-input,
    .ant-calendar-range-picker-separator,
    .ant-input:hover,
    .ant-time-picker .anticon,
    .ant-calendar-picker .anticon {
      background-color: #232323;
      color: #fff;
    }
@@ -581,10 +588,17 @@
        color: #fff;
        width: 23%;
        text-align: center;
        padding: 0;

        &.ant-radio-button-wrapper-checked {
          background-color: #1890ff;
        }
      }

      .group_radio {
        display: flex;
        align-items: center;
        justify-content: space-between;
      }
    }
  }
@@ -645,27 +659,30 @@
  }
}

.form-alt{
.form-alt {
  display: flex;
  align-items: center;

  .alt-btn{
    margin: 0 2px 0 2px ;
  .alt-btn {
    margin: 0 2px 0 2px;
    width: 45px;
    padding: 0 4px;
  }

  .alt-input{
  .alt-input {
    width: 50px;
    padding: 0;
    text-align: center;
  }
}

.btn-selected{
.btn-selected {
  background: #2d8cf0 !important;
  color:white !important;
  color: white !important;
}

.btn-unselected {
  background: #3c3c3c !important;
  color:white !important;
  color: white !important;
}
</style>

 src/pages/page-web/projects/members.vue

@@ -21,10 +21,10 @@
      <template #action="{ record }">
        <div class="editable-row-operations">
          <span v-if="editableData[record.user_id]">
            <a-tooltip title="Confirm changes">
            <a-tooltip title="保存">
              <span @click="save(record)" style="color: #28d445;"><CheckOutlined /></span>
            </a-tooltip>
            <a-tooltip title="Modification canceled">
            <a-tooltip title="取消">
              <span @click="() => delete editableData[record.user_id]" class="ml15" style="color: #e70102;"><CloseOutlined /></span>
            </a-tooltip>
          </span>

 src/pages/page-web/projects/project_list/add_page/components/ComTable.vue

@@ -1,7 +1,8 @@
<template>
    <div class="">
        <a-table class="ant-table-project" v-bind="$attrs" :row-selection="rowSelection" :columns="columns" :data-source="model.userList" />
    </div>
  <div class="">
    <a-table class="ant-table-project" v-bind="$attrs" :row-selection="rowSelection" :columns="columns"
      :data-source="model.userList" />
  </div>
</template>

<script setup lang="ts">
@@ -44,35 +45,35 @@

<style scoped lang="scss">
.ant-table-project :deep(.project_dark) td {
            background-color: #232323;
            color: #fff;
            border: none;
            border-bottom: 1px solid #4f4f4f;
            padding: 10px;
        }
  background-color: #232323 !important;
  color: #fff !important;
  border: none !important;
  border-bottom: 1px solid #4f4f4f;
  padding: 10px !important;
}

        .ant-table-project :deep(.ant-table-placeholder) {
            background: #434343;
            border: none !important;
        }
.ant-table-project :deep(.ant-table-placeholder) {
  background: #434343 !important;
  border: none !important;
}

        .ant-table-project :deep(.ant-table-thead) th {
            background: #3c3c3c;
            color: #fff;
            border: 1px solid #4f4f4f;
            padding: 10px;
        }
.ant-table-project :deep(.ant-table-thead) th {
  background: #3c3c3c !important;
  color: #fff !important;
  border: 1px solid #4f4f4f !important;
  padding: 10px !important;
}

        .ant-table-project :deep(.ant-table-body) table {
            border: 1px solid #4f4f4f;
            border-right: 1px solid #4f4f4f;
        }
.ant-table-project :deep(.ant-table-body) table {
  border: 1px solid #4f4f4f !important;
  border-right: 1px solid #4f4f4f !important;
}

        .ant-table-project :deep(.ant-table-body) {
            background: #434343;
        }
.ant-table-project :deep(.ant-table-body) {
  background: #434343 !important;
}

        .ant-table-project :deep(.ant-empty-description) {
            color: #fff;
        }
.ant-table-project :deep(.ant-empty-description) {
  color: #fff !important;
}
</style>