| | |
| | | <el-option v-for="item in machineData" :key="item.device_sn" :label="item.nickname" :value="item.device_sn" /> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item style="width: 520px;"> |
| | | <CommonDateTime style="width: 520px;" v-model="newTime" @change="getData" /> |
| | | <el-form-item> |
| | | <el-date-picker |
| | | class="ztzf-date-picker" |
| | | v-model="dateRange" |
| | | type="daterange" |
| | | range-separator="至" |
| | | start-placeholder="开始日期" |
| | | end-placeholder="结束日期" |
| | | value-format="YYYY-MM-DD" |
| | | @change="handleSearch" |
| | | /> |
| | | </el-form-item> |
| | | <el-form-item> |
| | | <div class="time-card"> |
| | | <div |
| | | class="card-item" |
| | | :class="item === checked ? 'active' : ''" |
| | | v-for="(item, index) in timeList" |
| | | @click="timeClick(item,index)" |
| | | > |
| | | {{ timeListStr[index] }} |
| | | </div> |
| | | </div> |
| | | </el-form-item> |
| | | <el-form-item label="任务算法:" v-if="isExpand"> |
| | | <TaskAlgorithmBusiness :setWidth="200" :showAlgorithm="true" @algorithmChange="algorithmChange"/> |
| | |
| | | <el-form-item label="任务类型:" v-if="isExpand"> |
| | | <TaskAlgorithmBusiness :setWidth="200" :showBusiness="true" @businessChange="businessChange"/> |
| | | </el-form-item> |
| | | <div class="more" v-if="isExpand" @click="toggleExpand">收起</div> |
| | | <div class="more" v-if="isExpand" @click="toggleExpand">收起</div> |
| | | <div class="more" v-else @click="toggleExpand">更多</div> |
| | | <div class="search-btn"> |
| | | <img @click="handleReset" src="@/assets/images/task/reset.png" alt=""> |
| | |
| | | </template> |
| | | <script setup> |
| | | import { pxToRem } from '@/utils/rem' |
| | | import CommonDateTime from '@/components/CommonDateTime.vue' |
| | | import { deptsByAreaCode, getDockInfo } from '@/api/home/common'; |
| | | import TaskAlgorithmBusiness from './components/TaskAlgorithmBusiness.vue'; |
| | | import dayjs from 'dayjs'; |
| | | |
| | | const isExpand = ref(false); |
| | | const toggleExpand = () => { |
| | |
| | | getDeptsByAreaCode(); |
| | | }; |
| | | |
| | | // 日期 和周期 |
| | | let timeList = ['today', 'week', 'month', 'year']; |
| | | let timeListStr = ['今日', '本周', '本月', '本年']; |
| | | let timeListEnum = ['TODAY', 'CURRENT_WEEK', 'CURRENT_MONTH', 'CURRENT_YEAR']; |
| | | let checked = ref('today'); |
| | | |
| | | const getDateRange = unit => { |
| | | if (unit === 'today') { |
| | | return [dayjs().format('YYYY-MM-DD'), dayjs().format('YYYY-MM-DD')]; |
| | | } |
| | | return [dayjs().startOf(unit).format('YYYY-MM-DD'), dayjs().endOf(unit).format('YYYY-MM-DD')]; |
| | | }; |
| | | |
| | | const dateRanges = { |
| | | today: getDateRange('today'), |
| | | week: getDateRange('week'), |
| | | month: getDateRange('month'), |
| | | year: getDateRange('year'), |
| | | }; |
| | | |
| | | let timeClick = (item,index) => { |
| | | checked.value = item; |
| | | // model.value = dateRanges[item]; |
| | | // emit('change', dateRanges[item],timeListEnum[index]); |
| | | searchForm.value.date_enum = timeListEnum[index]; |
| | | }; |
| | | |
| | | |
| | | onMounted(() => { |
| | | // requestDictionary(); |
| | |
| | | display: flex; |
| | | flex-wrap: wrap; |
| | | align-items: center; |
| | | gap: 20px 0; // 设置行间距和列间距 |
| | | gap: 20px 12px; // 设置行间距和列间距 |
| | | .more { |
| | | cursor: pointer; |
| | | width: 32px; |
| | |
| | | color: #60B2FF; |
| | | line-height: 32px; |
| | | font-size: 16px; |
| | | margin-right: 10px; |
| | | } |
| | | .search-btn { |
| | | position: absolute; |
| | |
| | | margin-right: 10px; |
| | | } |
| | | } |
| | | .time-card { |
| | | text-align: center; |
| | | background: linear-gradient(270deg, #195bad 0%, rgba(25, 91, 173, 0) 100%); |
| | | border: 1px solid #306fca; |
| | | font-family: Source Han Sans CN, Source Han Sans CN, serif; |
| | | font-weight: 400; |
| | | font-size: 14px; |
| | | color: #ffffff; |
| | | display: flex; |
| | | height: 32px; |
| | | |
| | | .card-item { |
| | | width: 66px; |
| | | height: 100%; |
| | | line-height: 32px; |
| | | cursor: pointer; |
| | | } |
| | | |
| | | .active { |
| | | background: linear-gradient(270deg, #19ad8d 0%, rgba(25, 173, 141, 0) 100%); |
| | | box-shadow: inset 0px 0px 8px 0px rgba(0, 255, 200, 0.6); |
| | | border-radius: 0px 0px 0px 0px; |
| | | } |
| | | } |
| | | } |
| | | :deep(.el-form) { |
| | | :deep(.el-input__wrapper.is-disabled) { |