1. 添加后台管理实现：对项目、设备、人员、传感器的增删改查

2. 集成数据查询功能

package.json

@@ -11,7 +11,9 @@
     "ant-design-vue": "^1.7.0",
     "axios": "^0.21.0",
     "core-js": "^3.6.5",
+    "echarts": "^4.9.0",
     "ol": "^6.4.3",
+    "v-charts": "^1.19.0",
     "vue": "^2.6.11",
     "vue-router": "^3.4.8",
     "vuex": "^3.5.1"

src/components/Main.vue

@@ -2,8 +2,8 @@
   <a-layout>
     <a-layout-header style="height: 110px;">
       <a-row> 
-        <a-col :span="12">
+        <a-col :span="12" style="color:white;">
-          水质监测平台
+          <span class="w-title">水质监测平台</span>
         </a-col>
         <a-col :span="2" :offset="10">
           <a-button icon="logout" @click="logout" >登出</a-button>
@@ -11,34 +11,27 @@
          </a-row>
       <a-row>
         <a-menu v-model="current" mode="horizontal" theme="dark" @click="handleMenuClick">
-          <a-menu-item key="map">
+          <a-menu-item key="map-layout">
             <icon-font type="wt-iconmap" />主页
           </a-menu-item>
           <a-sub-menu>
             <span slot="title" class="submenu-title-wrapper"
               ><icon-font type="wt-iconsearch" />数据查询</span
             >
-            <a-menu-item-group title="Item 1">
+            <a-menu-item key="detail-search"> <icon-font type="wt-iconxiangxi" />详细数据 </a-menu-item>
-              <a-menu-item key="search"> 详细信息 </a-menu-item>
-              <a-menu-item key="setting:2"> Option 2 </a-menu-item>
-            </a-menu-item-group>
-            <a-menu-item-group title="Item 2">
-              <a-menu-item key="setting:3"> Option 3 </a-menu-item>
-              <a-menu-item key="setting:4"> Option 4 </a-menu-item>
-            </a-menu-item-group>
           </a-sub-menu>
           <a-menu-item key="analysis">
-            <icon-font type="wt-iconmap" />图形分析
+            <icon-font type="wt-iconfenxi" />图形分析
           </a-menu-item>
           <a-menu-item key="admin" v-if="isAdmin">
-            <icon-font type="wt-iconmap" />后台管理
+            <icon-font type="wt-iconhoutai" />后台管理
           </a-menu-item>
 
         </a-menu>
       </a-row>
     </a-layout-header>
     <a-layout-content>
-      <keep-alive >
+     <keep-alive>
       <component :is="currentComp"/>
       </keep-alive>
     </a-layout-content>
@@ -49,7 +42,9 @@
 
 import IconFont from '@/components/icon'
 import MapLayout from '@/components/map/Index'
-import Search from '@/components/search/Index'
+import DetailSearch from '@/components/search/Index'
+import Analysis from '@/components/analysis/Index'
+
 import Logs from '@/components/logs/Index'
 import Admin from '@/components/admin/Index'
 import { logout } from '@/utils/http'
@@ -57,13 +52,14 @@ export default {
   components: {
     'icon-font':IconFont,
     'map-layout':MapLayout,
-    'search':Search,
+    'detail-search':DetailSearch,
+    'analysis':Analysis,
     // 'logs':Logs,
     'admin':Admin
   },
   data() {
     return {
-      current:['map'],
+      current:['map-layout'],
       currentComp: 'map-layout'
     };
   },
@@ -95,4 +91,11 @@ export default {
 .ant-layout-content {
   height: calc(100vh - 110px);
 }
+.w-title{
+    color: white;
+    line-height: 50px;
+    font-size: 24px;
+    font-weight: 600;
+
+}
 </style>

src/components/admin/Index.vue

@@ -20,6 +20,10 @@
             <a-icon type="inbox" />
             <span>项目</span>
           </a-menu-item>
+           <a-menu-item key="user-table">
+            <a-icon type="user" />
+            <span>人员</span>
+          </a-menu-item>
         </a-menu>
       </a-layout-sider>
       <a-layout>
@@ -35,13 +39,14 @@
 import SensorTable from "./tables/SensorTable";
 import DeviceTable from './tables/DeviceTable';
 import ProjectTable from './tables/ProjectTable';
-
+import UserTable from './tables/UserTable';
 import { getData, URL_MAP } from "@/utils/http";
 export default {
   components: {
     'sensor-table':SensorTable,
     'device-table':DeviceTable,
-    'project-table':ProjectTable
+    'project-table':ProjectTable,
+    'user-table':UserTable
   },
   data() {
     return {

src/components/admin/forms/DeviceDetail.vue

@@ -0,0 +1,136 @@
+<template>
+  <div>
+    <a-form-model :model="form">
+      <a-form-model-item label="设备ID">
+        <a-input :disabled="isCreate" v-model="form._id" />
+      </a-form-model-item>
+      <a-form-model-item label="设备名称">
+        <a-input v-model="form.device_name" />
+      </a-form-model-item>
+      <a-form-model-item label="设备型号">
+        <a-input v-model="form.device_uint" />
+      </a-form-model-item>
+      <a-form-model-item label="是否公开">
+        <a-switch v-model="form.isanyone" />
+      </a-form-model-item>
+      <a-form-model-item label="传感器">
+        <a-select
+          mode="multiple"
+          v-model="form.sensors"
+          @search="searchSensors"
+          :filter-option="false"
+          :not-found-content="fetching ? undefined : null"
+        >
+          <a-spin v-if="fetching" slot="notFoundContent" size="small" />
+          <a-select-option v-for="u in sensors" :key="u._id">
+            {{ u.name }}
+          </a-select-option>
+        </a-select>
+      </a-form-model-item>
+      <a-form-model-item label="所属项目">
+        <a-select
+            show-search
+          v-model="form.project"
+          @search="searchPorjects"
+          :filter-option="false"
+          :not-found-content="fetching ? undefined : null"
+        >
+          <a-spin v-if="fetching" slot="notFoundContent" size="small" />
+          <a-select-option v-for="u in projects" :key="u._id">
+            {{ u.name }}
+          </a-select-option>
+        </a-select>
+      </a-form-model-item>
+      <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
+        <a-button type="primary" @click="onSubmit"> 确认 </a-button>
+        <a-button style="margin-left: 10px" @click="$emit('cancle')">
+          关闭
+        </a-button>
+      </a-form-model-item>
+    </a-form-model>
+  </div>
+</template>
+
+<script>
+import { mergeList } from "@/utils/utils";
+import { getData, URL_MAP } from "@/utils/http";
+
+export default {
+  data() {
+    return {
+      form: {
+        _id: "",
+        device_name: "",
+        device_uint: "",
+        sensors: [],
+        project:'',
+        state: 0,
+        isanyone: false,
+        position: "",
+      },
+      sensors: [],
+      projects: [],
+      fetching: false,
+      isCreate: true,
+    };
+  },
+  props: {
+    detail: Object,
+  },
+  methods: {
+    onSubmit() {
+      this.$emit("ok", this.form);
+    },
+    async searchPorjects(value) {
+      this.fetching = true;
+      try {
+        let data = await getData(URL_MAP.PROJECT_LIST, {
+          name__icontains: name,
+        });
+        this.projects = mergeList(data.data, this.projects);
+      } catch (e) {
+        console.log(e);
+      } finally {
+        this.fetching = false;
+      }
+    },
+    async searchSensors(name) {
+      this.fetching = true;
+      try {
+        let data = await getData(URL_MAP.SENSOR_LIST, {
+          name__icontains: name,
+        });
+        this.sensors = mergeList(data.data, this.sensors);
+      } catch (e) {
+        console.log(e);
+      } finally {
+        this.fetching = false;
+      }
+    },
+  },
+  mounted() {
+    for (let key in this.form) {
+      this.form[key] = this.detail[key];
+    }
+    this.isCreate = !!this.form._id
+    if(this.detail.sensors) {
+        this.form.sensors = this.form.sensors.map((v) => v._id);
+        this.sensors = this.detail.sensors
+    }
+    else{
+        this.form.sensors = []
+        this.sensors = []
+    }
+    if(this.detail.project) {
+        this.form.project = this.form.project._id
+        this.projects = [this.detail.project,];
+    }else{
+        this.form.project = null
+        this.projects = []
+    }
+  },
+};
+</script>
+
+<style>
+</style>

src/components/admin/forms/ProjectDetail.vue

@@ -0,0 +1,118 @@
+<template>
+  <div>
+    <a-form-model :model="form">
+      <a-form-model-item label="项目名">
+        <a-input v-model="form.name" />
+      </a-form-model-item>
+      <a-form-model-item label="管理员">
+          <a-select
+            mode="multiple"
+            v-model="form.managers"
+            @search="searchManagers"
+            :filter-option="false"
+            :not-found-content="fetching ? undefined : null"
+            >
+            <a-spin v-if="fetching" slot="notFoundContent" size="small" />
+            <a-select-option v-for="u in managers" :key="u._id">
+                {{u.name || u.username}}
+            </a-select-option>
+          </a-select>
+      </a-form-model-item>
+      <a-form-model-item label="普通用户">
+          <a-select
+            mode="multiple"
+            v-model="form.normals"
+            @search="searchNormals"
+            :filter-option="false"
+            :not-found-content="fetching ? undefined : null"
+            >
+            <a-spin v-if="fetching" slot="notFoundContent" size="small" />
+            <a-select-option v-for="u in normals" :key="u._id">
+                {{u.name || u.username}}
+            </a-select-option>
+          </a-select>
+      </a-form-model-item>
+      <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
+      <a-button type="primary" @click="onSubmit">
+        确认
+      </a-button>
+      <a-button style="margin-left: 10px;" @click="$emit('cancle')">
+        关闭
+      </a-button>
+    </a-form-model-item>
+    </a-form-model>
+  </div>
+</template>
+
+<script>
+import { mergeList } from '@/utils/utils';
+import { getData, URL_MAP } from '@/utils/http';
+
+export default {
+    data() {
+        return {
+            form: {
+                _id:'',
+                name:'',
+                managers:[],
+                normals:[]
+            },
+            managers: [],
+            normals: [],
+            fetching: false,
+        }
+    },
+    props: {
+        detail:Object
+    },
+    methods: {
+        onSubmit() {
+            this.$emit('ok', this.form)
+        },
+        async searchManagers(value) {
+            this.fetching = true
+            try{
+                let data = await getData(URL_MAP.USER_LIST, {
+                    'username__icontains':name,
+                    'permission__gte':0x0ff
+                })
+                this.managers = mergeList(data.data, this.managers)
+            }
+            catch(e) {
+                console.log(e)
+            }finally{
+                this.fetching = false
+            }
+        },
+        async searchNormals(name, permission) {
+            this.fetching = true
+            try{
+                let data = await getData(URL_MAP.USER_LIST, {
+                    'username__icontains':name,
+                    'permission__gte':0x00f
+                })
+                this.normals = mergeList(data.data, this.normals)
+            }
+            catch(e) {
+                console.log(e)
+            }finally{
+                this.fetching = false
+            }
+        },
+
+
+    },
+    mounted() {
+        for(let key in this.form) {
+            this.form[key] = this.detail[key]
+        }
+        this.form.managers = this.form.managers.map(v => v._id)
+        this.form.normals = this.form.normals.map(v => v._id)
+        this.managers = this.detail.managers
+        this.normals = this.detail.normals
+    }
+};
+</script>
+
+<style>
+</style>

src/components/admin/forms/SensorDetai.vue

@@ -0,0 +1,57 @@
+<template>
+  <div>
+    <a-form-model :model="form">
+      <a-form-model-item label="名称">
+        <a-input v-model="form.name" />
+      </a-form-model-item>
+      <a-form-model-item label="参数名">
+        <a-input v-model="form.param_name" />
+      </a-form-model-item>
+      <a-form-model-item label="参数key">
+        <a-input v-model="form.param_key" />
+      </a-form-model-item>
+      <a-form-model-item label="单位">
+        <a-input v-model="form.uint" />
+      </a-form-model-item>
+     
+      <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
+        <a-button type="primary" @click="onSubmit"> 确认 </a-button>
+        <a-button style="margin-left: 10px" @click="$emit('cancle')">
+          关闭
+        </a-button>
+      </a-form-model-item>
+    </a-form-model>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      form: {
+        _id: "",
+        name: "",
+        param_name: "",
+        param_key: '',
+        uint:''
+      },
+    };
+  },
+  props: {
+    detail: Object,
+  },
+  methods: {
+    onSubmit() {
+      this.$emit("ok", this.form);
+    }
+  },
+  mounted() {
+    for (let key in this.form) {
+      this.form[key] = this.detail[key];
+    }
+  },
+};
+</script>
+
+<style>
+</style>

src/components/admin/forms/UserDetail.vue

@@ -0,0 +1,73 @@
+<template>
+  <div>
+    <a-form-model :model="form">
+      <a-form-model-item label="用户名">
+        <a-input v-model="form.username" />
+      </a-form-model-item>
+      <a-form-model-item label="权限">
+        <a-select
+            v-model="form.permission"
+        >
+            <a-select-option v-for="p in permissionMaps" :key="p.key">
+                {{p.name}}
+            </a-select-option>
+        </a-select>
+      </a-form-model-item>
+     
+      <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
+        <a-button type="primary" @click="onSubmit"> 确认 </a-button>
+        <a-button style="margin-left: 10px" @click="$emit('cancle')">
+          关闭
+        </a-button>
+      </a-form-model-item>
+    </a-form-model>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      form: {
+        _id: "",
+        username: "",
+        permission: 0x000,
+      },
+      permissionMaps: [
+          {
+              key:0xfff,
+              name: '超级管理员',
+          },
+          {
+              key:0x0ff,
+              name: '项目管理员',
+          },
+          {
+              key:0x00f,
+              name: '普通用户',
+          },
+          {
+              key:0x000,
+              name: '游客',
+          }
+      ],
+    };
+  },
+  props: {
+    detail: Object,
+  },
+  methods: {
+    onSubmit() {
+      this.$emit("ok", this.form);
+    }
+  },
+  mounted() {
+    for (let key in this.form) {
+      this.form[key] = this.detail[key];
+    }
+  },
+};
+</script>
+
+<style>
+</style>

src/components/admin/tables/DeviceTable.vue

@@ -1,5 +1,8 @@
 <template>
-  <div>
+  <div style="margin: 20px">
+    <a-row style="margin-bottom: 20px">
+      <a-button type="primary" @click="handleCreate">添加</a-button>
+    </a-row>
     <a-table
       :columns="tableCols"
       :data-source="tableRows"
@@ -7,107 +10,166 @@
       :rowKey="idName"
       @change="handleTableChange"
     >
-    <span slot="anyone" slot-scope="isanyone">
+      <span slot="anyone" slot-scope="isanyone">
-      <a-tag v-if="isanyone">
+        <a-tag v-if="isanyone"> 是 </a-tag>
-        是  
+        <a-tag v-else> 否 </a-tag>
-      </a-tag>
+      </span>
-      <a-tag v-else>
+      <span slot="project" slot-scope="project">
-        否
+        <a-tag v-if="project !== null">
-      </a-tag>
+          {{ project.name }}
-    </span>
+        </a-tag>
-    <span slot="project" slot-scope="project">
+      </span>
-      <a-tag v-if="project !== null">
+      <span slot="action" slot-scope="text, record">
-        {{  project.name}}
+        <a-button size="small" type="link" @click="() => handleDetail(record)"
-      </a-tag>
+          >查看</a-button
-    </span>
+        >
-    <span slot="action" slot-scope="text, record">
+        <a-divider type="vertical" />
-      <a-button size="small" type="link" @click="() => handleDetail(record)" >查看</a-button>
+        <a-button type="danger" size="small" @click="() => handleDelete(record)"
-      <a-divider type="vertical" />
+          >删除</a-button
-      <a-button type="danger" size="small" @click="() => handleDelete(record)" >删除</a-button>
+        >
-    </span>
+      </span>
     </a-table>
+    <a-modal
+      v-model="visible"
+      :title="isCreate ? '添加设备' : '查看设备'"
+      :destroyOnClose="true"
+      :footer="null"
+    >
+      <device-detail
+        :detail="record"
+        @ok="handleOk"
+        @cancle="visible = false"
+      />
+    </a-modal>
   </div>
 </template>
 
 <script>
-import { getData, URL_MAP } from '@/utils/http'
+import { deleteJSON, patchJSON, postJSON, getData, URL_MAP } from "@/utils/http";
+import DeviceDetail from "../forms/DeviceDetail.vue";
 export default {
+  components: { DeviceDetail },
   data() {
     return {
       tableRows: [],
       tableCols: [
         {
-          dataIndex: '_id',
+          dataIndex: "_id",
-          key: '_id',
+          key: "_id",
-          title: '设备ID'
+          title: "设备ID",
         },
         {
-          dataIndex: 'device_name',
+          dataIndex: "device_name",
-          key: 'device_name',
+          key: "device_name",
-          title: '设备名称'
+          title: "设备名称",
         },
         {
-          dataIndex: 'device_uint',
+          dataIndex: "device_uint",
-          key: 'device_uint',
+          key: "device_uint",
-          title: '设备型号'
+          title: "设备型号",
         },
         {
-          dataIndex: 'isanyone',
+          dataIndex: "isanyone",
-          key: 'isanyone',
+          key: "isanyone",
-          title: '是否公开',
+          title: "是否公开",
-          scopedSlots: { customRender: 'anyone' },
+          scopedSlots: { customRender: "anyone" },
         },
         {
-          dataIndex: 'project',
+          dataIndex: "project",
-          key: 'project',
+          key: "project",
-          title: '所属项目',
+          title: "所属项目",
-          scopedSlots:  { customRender: 'project' }
+          scopedSlots: { customRender: "project" },
         },
         {
-          key: 'action',
+          key: "action",
-          title: '操作',
+          title: "操作",
-          scopedSlots: { customRender: 'action' },
+          scopedSlots: { customRender: "action" },
-        }
+        },
       ],
       pages: {},
       loading: false,
       listUrl: URL_MAP.DEVICE_LIST,
       detailUrl: URL_MAP.DEVICE_DETAIL,
-      idName: '_id'
+      idName: "_id",
+      visible: false,
+      record: {},
+      isCreate: false,
     };
   },
   methods: {
     handleTableChange(pagination, filters, sorter) {
-      console.log(pagination)
+      console.log(pagination);
     },
     async fetch(params) {
+      this.loading = true;
+      try {
+        let results = await getData(this.listUrl, params);
+        let data = results.data;
+        const pagination = { ...this.pages };
+        pagination.total = data.length;
+        this.tableRows = data;
+        this.pages = pagination;
+      } catch (e) {
+        console.log(e);
+      } finally {
+        this.loading = false;
+      }
+    },
+    handleDetail(record) {
+      // console.log(record)
+      this.visible = true;
+      this.record = record;
+    },
+    async handleDelete(record) {
       this.loading = true
       try{
-        let results = await getData(this.listUrl, params)
+        await deleteJSON(URL_MAP.DEVICE_DETAIL, { 'id': record._id })
-        let data = results.data
+        await this.fetch({})
-        const pagination = { ...this.pages }
-        pagination.total = data.length
-        this.tableRows = data
-        this.pages = pagination
       }catch(e) 
       {
         console.log(e)
-      }finally{
+      }
+      finally{
         this.loading = false
       }
-      
     },
-    handleDetail(record) {
+    async handleOk(form) {
-      console.log(record)
+      this.visible = false;
+      this.loading = true;
+      try {
+        if (!this.isCreate) {
+          form["id"] = form["_id"];
+          console.log(form)
+          let data = await patchJSON(URL_MAP.DEVICE_DETAIL, form);
+        } else {
+          form["id"] = form["_id"];
+          let data = await postJSON(URL_MAP.DEVICE_LIST, form);
+        }
+        await this.fetch({});
+      } catch (e) {
+        console.log(e);
+      } finally {
+        this.isCreate = false;
+        this.loading = false;
+      }
     },
-    handleDelete(record) {
+    handleCreate() {
-      console.log(record)
+      this.isCreate = true
+      this.visible = true
+      this.record = {
+        '_id':'',
+        'device_name':'',
+        'device_uint':'',
+        'isanyone':false,
+        'state':0,
+        'sensors':[],
+        'project':null
+      }
     }
   },
   mounted() {
-    this.fetch({})
+    this.fetch({});
-  }
+  },
-  
 };
 </script>
 

src/components/admin/tables/ProjectTable.vue

@@ -1,5 +1,8 @@
 <template>
-  <div>
+  <div style="margin: 20px">
+    <a-row style="margin-bottom: 20px">
+      <a-button type="primary" @click="handleCreate">添加</a-button>
+    </a-row>
     <a-table
       :columns="tableCols"
       :data-source="tableRows"
@@ -7,95 +10,155 @@
       :rowKey="idName"
       @change="handleTableChange"
     >
-  
+      <span slot="managers" slot-scope="managers">
-    <span slot="managers" slot-scope="managers">
+        <a-tag v-for="item in managers" :key="item._id">
-      <a-tag v-for="item in managers" :key="item._id">
+          {{ item.name }}
-        {{  item.name}}
+        </a-tag>
-      </a-tag>
+      </span>
-    </span>
+      <span slot="normals" slot-scope="normals">
-    <span slot="normals" slot-scope="normals">
+        <a-tag v-for="item in normals" :key="item._id">
-      <a-tag v-for="item in normals" :key="item._id">
+          {{ item.name }}
-        {{  item.name}}
+        </a-tag>
-      </a-tag>
+      </span>
-    </span>
+      <span slot="action" slot-scope="text, record">
-    <span slot="action" slot-scope="text, record">
+        <a-button size="small" type="link" @click="() => handleDetail(record)"
-      <a-button size="small" type="link" @click="() => handleDetail(record)" >查看</a-button>
+          >查看</a-button
-      <a-divider type="vertical" />
+        >
-      <a-button type="danger" size="small" @click="() => handleDelete(record)" >删除</a-button>
+        <a-divider type="vertical" />
-    </span>
+        <a-button type="danger" size="small" @click="() => handleDelete(record)"
+          >删除</a-button
+        >
+      </span>
     </a-table>
+    <a-modal
+      v-model="visible"
+      :title="isCreate ? '添加项目' : '查看项目'"
+      :destroyOnClose="true"
+      :footer="null"
+    >
+      <project-detail
+        :detail="record"
+        @ok="handleOk"
+        @cancle="visible = false"
+      />
+    </a-modal>
   </div>
 </template>
 
 <script>
-import { getData, URL_MAP } from '@/utils/http'
+import { deleteJSON, getData, patchJSON, postJSON, URL_MAP } from "@/utils/http";
+import ProjectDetail from "../forms/ProjectDetail.vue";
+
 export default {
+  components: {
+    ProjectDetail,
+  },
   data() {
     return {
       tableRows: [],
       tableCols: [
         {
-          dataIndex: 'name',
+          dataIndex: "name",
-          key: 'name',
+          key: "name",
-          title: '名称'
+          title: "名称",
         },
         {
-          dataIndex: 'managers',
+          dataIndex: "managers",
-          key: 'managers',
+          key: "managers",
-          title: '管理员',
+          title: "管理员",
-          scopedSlots:  { customRender: 'managers' }
+          scopedSlots: { customRender: "managers" },
         },
         {
-          dataIndex: 'normals',
+          dataIndex: "normals",
-          key: 'normals',
+          key: "normals",
-          title: '普通用户',
+          title: "普通用户",
-          scopedSlots:  { customRender: 'normals' }
+          scopedSlots: { customRender: "normals" },
         },
         {
-          key: 'action',
+          key: "action",
-          title: '操作',
+          title: "操作",
-          scopedSlots: { customRender: 'action' },
+          scopedSlots: { customRender: "action" },
-        }
+        },
       ],
       pages: {},
       loading: false,
       listUrl: URL_MAP.PROJECT_LIST,
       detailUrl: URL_MAP.PROJECT_DETAIL,
-      idName: '_id'
+      idName: "_id",
+      visible: false,
+      record: {},
+      isCreate: false,
     };
   },
   methods: {
     handleTableChange(pagination, filters, sorter) {
-      console.log(pagination)
+      console.log(pagination);
     },
     async fetch(params) {
+      this.loading = true;
+      try {
+        let results = await getData(this.listUrl, params);
+        let data = results.data;
+        const pagination = { ...this.pages };
+        pagination.total = data.length;
+        this.tableRows = data;
+        this.pages = pagination;
+      } catch (e) {
+        console.log(e);
+      } finally {
+        this.loading = false;
+      }
+    },
+    handleDetail(record) {
+      this.visible = true;
+      this.record = record;
+    },
+    async handleDelete(record) {
       this.loading = true
       try{
-        let results = await getData(this.listUrl, params)
+        await deleteJSON(URL_MAP.PROJECT_DETAIL, { 'id': record._id })
-        let data = results.data
+        await this.fetch({})
-        const pagination = { ...this.pages }
-        pagination.total = data.length
-        this.tableRows = data
-        this.pages = pagination
       }catch(e) 
       {
         console.log(e)
-      }finally{
+      }
+      finally{
         this.loading = false
       }
       
     },
-    handleDetail(record) {
+    async handleOk(form) {
-      console.log(record)
+      this.visible = false;
+      this.loading = true;
+      try {
+        if (!this.isCreate) {
+          form["id"] = form["_id"];
+          let data = await patchJSON(URL_MAP.PROJECT_DETAIL, form);
+        } else {
+          form["_id"] = undefined;
+          let data = await postJSON(URL_MAP.PROJECT_LIST, form);
+        }
+        await this.fetch({});
+      } catch (e) {
+        console.log(e);
+      } finally {
+        this.isCreate = false;
+        this.loading = false;
+      }
+    },
+    handleCreate() {
+      this.isCreate = true;
+      this.visible = true
+      this.record = {
+        name: null,
+        managers: [],
+        normals: [],
+      };
     },
-    handleDelete(record) {
-      console.log(record)
-    }
   },
   mounted() {
-    this.fetch({})
+    this.fetch({});
-  }
+  },
-  
 };
 </script>
 

src/components/admin/tables/SensorTable.vue

@@ -1,5 +1,8 @@
 <template>
-  <div>
+  <div style="margin: 20px">
+    <a-row style="margin-bottom: 20px">
+      <a-button type="primary" @click="handleCreate">添加</a-button>
+    </a-row>
     <a-table
       :columns="tableCols"
       :data-source="tableRows"
@@ -13,12 +16,27 @@
       <a-button type="danger" size="small" @click="() => handleDelete(record)" >删除</a-button>
     </span>
     </a-table>
+    <a-modal
+      v-model="visible"
+      :title="isCreate ? '添加设备' : '查看设备'"
+      :destroyOnClose="true"
+      :footer="null"
+    >
+      <sensor-detai
+        :detail="record"
+        @ok="handleOk"
+        @cancle="visible = false"
+      />
+    </a-modal>
   </div>
 </template>
 
 <script>
-import { getData, URL_MAP } from '@/utils/http'
+import { deleteJSON, patchJSON, postJSON, getData, URL_MAP } from '@/utils/http'
+import SensorDetai from '../forms/SensorDetai.vue';
+
 export default {
+  components: { SensorDetai },
   data() {
     return {
       tableRows: [],
@@ -38,6 +56,11 @@ export default {
           key: 'param_key',
           title: '参数key'
         },
+        {
+          dataIndex: 'uint',
+          key: 'uint',
+          title: '单位'
+        },
         {
           key: 'action',
           title: '操作',
@@ -48,7 +71,10 @@ export default {
       loading: false,
       listUrl: URL_MAP.SENSOR_LIST,
       detailUrl: URL_MAP.SENSOR_DETAIL,
-      idName: '_id'
+      idName: '_id',
+      visible: false,
+      record: {},
+      isCreate: false,
     };
   },
   methods: {
@@ -73,10 +99,53 @@ export default {
       
     },
     handleDetail(record) {
-      console.log(record)
+      //  console.log(record)
+      this.visible = true;
+      this.record = record;
     },
-    handleDelete(record) {
+    async handleDelete(record) {
-      console.log(record)
+       this.loading = true
+      try{
+        await deleteJSON(URL_MAP.SENSOR_DETAIL, { 'id': record._id })
+        await this.fetch({})
+      }catch(e) 
+      {
+        console.log(e)
+      }
+      finally{
+        this.loading = false
+      }
+    },
+     async handleOk(form) {
+      this.visible = false;
+      this.loading = true;
+      try {
+        if (!this.isCreate) {
+          form["id"] = form["_id"];
+          let data = await patchJSON(URL_MAP.SENSOR_DETAIL, form);
+        } else {
+          form["id"] = undefined;
+          form['_id'] = undefined;
+          let data = await postJSON(URL_MAP.SENSOR_LIST, form);
+        }
+        await this.fetch({});
+      } catch (e) {
+        console.log(e);
+      } finally {
+        this.isCreate = false;
+        this.loading = false;
+      }
+    },
+    handleCreate() {
+      this.isCreate = true
+      this.visible = true
+      this.record = {
+        '_id':'',
+        'param_name':'',
+        'param_key':'',
+        'name':'',
+        'uint':''
+      }
     }
   },
   mounted() {

src/components/admin/tables/UserTable.vue

@@ -0,0 +1,157 @@
+<template>
+  <div style="margin: 20px">
+      <a-row style="margin-bottom: 20px">
+      <a-button type="primary" @click="handleCreate">添加</a-button>
+    </a-row>
+    <a-table
+      :columns="tableCols"
+      :data-source="tableRows"
+      :loading="loading"
+      :rowKey="idName"
+      @change="handleTableChange"
+    >
+    <span slot="permission" slot-scope="permission">
+      <a-tag >
+          {{ permissionMap[permission] }}
+      </a-tag>
+    </span>
+    <span slot="action" slot-scope="text, record">
+      <a-button size="small" type="link" @click="() => handleDetail(record)" >查看</a-button>
+      <a-divider type="vertical" />
+      <a-button type="danger" size="small" @click="() => handleDelete(record)" >删除</a-button>
+    </span>
+    </a-table>
+     <a-modal
+      v-model="visible"
+      :title="isCreate ? '添加用户' : '添加用户'"
+      :destroyOnClose="true"
+      :footer="null"
+    >
+      <user-detail
+        :detail="record"
+        @ok="handleOk"
+        @cancle="visible = false"
+      />
+    </a-modal>
+  </div>
+</template>
+
+<script>
+import { deleteJSON, getData, patchJSON, postJSON, URL_MAP } from '@/utils/http'
+import UserDetail from '../forms/UserDetail.vue';
+export default {
+  components: { UserDetail },
+  data() {
+    return {
+      tableRows: [],
+      tableCols: [
+        {
+          dataIndex: 'username',
+          key: 'username',
+          title: '用户名'
+        },
+        {
+          dataIndex: 'permission',
+          key: 'permission',
+          title: '用户权限',
+          scopedSlots: { customRender: 'permission' },
+        },
+        {
+          key: 'action',
+          title: '操作',
+          scopedSlots: { customRender: 'action' },
+        }
+      ],
+      permissionMap: {
+          0xfff:'超级管理员',
+          0x0ff:'项目管理员',
+          0x00f:'普通用户',
+          0x000:'游客'
+      },
+      pages: {},
+      loading: false,
+      listUrl: URL_MAP.USER_LIST,
+      detailUrl: URL_MAP.DEVICE_DETAIL,
+      idName: '_id',
+      visible: false,
+      record: {},
+      isCreate: false,
+    };
+  },
+  methods: {
+    handleTableChange(pagination, filters, sorter) {
+      console.log(pagination)
+    },
+    async fetch(params) {
+      this.loading = true
+      try{
+        let results = await getData(this.listUrl, params)
+        let data = results.data
+        const pagination = { ...this.pages }
+        pagination.total = data.length
+        this.tableRows = data
+        this.pages = pagination
+      }catch(e)
+      {
+        console.log(e)
+      }finally{
+        this.loading = false
+      }
+      
+    },
+    handleDetail(record) {
+      this.visible = true;
+      this.record = record;
+    },
+     async handleDelete(record) {
+      this.loading = true
+      try{
+        await deleteJSON(URL_MAP.USER_DETAIL, { 'id': record._id })
+        await this.fetch({})
+      }catch(e) 
+      {
+        console.log(e)
+      }
+      finally{
+        this.loading = false
+      }
+      
+    },
+    async handleOk(form) {
+      this.visible = false;
+      this.loading = true;
+      try {
+        if (!this.isCreate) {
+          form["id"] = form["_id"];
+          let data = await patchJSON(URL_MAP.USER_DETAIL, form);
+        } else {
+          form["_id"] = undefined;
+          let data = await postJSON(URL_MAP.USER_LIST, form);
+        }
+        await this.fetch({});
+      } catch (e) {
+        console.log(e);
+      } finally {
+        this.isCreate = false;
+        this.loading = false;
+      }
+    },
+    handleCreate() {
+      this.isCreate = true;
+      this.visible = true
+      this.record = {
+        _id:'',
+        username: '',
+        permission: 0x000
+      };
+    },
+  },
+  mounted() {
+    this.fetch({})
+  }
+  
+};
+</script>
+
+<style>
+</style>

src/components/icon/index.js

@@ -1,7 +1,7 @@
 import { Icon } from 'ant-design-vue';
 
 const IconFont = Icon.createFromIconfontCN({
-    scriptUrl: '//at.alicdn.com/t/font_2205869_701srfkqc5.js', // generated by iconfont.cn
+    scriptUrl: '//at.alicdn.com/t/font_2205869_ablhiuxmevf.js', // generated by iconfont.cn
   });
 
 export default IconFont

src/components/search/Index.vue

@@ -1,18 +1,142 @@
 <template>
   <div>
-    <a-layout>
+    <a-row>
-        <a-layout-sider>Sider</a-layout-sider>
+      <a-col :span="12">
-        <a-layout-content>Content</a-layout-content>
+        <a-range-picker
-    </a-layout>
+          separator="至"
+          :placeholder="['开始日期', '结束日期']"
+          :defaultValue="datetimeRange"
+          @change="dateRangeChange"
+        ></a-range-picker>
+      </a-col>
+      <a-col :span="12">
+        <a-select
+          v-model="device"
+          placeholder="请选择"
+          @change="onDeviceChange"
+         
+        >
+          <a-select-option
+            v-for="item in deviceList"
+            :key="item._id"
+           
+            :value="item._id"
+          > {{item.device_name}} </a-select-option>
+        </a-select>
+      </a-col>
+    </a-row>
+    <a-spin :spinning="loading">
+    <a-row>
+      <SZJCChart :dataRow="waterData" :labelMap="labelMap"></SZJCChart>
+    </a-row>
+    </a-spin>
   </div>
 </template>
 
 <script>
+import SZJCChart from "./SZJCChart";
+import { getData, URL_MAP } from "@/utils/http";
+import Moment from 'moment'
+import { processWater } from '@/utils/water'
 export default {
+  components: {
+    SZJCChart,
+  },
+  data() {
+    return {
+      datetimeRange: [Moment('2020-10-01'), Moment('2020-12-31')],
+      update: false,
+      device: "",
+      deviceList: [],
+      deviceInstance: {},
+      labelMap: {},
+      waterData: [],
+      loading: false,
+    };
+  },
+  watch: {
+    device: function (old, newVal) {
+      for (let i = 0; i < this.deviceList.length; i++) {
+        if (this.deviceList[i]._id === newVal) {
+          this.deviceInstance = this.deviceList[i];
+          break;
+        }
+      }
+    },
+  },
+  methods: {
+    async initSeting() {
+      let sensors = (await getData(URL_MAP.SENSOR_LIST)).data
+      const labelMap = {}
+      sensors.forEach(s => labelMap[s.param_key] = s.param_name)
+      this.labelMap = labelMap
+    },
 
-}
+    async initDevice() {
+      const device_ = (await getData(URL_MAP.DEVICE_LIST)).data;
+      try {
+        const device = device_.filter((item) => item.state == 1);
+        this.deviceList = device;
+        device.forEach((item) => {
+          Object.keys(this.labelMap).forEach((k) => {
+            if (item[k + "_factor"] === undefined) {
+              item[k + "_factor"] = 1;
+            }
+          });
+        });
+        this.device = device[0]._id
+      } catch (e) {
+        console.log(e);
+      }
+    },
+
+    async getData() {
+      this.loading = true
+      try {
+        const params = {
+          'data__collect_time__gte':this.datetimeRange[0].toDate().getTime(),
+          'data__collect_time__lte':this.datetimeRange[1].toDate().getTime(),
+          'device_id':this.device
+        }
+        let data = await getData(URL_MAP.WATER_LIST, params)
+        // console.log(data)
+        this.waterData = processWater(data.data, Object.keys(this.labelMap))
+        // console.log(this.waterData)
+      } catch (e) {
+        console.log(e);
+        this.waterData = [];
+      }
+      finally{
+        this.loading = false
+      }
+    },
+
+    onDeviceChange(value) {
+      this.device = value
+      this.getData();
+    },
+
+    dateRangeChange(dates, dateStrings) {
+      this.datetimeRange = dates;
+      console.log(this.datetimeRange)
+      this.getData();
+    },
+  },
+
+  async mounted() {
+    await this.initSeting();
+    await this.initDevice();
+    this.getData();
+  },
+};
 </script>
 
 <style>
-
+.el-header,
+.el-footer {
+  background-color: #b3c0d1;
+  color: #333;
+  text-align: center;
+  line-height: 60px;
+}
 </style>

src/components/search/SZJCChart.vue

@@ -0,0 +1,112 @@
+<template>
+  <div>
+    <div v-if="hasData">
+      <a-row :gutter="12">
+        <a-col :span="12">
+          <ve-histogram :data="chartData" :settings="chartSetting[0]" :extend="chartExtend"></ve-histogram>
+        </a-col>
+        <a-col :span="12">
+          <ve-histogram :data="chartData" :settings="chartSetting[1]" :extend="chartExtend"></ve-histogram>
+        </a-col>
+      </a-row>
+      <a-row :gutter="12">
+        <a-col :span="12">
+          <ve-histogram :data="chartData" :settings="chartSetting[2]" :extend="chartExtend"></ve-histogram>
+        </a-col>
+        <a-col :span="12">
+          <ve-histogram :data="chartData" :settings="chartSetting[3]" :extend="chartExtend"></ve-histogram>
+        </a-col>
+      </a-row>
+    </div>
+    <div v-else style="text-align: center;margin-top: 100px">
+      无数据！
+    </div>
+  </div>
+</template>
+
+<script>
+// const echarts = require('echarts');
+// import Model from './Model'
+
+export default {
+  // name: "BasicChart",
+  data() {
+    return {
+      chartData: [],
+      chartSetting: [],
+      chartExtend:{
+        // xAxis:{ type: 'time' }
+      }
+    };
+  },
+
+  props: {
+    dataRow: { type: Array, default: () => [] },
+    labelMap: { type: Object, default: () => {} }
+  },
+
+  watch: {
+    dataRow() {
+      this.init()
+    }
+  },
+
+  computed: {
+    hasData() {
+      if(!!this.dataRow && this.dataRow.length > 0){
+        return true
+      }
+      return false
+    }
+  },
+
+  methods: {
+    setData() {
+      if (this.dataRow.length === 0) {
+        return;
+      }
+      this.dataRow.forEach(item => {
+        item.time = new Date(item.time).toLocaleString();
+      });
+
+      const cols = Object.keys(this.dataRow[0]);
+
+      this.chartData = {
+        columns: cols,
+        rows: this.dataRow
+      };
+    },
+
+    setSeting() {
+      this.chartSetting = [];
+      for (let key in this.labelMap) {
+        this.chartSetting.push({
+          labelMap: this.labelMap,
+          metrics: [key],
+          dimension: ["time"]
+        });
+      }
+    },
+
+    init() {
+      this.setData();
+      this.setSeting();
+    }
+  },
+
+  async mounted() {
+    this.init();
+  }
+};
+</script>
+
+<style>
+#setting {
+  display: none;
+}
+
+#chart {
+  width: 100%;
+  height: 100%;
+}
+</style>

src/main.js

@@ -3,10 +3,11 @@ import App from './App.vue'
 import store from './utils/store'
 import router from './utils/router'
 import Antd from 'ant-design-vue';
+import VCharts from 'v-charts'
 import 'ant-design-vue/dist/antd.css';
 
 Vue.use(Antd)
-
+Vue.use(VCharts)
 Vue.config.productionTip = false
 Vue.prototype.$store = store
 

src/utils/http.js

@@ -14,6 +14,9 @@ export const URL_MAP = {
     PROJECT_DETAIL: 'project/detail/',
     SENSOR_LIST: 'sensor/',
     SENSOR_DETAIL: 'sensor/detail/',
+    WATER_LIST: 'v1/api/water_detail/',
+    USER_LIST: 'user/',
+    USER_DETAIL: 'user/detail/'
 
 }
 
@@ -45,7 +48,46 @@ export async function logout()
 }
 
 export async function getData(url, json) {
-    let response = await instance.get(url, json)
+    let response = await instance.get(url, {
+        params: json
+    })
+    
+    let data = await response.data
+    return data
+}
+
+export async function postJSON(url, json) {
+    const headerJSON = {
+        "Content-Type": "application/json"
+      };
+    let response = await instance.post(url, JSON.stringify(json), { headers: headerJSON })
+    let data = await response.data
+    return data
+}
+
+export async function putJSON(url, json) {
+    const headerJSON = {
+        "Content-Type": "application/json"
+      };
+    let response = await instance.put(url, JSON.stringify(json), { headers: headerJSON })
+    let data = await response.data
+    return data
+}
+
+export async function patchJSON(url, json) {
+    const headerJSON = {
+        "Content-Type": "application/json"
+      };
+    let response = await instance.patch(url, JSON.stringify(json), { headers: headerJSON })
+    let data = await response.data
+    return data
+}
+
+export async function deleteJSON(url, json) {
+    const headerJSON = {
+        "Content-Type": "application/json"
+      };
+    let response = await instance.delete(url, { data:json })
     let data = await response.data
     return data
 }

src/utils/utils.js

@@ -1,15 +1,14 @@
-import { getData } from './http'
+export function mergeList(a1=[], a2=[], key='_id') {
-
+    let a = []
-function processDevice(store) 
+    let u = []
-{
+    a1.forEach(uu => {
-    const { deviceList, projectList, sensorList } = store.state
+        a.push(uu)
-    
+        u.push(uu[key])
-    let deviceIdName = {}
+    })
-    let projectIdName = {}
+    a2.forEach(uu => {
-    let sensorIdName = {}
+        if(!u.includes(uu[key])) {
-
+            a.push(uu)
-    deviceList.forEach(d => deviceIdName[d._id] = d.device_name)
+        }
-    projectList.forEach(p => projectIdName[p._id.$oid] = p.name)
+    })
-    sensorList.forEach(s => sensorIdName[s._id.$oid] = s.name)
+    return a
-    
 }

src/utils/water.js

@@ -0,0 +1,27 @@
+export function processWater(water, label){
+
+    const waters = []
+
+    water.forEach( w => {
+        let n = {}
+        label.forEach( key => {
+            if(!!w.data) {
+                n[key] = w.data[key]
+            }
+            
+        } )
+        n['time'] = new Date(w.data.collect_time)
+        waters.push(n)
+    } )
+    return waters
+}
+
+export function processTimeData(dataArr=[], start=new Date(), end=new Date(), step=1) {
+    const data_re = []
+    for(let i=start.getTime(); i<=end.getTime(); i+=step)
+    {
+        data_re.push({
+            
+        })
+    }
+}