Skip to content

xqz / dianDemo

Go to a project
Toggle navigation
Toggle navigation pinning
5d96fd45 by xqz
Options

提交

1 parent dc7a26fb
Expand all
Inline Side-by-side
Showing 27 changed files with 691 additions and 37 deletions
package-lock.json 0 → 100644
This diff could not be displayed because it is too large.
package.json
......@@ -19,6 +19,7 @@
"vant": "^2.12.48",
"vue": "^2.7.8",
"vue-router": "^3.5.4",
"vuedraggable": "^2.24.3",
"vuex": "^3.6.2"
},
"devDependencies": {
......
public/index.html
......@@ -10,7 +10,7 @@
<link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="preload" as="style" />
<link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet" />
<% } %> -->
<title><%= webpackConfig.name %></title>
<title>demo</title>
</head>
<body>
<noscript>
......
src/api/index.js
const api = {
Login: '/user/login',
UserInfo: '/user/userinfo',
UserName: '/user/name'
UserName: '/user/name',
plan: 'apis/api',
session: 'session/os/oauth/token'
}
export default api
......
src/api/user.js
......@@ -30,3 +30,35 @@ export function getUserName(params) {
hideloading: true
})
}
// 规划
export function getPlan(data, params) {
return request({
url: api.plan,
method: 'post',
data,
params,
hideloading: true
})
}
// 规划2
export function getPlan2(data, params) {
return request({
url: api.plan,
method: 'post',
data,
params,
hideloading: true
})
}
// 获取session
export function getSession(params, data) {
return request({
url: api.session,
method: 'post',
params,
data,
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
})
}
......
src/assets/css/mixin.scss
......@@ -2,14 +2,14 @@
// 清除浮动
@mixin clearfix {
&:after {
content: "";
content: '';
display: table;
clear: both;
}
}
// 多行隐藏
@mixin textoverflow($clamp:1) {
@mixin textoverflow($clamp: 1) {
display: block;
overflow: hidden;
text-overflow: ellipsis;
......@@ -19,9 +19,26 @@
/*! autoprefixer: ignore next */
-webkit-box-orient: vertical;
}
.city {
font-family: '微软雅黑';
background: rgba(0, 0, 0, 0);
width: 249px;
height: 60px;
font-size: 36px;
text-align: center;
border: 1px #1a1a1a solid;
border-radius: 5px;
}
.text-button {
border: none;
background-color: transparent;
color: #328985;
font-size: 24px;
text-decoration: underline;
cursor: pointer;
}
//flex box
@mixin flexbox($jc:space-between, $ai:center, $fd:row, $fw:nowrap) {
@mixin flexbox($jc: space-between, $ai: center, $fd: row, $fw: nowrap) {
display: flex;
display: -webkit-flex;
flex: 1;
......@@ -34,3 +51,25 @@
flex-wrap: $fw;
-webkit-flex-wrap: $fw;
}
/*定义滚动条高宽及背景
高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
width: 16px;
height: 16px;
background-color: #f5f5f5;
z-index: 999;
}
/*定义滚动条轨道
内阴影+圆角*/
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
border-radius: 10px;
background-color: #f5f5f5;
}
/*定义滑块
内阴影+圆角*/
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
background-color: #555;
}
......
src/components/Table.vue 0 → 100644
<template>
<div class="vant-table">
<table cellspacing="0" class="table" :style="{ width: width }">
<vuedraggable v-model="orginData" :options="{ draggable: this.vuedraggable }" @start="onStart" @end="onEnd">
<tr slot="header">
<th class="th" v-if="showCheck">
<input
type="checkbox"
id="j_cbAll"
:checked="isAllSelected"
@change="selectAllRows"
v-model="isAllSelected"
/>
</th>
<th class="th" v-for="(item, index) in option.column" :key="index" :style="{ width: item.width }">
{{ item.label }}
</th>
</tr>
<tr
v-for="item in orginData"
:key="item.rowNo"
class="list-tr"
@click="handleRowClick(item)"
:class="{ 'selected-row': item.isClick }"
>
<td v-if="showCheck">
<input type="checkbox" :checked="item.isSelected" v-model="item.isSelected" @change="selectRow(item)" />
</td>
<td
v-for="(context, i) in option.column"
:key="i"
:style="[
item[context.tableDataprop] === '已去' ? { color: 'green' } : {},
item.type === 'new' ? { color: 'red' } : {},
{ textAlign: context.align },
{ width: context.width }
]"
>
<slot :name="context.tableDataprop" :item="item"> <span v-html="item[context.tableDataprop]"></span></slot>
<!-- <slot :name="opreate" :item="item"></slot> -->
</td>
</tr>
</vuedraggable>
</table>
<div style="margin: 15px 15px"></div>
</div>
</template>
<script>
import vuedraggable from 'vuedraggable'
import _ from 'lodash'
export default {
name: 'TableVant',
components: { vuedraggable },
props: {
bgcolor: {
type: Object
},
width: {
type: String
},
tableData: {
type: Array
},
filterTable: {
type: Array
},
delTable: {
type: Array
},
option: {
type: Object
},
showCheck: {
type: Boolean,
default: false
},
vuedraggable: {
type: String
},
rowClick: {
type: Boolean,
default: false
}
},
watch: {
tableData: {
handler: function () {
this.orginData = _.cloneDeep(this.tableData) || []
},
deep: true,
immediate: true
},
filterTable: {
handler: function () {
this.filterData = _.cloneDeep(this.filterTable) || []
this.filterFlag = this.filterData.length > 0 ? true : false
},
deep: true,
immediate: true
},
delTable: {
handler: function () {
this.delData = _.cloneDeep(this.delTable) || []
this.deleteFlag = this.delData.length > 0 ? true : false
},
deep: true,
immediate: true
}
},
data() {
return {
orginData: [],
filterData: [],
delData: [],
filterFlag: false,
deleteFlag: false,
isAllSelected: false,
selectedRows: []
}
},
created() {},
mounted() {},
methods: {
onStart() {
this.drag = true
console.log('1', this.orginData)
},
handleRowClick(data) {
if (this.rowClick) {
this.orginData = this.orginData.map(item => {
item.isClick = false
return item
})
this.$set(data, 'isClick', true)
this.$bus.$emit('rowData', data)
}
},
onEnd() {
this.drag = false
console.log('2', this.orginData)
this.$bus.$emit('sortTableData', this.orginData)
},
selectAllRows() {
if (this.isAllSelected) {
this.selectedRows = [...this.orginData]
this.orginData.forEach(item => {
this.$set(item, 'isSelected', true)
})
} else {
this.selectedRows = []
this.orginData.forEach(item => {
this.$set(item, 'isSelected', false)
})
}
this.selectedRows = this.isAllSelected ? this.orginData : []
this.$bus.$emit('selecte', this.selectedRows)
console.log(this.selectedRows)
},
selectRow() {
this.selectedRows = this.orginData.filter(row => row.isSelected)
this.isAllSelected = this.selectedRows.length === this.orginData.length
this.$bus.$emit('selecte', this.selectedRows)
console.log(this.selectedRows)
}
}
}
</script>
<style scoped>
.selected-row {
background-color: yellow;
}
.vant-table {
margin-top: 20px;
}
table {
border-radius: 0.185185rem;
border-collapse: collapse;
/* 合并边框，美化表格样式 */
table-layout: fixed;
table-layout: fixed;
width: 100%;
}
.table {
border-radius: 0.185185rem;
border-collapse: collapse;
/* 合并边框，美化表格样式 */
table-layout: fixed;
display: flex;
table-layout: fixed;
word-wrap: break-word;
word-break: break-all;
}
th,
td {
border: 1px solid black;
/* 添加边框，美化表格样式 */
padding: 1px;
/* 添加内边距，使内容与边框有一定距离 */
}
.th {
height: 1.074074rem;
line-height: 1.074074rem;
background-color: #328985;
color: white;
text-align: center;
font-size: 24px;
}
td {
white-space: pre-wrap;
}
table tr {
margin-bottom: 10px;
/* 调整间距大小 */
}
.filter-tr,
.list-tr {
height: 1.074074rem;
line-height: 1.074074rem;
font-size: 24px;
}
.filter-tr:last-child {
margin-bottom: 10px;
}
tr > td:nth-child(1) {
text-align: center;
}
.del-text {
font-size: 24px;
font-weight: bold;
}
</style>
src/config/env.development.js
......@@ -2,7 +2,7 @@
module.exports = {
title: 'vue-h5-template',
baseUrl: 'http://localhost:9018', // 项目地址
baseApi: 'https://test.xxx.com/api', // 本地api请求地址,注意：如果你使用了代理，请设置成'/'
baseApi: '/', // 本地api请求地址,注意：如果你使用了代理，请设置成'/'
APPID: 'xxx',
APPSECRET: 'xxx',
$cdn: 'https://www.sunniejs.cn/static'
......
src/config/env.production.js
......@@ -2,7 +2,7 @@
module.exports = {
title: 'vue-h5-template',
baseUrl: 'https://www.xxx.com/', // 正式项目地址
baseApi: 'https://www.xxx.com/api', // 正式api请求地址
baseApi: 'https://tsapi.amap.com', // 正式api请求地址
APPID: 'xxx',
APPSECRET: 'xxx',
$cdn: 'https://www.sunniejs.cn/static'
......
src/config/env.staging.js
module.exports = {
title: 'vue-h5-template',
baseUrl: 'https://test.xxx.com', // 测试项目地址
baseApi: 'https://test.xxx.com/api', // 测试api请求地址
baseApi: 'https://tsapi.amap.com', // 测试api请求地址
APPID: 'xxx',
APPSECRET: 'xxx',
$cdn: 'https://www.sunniejs.cn/static'
......
src/filters/filter.js
......@@ -2,7 +2,7 @@
*格式化时间
*yyyy-MM-dd hh:mm:ss
*/
export function formatDate(time, fmt) {
export function formatDate(time, fmt = 'yyyy-MM-dd') {
if (time === undefined || '') {
return
}
......
src/main.js
......@@ -2,12 +2,13 @@
// https://github.com/zloirock/core-js/blob/master/docs/2019-03-19-core-js-3-babel-and-a-look-into-the-future.md#babelpolyfill
import 'core-js/stable'
import 'regenerator-runtime/runtime'
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import Bus from '../src/utils/bus' //这是我的路径，正确引用你们的路径
Vue.prototype.$bus = Bus
// 设置 js中可以访问 $cdn
import { $cdn } from '@/config'
Vue.prototype.$cdn = $cdn
......
src/plugins/vant.js
// 按需全局引入 vant组件
import Vue from 'vue'
import { Button, List, Cell, Tabbar, TabbarItem } from 'vant'
import {
Button,
List,
Cell,
Tabbar,
TabbarItem,
Col,
Row,
Divider,
NavBar,
Toast,
Field,
DatetimePicker,
Dialog,
CellGroup
} from 'vant'
Vue.use(Button)
Vue.use(Cell)
Vue.use(List)
Vue.use(Tabbar).use(TabbarItem)
Vue.use(Tabbar)
.use(TabbarItem)
.use(Col)
.use(Row)
.use(Divider)
.use(NavBar)
.use(Toast)
.use(Field)
.use(DatetimePicker)
.use(Dialog)
.use(CellGroup)
......
src/router/router.config.js
......@@ -6,7 +6,7 @@ export const constantRouterMap = [
{
path: '/',
component: () => import('@/views/layouts/index'),
redirect: '/home',
redirect: '/departure',
meta: {
title: '首页',
keepAlive: false
......@@ -23,6 +23,30 @@ export const constantRouterMap = [
name: 'About',
component: () => import('@/views/home/about'),
meta: { title: '关于我', keepAlive: false }
},
{
path: '/departure',
name: 'Departure',
component: () => import('@/views/home/departure'),
meta: { title: '出发列表', keepAlive: false }
},
{
path: '/result',
name: 'Result',
component: () => import('@/views/home/result'),
meta: { title: '规划结果', keepAlive: false }
},
{
path: '/target',
name: 'Target',
component: () => import('@/views/home/target'),
meta: { title: '目的列表', keepAlive: false }
},
{
path: '/about1',
name: 'About1',
component: () => import('@/views/home/about1'),
meta: { title: '关于我', keepAlive: false }
}
]
}
......
src/store/getters.js
const getters = {
userName: state => state.app.userName
getOrder: function (state) {
if (!state.order) {
state.order = JSON.parse(localStorage.getItem('order'))
}
return state.order
},
getCity: function (state) {
if (!state.city) {
state.city = localStorage.getItem('city')
}
return state.order
},
getdepart: function (state) {
if (!state.depart) {
state.depart = JSON.parse(localStorage.getItem('depart'))
}
return state.depart
},
getTarget: function (state) {
if (!state.target) {
state.target = JSON.parse(localStorage.getItem('target'))
}
return state.target
},
getCurentData: function (state) {
if (!state.curentData) {
state.curentData = JSON.parse(localStorage.getItem('curentData'))
}
return state.curentData
}
}
export default getters
......
src/store/modules/app.js
const state = {
userName: ''
order: localStorage.getItem('order') ? localStorage.getItem('order') : '',
city: localStorage.getItem('city') ? localStorage.getItem('city') : '',
depart: localStorage.getItem('depart') ? localStorage.getItem('depart') : '',
target: localStorage.getItem('target') ? localStorage.getItem('target') : '',
curentData: localStorage.getItem('curentData') ? localStorage.getItem('curentData') : ''
}
const mutations = {
SET_USER_NAME(state, name) {
state.userName = name
SET_ORDER(state, info) {
state.order = info
localStorage.setItem('order', info)
},
SET_CITY(state, info) {
state.city = info
localStorage.setItem('city', info)
},
SET_DEPART(state, info) {
state.depart = info
localStorage.setItem('depart', info)
},
SET_TARGET(state, info) {
state.target = info
localStorage.setItem('target', info)
},
SET_CURENTDATA(state, info) {
state.target = info
localStorage.setItem('curentData', info)
}
}
const actions = {
// 设置name
setUserName({ commit }, name) {
commit('SET_USER_NAME', name)
setOrder({ commit }, info) {
commit('SET_ORDER', info)
},
// 设置城市
setCity({ commit }, info) {
commit('SET_CITY', info)
},
// 设置城市
setDepart({ commit }, info) {
commit('SET_DEPART', info)
},
// 设置城市
setTarget({ commit }, info) {
commit('SET_TARGET', info)
},
// 设置城市
setCurentData({ commit }, info) {
commit('SET_CURENTDATA', info)
}
}
export default {
......
src/utils/bus.js 0 → 100644
// bus.js文件内容
import Vue from 'vue'
// export default new Vue()
const Bus = new Vue()
export default Bus
src/utils/request.js
......@@ -6,8 +6,8 @@ import { baseApi } from '@/config'
// create an axios instance
const service = axios.create({
baseURL: baseApi, // url = base api url + request url
withCredentials: true, // send cookies when cross-domain requests
timeout: 5000 // request timeout
withCredentials: true // send cookies when cross-domain requests
// timeout: 5000 // request timeout
})
// request拦截器 request interceptor
......@@ -34,8 +34,8 @@ service.interceptors.request.use(
// respone拦截器
service.interceptors.response.use(
response => {
Toast.clear()
const res = response.data
Toast.clear()
if (res.status && res.status !== 200) {
// 登录超时,重新登录
if (res.status === 401) {
......
src/views/home/result.vue 0 → 100644
<template>
<div>
<div class="title">
<van-row type="flex" style="margin-top: 15px" justify="space-around">
<van-col span="24" class="header-text" style="display: flex">
<van-cell-group>
城市：
<select name="pets" id="pet-select" v-model="city" class="city" @change="cityChage($event)">
<option v-for="item in cityOptions" :key="item.value" :value="item.value">{{ item.label }}</option>
</select>
</van-cell-group>
</van-col>
</van-row>
</div>
<div style="width: 100%; overflow-x: auto">
<Table-vant :option="option" :tableData="resultData" width="790px">
<template v-slot:startTime="{ item }">
<div>{{ item.startTime | formatDate('hh:mm:ss') }}</div>
</template>
<template v-slot:lastArrivalTime="{ item }">
<div>{{ item.lastArrivalTime | formatDate('hh:mm:ss') }}</div>
</template>
<template v-slot:opreate="{ item }">
<button class="text-button" @click="geDetail(item)">详情</button>
</template>
</Table-vant>
</div>
</div>
</template>
<script>
import TableVant from '@/components/Table.vue'
import { getPlan, getSession } from '@/api/user.js'
import { Toast } from 'vant'
import _ from 'lodash'
export default {
name: '',
props: {},
components: { TableVant },
data() {
return {
city: '',
targetData: [],
departureData: [],
cityOptions: [
{ label: '济南', value: '济南' },
{ label: '德州', value: '德州' },
{ label: '聊城', value: '聊城' }
],
resultData: [
{
address: '',
batch: '',
coordinate: '',
dateTime: '',
hospital: '',
pkgs: '',
rowNo: '1',
status: '',
stopTime: ''
}
],
option: {
column: [
{
label: '序号',
tableDataprop: 'rowNo',
width: '50px',
align: 'center'
},
{
label: '取件人',
tableDataprop: 'name',
width: '50px'
},
{
label: '规划路线',
tableDataprop: 'path',
width: '300px'
},
{
label: '总里程',
tableDataprop: 'totalDistance',
width: '80px'
},
{
label: '总耗时',
tableDataprop: 'totalTimes',
width: '80px'
},
{
label: '出发时间',
tableDataprop: 'startTime',
width: '80px'
},
{
label: '回程时间',
tableDataprop: 'lastArrivalTime',
width: '80px'
},
{
label: '操作',
tableDataprop: 'opreate',
width: '80px',
align: 'center'
}
]
}
}
},
computed: {},
watch: {},
methods: {
geDetail(e) {
this.$store.dispatch('setCurentData', JSON.stringify(e))
this.$router.push({ path: '/about1', query: { data: JSON.stringify(e) } })
console.log(e)
},
getSessionId() {
let params = {
client_id: 'dd48c515fcde43bea0b5bd0b8f77e119',
grant_type: 'client_credentials',
client_secret: 'c6602114c9ba488b877d0d84b0e5e700',
scope: 'read'
}
getSession(params, {}).then(res => {
this.accessToken = res.access_token
this.initData([...this.departureData, ...this.targetData])
})
},
// 请求数据案例
initData(list) {
Toast.loading({
duration: 0
})
console.log('123', list)
let arr = _.cloneDeep(list)
const data = {
region: this.city,
plate: '',
departure: '',
arrival: '',
departureDate: '06:30',
customerData: arr
}
const params = {
method: 'GetRouteMatrix_test',
format: 'json',
sessionId: this.accessToken,
sign: '203EF639BA15A6E001B59DB78AB81470B7893CAF',
appKey: 'dd48c515fcde43bea0b5bd0b8f77e119',
v: '1.0'
}
getPlan(data, params)
.then(res => {
Toast.clear()
let newArr = JSON.parse(res).returnModel
console.log('返回的数据', newArr)
newArr.forEach(item => {
item.data.forEach((e, index) => {
e.distance = e.distance.toFixed(2)
e.hospital = e.returnName
e.status = '未去'
e.coordinate = e.destination
e.isOrigin = 'N'
if (index == item.data.length - 1) {
e.pkgs = 0
} else {
e.pkgs = 100
}
// e.distance.toFixed(2)
})
item.data.pop()
})
this.resultData = newArr
console.log('aaaaa', this.resultData)
let arrs = this.resultData
arrs.forEach((item, index) => {
item.rowNo = index + 1
})
})
.catch(() => {})
}
},
created() {
this.city = this.$store.state.app.city
this.targetData = this.$store.getters.getTarget
this.departureData = JSON.parse(this.$store.state.app.depart)
this.resultData = JSON.parse(this.$store.state.app.order)
},
mounted() {}
}
</script>
<style lang="scss" scoped>
.header-text {
font-size: 36px;
font-weight: 800;
}
</style>
src/views/layouts/index.vue
<template>
<div class="app-container">
<van-nav-bar left-text="返回" left-arrow @click-left="onClickLeft" @click-right="onClickRight" />
<div class="layout-content">
<keep-alive v-if="$route.meta.keepAlive">
<router-view></router-view>
</keep-alive>
<router-view v-else></router-view>
</div>
<div class="layout-footer">
<!-- <div class="layout-footer">
<TabBar :data="tabbars" @change="handleChange" />
</div>
</div> -->
</div>
</template>
......@@ -42,7 +43,13 @@ export default {
methods: {
handleChange(v) {
console.log('tab value:', v)
}
},
onClickLeft() {
this.$router.go(-1)
},
onClickRight() {
Toast('按钮');
},
}
}
</script>
......
vue.config.js
......@@ -53,18 +53,29 @@ module.exports = defineConfig({
warnings: false,
errors: true
}
},
headers: {
'Access-Control-Allow-Origin': '*'
},
proxy: {
//配置跨域
'/session': {
target: 'http://117.78.47.109:8180',
// ws:true,
changOrigin: true,
pathRewrite: {
'^/session': ''
}
},
'/apis': {
target: 'http://117.78.47.109:9081',
// ws:true,
changOrigin: true,
pathRewrite: {
'^/apis': ''
}
}
}
// proxy: {
// //配置跨域
// '/api': {
// target: "https://test.xxx.com",
// // ws:true,
// changOrigin:true,
// pathRewrite:{
// '^/api':'/'
// }
// }
// }
},
css: {
extract: IS_PROD, // 是否将组件中的 CSS 提取至一个独立的 CSS 文件中 (而不是动态注入到 JavaScript 中的 inline 代码)。
......
yarn.lock
This diff could not be displayed because it is too large.
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!