init

src/utils/echarts.js

+// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
+import * as echarts from "echarts/core";
+ 
+/** 引入任意图表，这里引入的是柱状图and折线图图表（图表后缀都为 Chart）  */
+import { BarChart, LineChart,PieChart ,PictorialBarChart} from "echarts/charts";
+ 
+// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
+import {
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  DatasetComponent,
+  TransformComponent,
+  LegendComponent,
+  
+} from "echarts/components";
+ 
+// 标签自动布局，全局过渡动画等特性
+import { LabelLayout, UniversalTransition } from "echarts/features";
+ 
+// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
+import { CanvasRenderer } from "echarts/renderers";
+ 
+// 注册必须的组件
+echarts.use([
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  DatasetComponent,
+  TransformComponent,
+  LegendComponent,
+  BarChart,
+  LabelLayout,
+  UniversalTransition,
+  CanvasRenderer,
+  LineChart,
+  PieChart,
+  PictorialBarChart
+]);
+ 
+// 导出
+export default echarts;
\ No newline at end of file

src/utils/index.js

+import dayjs from "dayjs";
+//将获取的数据回显表单
+const setFormValue = (form, content) => {
+  let res = {};
+  for (const key in form) {
+    if (Object.hasOwnProperty.call(content, key)) {
+      res[key] = content[key];
+    } else {
+      res[key] = form[key];
+    }
+  }
+  return res;
+};
+//格式化时间
+const formatTimeWithDayjs = (time, formar = "YYYY-MM-DD HH:mm:ss") => {
+  if (time.indexOf) {
+    if (time.indexOf("-") < 0 && time.indexOf(":") < 0) {
+      time = Number(time);
+    } else {
+      return dayjs(time).format(formar);
+    }
+  }
+  if (time <= 10000000000) {
+    time = time * 1000;
+  }
+  return dayjs(time).format(formar);
+};
+//将上传的文件转为base64
+const file2Base64 = (file) => {
+  return new Promise((resolve) => {
+    // console.log(file);
+    let reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.onload = function(e) {
+      // console.log(e.target.result);
+      resolve(e.target.result);
+      // return e.target.result;
+    };
+  });
+};
+
+export { setFormValue, formatTimeWithDayjs, file2Base64 };

src/utils/request.js

+import axios from "axios";
+import { MessageBox, Message } from "element-ui";
+import store from "@/store";
+// import { getToken } from "@/utils/auth";
+
+const url = [
+  // "/api/v1/app/uploadAppLogo",
+  // "/api/v1/account/changeAvatar",
+  // "/api/v1/account/importFromExcel",
+  // "/api/v1/account/downloadExcelModel",
+  // "/api/v1/basic/logout"
+]; //上传文件接口
+
+// create an axios instance
+const service = axios.create({
+  timeout: 30000,
+  withCredentials: true,
+  credentials: "include",
+  baseURL: process.env.VUE_APP_BASE_API
+});
+
+service.interceptors.request.use(
+  config => {
+    if (store.getters.token && url.indexOf(config.url) < 0) {
+      // let each request carry token
+      // ['X-Token'] is a custom headers key
+      // please modify it according to the actual situation
+      // config.headers["token"] = getToken();
+    } else {
+      if (config.url != "/api/v1/basic/logout") {
+        config.params = {
+          ...config.params
+          // token: getToken()
+        };
+      }
+    }
+    return config;
+  },
+  error => {
+    console.error(error);
+    return Promise.reject(error);
+  }
+);
+
+service.interceptors.response.use(
+  response => {
+    if (response.config.responseType === "blob") return response;
+    const res = response.data;
+    // if the custom code is not 20000, it is judged as an error.
+    if (res.state !== true) {
+      const [code, message] = res.message.split(":");
+      /* 50008: Illegal token; 50012: Other clients logged in; 50014: Token expired; */
+      /* res.code === 50008 || res.code === 50012 || res.code === 50014 */
+      if (code === "AUTH-ERROR-01") {
+        // to re-login
+        MessageBox.confirm("您已注销，可以留在此页，或重新登录", "确认注销", {
+          confirmButtonText: "重新登录",
+          cancelButtonText: "留在此页",
+          type: "warning"
+        }).then(() => {
+          store.dispatch("logout");
+        });
+      } else {
+        Message({
+          message: message || "Error",
+          type: "error",
+          duration: 5 * 1000,
+          showClose: true
+        });
+      }
+      return Promise.reject(new Error(res.message || "Error"));
+    } else {
+      return res.body;
+    }
+  },
+  error => {
+    console.error(error);
+    Message({
+      message:
+        error.message === "Request failed with status code 404"
+          ? "暂无访问权限，请联系管理员"
+          : [
+              "timeout of 5000ms exceeded",
+              "Network Error",
+              "Request failed with status code 404"
+            ].includes(error.message)
+          ? "网络错误，请稍后再试"
+          : error.message,
+      type: "error",
+      duration: 8 * 1000,
+      showClose: true
+    });
+    return Promise.reject(error);
+  }
+);
+
+export default service;

src/views/feedback/index.vue

+<template>
+  <InnerView> </InnerView>
+</template>
+<script>
+export default {
+  name: "feedback",
+  meta: {
+    sort: 5,
+    title: "意见反馈",
+    iconImg: "feedback",
+    iconImgActive: "feedbackActive",
+  },
+  components: {},
+  data() {
+    return {};
+  },
+  watch: {},
+};
+</script>
+<style lang="scss" scoped></style>

src/views/footprint/index.vue

+<template>
+  <InnerView class="InnerView">
+    <pub-table
+      :headers="headers"
+      :fetcher="fetcher"
+      :params="params"
+      ref="table"
+    >
+    </pub-table>
+  </InnerView>
+</template>
+<script>
+export default {
+  name: "footprint",
+  meta: {
+    sort: 3,
+    title: "我的足迹",
+    iconImg: "footprint",
+    iconImgActive: "footprintActive",
+  },
+  components: {},
+  data() {
+    return {
+      headers: [
+        {
+          field: "index",
+          fieldName: "序号",
+          type: "index",
+        },
+        {
+          field: "footprint",
+          fieldName: "足迹",
+        },
+        {
+          field: "time",
+          fieldName: "时间",
+        },
+      ],
+      params: [],
+      testData: [
+        {
+          footprint: "好差评-区县",
+          time: "2023-07-13 17:14:43",
+        },
+        {
+          footprint: "突发公共卫生事件预警信息发布",
+          time: "2023-04-25 15:28:36",
+        },
+        {
+          footprint: "组织实施动物疫病强制免疫",
+          time: "2023-03-15 14:22:16",
+        },
+        {
+          footprint: "宣传饲料安全知识、知道合理使用饲料",
+          time: "2023-02-18 14:28:15",
+        },
+        {
+          footprint: "失业保险服务中的职业介绍补贴申领",
+          time: "2023-02-14 12:22:33",
+        },
+      ],
+      fetcher: async () => {
+        // console.log(this);
+        //console.log(params);
+        // let res = await api.publicEquipment.getBiogasDeviceInfoPage(params);
+        let res = {
+          total: this.testData.length,
+          data: this.testData,
+        };
+        return res;
+      },
+    };
+  },
+  watch: {},
+};
+</script>
+<style lang="scss" scoped>
+.InnerView {
+  padding-top: 24px;
+}
+</style>

src/views/login.vue

+<template>
+  <div class="login" v-loading="loading">
+    <div class="login-box">
+      <el-form
+        :model="ruleForm"
+        :rules="rules"
+        ref="ruleForm"
+        label-width="0px"
+        class="demo-ruleForm"
+      >
+        <el-form-item label="" prop="user">
+          <el-input placeholder="请输入用户名" v-model="ruleForm.user">
+            <i slot="prefix" class="el-input__icon el-icon-user"></i>
+          </el-input>
+        </el-form-item>
+        <el-form-item label="" prop="password">
+          <el-input
+            placeholder="请输入密码"
+            v-model="ruleForm.password"
+            show-password
+            @keyup.enter.native="login()"
+          >
+            <i slot="prefix" class="el-input__icon el-icon-lock"></i>
+          </el-input>
+        </el-form-item>
+      </el-form>
+
+      <el-button type="primary" style="width: 100%" @click="login"
+        >登录</el-button
+      >
+    </div>
+  </div>
+</template>
+<script>
+// import { CardView } from "@/components/Layout";
+import { appName } from "@/config";
+import { common } from "@/api";
+export default {
+  name: "login",
+  meta: {
+    title: "登录",
+  },
+  components: {
+    // CardView
+  },
+  data() {
+    return {
+      loading: false,
+      appName,
+      user: "",
+      password: "",
+
+      ruleForm: {
+        user: "",
+        password: "",
+      },
+      rules: {
+        user: [
+          {
+            required: true,
+            message: "请输入用户名",
+            trigger: ["change", "burl"],
+          },
+        ],
+        password: [
+          {
+            required: true,
+            message: "请输入密码",
+            trigger: ["change", "burl"],
+          },
+        ],
+      },
+    };
+  },
+  watch: {},
+  methods: {
+    login() {
+      this.$refs.ruleForm.validate((valid) => {
+        if (valid) {
+          this.loading = true;
+          common
+            .login(this.ruleForm)
+            .then((res) => {
+              // console.log(res.token);
+              if (res.token) {
+                localStorage.setItem("token", res.token);
+                this.loading = false;
+                this.$message.success("登陆成功");
+                this.$router.replace("/index");
+              }
+            })
+            .catch(() => {
+              this.loading = false;
+            });
+
+          // alert('submit!');
+        } else {
+          // console.log('error submit!!');
+          return false;
+        }
+      });
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.login {
+  // position: fixed;
+  width: 100vw;
+  height: 100vh;
+  background-color: #f5f6fa;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.login-box {
+  width: 500px;
+  height: 360px;
+  border-radius: 4px;
+  background: #fff;
+  padding: 30px 50px;
+}
+.title {
+  display: flex;
+  align-items: center;
+  font-size: 20px;
+  font-weight: bold;
+  padding-bottom: 10px;
+  width: 100%;
+  justify-content: center;
+  span {
+    padding-left: 30px;
+  }
+  img {
+    width: 80px;
+    height: auto;
+  }
+}
+// ::v-deep {
+// .el-input {
+//   margin-bottom: 30px;
+// }
+// }
+</style>

src/views/photo/edit/index.vue

+<template>
+  <div class="pub-form">
+    <el-form
+      ref="form"
+      :model="form"
+      label-width="98px"
+      label-position="right"
+      :rules="rules"
+      size="small"
+    >
+      <el-form-item prop="name" label="证照名称:">
+        <el-input v-model="form.name" placeholder="请输入" clearable></el-input>
+      </el-form-item>
+
+      <el-form-item prop="pic" label="证照照片:">
+        <div class="tip-text">可多张，支持png/jpg</div>
+        <ImgUploader v-model="form.picList"></ImgUploader>
+      </el-form-item>
+
+      <el-form-item prop="time" label="办理时间:">
+        <div class="flex-between" style="width:300px">
+          <el-date-picker
+            v-model="form.time"
+            type="date"
+            value-format="yyyy-MM-DD"
+            placeholder="选择日期"
+          >
+          </el-date-picker>
+        </div>
+      </el-form-item>
+
+      <el-form-item>
+        <el-button
+          type="primary"
+          size="small"
+          @click="submit"
+          :loading="loading"
+          >提交</el-button
+        >
+        <el-button type="primary" plain size="small" @click="close"
+          >返回</el-button
+        >
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+<script>
+import { mapState } from "vuex";
+import ImgUploader from "@/components/App/ImgUploader";
+export default {
+  name: "photoEdit",
+  components: { ImgUploader },
+  meta: {
+    sort: 1,
+    title: "我的证照",
+    hidden: true,
+    activeName: "photo",
+  },
+  data: () => {
+    return {
+      id: "",
+      loading: false,
+
+      form: {
+        id: "",
+        name: "",
+        pic: "",
+        picList: [],
+        time: "",
+      },
+      rules: {
+        // name: [
+        //   { required: true, message: "请输入角色名称", trigger: "change" },
+        // ],
+      },
+    };
+  },
+  computed: {
+    // import { mapState } from "vuex";
+    ...mapState({
+      testData: (state) => state.tabledata.photo,
+    }),
+  },
+  mounted() {
+    let { id } = this.$route.query;
+    if (id) {
+      this.$set(this.form, "id", id);
+      this.getDetail(id);
+    }
+  },
+  methods: {
+    close() {
+      this.$router.back(-1);
+    },
+    getDetail(id) {
+      let findItem = this.testData.find((item) => item.id == id);
+
+      if (findItem) {
+        this.form = this.$utils.setFormValue(this.form, findItem);
+      }
+    },
+    submit() {
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          let datas = { ...this.form };
+          // datas.picList = [...datas.pic];
+          datas.pic = datas.picList[0];
+          // console.log(datas);
+          if (datas.id) {
+            let resList = this.testData.map((item) => {
+              if (item.id == datas.id) {
+                return datas;
+              } else {
+                return item;
+              }
+            });
+            // console.log(resList);
+            let query = { field: "photo", data: resList };
+            this.$store.dispatch("tabledata/changeTableData", query);
+          } else {
+            //计算新id
+            let newId = this.testData[this.testData.length - 1]?.id
+              ? this.testData[this.testData.length - 1]?.id + 2
+              : 2;
+            let resList = [...this.testData, { ...datas, id: newId }];
+            let query = { field: "photo", data: resList };
+            this.$store.dispatch("tabledata/changeTableData", query);
+          }
+          // console.log(this.testData);
+
+          this.$message.success("操作成功");
+          this.$router.back(-1);
+        } else {
+          return false;
+        }
+      });
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+::v-deep {
+  .el-date-editor.el-input,
+  .el-date-editor.el-input__inner {
+    width: 132px;
+  }
+}
+.tip-text {
+  padding-bottom: 8px;
+  font-size: 12px;
+  color: #a6a6a6;
+}
+</style>

src/views/photo/index.vue

+<template>
+  <!-- <transition :name="transition"> -->
+  <keep-alive :include="cacheRoutes">
+    <router-view class="child-view"></router-view>
+  </keep-alive>
+  <!-- </transition> -->
+</template>
+<script>
+import { mapState } from "vuex";
+// import { InnerView, RouteView } from "@/components/Layout";
+export default {
+  name: "photo",
+  // components: { InnerView, RouteView },
+  meta: {
+    sort: 2,
+    title: "我的证照",
+    iconImg: "photo",
+    iconImgActive: "photoActive",
+    redirect: "/photo/list",
+  },
+  computed: {
+    ...mapState({
+      cacheRoutes: (state) => state.app.cacheRoutes,
+    }),
+  },
+  data() {
+    return {};
+  },
+  watch: {},
+};
+</script>
+<style lang="scss" scoped></style>

src/views/photo/list/index.vue

+<template>
+  <InnerView>
+    <pub-table
+      :headers="headers"
+      :fetcher="fetcher"
+      :params="params"
+      :pagination="false"
+      showHeader
+      ref="table"
+    >
+      <div slot="btnRight" class="btnRight">
+        <el-button type="primary" size="small" @click="openEdit"
+          >新增</el-button
+        >
+      </div>
+    </pub-table>
+  </InnerView>
+</template>
+
+<script>
+// import testCardPhoto from "@/assets/img/test-card-photo.png";
+import { mapState } from "vuex";
+export default {
+  name: "photoList",
+  components: {},
+  meta: {
+    sort: 0,
+    title: "我的证照",
+    hidden: true,
+    activeName: "photo",
+    keepAlive: true,
+  },
+  computed: {
+    // import { mapState } from "vuex";
+    ...mapState({
+      testData: (state) => state.tabledata.photo,
+    }),
+  },
+  data() {
+    return {
+      EditShow: false,
+      headers: [
+        {
+          field: "name",
+          fieldName: "证照名称",
+        },
+        {
+          field: "pic",
+          fieldName: "证照图片",
+          renderFun: (e) => this.renderPic(e),
+        },
+        {
+          field: "time",
+          fieldName: "办理时间",
+          width: 100,
+        },
+        {
+          field: "handle",
+          fieldName: "操作",
+          width: 160,
+          renderFun: (e) => this.renderBtns(e),
+        },
+      ],
+      params: [
+        {
+          label: "证照名称",
+          key: "name",
+          placeholder: "请输入",
+        },
+      ],
+      // testData: [
+      //   {
+      //     id: 1,
+      //     name: "电子社保卡",
+      //     pic: testCardPhoto,
+      //     time: "2023-01-13",
+      //   },
+      // ],
+      fetcher: async () => {
+        // console.log(this);
+        //console.log(params);
+        // let res = await api.publicEquipment.getBiogasDeviceInfoPage(params);
+        let res = {
+          total: this.testData.length,
+          data: this.testData,
+        };
+
+        return res;
+      },
+    };
+  },
+  activated() {
+    this.$nextTick(() => {
+      this.$refs.table.loadData();
+    });
+  },
+  methods: {
+    renderBtns(e) {
+      let that = this;
+      return (
+        <div>
+          <el-button
+            onClick={() => that.openEdit(e.row)}
+            size="mini"
+            plain
+            type="primary"
+          >
+            编辑
+          </el-button>
+          <el-button
+            onClick={() => that.delItem(e.row)}
+            size="mini"
+            plain
+            type="warning"
+          >
+            删除
+          </el-button>
+        </div>
+      );
+    },
+    renderPic(e) {
+      return (
+        <div>
+          <el-image
+            src={e.row.pic}
+            class="pic-url"
+            preview-src-list={e.row.picList ? e.row.picList : [e.row.pic]}
+          ></el-image>
+        </div>
+      );
+    },
+    openEdit(row) {
+      // console.log(row);
+      let id = row.id || ''
+      this.$router.push(`/photo/edit?id=${id}`);
+    },
+
+    submitEdit(datas) {
+      // console.log(datas);
+      if (datas.id) {
+        this.testData = this.testData.map((item) => {
+          if (item.id == datas.id) {
+            return datas;
+          } else {
+            return item;
+          }
+        });
+      } else {
+        this.testData = [
+          ...this.testData,
+          { ...datas, id: this.testData.length + 2 },
+        ];
+      }
+
+      this.$refs.table.loadData();
+    },
+    delItem(row) {
+      this.$confirm(`确认删除此条数据吗？`, "提示", {
+        type: "warning",
+      })
+        .then(() => {
+          this.testData = this.testData.filter((item) => item.id != row.id);
+          this.$refs.table.loadData();
+        })
+        .catch(() => {});
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+::v-deep {
+  .pic-url {
+    width: 116px;
+    height: 68px;
+  }
+}
+</style>

src/views/profile/PropertyDialog.vue

+<template>
+  <PubDialog
+    v-model="dialogVisible"
+    :title="`${type == 1 ? '新增资产' : '资产详情'}`"
+    @beforeClose="beforeClose"
+  >
+    <div class="pub-form" v-if="type == 1">
+      <el-form
+        ref="form"
+        :model="form"
+        label-width="98px"
+        label-position="right"
+        :rules="rules"
+        size="small"
+      >
+        <el-form-item prop="name" label="资产类型:">
+          <el-input
+            v-model="form.name"
+            placeholder="请输入"
+            clearable
+          ></el-input>
+        </el-form-item>
+
+        <el-form-item prop="value" label="金额:">
+          <el-input
+            v-model="form.value"
+            placeholder="请输入"
+            clearable
+          ></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-button
+            type="primary"
+            size="small"
+            @click="submit"
+            :loading="loading"
+            >提交</el-button
+          >
+          <el-button type="primary" plain size="small" @click="close"
+            >返回</el-button
+          >
+        </el-form-item>
+      </el-form>
+    </div>
+  </PubDialog>
+</template>
+<script>
+import PubDialog from "@/components/App/PubDialog";
+export default {
+  name: "PropertyDialog",
+  components: { PubDialog },
+  data: () => {
+    return {
+      id: "",
+      loading: false,
+      type: 1,
+      form: {
+        value: "",
+        name: "",
+      },
+      rules: {
+        // name: [
+        //   { required: true, message: "请输入角色名称", trigger: "change" },
+        // ],
+      },
+    };
+  },
+  props: {
+    value: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  computed: {
+    dialogVisible: {
+      get: function(that) {
+        return that.value;
+      },
+      set: function(newValue) {
+        this.$emit("input", newValue);
+      },
+    },
+  },
+  methods: {
+    resetForm() {
+      this.form = {
+        value: "",
+        name: "",
+      };
+    },
+    beforeClose() {
+      // console.log(this.$refs.form?.resetFields);
+      // this.$refs.form?.resetFields();
+      this.resetForm();
+      // this.form.endTime = "";
+      this.dialogVisible = false;
+    },
+    open(type) {
+      this.type = type;
+      // if (row) {
+      //   this.id = row.id;
+      //   this.form = this.$utils.setFormValue(this.form, row);
+      // }
+
+      this.dialogVisible = true;
+    },
+    close() {
+      this.beforeClose();
+    },
+    submit() {
+      this.$refs.form.validate((valid) => {
+        if (valid) {
+          let datas = { ...this.form };
+          // if (this.id) datas.id = this.id;
+          this.$message.success("操作成功");
+          this.beforeClose();
+          this.$emit("submit", datas);
+          // let funName = datas.id ? "editRole" : "addRole";
+          // this.loading = true;
+          // this.$api.system[funName](datas)
+          //   .then((res) => {
+          //     if (res) {
+          //       this.loading = false;
+          //       this.$message.success("操作成功");
+          //       this.beforeClose();
+          //       this.$emit("success");
+          //     }
+          //   })
+          //   .catch(() => {
+          //     this.loading = false;
+          //   });
+        } else {
+          return false;
+        }
+      });
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+::v-deep {
+  .el-date-editor.el-input,
+  .el-date-editor.el-input__inner {
+    width: 132px;
+  }
+  .el-textarea {
+    width: 325px;
+  }
+}
+</style>

src/views/serviceData/index.vue

+<template>
+  <InnerView> </InnerView>
+</template>
+<script>
+export default {
+  name: "serviceData",
+  meta: {
+    sort: 4,
+    title: "我的办事数据",
+    iconImg: "serviceData",
+    iconImgActive: "serviceDataActive",
+  },
+  components: {},
+  data() {
+    return {};
+  },
+  watch: {},
+};
+</script>
+<style lang="scss" scoped></style>