py利用jinja2的模板生成vue前端

主文件

import os

from jinja2 import Environment, FileSystemLoader

#获取模板

secends = 60
vue_name = "端口监控"
queryList = [
    {"name": "ip1-1",  "score": 100},
    {"name": "ip1-2", "score": 87},
    {"name": "ip1-3", "score": 92},
]

widgetList = [
    {"name": "c1",  "child": queryList},
    {"name": "c2", "child": queryList},
    {"name": "c3", "child": queryList},
]

for iprow in  widgetList:
    print(iprow)
    # print(widgetList[iprow])


sqlfile="ipport.sql"
spit_char = '\t'
ipportlist={}
widgetList1={}
queryList1={}
queryList=[]
queryListall=[]
widgetList=[]
#加载querylist
if len(ipportlist) == 0:
    f = open(sqlfile, encoding='utf-8')
    f.seek(0, 0)
    oldrow='0'
    while True:
        line = f.readline().strip("\n")
        if not line:
            break
        i = line.split(spit_char)
        ipnametmp = i[0]
        port = i[2]
        ip = i[1]
        ipdesc = i[3]
        row=i[4]
        col=i[5]
        ipportlist[ipnametmp] = i[0:]

        if col=='1':
            widgetList1={}
            queryList=[]
            widgetList.append([])

        queryList1 = {}
        queryList1['name']='ip'+i[4]+'-'+i[5]
        queryList1['row'] = int(i[4])
        queryList1['col'] =  int(i[5])
        queryList.append(queryList1.copy())
        queryListall.append(queryList1.copy())


        widgetList1['name'] = 'container' + str(int(row)-1)
        widgetList1['row']= int(i[4])
        widgetList1['child'] = queryList

        widgetList[int(row)-1]=widgetList1.copy()

print(widgetList)
print(queryListall)






# print(queryList)

# print(widgetList1)
# for iprow in  widgetList1:
#     print(iprow)
#
# for iprow in  ipportlist:
#     print()
#     print(ipportlist[iprow])


env = Environment(loader = FileSystemLoader(searchpath=""))
env = Environment(loader=FileSystemLoader("templates/"))
template = env.get_template("ltipport_template1.js")

#删除已有的生成文件

for f in os.listdir("./output"):
    path_file = os.path.join("./output", f)
    if os.path.isfile(path_file):
        os.remove(path_file)

#生成新的文件

context = {
    "queryList": queryListall,
    "widgetList":widgetList,
    "vue_name": vue_name,
    "secends": secends,
}
output = template.render(context)

with open("./output/lt01.config.js", 'w', encoding='utf-8') as out:
    out.write(output)
    print("... wrote ./output/lt01.config.js")

模板文件

window.pageConfig = {
  id: 'lt01',
  localTheme: {},
  globalVariables: [
    {
      fieldName: 'pageTitle',
      fieldValue: '{
  {vue_name}}'
    }
  ],
  interactionList: [
    {
      id: 'area',
      name: '行政区划'
    }
  ],
  queryList: [
        {% for q in queryList %}{
                  id: '{
  { q.name }}', //组件订阅该id 获得数据
                  description: '',
                  type: 'static', //数据查询类型（static, server)
                  paramList: [
                    {
                      globalVariable: '',
                      staticParamKey: '',
                      serverParamName: ''
                    }
                  ],
                  interval: {
  {secends}},
                  once: false,
                  immediate: true,
                  interactionIds: [],
                  staticData: [
                    { name: '*.*.*.160', value: '10' }
                  ]
                },        {% endfor %}
      ],
  widgetList: [     {% for w in widgetList %}         {
              id: '{
  {w.name}}',
              widgetPath: 'bi-widget',
              widget: 'container/common-container/container', //组件路径
              isContainer: true,
              position: {                // 位置,都是百分比
                x: 0.5,
                y: 2+33*{
  {w.row-1}},
                width: 98,
                height: 30
              },
              widgetConfig: {
                title: {
                  name: '端口监控',
                  icon: 'icon-title'
                },
                cssProps: {
                  border: '0px solid rgba(54, 207, 255, 1)',
                  backgroundColor: 'rgba(0, 0, 0, 0.1)',
                  borderRadius: '4px'
                  // backdropFilter: 'none'
                }
              },
              children: [  {% for wq in w.child %}
                {
                  id: '{
  {wq.name}}',
                  widgetPath: 'bi-widget',
                  widget: 'chart/liquidFill/ltfenshu', //组件路径
                  position: {                    // 位置,都是百分比
                    x: 0+20*{
  {wq.col-1}},
                    y: 15,
                    width: 20,
                    height: 84
                  },
                  subscribeQueryId: '{
  {wq.name}}',
                  widgetConfig: {
                    echartContainerId: '{
  {wq.name}}'
                  },