区域管理站点管理ui编码

src/views/areaman/index.vue

@@ -1,3 +1,375 @@
+<script setup lang="ts">
+import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
+
+interface RuleForm {
+  name: string
+  region: string
+  count: string
+  date1: string
+  date2: string
+  delivery: boolean
+  location: string
+  type: string[]
+  resource: string
+  desc: string
+}
+
+const formSize = ref<ComponentSize>('default')
+const ruleFormRef = ref<FormInstance>()
+const ruleForm = reactive<RuleForm>({
+  name: 'Hello',
+  region: '',
+  count: '',
+  date1: '',
+  date2: '',
+  delivery: false,
+  location: '',
+  type: [],
+  resource: '',
+  desc: '',
+})
+
+
+const rules = reactive<FormRules<RuleForm>>({
+  name: [
+    { required: true, message: 'Please input Activity name', trigger: 'blur' },
+    { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
+  ],
+  region: [
+    {
+      required: true,
+      message: 'Please select Activity zone',
+      trigger: 'change',
+    },
+  ],
+  count: [
+    {
+      required: true,
+      message: 'Please select Activity count',
+      trigger: 'change',
+    },
+  ],
+  date1: [
+    {
+      type: 'date',
+      required: true,
+      message: 'Please pick a date',
+      trigger: 'change',
+    },
+  ],
+  date2: [
+    {
+      type: 'date',
+      required: true,
+      message: 'Please pick a time',
+      trigger: 'change',
+    },
+  ],
+  location: [
+    {
+      required: true,
+      message: 'Please select a location',
+      trigger: 'change',
+    },
+  ],
+  type: [
+    {
+      type: 'array',
+      required: true,
+      message: 'Please select at least one activity type',
+      trigger: 'change',
+    },
+  ],
+  resource: [
+    {
+      required: true,
+      message: 'Please select activity resource',
+      trigger: 'change',
+    },
+  ],
+  desc: [
+    { required: true, message: 'Please input activity form', trigger: 'blur' },
+  ],
+})
+
+const submitForm = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      console.log('submit!')
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
+
+
+import { ref,onMounted,reactive } from 'vue'
+import { Search,Download,Tools,Plus,Check,Close } from "@element-plus/icons-vue";
+let searchWord=ref('')
+let dialogVisible=ref(false)
+let logtitle=ref('新增用户')
+const tableData = [
+  {
+    date: '2016-05-03',
+    name: '天府新区',
+    latlon: '104.0647° E, 30.5702° N',
+    num:'3',
+    by:'天府新区客运中心',
+    status:'活跃'
+  },
+  {
+    date: '2016-05-03',
+    name: '高新西区',
+    latlon: '104.0647° E, 30.5702° N',
+    num:'3',
+    by:'高新西站',
+    status:'活跃'
+  },
+  {
+    date: '2016-05-03',
+    name: '武侯区',
+    latlon: '104.0647° E, 30.5702° N',
+    num:'3',
+    by:'武侯客运站',
+    status:'活跃'
+  },
+  {
+    date: '2016-05-03',
+    name: '锦江区',
+    latlon: '104.0647° E, 30.5702° N',
+    num:'3',
+    by:'锦江客运站',
+    status:'活跃'
+  }, {
+    date: '2016-05-03',
+    name: '双流区',
+    latlon: '104.0647° E, 30.5702° N',
+    num:'3',
+    by:'双流西站',
+    status:'活跃'
+  },
+]
+
+let activeName=ref('first')
+
+const addUser=val=>{
+  dialogVisible.value=val
+}
+
+onMounted(()=>{
+  
+})
+
+
+</script>
 <template>
-    <div>areaman</div>
-</template>
+    <div>
+       <div class="common-top">
+        <div class="left-part">
+          <div class="title">
+            区域管理
+          </div>
+          <div class="sub-title">
+            管理和查看所有运营区域信息
+          </div>
+        </div>
+        <div class="right-part">
+          <el-button type="primary" :icon="Plus" @click="addUser(true)">新增区域</el-button>
+        </div>
+       </div>
+
+       <div class="common-content">
+                    <div class="common-search-box">
+                      <div class="left-part">
+                        <el-input
+                          v-model="searchWord"
+                         
+                          placeholder="搜索区域名称..."
+                          style="width:260px"
+                        >
+                        
+                          <template #append>
+                            <el-button :icon="Search" />
+                          </template>
+                        </el-input>
+                        <!-- <el-button style="margin-left:10px">筛选</el-button> -->
+                      </div>
+                      <div class="right-part">
+                      
+                        <!-- <el-button :icon="Download">导出</el-button>
+                        <el-button :icon="Tools">设置</el-button> -->
+                      </div>
+                    </div>
+                    <el-table header-row-class-name="reset-gray-head" :data="tableData"  style="width: 100%">
+                        <el-table-column prop="name" label="区域名称">
+                          
+                        </el-table-column>
+                        <el-table-column prop="latlon" label="中心经纬度" />
+                        <el-table-column prop="num" label="包含站点数">
+                        
+                        </el-table-column>
+                        <el-table-column prop="date" label="创建时间">
+                          
+                        </el-table-column>
+                        <el-table-column prop="by" label="所属客运站" />
+                        <el-table-column fixed="right" label="操作" min-width="120">
+                          <template #default>
+                            <el-button link type="primary" size="small">
+                              编辑
+                            </el-button>
+                            <el-button link type="danger" size="small">删除</el-button>
+                          </template>
+                        </el-table-column>
+                    </el-table>
+
+                    <div class="common-page-wrap">
+                      <div class="left-part">
+                        <span>显示第 </span>
+                        <span>1 </span>
+                        <span>至 </span>
+                        <span>10 </span>
+                        <span>条, </span>
+                        <span>共1000条记录 </span>
+                      </div>
+                      <div class="right-part">
+                        <el-pagination background layout="prev, pager, next" :total="1000" />
+                      </div>
+                    </div>
+                  </div> 
+
+
+
+        <el-dialog
+          v-model="dialogVisible"
+          :title="logtitle"
+          width="600"
+        >
+
+
+
+
+        <el-form
+          ref="ruleFormRef"
+          :model="ruleForm"
+          label-position="top"
+          :rules="rules"
+          label-width="auto"
+          :size="formSize"
+          status-icon
+        >
+          <el-row :gutter="20">
+            <el-col :span="12">
+              <el-form-item label="用户名称" prop="name">
+                <el-input v-model="ruleForm.name" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="手机号码" prop="name">
+                <el-input v-model="ruleForm.name" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="身份证号" prop="name">
+                <el-input v-model="ruleForm.name" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="用户角色" prop="name">
+                <el-input v-model="ruleForm.name" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="24">
+              <el-form-item label="用户状态" prop="name">
+                <el-input v-model="ruleForm.name" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="24">
+              <el-form-item label="备注信息" prop="name">
+                <el-input v-model="ruleForm.name" type="textarea" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+         
+    
+         
+         
+         
+        </el-form>
+
+
+
+          
+       
+          <template #footer>
+            <div class="dialog-footer">
+              <el-button @click="dialogVisible = false" :icon="Close">取消</el-button>
+              <el-button type="primary" :icon="Check" @click="addUser(false)">
+                确认创建
+              </el-button>
+            </div>
+          </template>
+        </el-dialog>
+      
+
+       
+    </div>
+</template>
+
+<style lang="scss">
+
+    .reset-gray-head{
+      background:#f3f4f6;
+      .el-table__cell,th{
+        background:#f3f4f6!important;
+      }
+      
+    }
+    
+
+</style>
+
+<style lang="scss" scoped>
+   
+    .table-user-wrap{
+      display:flex;
+      align-items: center;
+      .left-part{
+        width:30px;
+        height:30px;
+        background:red;
+        border-radius: 50%;
+        margin-right:6px;
+      }
+    }
+    .common-top{
+      display:flex;
+      justify-content: space-between;
+    }
+    .common-page-wrap{
+      padding:10px 10px 10px 10px;
+      display: flex;
+      justify-content: space-between;
+    }
+    .sub-title{
+        color:#4B5563;
+        font-size:16px;
+        margin-bottom:24px;
+    }
+    .title{
+        color:#1F2937;
+        font-size:24px;
+        font-weight:600;
+    }
+
+    .common-content{
+        background:#fff;
+        .common-search-box{
+          padding:10px 10px 10px 10px;
+          display:flex;
+          justify-content: space-between;
+          align-items: center;
+        }
+    }
+   
+</style>

src/views/stationman/index.vue

@@ -1,5 +1,377 @@
+<script setup lang="ts">
+import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
+
+interface RuleForm {
+  name: string
+  region: string
+  count: string
+  date1: string
+  date2: string
+  delivery: boolean
+  location: string
+  type: string[]
+  resource: string
+  desc: string
+}
+
+const formSize = ref<ComponentSize>('default')
+const ruleFormRef = ref<FormInstance>()
+const ruleForm = reactive<RuleForm>({
+  name: 'Hello',
+  region: '',
+  count: '',
+  date1: '',
+  date2: '',
+  delivery: false,
+  location: '',
+  type: [],
+  resource: '',
+  desc: '',
+})
+
+
+const rules = reactive<FormRules<RuleForm>>({
+  name: [
+    { required: true, message: 'Please input Activity name', trigger: 'blur' },
+    { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
+  ],
+  region: [
+    {
+      required: true,
+      message: 'Please select Activity zone',
+      trigger: 'change',
+    },
+  ],
+  count: [
+    {
+      required: true,
+      message: 'Please select Activity count',
+      trigger: 'change',
+    },
+  ],
+  date1: [
+    {
+      type: 'date',
+      required: true,
+      message: 'Please pick a date',
+      trigger: 'change',
+    },
+  ],
+  date2: [
+    {
+      type: 'date',
+      required: true,
+      message: 'Please pick a time',
+      trigger: 'change',
+    },
+  ],
+  location: [
+    {
+      required: true,
+      message: 'Please select a location',
+      trigger: 'change',
+    },
+  ],
+  type: [
+    {
+      type: 'array',
+      required: true,
+      message: 'Please select at least one activity type',
+      trigger: 'change',
+    },
+  ],
+  resource: [
+    {
+      required: true,
+      message: 'Please select activity resource',
+      trigger: 'change',
+    },
+  ],
+  desc: [
+    { required: true, message: 'Please input activity form', trigger: 'blur' },
+  ],
+})
+
+const submitForm = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      console.log('submit!')
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
+
+
+import { ref,onMounted,reactive } from 'vue'
+import { Search,Download,Tools,Plus,Check,Close } from "@element-plus/icons-vue";
+let searchWord=ref('')
+let dialogVisible=ref(false)
+let logtitle=ref('新增用户')
+const tableData = [
+  {
+    date: '2016-05-03',
+    name: '东大门站',
+    latlon: '116.404, 39.915',
+    by:'朝阳区',
+    desc:'位于东大门商圈附近的主要换乘站',
+    status:'活跃'
+  },
+  {
+    date: '2016-05-03',
+    name: '西站广场',
+    latlon: '116.404, 39.915',
+    by:'海淀区',
+    desc:'西站地区重要交通枢纽',
+    status:'活跃'
+  },
+  {
+    date: '2016-05-03',
+    name: '科技园站',
+    latlon: '116.404, 39.915',
+    by:'海淀区',
+    desc:'服务中关村科技园区的重要站点',
+    status:'活跃'
+  },
+  {
+    date: '2016-05-03',
+    name: '金融中心站',
+    latlon: '116.404, 39.915',
+    by:'朝阳区',
+    desc:'CBD核心区域重要站点',
+    status:'活跃'
+  },
+  {
+    date: '2016-05-03',
+    name: '体育中心站',
+    latlon: '116.446, 39.932',
+    by:'海淀区',
+    desc:'西站地区重要交通枢纽',
+    status:'活跃'
+  }
+]
+
+let activeName=ref('first')
+
+const addUser=val=>{
+  dialogVisible.value=val
+}
+
+onMounted(()=>{
+  
+})
+
+
+</script>
 <template>
     <div>
-        stationman
+       <div class="common-top">
+        <div class="left-part">
+          <div class="title">
+            站点管理
+          </div>
+          <div class="sub-title">
+            管理系统内所有站点信息
+          </div>
+        </div>
+        <div class="right-part">
+          <el-button type="primary" :icon="Plus" @click="addUser(true)">新增用户</el-button>
+        </div>
+       </div>
+
+       <div class="common-content">
+                    <div class="common-search-box">
+                      <div class="left-part">
+                        <el-input
+                          v-model="searchWord"
+                         
+                          placeholder="搜索站点..."
+                          style="width:260px"
+                        >
+                        
+                          <template #append>
+                            <el-button :icon="Search" />
+                          </template>
+                        </el-input>
+                        <el-button style="margin-left:10px">筛选</el-button>
+                      </div>
+                      <div class="right-part">
+                        <el-button :icon="Tools">筛选</el-button>
+                        <el-button :icon="Download">导出</el-button>
+                        
+                      </div>
+                    </div>
+                    <el-table header-row-class-name="reset-gray-head" :data="tableData"  style="width: 100%">
+                        <el-table-column prop="name" label="站点名称">
+                        
+                        </el-table-column>
+                        <el-table-column prop="latlon" label="经纬度" />
+                        <el-table-column prop="by" label="所属区域">
+                          
+                        </el-table-column>
+                        <el-table-column prop="desc" label="描述">
+                         
+                        </el-table-column>
+                        <el-table-column prop="date" label="创建时间" />
+                        <el-table-column fixed="right" label="操作" min-width="120">
+                          <template #default>
+                            <el-button link type="primary" size="small" @click="handleClick">
+                              编辑
+                            </el-button>
+                            <el-button link type="danger" size="small">删除</el-button>
+                          </template>
+                        </el-table-column>
+                    </el-table>
+
+                    <div class="common-page-wrap">
+                      <div class="left-part">
+                        <span>显示第 </span>
+                        <span>1 </span>
+                        <span>至 </span>
+                        <span>10 </span>
+                        <span>条, </span>
+                        <span>共1000条记录 </span>
+                      </div>
+                      <div class="right-part">
+                        <el-pagination background layout="prev, pager, next" :total="1000" />
+                      </div>
+                    </div>
+                  </div> 
+
+
+
+
+        <el-dialog
+          v-model="dialogVisible"
+          :title="logtitle"
+          width="600"
+        >
+
+
+
+
+        <el-form
+          ref="ruleFormRef"
+          :model="ruleForm"
+          label-position="top"
+          :rules="rules"
+          label-width="auto"
+          :size="formSize"
+          status-icon
+        >
+          <el-row :gutter="20">
+            <el-col :span="12">
+              <el-form-item label="用户名称" prop="name">
+                <el-input v-model="ruleForm.name" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="手机号码" prop="name">
+                <el-input v-model="ruleForm.name" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="身份证号" prop="name">
+                <el-input v-model="ruleForm.name" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="12">
+              <el-form-item label="用户角色" prop="name">
+                <el-input v-model="ruleForm.name" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="24">
+              <el-form-item label="用户状态" prop="name">
+                <el-input v-model="ruleForm.name" />
+              </el-form-item>
+            </el-col>
+            <el-col :span="24">
+              <el-form-item label="备注信息" prop="name">
+                <el-input v-model="ruleForm.name" type="textarea" />
+              </el-form-item>
+            </el-col>
+          </el-row>
+         
+    
+         
+         
+         
+        </el-form>
+
+
+
+          
+       
+          <template #footer>
+            <div class="dialog-footer">
+              <el-button @click="dialogVisible = false" :icon="Close">取消</el-button>
+              <el-button type="primary" :icon="Check" @click="addUser(false)">
+                确认创建
+              </el-button>
+            </div>
+          </template>
+        </el-dialog>
+      
+
+       
     </div>
-</template>
+</template>
+
+<style lang="scss">
+
+    .reset-gray-head{
+      background:#f3f4f6;
+      .el-table__cell,th{
+        background:#f3f4f6!important;
+      }
+      
+    }
+    
+
+</style>
+
+<style lang="scss" scoped>
+   
+    .table-user-wrap{
+      display:flex;
+      align-items: center;
+      .left-part{
+        width:30px;
+        height:30px;
+        background:red;
+        border-radius: 50%;
+        margin-right:6px;
+      }
+    }
+    .common-top{
+      display:flex;
+      justify-content: space-between;
+    }
+    .common-page-wrap{
+      padding:10px 10px 10px 10px;
+      display: flex;
+      justify-content: space-between;
+    }
+    .sub-title{
+        color:#4B5563;
+        font-size:16px;
+        margin-bottom:24px;
+    }
+    .title{
+        color:#1F2937;
+        font-size:24px;
+        font-weight:600;
+    }
+
+    .common-content{
+        background:#fff;
+        .common-search-box{
+          padding:10px 10px 10px 10px;
+          display:flex;
+          justify-content: space-between;
+          align-items: center;
+        }
+    }
+   
+</style>