init commit

src/App.vue

@@ -0,0 +1,13 @@
+<template>
+	<div id="app">
+		<!-- <nav>
+			<router-link to="/">Home</router-link> |
+			<router-link to="/about">About</router-link>
+		</nav> -->
+		<router-view />
+	</div>
+</template>
+
+<script></script>
+
+<style lang="scss"></style>

src/components/BarChart.vue

@@ -0,0 +1,19 @@
+<template>
+  <!-- line chart  -->
+	<div></div>
+</template>
+
+<script>
+export default {
+	name: "BarChart",
+	props: {},
+	data() {
+		return {};
+	},
+	created() {},
+	mounted() {},
+	methods: {},
+};
+</script>
+
+<style scoped></style>

src/components/Container.vue

@@ -0,0 +1,35 @@
+<template>
+  <!-- 带框的 container  -->
+	<div class="outter-container" :style="{ padding, backgroundColor }">
+    <slot />
+  </div>
+</template>
+
+<script>
+export default {
+	name: "Container",
+	props: {
+    padding: {
+      type: String,
+      default: '10px 10px 10px 10px'
+    },
+    backgroundColor: {
+      type: String,
+      default: ''
+    }
+  },
+	data() {
+		return {};
+	},
+	created() {},
+	mounted() {},
+	methods: {},
+};
+</script>
+
+<style scoped>
+.outter-container {
+  padding: 0;
+  background: #ccc;
+}
+</style>

src/components/DragableContainer.vue

@@ -0,0 +1,21 @@
+<template>
+	<div class="draggable-container">
+    <!-- draggable  -->
+    <slot />
+  </div>
+</template>
+
+<script>
+export default {
+	name: "DragableContainer",
+	props: {},
+	data() {
+		return {};
+	},
+	created() {},
+	mounted() {},
+	methods: {},
+};
+</script>
+
+<style scoped></style>

src/components/LineChart.vue

@@ -0,0 +1,19 @@
+<template>
+  <!-- line chart  -->
+	<div></div>
+</template>
+
+<script>
+export default {
+	name: "LineChart",
+	props: {},
+	data() {
+		return {};
+	},
+	created() {},
+	mounted() {},
+	methods: {},
+};
+</script>
+
+<style scoped></style>

src/components/SmallBox.vue

@@ -0,0 +1,23 @@
+<template>
+	<div></div>
+</template>
+
+<script>
+export default {
+	name: "SmallBox",
+	props: {
+    title: {
+      type: String,
+      default: '水', // 水 电 气
+    }
+  },
+	data() {
+		return {};
+	},
+	created() {},
+	mounted() {},
+	methods: {},
+};
+</script>
+
+<style scoped></style>

src/components/SmallBox2.vue

@@ -0,0 +1,23 @@
+<template>
+	<div></div>
+</template>
+
+<script>
+export default {
+	name: "SmallBox2",
+	props: {
+    title: {
+      type: String,
+      default: '车间温度', // 车间温度   当前火向    换火时间   剩余时间
+    }
+  },
+	data() {
+		return {};
+	},
+	created() {},
+	mounted() {},
+	methods: {},
+};
+</script>
+
+<style scoped></style>

src/components/SmallTable.vue

@@ -0,0 +1,19 @@
+<template>
+  <!-- 引入 el-table  -->
+	<div></div>
+</template>
+
+<script>
+export default {
+	name: "SmallTable",
+	props: {},
+	data() {
+		return {};
+	},
+	created() {},
+	mounted() {},
+	methods: {},
+};
+</script>
+
+<style scoped></style>

src/components/SmallTitle.vue

@@ -0,0 +1,35 @@
+<template>
+	<!-- small-title  -->
+	<div class="small-title">
+		<template v-if="type === 0">
+			<span>000</span>
+			<span>设计单位：中建材智能自动化研究院</span>
+			<span>000</span>
+		</template>
+		<template v-if="type === 1">
+			<span>000</span>
+			<span>23℃&nbsp;&nbsp;2023.02.27星期一&nbsp;&nbsp;02:23:23</span>
+			<span>000</span>
+		</template>
+	</div>
+</template>
+
+<script>
+export default {
+	name: "SmallTitle",
+	props: {
+		type: {
+			type: Number,
+			default: 0, // 1
+		},
+	},
+	data() {
+		return {};
+	},
+	created() {},
+	mounted() {},
+	methods: {},
+};
+</script>
+
+<style scoped></style>

src/components/SubContainer.vue

@@ -0,0 +1,46 @@
+<template>
+	<!-- 带标题的 container  -->
+	<div class="sub-container" :style="{ padding }">
+		<div class="title">
+			<span></span>
+			<span>{{ title }}</span>
+		</div>
+		<div class="content">
+			<slot />
+		</div>
+	</div>
+</template>
+
+<script>
+export default {
+	name: "SubContainer",
+	props: {
+		title: {
+			type: String,
+			default: "Default Title",
+		},
+		icon: {
+			type: String,
+			default: "default",
+		},
+		padding: {
+			type: String,
+			default: "10px",
+		},
+	},
+	data() {
+		return {};
+	},
+	created() {},
+	mounted() {},
+	methods: {},
+};
+</script>
+
+<style scoped>
+.sub-container {}
+
+.title {
+  margin-bottom: 12px;
+}
+</style>

src/components/TinyTable.vue

@@ -0,0 +1,37 @@
+<template>
+	<div class="tiny-table">
+		<table>
+			<thead>
+				<tr>
+					<th></th>
+					<th>原板宽</th>
+					<th>净板宽</th>
+					<th>玻璃厚度</th>
+				</tr>
+			</thead>
+			<tbody>
+				<tr>
+					<td>A线</td>
+					<td>3300mm</td>
+					<td>2800mm</td>
+					<td>2mm</td>
+				</tr>
+			</tbody>
+		</table>
+	</div>
+</template>
+
+<script>
+export default {
+	name: "TinyTable",
+	props: {},
+	data() {
+		return {};
+	},
+	created() {},
+	mounted() {},
+	methods: {},
+};
+</script>
+
+<style scoped></style>

src/main.js

@@ -0,0 +1,12 @@
+import Vue from 'vue'
+import App from './App.vue'
+import router from './router'
+import store from './store'
+
+Vue.config.productionTip = false
+
+new Vue({
+  router,
+  store,
+  render: h => h(App)
+}).$mount('#app')

src/router/index.js

@@ -0,0 +1,29 @@
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+import HomeView from '../views/HomeView.vue'
+
+Vue.use(VueRouter)
+
+const routes = [
+  {
+    path: '/',
+    name: 'home',
+    component: HomeView
+  },
+  // {
+    // path: '/about',
+    // name: 'about',
+    // route level code-splitting
+    // this generates a separate chunk (about.[hash].js) for this route
+    // which is lazy-loaded when the route is visited.
+    // component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
+  // }
+]
+
+const router = new VueRouter({
+  mode: 'history',
+  base: process.env.BASE_URL,
+  routes
+})
+
+export default router

src/store/index.js

@@ -0,0 +1,17 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+  state: {
+  },
+  getters: {
+  },
+  mutations: {
+  },
+  actions: {
+  },
+  modules: {
+  }
+})

src/views/HomeView.vue

@@ -0,0 +1,18 @@
+<template>
+	<div class="home-view">home view</div>
+</template>
+
+<script>
+export default {
+	name: "HomeView",
+	props: {},
+	data() {
+		return {};
+	},
+	created() {},
+	mounted() {},
+	methods: {},
+};
+</script>
+
+<style scoped></style>