1

1 week ago · 55cd4652d0
parent 4aaf88fc17
commit 55cd4652d0
37 changed files with 2191 additions and 547 deletions
--- a/ipad/css/index.css
+++ b/ipad/css/index.css
@ -0,0 +1,37 @@
+body,html{
+    margin:0;
+    padding:0;
+}
+.main{
+    height: calc(100vh);
+    background-image: url("../images/mainBg.png");
+    background-size: cover;
+    background-repeat: no-repeat;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+.btnGroup{
+    display: flex;
+}
+.btnGroup .item{
+    flex: 1;
+    position: relative;
+}
+.btnGroup .item .text{
+    display: flex;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+.btnGroup .item .text span{
+    margin-left:15px;
+    font-family: PingFang SC;
+    font-weight: bold;
+    font-size: 36px;
+    color: #FFFFFF;
+}
--- a/ipad/css/taskManagement.css
+++ b/ipad/css/taskManagement.css
@ -0,0 +1,67 @@
+body,html{
+    margin:0;
+    padding:0;
+}
+.task{
+    border:1px solid red;
+    height: calc(100vh - 2px);
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+    background-color: #F2F2F2;
+}
+/* 左边 */
+.left{
+    width:20%;
+    height:calc(100% - 40px);
+    overflow: auto;
+    border:1px solid orange;
+    background: #FFFFFF;
+    box-shadow: 3px 0px 10px 0px rgba(6,13,23,0.06);
+    border-radius: 1px;
+    padding:20px;
+}
+.left .addBtn{
+    background: #6271FE;
+    box-shadow: 0px 3px 10px 0px rgba(0,0,0,0.2);
+    border-radius: 10px;
+    padding:16px 0;
+    text-align: center;
+}
+.left .addBtn span{
+    margin-left:12px;
+    font-family: PingFang SC;
+    font-weight: bold;
+    font-size: 24px;
+    color: #FFFFFF;
+}
+.left .taskItem{
+    background: #EDEDEF;
+    border-radius: 10px;
+    padding:16px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin:20px 0;
+}
+.left .taskItem span{
+    font-weight: bold;
+    font-size: 22px;
+    color: #222222;
+}
+/* 右边 */
+.right{
+    width:20%;
+    height:100%;
+    overflow: auto;
+    border:1px solid orange;
+}
+.right 
+
+
+
+.center{
+    flex:1;
+    height:100%;
+    border:1px solid orange;
+}
--- a/ipad/images/cha.png
+++ b/ipad/images/cha.png
--- a/ipad/images/jia.png
+++ b/ipad/images/jia.png
--- a/ipad/images/jiankong.png
+++ b/ipad/images/jiankong.png
--- a/ipad/images/main.png
+++ b/ipad/images/main.png
--- a/ipad/images/main1.png
+++ b/ipad/images/main1.png
--- a/ipad/images/mainBg.png
+++ b/ipad/images/mainBg.png
--- a/ipad/images/point.png
+++ b/ipad/images/point.png
--- a/ipad/images/qi.png
+++ b/ipad/images/qi.png
--- a/ipad/images/renwu.png
+++ b/ipad/images/renwu.png
--- a/ipad/images/shanchu.png
+++ b/ipad/images/shanchu.png
--- a/ipad/images/shanhcu.png
+++ b/ipad/images/shanhcu.png
--- a/ipad/images/tianjia.png
+++ b/ipad/images/tianjia.png
--- a/ipad/images/wan.png
+++ b/ipad/images/wan.png
--- a/ipad/index.html
+++ b/ipad/index.html
@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>入口文件</title>
+    <link rel="stylesheet" href="./css/index.css">
+</head>
+<body>
+<div class="main">
+    <div class="btnGroup">
+        <div class="item">
+            <img src="./images/main.png" alt="">
+            <div class="text">
+                <img src="./images/jiankong.png" alt="">
+                <span>任务管理</span>
+            </div>
+        </div>
+        <div class="item" style="margin-left:62px;">
+            <img src="./images/main1.png" alt="">
+            <div class="text">
+                <img src="./images/renwu.png" alt="">
+                <span>实时监控</span>
+            </div>
+           
+        </div>
+    </div>
+</div>
+ 
+</body>
+</html>
--- a/ipad/js/jquery-3.7.1.min.js
+++ b/ipad/js/jquery-3.7.1.min.js
--- a/ipad/js/taskManagement.js
+++ b/ipad/js/taskManagement.js
@ -0,0 +1,9 @@
+$(function(){
+    console.log("111")
+    for(let i = 0 ; i < 6 ; i++){
+        $('.left').append(`<div class="taskItem">
+            <span>任务${i+1}</span>
+            <img src="./images/shanchu.png" alt="">
+        </div>`)
+    }
+})
--- a/ipad/taskManagement.html
+++ b/ipad/taskManagement.html
@ -0,0 +1,36 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>任务管理</title>
+    <link rel="stylesheet" href="./css/taskManagement.css">
+    <script src="./js/jquery-3.7.1.min.js"></script>
+    <script src="./js/taskManagement.js"></script>
+</head>
+<body>
+<div class="task">
+    <div class="left">
+        <div class="addBtn">
+            <img src="./images/jia.png" alt="">
+            <span>新增任务</span>
+        </div>
+       
+    </div>
+    <div class="center"></div>
+    <div class="right">
+        <div class="pointItem">
+            <div class="point">
+                <div class="pointName">
+                    <img src="./images/point.png" alt="">
+                    <span>点1</span>
+                </div>
+                <div class="edit">修改</div>
+            </div>
+            <div class="lat">经度：116.3913447°</div>
+            <div class="lat">纬度度：116.3913447°</div>
+        </div>
+    </div>
+</div>
+</body>
+</html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -9,16 +9,17 @@
  },
  "dependencies": {
    "core-js": "^3.8.3",
-    "vue": "^2.6.14"
+    "echarts": "^5.5.1",
+    "vue": "^2.6.14",
+    "vue-router": "^3.6.5"
  },
  "devDependencies": {
    "@babel/core": "^7.12.16",
    "@babel/eslint-parser": "^7.12.16",
    "@vue/cli-plugin-babel": "~5.0.0",
-    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
-    "eslint": "^7.32.0",
-    "eslint-plugin-vue": "^8.0.3",
+    "node-sass": "^9.0.0",
+    "sass-loader": "^16.0.3",
    "vue-template-compiler": "^2.6.14"
  },
  "eslintConfig": {
--- a/src/App.vue
+++ b/src/App.vue
@ -1,28 +1,71 @@
 <template>
  <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+    <router-view></router-view>
  </div>
 </template>

 <script>
-import HelloWorld from './components/HelloWorld.vue'
-
+import debounce from 'lodash.debounce'
 export default {
  name: 'App',
-  components: {
-    HelloWorld
+  components: {},
+  data(){
+    return{
+      scale: this.getScale(),
+      width:1920,
+      height:1080
+    }
+    
+  },
+  mounted(){
+    this.getScale()
+    window.addEventListener('resize', this.setScale)
+  },
+  beforeDestroy() {  
+    window.removeEventListener('resize', this.setScale)
+  },
+  computed: {
+    styleObject() {
+      const obj = {
+        transform: `scaleY(${this.scale.y}) scaleX( ${this.scale.x}) translate(-50%, -50%)`,
+        WebkitTransform: `scale(${this.scale}) translate(-50%, -50%)`,
+        width: this.width + 'px',
+        height: this.height + 'px'
+      }
+      return obj
+    }
+  },
+  methods: {
+    getScale() {
+      // 字体开始
+      const baseSize = 10; // 基准大小
+      const scale = document.documentElement.clientWidth / 1920; // 当前页面宽度相对于设计稿宽度的缩放比例
+      document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'; // 设置页面根节点字体大小
+      // 字体结束
+      // 固定好16:9的宽高比，计算出最合适的缩放比，宽高比可根据需要自行更改
+      // console.log(window.innerWidth, window.innerHeight,'window.innerWidth')
+      const ww = window.innerWidth / this.width
+      const wh = window.innerHeight / this.height
+      // return ww < wh ? ww : wh
+      return { x: ww, y: wh }
+    },
+    setScale: debounce(function() {
+      // 获取到缩放比，设置它
+      const scale = this.getScale()
+      this.scale = scale
+    }, 300)
  }
 }
 </script>

 <style>
+body,html{
+  padding:0;
+  margin:0;
+  font-size: 62.5%;
+}
 #app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  text-align: center;
-  color: #2c3e50;
-  margin-top: 60px;
+  height:calc(100vh);
+  overflow: hidden;
 }
 </style>
--- a/src/assets/back.png
+++ b/src/assets/back.png
--- a/src/assets/bg2
+++ b/src/assets/bg2
--- a/src/assets/headerBg.png
+++ b/src/assets/headerBg.png
--- a/src/assets/kuang2.png
+++ b/src/assets/kuang2.png
--- a/src/assets/logo.png
+++ b/src/assets/logo.png
--- a/src/assets/shijian.png
+++ b/src/assets/shijian.png
--- a/src/assets/tu1.png
+++ b/src/assets/tu1.png
--- a/src/assets/tu2.png
+++ b/src/assets/tu2.png
--- a/src/assets/底框.png
+++ b/src/assets/底框.png
--- a/src/assets/底框3.png
+++ b/src/assets/底框3.png
--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
@ -1,58 +0,0 @@
-<template>
-  <div class="hello">
-    <h1>{{ msg }}</h1>
-    <p>
-      For a guide and recipes on how to configure / customize this project,<br>
-      check out the
-      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
-    </p>
-    <h3>Installed CLI Plugins</h3>
-    <ul>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
-      <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
-    </ul>
-    <h3>Essential Links</h3>
-    <ul>
-      <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
-      <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
-      <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
-      <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
-      <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
-    </ul>
-    <h3>Ecosystem</h3>
-    <ul>
-      <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
-      <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
-      <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
-      <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
-      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
-    </ul>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'HelloWorld',
-  props: {
-    msg: String
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
-  margin: 40px 0 0;
-}
-ul {
-  list-style-type: none;
-  padding: 0;
-}
-li {
-  display: inline-block;
-  margin: 0 10px;
-}
-a {
-  color: #42b983;
-}
-</style>
--- a/src/main.js
+++ b/src/main.js
@ -1,8 +1,10 @@
 import Vue from 'vue'
 import App from './App.vue'
-
+import VueRouter from 'vue-router'
+import router from './router'
 Vue.config.productionTip = false
-
+Vue.use(VueRouter)
 new Vue({
  render: h => h(App),
-}).$mount('#app')
+  router
+}).$mount('#app')
--- a/src/pages/index.vue
+++ b/src/pages/index.vue
@ -0,0 +1,113 @@
+<template>
+<div class="index">
+    <img src="@/assets/back.png" class="bgPic" alt="">
+    <div class="contentContainer">
+        <div class="header">
+            <img src="@/assets/headerBg.png" alt="">
+            <div class="headerText">
+                <div class="title">垃圾转运站大数据管理中心</div>
+                <!-- <div class="time">
+                    <img src="@/assets/shijian.png"  alt="">
+                    <span>2024-09-09 13:24:13</span>
+                </div> -->
+            </div>
+        </div>
+    </div>
+</div>
+</template>
+
+<script>
+export default {
+    data(){
+        return{
+            timeText:'',
+            timer:null,
+        }
+    },
+    methods:{
+        updateClock() {
+            let now = new Date();
+            let year = now.getFullYear();
+            let month = now.getMonth() + 1;
+            let day = now.getDate(); 
+            let hours = now.getHours();
+            let minutes = now.getMinutes();
+            let seconds = now.getSeconds();
+            month = month < 10 ? '0' + month : month;
+            day = day < 10 ? '0' + day : day;
+            hours = hours < 10 ? '0' + hours : hours;
+            minutes = minutes < 10 ? '0' + minutes : minutes;
+            seconds = seconds < 10 ? '0' + seconds : seconds;
+            let timeString = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
+            this.timeText = timeString
+        }
+    },
+    mounted(){
+        // this.timer = setInterval(this.updateClock, 1000);
+    },
+    destroyed(){
+        // clearInterval(this.timer)
+        // this.timer = null;
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.index{
+    background: #010E25;
+    border:1px solid blue;
+    height:calc(100% - 2px);
+    overflow: hidden;
+    position: relative;
+    .bgPic{
+        position: absolute;
+        left:0;
+        top:0;
+        width:100%;
+        height:100%;
+        z-index:0;
+    }
+    .contentContainer{
+        position: relative;
+        z-index:1;
+        .header{
+            border:1px solid red;
+            position: relative;
+            &>img{
+                width:100%;
+                height:auto;
+                position:relative;
+                z-index:1;
+            }
+            .headerText{
+                position: absolute;
+                border:2px solid pink;
+                .title{
+                    font-family: Source Han Sans CN;
+                    font-weight: bold;
+                    font-size: 3.6rem;
+                    color: #FFFFFF;
+                    text-shadow: 0px 4px 7px rgba(0,0,1,0.86);
+                }
+                // .time{
+                //     display: flex;
+                //     align-items: center;
+                //     border:1px solid #fff;
+                //     &>img{
+                //         width: 20px;
+                //         height: 20px;
+                //     }
+                //     &>span{
+                //         font-weight: bold;
+                //         font-size: 20px;
+                //         color: #FFFFFF;
+                //         margin-left:16px;
+                //     }
+                // }
+            }
+        }
+       
+    }
+    
+}
+</style>
--- a/src/router/index.js
+++ b/src/router/index.js
@ -0,0 +1,18 @@
+import VueRouter from "vue-router";
+const router = new VueRouter({
+    mode: "hash",
+    // mode: "history",
+    routes: [
+        {
+            path: '/',
+            redirect:'/index',
+        },
+        {
+            name: 'index',
+            path: '/index',
+            component: () => import('../pages/index.vue'),
+            children: [],
+        },
+    ]
+})
+export default router
--- a/vue.config.js
+++ b/vue.config.js
@ -1,4 +1,11 @@
 const { defineConfig } = require('@vue/cli-service')
 module.exports = defineConfig({
-  transpileDependencies: true
+  transpileDependencies: true,
+  configureWebpack: {
+    resolve: {
+      alias: {
+        '@': require('path').resolve(__dirname, './src')
+      }
+    }
+  }
 })