内容修改

longyvfengyun

2023-11-21 f012458151f57d1f3d6753908a1213ae6c86927d

内容修改

 .gitignore

@@ -26,3 +26,5 @@
*.njsproj
*.sln
*.sw?

资源文件

 src/assets/element-style.css

New file
@@ -0,0 +1,16 @@
/* el-dialog */
.el-dialog__header {
  padding: 8px;
}
.el-dialog__title {
  font-size: 14px;
}
.el-dialog__body {
  padding: 0;
}

.el-dialog__headerbtn {
  width: 36px;
  height: 36px;
  top: 4px;
}

 src/assets/main.css

@@ -1,5 +1,5 @@
@import './base.css';

@import './element-style.css';
#app {
  height: 100vh;
}

 src/components/echarts/hdwChart.vue

@@ -18,6 +18,7 @@
 */
const setOption = (option)=> {
    if (chart) {
        chart.clear();
        chart.setOption(option);
    }
}

 src/components/params/editDriveParams.vue

New file
@@ -0,0 +1,74 @@
<script setup>
import {onMounted, reactive} from "vue";
const props = defineProps({
    visible: {
        type: Boolean,
        default: false
    }
});
const emit = defineEmits(["update:visible"]);

const layout = reactive({
    gutter: 16,
    span: 12
});

const params = reactive({
    name: ""
});

const rules = reactive({
    name: []
});

const close = ()=>{
    emit("update:visible", false);
}

onMounted(()=>{

});
</script>

<template>
<div class="params-container">
    <div class="params-content">
        <el-form
            ref="form"
            :model="params"
            :rules="rules"
            label-position="top">
            <el-row :gutter="layout.gutter">
                <el-col :span="layout.span">
                    <el-form-item label="车辆名称" prop="name">
                        <el-input v-model="params.name" />
                    </el-form-item>
                </el-col>
                <el-col :span="layout.span">
                    <el-form-item label="车辆名称" prop="name">
                        <el-input v-model="params.name" />
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </div>
    <div class="params-footer">
        <el-button type="primary">确定</el-button>
        <el-button type="primary" @click="close">取消</el-button>
    </div>
</div>
</template>

<style scoped lang="less">
.params-container {
    width: 600px;
    background-color: #FFFFFF;
    .params-content {
        padding: 8px;
    }
    .params-footer {
        padding: 8px;
        text-align: right;
    }
}
</style>

 src/main.js

@@ -1,8 +1,8 @@
import './assets/main.css'
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import './assets/main.css'
import router from './router'
import App from './App.vue'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

 src/views/moudle/driveInf/apis.js

@@ -23,11 +23,13 @@
  });
}

export const searchDriveList = (page, pageSize)=>{
export const searchDriveList = (name, page, pageSize)=>{
  name = name?name:null;
  return axios({
    method: "GET",
    url: "/monitor/box/select",
    params: {
      name,
      page,
      pageSize
    },

 src/views/moudle/driveInf/driveInf.js

@@ -3,6 +3,8 @@
  searchRecentDaysDriveAlarm, searchTodayDriveAlarm
} from "./apis"
import {ref} from "vue";

import pageModule from "@/views/moudle/pageInfo";
export const recentDaysDriveAlarmModule = ()=>{
  const getRecentDaysDriveAlarm = async ()=>{
    try {
@@ -56,9 +58,14 @@
 * 车辆信息
 */
export const driveInfModule = ()=>{
  const page = ref(1);
  const pageSize = ref(10);
  const total = ref(0);
  const {
    page,
    pageSize,
    total
  }  = pageModule();

  const carName = ref("");

  const driveList = ref([]);

  /**
@@ -74,14 +81,21 @@
      result: []
    };
    try {
      const res = await searchDriveList(page.value, pageSize.value);
      const res = await searchDriveList(carName.value, page.value, pageSize.value);
      const rs = res.data;
      if(rs.code === 1) {
        result = rs.data;
        result = rs.data;
      }
      page.value = result.page;
      pageSize.value = result.pageSize;
      total.value = result.total;
      result.result = result.result.map(item=>{
        item.createTime1 = new Date(item.createTime).format("yyyy-MM-dd hh:mm:ss");
        item.updateTime1 = item.updateTime?new Date(item.updateTime).format("yyyy-MM-dd hh:mm:ss"):"---";
        item.onlineTime1 = item.onlineTime?new Date(item.onlineTime).format("yyyy-MM-dd hh:mm:ss"):"---";
        return item;
      });
      return result;
    }catch (e) {
      console.log(e);
@@ -94,6 +108,7 @@
    pageSize,
    total,
    driveList,
    carName,
    getDriveList
  };
}

 src/views/moudle/pageInfo.js

New file
@@ -0,0 +1,13 @@
import {ref} from "vue";
const pageModule = ()=>{
  const page = ref(1);
  const pageSize = ref(10);
  const total = ref(0);
  return {
    page,
    pageSize,
    total
  }
}

export default pageModule;

 src/views/user/boxList.vue

@@ -1,26 +1,45 @@
<script setup>
import {ref, onMounted} from "vue";

const tableData = ref([]);

const carName = ref(null);

import {
    driveInfModule
} from "@/views/moudle/driveInf/driveInf";
import EditDriveParams from "@/components/params/editDriveParams.vue";
const editVisible = ref(false);

const {
    page,
    pageSize,
    total,
    driveList,
    carName,
    getDriveList
} = driveInfModule();

/**
 * 查询汽车列表
 * @return {Promise<void>}
 */
const searchDriveList = async ()=>{
    let res = await getDriveList();
    console.log(res);
    driveList.value = res.result;
}

/**
 * 每页查询个数变更
 * @param value 每页查询个数
 */
const sizeChange = (value)=>{
    pageSize.value = value;
    searchDriveList();
}

/**
 * 当前页个数
 * @param value 当前页页码
 */
const currentChange = (value)=>{
    page.value = value;
    searchDriveList();
}

onMounted(()=>{
@@ -34,6 +53,18 @@
            <div class="page-header">
                <div class="input-list">
                    <div class="input-item">
<!--                        <div class="input-wrapper">-->
<!--                            <div class="input-label">车辆名称:</div>-->
<!--                            <div class="input-content">-->
<!--                                <el-select v-model="carName" filterable>-->
<!--                                    <el-option-->
<!--                                        v-for="(item, key) in carList" :key="'key'+key"-->
<!--                                        :value="item.key" :label="item.label"></el-option>-->
<!--                                </el-select>-->
<!--                            </div>-->
<!--                        </div>-->
                    </div>
                    <div class="input-item">
                        <el-button type="success" icon="Plus">添加</el-button>
                        <el-button type="primary" icon="Search">查询</el-button>
                    </div>
@@ -41,23 +72,46 @@
            </div>
            <div class="page-content">
                <el-table :data="driveList" height="100%">
                    <el-table-column prop="name" label="车辆名称" />
                    <el-table-column prop="boxSn" label="车辆编码"></el-table-column>
                    <el-table-column prop="online" label="车辆编码">
                    <el-table-column min-width="120" align="center" prop="name" label="车辆名称" />
                    <el-table-column min-width="120" align="center" prop="boxSn" label="车辆编码"></el-table-column>
                    <el-table-column align="center" prop="online" label="车辆状态">
                        <template #default="{row}">
                            <el-tag v-if="row.online">在线</el-tag>
                            <el-tag v-if="row.online" type="success">在线</el-tag>
                            <el-tag v-else type="danger">离线</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column min-width="170" align="center" prop="createTime1" label="创建日期"></el-table-column>
                    <el-table-column min-width="170" align="center" prop="onlineTime1" label="在线时间"></el-table-column>
                    <el-table-column min-width="170" align="center" prop="updateTime1" label="数据更新日期"></el-table-column>
                    <el-table-column align="center" fixed="right" label="操作" width="120">
                        <template #default>
                            <el-button link type="primary" size="small" @click="editVisible = true">编辑</el-button>
                            <el-button link type="primary" size="small">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="page-footer">
                <div class="el-pagination-container">
                    <el-pagination background layout="total, sizes, prev, pager, next, jumper" :total="total"></el-pagination>
                    <el-pagination
                        background
                        layout="total, sizes, prev, pager, next, jumper"
                        @size-change="sizeChange"
                        @current-change="currentChange"
                        :total="total"></el-pagination>
                </div>
            </div>
        </div>
    </div>
    <el-dialog
        v-model="editVisible"
        title="车辆信息编辑"
        width="auto"
        draggable
        destroy-on-close
        align-center>
        <edit-drive-params v-model:visible="editVisible"></edit-drive-params>
    </el-dialog>
</template>

<style scoped lang="less">