工程&管线接口对接

TreeWish

2023-02-28 234409bb4a612c5b69b78b1e844492f0a7122521

 src/components/chart/projectintroduction.vue

@@ -1,105 +1,133 @@
<template>
    <div class="projectintroduction">
        <div class="item">
            <div class="itemName">项目名称:</div>
            <div class="itemValue" :title="result.projname">{{ result.projname.length>15?result.projname.substring(0,15):result.projname }}</div>
        </div>
        <div class="item">
            <div class="itemName">项目状态:</div>
            <div class="itemValue">{{ result.projstate }}</div>
        </div>
        <div class="item">
            <div class="itemName">项目种类:</div>
            <div class="itemValue">{{ result.projtype }}</div>
        </div>
        <div class="item">
            <div class="itemName">所属部门:</div>
            <div class="itemValue">{{ result.corpname }}</div>
        </div>
        <div class="item">
            <div class="itemName">启动时间:</div>
            <div class="itemValue">{{ parseTime(result.createtime) }}</div>
        </div>
        <div class="item">
            <div class="itemName">工程内容:</div>
            <div class="itemValue">{{ result.contents.length>15? result.contents.substring(0,15): result.contents }}</div>
        </div>
  <div class="projectintroduction">
    <div class="item">
      <div class="itemName">项目名称:</div>
      <div class="itemValue" :title="result.projname">
        {{
          result.projname.length > 15
            ? result.projname.substring(0, 15)
            : result.projname
        }}
      </div>
    </div>
    <div class="item">
      <div class="itemName">项目状态:</div>
      <div class="itemValue">{{ result.projstate }}</div>
    </div>
    <div class="item">
      <div class="itemName">项目种类:</div>
      <div class="itemValue">{{ result.projtype }}</div>
    </div>
    <div class="item">
      <div class="itemName">所属部门:</div>
      <div class="itemValue">{{ result.corpname }}</div>
    </div>
    <div class="item">
      <div class="itemName">启动时间:</div>
      <div class="itemValue">{{ parseTime(result.createtime) }}</div>
    </div>
    <div class="item">
      <div class="itemName">工程内容:</div>
      <div class="itemValue">
        {{
          result.contents.length > 15
            ? result.contents.substring(0, 15)
            : result.contents
        }}
      </div>
    </div>
  </div>
</template>
<script>
import { selectProjectInfo } from "@/api/screen.js"
export default {
    data() {
        return {
            result:
                {
                    "eventid": "4dfd814a-a262-4a93-880b-5ef488883a35",
                    "country": "中国",
                    "projstate": "施工中",
                    "createtime": 1675071993161,
                    "gid": 38,
                    "conperiod": "24",
                    "datastatus": null,
                    "geom": "01010000208A110000925A28999C225C40F1811DFF05364040",
                    "createuser": 1,
                    "parentid": null,
                    "verid": 0,
                    "province": "湖北省",
                    "projname": "西气东输三线（中卫-枣阳）",
                    "contents": "管道线路施工",
                    "projtype": "管线施工",
                    "location": "武汉",
                    "dirid": "03",
                    "depid": null,
                    "corpname": "管道设计院",
                    "department": "勘察部门",
                    "updatetime": 1675072198376,
                    "belongsid": null,
                    "remarks": "测试用，内容虚构",
                    "updateuser": 1
                },
        }
    },
    methods: {
        //获取时间
        parseTime(timestamp){
            var date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
            var Y = date.getFullYear() + '-';
            var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
            var D = (date.getDate() < 10 ? '0'+date.getDate() : date.getDate()) + ' ';
            let strDate = Y+M+D;      
            return strDate;
        }

  data() {
    return {
      result: {
        eventid: "4dfd814a-a262-4a93-880b-5ef488883a35",
        country: "中国",
        projstate: "施工中",
        createtime: 1675071993161,
        gid: 38,
        conperiod: "24",
        datastatus: null,
        geom: "01010000208A110000925A28999C225C40F1811DFF05364040",
        createuser: 1,
        parentid: null,
        verid: 0,
        province: "湖北省",
        projname: "西气东输三线（中卫-枣阳）",
        contents: "管道线路施工",
        projtype: "管线施工",
        location: "武汉",
        dirid: "03",
        depid: null,
        corpname: "管道设计院",
        department: "勘察部门",
        updatetime: 1675072198376,
        belongsid: null,
        remarks: "测试用，内容虚构",
        updateuser: 1,
      },
    }

  },
  created() {
    this.$bus.$on("changeProjectCode", code => {
      let params = {
        projectCode: code,
      }
      this.getDataList(params)
    })
  },
  methods: {
    async getDataList(params) {
      const res = await selectProjectInfo(params)
      if (res.code == 200) {
        this.result = res.result
      }
    },
    //获取时间
    parseTime(timestamp) {
      var date = new Date(timestamp) //时间戳为10位需*1000，时间戳为13位的话不需乘1000
      var Y = date.getFullYear() + "-"
      var M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-"
      var D =
        (date.getDate() < 10 ? "0" + date.getDate() : date.getDate()) + " "
      let strDate = Y + M + D
      return strDate
    },
  },
}
</script>
<style lang="scss">
.projectintroduction {
    height: calc(100% - 30px);
    width: 100%;
    .item{
        margin: 5px;
        height: 30px;
        display: flex;
        flex-direction: row;
        border-bottom: dotted 1px  rgba(48,135,214,.2);
        .itemName{
            width: 40%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
        }
        .itemValue{
            width: 60%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            color: #9ED2F5;
        }
  height: calc(100% - 30px);
  width: 100%;
  .item {
    margin: 5px;
    height: 30px;
    display: flex;
    flex-direction: row;
    border-bottom: dotted 1px rgba(48, 135, 214, 0.2);
    .itemName {
      width: 40%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
    }
    .itemValue {
      width: 60%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      color: #9ed2f5;
    }
  }
}
</style>
</style>